绘制一个线框图是你在制作一个网站前必须要经历的过程。线框图能够帮助你合理的组织并简化你内容和元素，是网站内容布局的基本视觉表现方式，是网站开发过程中一个重要的步骤。
一、线框图的好处：
- 让项目组成员在初期就可以对网站有个清晰明了的认知
- 能激发设计师想象力，使其在创作过程中有更多发挥空间
- 给开发者提供一个清晰的架构，让他们知道他们需要编写的功能模块
- 让每个页面的跳转关系都变得清晰明了
- 很容易的改变页面布局
二、绘制线框图的工具：
- 手绘：纸、笔
- 流程图或思维导图工具：Visio、Mindmap、MindManager
- 原型绘制软件：Balsamiq、Axure
- 图形软件：Photoshop、Illustrator
- HTML工具：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，疏漏和错误之处，还望批评指正
最近公司在开发一些功能，看到后非常受教。。
学习了
我介绍一款在线线框图设计工具，框图宝http://youfabao.com/MyWireframe.html
学习了，哈哈，谢谢！
非常赞成一点，用灰色框架来表现线框图，里面的如果要做一些层级关系只要调整不同灰色度就行了，颜色越丰富越容易转移注意力忽略了线框图的本质意义。
吓我一跳，我搜索Visiof过来的。一下子以为打开的是自己的网站呢。哈哈！
画原型图最快捷，最直观还是用笔和纸。
线框图都是如此的复杂，哈哈:)
关于这个啊…我真的无数次和我们经理说过,但是最终还是没有被完全采纳,郁闷啊…..
顶一下这个：灰度模式展现：灰度有助于把注意力集中在产品功能层面和布局层面，如果直接加图片和颜色，容易让人陷入对色彩细节的判断中忽略掉功能层面更本质的东西。
贵站的打开速度比较慢哦，不过我还是有耐心的，学习了
今天贵站不能访问，现终于正常了，原来是在更换主题模板啊，辛苦了~
学习了，非常感谢。
是手绘的吗？ 太棒了
好文，收藏至20ju.com
妞的英语非常的好哟。
做web和iphone app是都用Balsamiq来做mockup，很是方便，省事。