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

Posted 2020-10-02

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

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

1. 什么是线框图？

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

2. 为什么要做线框图？

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

3. 如何制作线框图？

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

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

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

1. 什么是原型图？

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

2. 为什么要做原型图？

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

3. 如何制作原型图？

基于原型图中高保真，且必须可交互的特点，原型图的制作最好是选择专业的原型设计工具，但究竟如何选择原型工具，也需要根据不同的标准做判断。

从保真度来说，Justinmind擅长于精细制作的高保真原型图，但要掌握好它的交互设置，触发条件，条件判断和变量等一系列复杂的操作，还是颇费功夫。

从制作效率来说，Mockplus更符合简单、快速的中高保真原型图设计。高度封装的交互组件，简单的拖拽交互，实用的团队协作和在线审阅，更满足设计师和开发人员节省时间和开发成本的需求。

线框图和原型图有什么区别？

线框图可以说是原型图的一种，原型可以在线框图的基础上进行设细化和设计。从演示效果来说，线框图是静态展示，而原型图是动态的可交互式展示。从功能上来说，原型代表了最终产品，常用于潜在用户测试；线框图常用于项目初期，展示布局和功能，用于讨论和反馈。