线框图的制作

本文主要内容包括线框图定义、目的、制作概要、注意问题等，现阶段笔者处于学习阶段，待有了更多实践之后，将添加更多细节。

一、什么是线框图（wireframe）？

线框图是对最终产品各页面内容的简单呈现，通过简单线条展示现产品框架和主体内容模块，通常不做页面细节（颜色/字体/图片等）描述。

线框图提供了一个供讨论、供评审、供确认的承载物。

二、为什么需要线框图？

团队内部沟通设计思想，从而对产品框架得到一致的理解。

用于向公司上层和客户展示设计想法。

如果进行初期可用性测试的话，线框图（或扩展为Lo-Fi Prototype）可作为用户测试工具。

作为最终网站的初级设计蓝图（blueprint），给设计师和工程师一个清晰的产品构架。

三、构建wireframe之前需要思考以下几点？

时机： 产品不同的开发阶段，团队需要的线框图的重点内容和详细程度是不同的。

受众：不同场合，不同的受众，对线框图的需求亦有不同。

目标：希望线框图此时产生什么作用？

内容：准备好要展示的内容列表，才能正确的做事。

四、不同时期的线框图设计概要图示

五、需要注意的问题：

1. 效率

快速制作，快速讨论并达成共识，该效率下的线框图才有真正的价值。

2. 越简略，越利于讨论

线框图需要经过反复讨论、确认、修改，因此初期的线框图不要增加过多细节，便于激发想象和随时修改

3. 时刻体现优先级顺序

在确定功能需求之后，一定要确定功能需求的优先级，并体现在线框图上，甚至可以将优先级顺序注释在旁边，讨论过程中用于提醒参会者。如果线框图用于展示，那么优先级的体现会让受众一目了然。

4. 不添加颜色

灰度有助于把注意力集中在产品功能层面和布局层面，如果直接加图片和颜色，容易让人陷入对色彩细节的判断中忽略掉功能层面更本质的东西。

5. 版本历史

随时将各种版本的线框图编号、存档，并记录增量，便于恢复设计过程中的一些失误，追根溯源。

作者：书生wilson

文章来源：flyalone.net