线框图知多少？

“线框图”三个字经常出现在产品经理的工作当中，平时听的很多，用到也很多，但是对“线框图”这三个字有怎样的了解呢？很多人对产品经理有个误区，认为产品经理就是画线框图的，真的是这样的吗？画线框图又究竟是什么样的工作呢？

对于很多搞信息技术的朋友们（非设计师）在交付设计时，就混淆了线框图、原型等多个概念，认为它们都代表同一样东西：表达自己创意的线框手绘设计稿。那么如果希望在工作中更好的表达自己的想法，我们需要对线框图有更好的认识。

1

什么是线框图？

线框图 (Wireframe) 是低保真的设计图，当明确表达：

内容大纲（什么东西）

信息结构（在哪）

用户的交互行为描述（怎么操作）

千万不要认为线框图就是简单的线和框的集合，它是产品设计的骨干与核心，它承载着最终产品所有重要的部分。

线框图可以帮你平衡保真度与速度。绘图时不用在意细枝末节，但必须表达出设计思想，不能漏掉任何重要的部分。它更多像是一个框架，能让我们知道产品的组织结构、功能设置的如何的，但有可能不能展示产品完成时的模样，和更多的细节设置。

为什么绘制线框图呢？主要原因在于“快”。大多数时间请和团队成员沟通，多做思考。审美上的视觉效果则应当尽可能简化，黑白灰是经典用色。比如常用axure画图的朋友会发现，axure自带的图标，就是黑色的。

如果在绘制线框图上耗费了大量的时间，例如选择图标、搭配颜色、优化UI效果等，那么，跟我们要追求的“快”背道而驰。所以，我们一般习惯把线框图称为低保真设计图。

好的线框图能清晰明了地表达设计创意，在成员中无缝传达其思想。

2

何时使用线框图

（1）项目说明。鉴于其静态设计，一次只能通过一张界面演示交互，因此，务必附上说明。

（2）团队内部交流。因为绘制起来快速、简单，在与团队成员之间沟通的时候，能迅速绘制或修改线框图。

（3）复杂项目的初始阶段。前面说到，线框图表达的内容有：内容大纲（什么东西）、信息结构（在哪）、用户的交互行为描述（怎么操作）。能在初始阶段发挥比较重要的作用，明确项目要做的是什么。

3

绘制线框图的工具

目前绘制线框图的工具多种多样，有Axure、Moqups、UXPin、JustinMind等等非常多的工具，可供大家选择使用，具体使用哪一种工具，就看大家的使用习惯了。

现在非常常用且好用的有Axure，这也是我们大多数人在使用的。在axure当中，自带了许多的初始部件，利用这些部件进行组合搭配，即可绘制线框图。同时有许多人习惯使用在axure加入注释。

4

绘制线框图主要事项

（1）通过明暗对比表达

（2）尽量不使用截图与颜色

（3）标记第一屏高度

（4）表达清楚UI逻辑

（5）了解视觉趋势

对于线框图有了了解之后，我们会发现，它在产品经理的工作中是一个比较重要的内容，从而也导致了一些朋友认为，线框图就是产品经理工作的全部。必须要声明一下，线框图是产品经理工作的一部分，而不是全部。虽然是其中的一部分，但是它仍然不容忽视。

关

注

听说关注了我们的人

都升职加薪啦