你真的搞懂什么是线框图，什么是原型图了吗？

2017-08-10 11:09:00

设计师朋友们都知道，在网站开发或者手机应用开发的前期阶段，需要创建线框图和原型图给客户展示。但有时候客户会提出略过线框图和原型图设计的阶段，直接过渡到网站的界面设计甚至是开发阶段。这种想法，往往是源于客户不明白什么是线框图，什么是原型图，以及二者在整个项目阶段中的重要性。

首先阐明一个误区，线框图不等于原型图。明确了这个概念之后，我们再来区分二者。

1. 什么是线框图？

线框图是一个网站图形化的骨架，引导一个页面的内容及概念，能够帮助设计师和客户讨论具体的网站层次和导向。一个简单的线框图只需要使用线条、方框和灰阶色彩填充，黑白色的布局整体呈现为低保真设计图，主要呈现主体信息群，勾勒结构和布局，表达用户交互界面的主视觉和描述。

2. 为什么要做线框图？

线框图对于产品的作用就如同建筑蓝图，在项目的初始阶段规定好产品各方面的细节，作为整体项目说明。也因为绘制起来简单、快速，它也经常用于非正式场合，比如团队内部交流。但并不能作为用户测试的材料。

3. 如何制作线框图？

简单的线框图一般只需要用线条、方框、文本、及按钮等基本的组件构成就可以了。因此，关于如何制作线框图，如何挑选线框图制作工具的问题，基于上述特点，我们可以使用 Mockplus ， Balsamiq 等线框图工具。

Balsamiq是一款静态线框图绘制工具，手绘风和现成的控件在线框图绘制方面发挥了极大的优势，它产出的线框图比较适于给懂设计和开发的人员看。因为他们知道，线框图和最终的成品是有区别的，也明白二者之间的运作方式和内在联系。

相对于Balsamiq， Mockplus 在动态交互方面则更胜一筹。同样是简单快速的线框图工具，Mockplus产出的交互式线框图可以更直观生动的向开发团队和毫无设计和开发基础的客户演示项目，而不需要冗长的说明。

什么是原型图？

原型图是接近于中高保真的设计稿，和线框图不同，原型图是动态可交互的，一些高保真的原型设计甚至和最终的产品看起来相差无几，因为它们不仅拥有细致到位的视觉设计，同时尽可能的模拟真实的产品界面和功能上的交互，提供完整的产品体验。

为什么要做原型图？

原型图除了作为项目演示的功能之外，可交互式原型常常也用于产品正式开发前的用户测试。早期的原型测试可以节省巨大的时间和开发成本。一个可批注，可团队协作的原型图更加有利于设计师和开发人员之间的沟通，省去了来回修改和大量发送图片和PDF文档这个繁琐的步骤。对开发人员来说，他们可以在经过反复测试的原型图基础上拿出更加完善的代码实现方案，而不至于浪费开发成本和精力。