线框图

线框图是什么：线框图 （Wireframe）是低保真的设计图

线框图是整合在框架层的全部三种要素的方法：通过安排和选择界面元素来整合界面设计；通过识别和定义核心导航系统来整合导航设计；通过放置和排列信息组成部分的优先级来整合信息设计。通过把这三者放到一个文档中，线框图可以确定一个建立在基本概念结构上的架构，同时指出了视觉设计应该前进的方向。

一个简单的线框图最终需要包含的内容有图片、视频、文本这些东西。所以，通常情况下，被省略的地方会用占位符来标明，而图片通常被带斜线的线框来替代，文本会按照排版，用一些标识性的文字所替代。

线框图的作用

在Web开发和软件开发项目中线框扮演着极其重要的角色，因为它能允许开发者和客户在项目搭建中可视化网页。友好性、易操作以及内容多样化对于网站来说非常重要，利用线框工具可以帮助你简化繁琐的设计过程为你节省时间和精力。`1

线框图在产品中是蓝图一样的存在，一般用于内部交流，并不适合展示给外部人员（因为线框图与最终的产品可能差异度很高)

线框图与原型的区别

原型的要求比线框图/可交互式线框图要高，它要求必须是可交互的，并且尽可能贴合最终的用户界面的高保真模型。

制作原型的目标非常明确：尽可能真实地模拟用户和界面之间的交互。当一个按钮被按下的时候，相应的操作必须被执行，对应页面也必须出现，尽可能地模仿完整的产品体验。

范例（简单的矢量线框图）

常用工具

常用的工具包括PowerMockup—为PPT添加线框、Moqups—在线Mockup线框工具、Wireframe.cc — 在线线框工具等。简单的矢量线框图也可以用Axure来制作。而创建更加复杂的互动式线框图就需要用UXPin，它是专门用来制作线框图和原型设计的工具。

参考资料

http://www.woshipm.com/pd/96368.html

http://www.uisdc.com/wireframes-vs-prototypes-difference

以及百度百科（微笑