原型与线框图的差异-数字媒体创意设计思维

原型和线框图在呈现形式上很类似，但两者不能混为一谈。实际上，原型和线框图的差别很大。

1）线框图

首先，线框图虽然也是数字产品的呈现方式，但是低保证的呈现。利用线框图，可以表现出产品用户需求群里特征，在勾勒出产品框架结构的同时，向项目团队展示主界面的视觉描述。线框图可以作为后续视觉设计的参考依据，类似于建筑设计中的蓝图。产品的细节在线框图上都可以表现清楚。

从视觉上可以看出，线框图的视觉特征明显，以黑白为主，依靠线条勾勒出产品框架。即使线框图中有图像的元素，也只是以占位符的形式来表达。更多情况下，图片被表示成带斜线的方框。文字会按照实际情况排版，不含具体内容，而是用一些标识性的文字替代。

图43　线框图示例

线框图的优势

生成线框图是快速的，成本也很低。有很多合适的工具，例如Axure、UXPin和Balsamiq等，都可以用来快速生成线框图。

快速生成的线框图可以用来搜集资料，获取反馈信息。在需求分析阶段，可以通过线框图同用户进行交流，这样更利于将产品功能讲述清楚。项目团队内部，沟通和交流都可以用到线框图，从数字产品的功能定位、用户操作流程、信息架构都可以用线框图来表示。这些内容与视觉要素关联不大，线框图能充分展示它的优势，实现敏捷开发。

2）原型(www.xing528.com)

原型图的要求要高于线框图，在视觉呈现上，低保真原型同线框图是类似的，但是低保真原型要确保可以实现交互。用户可以通过点击等操作，实现对数字产品相对完整地了解。

这里特别要注意的是，低保真原型也是要实现交互设计的。尽最大的可能模拟出用户操作界面，是原型设计的目标。当用户在手机或者电脑上按下按钮的时候，页面会实现跳转，不一定会有真实的内容，但产品的逻辑一定要清楚的展现出来。

高保真原型的要求则更高，几乎接近最终产品的设计，让高保证原型呈现出原汁原味的产品体验。具备骨架和血肉，但不涉及具体的程序实现，例如不会用HTML+CSS来实现高保真原型，也不会涉及服务器和数据库。界面的主色调和视觉已经能够完整呈现，一些重要的页面也有了内容，信息保障和版式设计也当在合理范围内。点击交互元素之后，原型也能给予用户及时的反馈。

图44　高保真原型设计

原型的优势

原型比线框图重要，因为原型可以用来测试数字产品。使用原型图，能在节省大量开发成本和时间的前提下，验证数字产品的可行性，而不用等到全部功能都开发出来之后再测试。

需求阶段，就可以将原型设计提供给用户，并记录用户反馈。简单高效，对观察数字产品的各个功能是很有效果的，同时积极地反馈可以令整个团队充满干劲。最主要的，无须程序员的介入就可以为用户演示功能，这是极为省事的。