绘制一个线框图是你在制作一个网站前必须要经历的过程。线框图能够帮助你合理的组织并简化你内容和元素，是网站内容布局的基本视觉表现方式，是网站开发过程中一个重要的步骤。

    线框图的好处：

让用户、设计者在初期就可以对网站有个清晰明了的认知能激发设计师想象力，使其在创作过程中有更多发挥空间给开发者提供一个清晰的架构，让他们知道他们需要编写的功能模块让每个页面的跳转关系都变得清晰明了很容易的改变页面布局

    绘制线框图的工具：

手绘：纸、笔流程图或思维导图工具：Visio、Mindmap、MindManager原型绘制软件：Balsamiq、Axure图形软件：Photoshop、IllustratorHTML工具：Dreamweaver

    线框图实例：

    1、简单纸面原型：这是Broad Reach Retail Partners网站的简单纸面原型

    

    2、低保真的HTML原型：没加任何风格的网站内容陈列

    

    3、低保真的布局原型：界面布局线框图，由Jesse Bennett-Chamberlain设计

    

    4、线框图原型：A preliminary mockup of a social conferencing tool built on Tiddlywiki for use at Le Web 3. The notes to accompany it are at tiddleleweb.tiddlyspot.com. Wireframe byPhil Hawksworth.

    

    5、线框图原型：This one is based on advanced use of a blog publishing system (WordPress). ByMattheiu Mingassson or Activeside Internet Strategies and Consulting.

    

    6、线框图：A wireframe for the Embrace Pet Community, by Jesse Bennett-Chamberlain of31Three.

    

    7、线框图： A wireframe with color and images. Author page wireframe by Bokhandel.

    

    8、线框图： 另一个带色彩的线框图. By Mattheiu Mingassson of Activeside Internet Strategies and Consulting.

    

    最佳范例要点：

简单设计灰度模式展现：灰度有助于把注意力集中在产品功能层面和布局层面，如果直接加图片和颜色，容易让人陷入对色彩细节的判断中忽略掉功能层面更本质的东西。线框图用网站地图串联起来专注于理想结果等同于真实分辨率尺寸一开始就计划好内容和元素

    要避免的问题：

内容太多，重点不突出强调颜色和设计过多的设计细节

    另外，介绍一个专门讲线框图的网站：Wireframe Magazine

    本文缩略翻译自Using Wireframes to Streamline Your Development Process，疏漏和错误之处，还望批评指正

建议继续学习：

1. 手机产品设计方向    (阅读：6362)
2. 马化腾在腾讯产品峰会上关于产品设计和开发的内部讲座    (阅读：2562)
3. 360安全卫士卸载金山网盾看产品设计    (阅读：2376)
4. 互联网产品设计之用户调研    (阅读：2296)
5. 前端开发是产品设计么    (阅读：2272)
6. 产品UI设计流程    (阅读：2305)
7. 研发流程中与其他岗位协作效率的提升    (阅读：2150)
8. 向温总理学习产品设计    (阅读：2047)
9. 做产品前六问自己    (阅读：2024)
10. 浅谈认知心理学与产品设计的结合    (阅读：2094)