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

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

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

1. 什么是线框图？

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

2. 为何要作线框图？

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

3. 如何制做线框图？

简单的线框图通常只须要用线条、方框、文本、及按钮等基本的组件构成就能够了。所以，关于如何制做线框图，如何挑选线框图制做工具的问题，基于上述特色，咱们可使用Mockplus，Balsamiq等线框图工具。

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

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

1. 什么是原型图？

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

2. 为何要作原型图？

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

3. 如何制做原型图？

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

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

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

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

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