12345，教你画好线框图

线框图是一种低保真度的设计原型，在去除所有视觉设计细节之下，进行页面结构、功能、内容规划。线框图对于产品的作用就如同建筑蓝图，在项目的初始阶段规定好产品各方面的细节，作为整体项目说明，因为绘制起来简单、快速，也经常用于非正式场合，比如团队内部交流。可以说线框图是产品流程中不可或缺的一部分，那么本文就通过两个定义、三个优点、五步流程、四个技巧、一款工具，来详细介绍线框图。

两个模糊定义

线框图并非是原型，但即使是经验丰富的设计师也可能会将两者混为一谈。了解两者的定义和区别能帮你有效定位线框图，避免跑偏。

线框图是产品设计的低保真呈现方式。它有三个简单直接而明确的目标：呈现主体信息群；勾勒出结构和布；用户交互界面的主视觉和描述。线框的视觉特性局限性非常明显。通常设计师会只需要使用线条、方框和灰阶色彩填充（不同灰阶标明不同层次）就可以完成。

原型的要求比线框图/可交互式线框图要高，它要求必须是可交互的，并且尽可能贴合最终的用户界面的高保真模型。制作原型的目标非常明确：尽可能真实地模拟用户和界面之间的交互。当一个按钮被按下的时候，相应的操作必须被执行，对应页面也必须出现，尽可能地模仿完整的产品体验。

三个绝对优点

画线框图绝对是产品流程中不可或缺的一部分，主要有以下三个优点：

1、快速创建

设计师不用考虑太多细节，便能迅速画好一个线框图交付评审。

2、帮助聚焦

简洁精炼的线框图能在产品项目的前期，去除视觉和细节的干扰，确保评审中大家把注意力集中在什么需求、需要放啥东西、需要放啥功能、优先级如何划分等重要问题上。

3、方便修改

线框图制作快速且低成本，在多种可能的对比下试验，可以及时得到反馈，设计师可以轻松修改，要么及时放弃、重新绘画新的线框图。

五步实用流程

虽然线框图的设计并没有一个标准规范，但以下五步设计流程是最实用的：

• 内容清单
• 视觉层次
• 内容线框图
• 打磨线框图
• 低保真原型

接下来看看每个步骤都是怎么操作的。

1、内容清单

首先你得创建一个内容清单，其中聚合了所有相关的素材，在创建线框图之前得合理地整理起来。

内容清单最好是制作成为电子表格，其中根据页面来划分，将所有需要单独呈现的内容都清楚地罗列出来。内容清单有助于你进行以内容为中心的设计，在这样的思路下，你会更精准的判断哪些元素更加重要。

最好是按照下面的流程来制作内容清单：

• 列出所有的内容，附上URL和简短的描述
• 根据主题组织整理出内容条目
• 将每条内容条目分配到最合理的页面，将出现在多个不同页面上的内容条目标注出来
• 筛选出冗余内容，将你不需要的内容删除掉，你删除掉的内容越多，那么你留下的内容就越有价值
• 如果你愿意的话，可以将你的团队分割为不同的小组，并且将特定的人分配到特定的页面或者目录

接下来，你需要基于你的内容列表来创建视觉层次。

2、视觉层次

当你的内容清单整理出所有可用的条目之后，再筛选出每个页面的优先级就不难了。

随后，你可以在电子表格中按照优先级的高低，分别标记出每个项目一级、二级和三级的内容条目，而这就是我们要的视觉层次的划定依据了。

3、内容线框图

这个部分将会将你之前所规划的内容划分到不同的区块当中去。内容线框图仅仅是关乎内容的走向，而非展示方式。线框图在绝大多数情况下都同移动端优先的设计相适应。当你的线框图要优先适配小屏幕的时候，只需要优先考虑最重要的部分，然后随着尺寸的增加而添加细节和元素。另外一种处理方式是打一开头就将所有元素都设计出来，然后随着屏幕尺寸的缩小而对元素进行删减，但是这种方法的问题在于，费时费事，而且容易让界面元素之间出现割裂。

4、打磨线框图

完成了基本结构的搭建之后，下一步就是要将它们塑造成可识别的组件。这意味着你需要为图片预留空间，考虑链接和图标的交互走向，并且计算各个组件之间的尺寸比例。

当然，千万要控制好度，不要设计得太过细致。线框图本质上还是界面的框架，其中的控件是占位符，不用做的那么精确。

