本文主要内容包括线框图定义、目的、制作概要、注意问题等，现阶段笔者处于学习阶段，待有了更多实践之后，将添加更多细节。
一、什么是线框图（wireframe）？
线框图是对最终产品各页面内容的简单呈现，通过简单线条展示现产品框架和主体内容模块，通常不做页面细节（颜色/字体/图片等）描述。
线框图提供了一个供讨论、供评审、供确认的承载物。
二、为什么需要线框图？
团队内部沟通设计思想，从而对产品框架得到一致的理解。
用于向公司上层和客户展示设计想法。
如果进行初期可用性测试的话，线框图（或扩展为Lo-Fi Prototype）可作为用户测试工具。
作为最终网站的初级设计蓝图（blueprint），给设计师和工程师一个清晰的产品构架。
三、构建wireframe之前需要思考以下几点？
时机： 产品不同的开发阶段，团队需要的线框图的重点内容和详细程度是不同的。
受众：不同场合，不同的受众，对线框图的需求亦有不同。
目标：希望线框图此时产生什么作用？
内容：准备好要展示的内容列表，才能正确的做事。
四、不同时期的线框图设计概要图示
五、需要注意的问题：
1. 效率
快速制作，快速讨论并达成共识，该效率下的线框图才有真正的价值。
2. 越简略，越利于讨论
线框图需要经过反复讨论、确认、修改，因此初期的线框图不要增加过多细节，便于激发想象和随时修改
3. 时刻体现优先级顺序
在确定功能需求之后，一定要确定功能需求的优先级，并体现在线框图上，甚至可以将优先级顺序注释在旁边，讨论过程中用于提醒参会者。如果线框图用于展示，那么优先级的体现会让受众一目了然。
4. 不添加颜色
灰度有助于把注意力集中在产品功能层面和布局层面，如果直接加图片和颜色，容易让人陷入对色彩细节的判断中忽略掉功能层面更本质的东西。
5. 版本历史
随时将各种版本的线框图编号、存档，并记录增量，便于恢复设计过程中的一些失误，追根溯源。
作者：书生wilson
文章来源：flyalone.net