当然，在打磨线框图细节的过程中，也别忘了用户流程的设计。在这个阶段，你可以适当地将交互和设计模式纳入到其中，并且更准确地定义整个界面的视觉层次。

5、低保真原型

强烈建议你设计好线框图之后，将其转化为低保真的原型，这样你就可以尽早开始测试。

挑对了设计平台，你可以轻松地基于线框图来加入交互，许多优秀的工具如Mockplus甚至可以通过简单拖放来实现这一点。即使你的低保真模型仅仅具有最基本的交互，也可以及早地帮你造出可用性问题，特别是在整体布局和导航上。

快速原型设计的思路核心在于尽可能快地完成原型设计，加入交互，开始测试，然后获取反馈，迭代升级。这种思路之下，你无需一次完成全部的测试内容，而是逐步完成，分段完善的。

四个详细技巧

什么样的线框图算好呢？

• 简洁清晰，能一眼了解页面布局和元素；
• 规整统一，能高效分辨不同类型模块；
• 准确到位，原型表达准确，不仅仅是布局与元素，还有线框图中选用的示例；
• 重点突出，在不影响后续设计师设计的前提下，突出页面重点。

针对以上四点，详细介绍画线框图的四个技巧：

1、少用线条，使用颜色和阴影区分模块

使用颜色区分模块在视觉上比线条区分更直观，也更容易观察出页面布局。建议只使用黑白灰，如果产品定了主色，可以增加一个主色使用在重要元素、选中状态元素上可以根据制作原型母版和组件库的理念，去事先规定同类元素的表现形式，例如：

• 底色都使用浅灰色；
• 按钮，使用圆角，重要按钮使用主色；
• 选中状态，使用主色阴影。

2、 熟练使用各种对齐方式

要提高页面的可看性，整齐是必不可少的。要做到高效整齐很简单，就是熟悉工具的各个对齐方式。

比如在Mockplus中，选中多个组件，在右边属性面板上，就可以设置多个组件的对齐方式和等距。

你还可以使用的参考线来保证整齐。通过拖拽的方式，即可添加或删除Mockplus的参考线，十分便捷。

3、使用真实数据表现元素

很多人为了方便会将将页面上的数据用数据名称表示，甚至使用“xxxx”来代指。这样做的弊端是不能更直观展现页面和元素的功能，不方便理解。其实可以使用真实数据和数据名称结合的方式去更好地展现页面元素信息，传递页面功能。

4、不要制作过于复杂的交互

很多人会沉迷于某些工具制作交互的强大功能中，而忽视了线框图最重要读者的需求。线框图目标读者大多为设计师和程序员，他们希望你能提供准确直观的线框图。线框图中的交互，需要读者自己点击操作才能了解，程序员可能只会看，进而漏掉了很多交互内容；而且很多交互表现得不够准确，反而会不够专业。

一款好用工具

上面谈到画线框图要越快越好，除了要用对办法，还得选择合适的工具来助你一臂之力。在这里强烈推荐Mockplus。Mockplus是一个更快、更简单的线框和原型工具，它可以帮助你在5分钟内创建交互式原型图或线框图。对于制作线框图这样需要可快速实现产品设计和迭代的工具，Mockplus绝对是第一选择。

Mockplus这款工具主打“快速”，通过多种功能来帮助实现高效率制作线框图/交互原型：

• 快速界面设计。300多个高度封装组件，2000多个矢量图标，无需绘制，拖拽即可呈现界面设计。一键导入项目页面和模板，快速搭建基础界面，还可以获得灵感来源。
• 自定义组件库、数据填充、SKETCH导入，格子等特色功能实现设计快速复用，告别重复操作。
• 快速交互设置，设置交互只需拖拽鼠标，动态原型设计全部可视化。支持页面交互、组件交互、交互状态和交互自动还原。
• 快速演示，8种演示方式，同类竞品中方式最全，涵盖多种设备演示。一键生成项目预览，产品需求瞬间图像化展现。轻松扫一扫，手机app实时查看。分享链接在线审阅，还可高效获取客户反馈，快速完成产品迭代。目前Mockplus还发布了Mockplus微信小程序，拿出微信扫一扫即可查看移动原型，无需再下载客户端。

总结

对线框图的介绍就到这里啦，希望本文的两个定义、三个优点、五步流程、四个技巧、一款工具能帮助你了解线框图及其画法。