这次我们来讲一讲产品设计中的线框图。

产品设计，一般包括对产品框架/内容的梳理，业务流程的理解，再到线框图的绘制，原型的设计，最后产出规范的设计稿。在这其中，令我花费最多时间、精力的往往是线框图的设计。因为这是承上启下的一环，既包含着对产品框架、业务流程的验证，也将影响视觉、程序、测试同事的工作。

在开始线框图设计之前，我们来看一看什么ToC产品、ToB产品

ToC产品，例如微信、网易云音乐、新浪微博等。对这类产品来说，产品设计需要提供一个清晰明了的信息架构，让用户能很自然的使用产品。因为ToC产品面对的是海量的用户、不同的用户群体，所有要尽量降低学习成本，达到易用、高效。ToC产品可以通过减法来使架构更加轻量化，从而达到易用、高效的目的。

ToB产品，例如工作关系管理系统、大型功能类系统、业务支持系统等。对这类产品来说，产品设计需要提供一个逻辑严密、功能完备的信息架构，让用户能按照操作流程顺利无误的使用各项功能。这样的繁重架构往往会一定的学习成本，但因ToB产品本身用户群体就比较聚焦，往往使用人员要经过长时间的培训才能上岗。使用场景更是复杂，每个产品都有几十个甚至上百个的使用场景。所以ToB产品无法通过减法使产品轻量化，而是要对用户的业务流程进行深入的了解，从而对产品的功能进行梳理与整合，聚焦核心使用场景。

ToB产品相对于ToC产品，难点在于：要对一个陌生的业务领域进行深入的了解，这本身就已经是一个巨大的挑战。并且相对ToC产品，用户群体已不是我们身边的人，而是一个完全陌生的专业的用户群体，所以用户研究变得更加重要。用户群体的陌生，业务的复杂导致了ToB产品对交互设计师的要求更加高。要求设计师拥有极高的业务理解能力以及对全局的把控能力。即使你不是做B端产品的，相信你看了这篇文章后，也会有感悟。

今天，我就以我自身从事ToB产品设计的经验，来聊一聊线框图。

在绘制线框图时，我们应该有一种纵观全局的理念。只有产品烂熟于心，才能画出优秀的线框图。并且在线框图阶段要时刻反问自己三个问题：

1. 是否已经将用户的使用路径减少到最短？
2. 是否符合用户的使用习惯？
3. 是否已经将信息最精简、最直观的显示出来

一、准备

在开始线框图的设计前，最好对产品框架/内容，业务流程，用户群体拥有足够的了解，并且确定这些内容是经得起推敲的。否则在设计完成后，不免会遇到需要将整个线框图推倒重来的风险。

二、构思

在绘制线框图时，你需要有一个概念，结合用户场景，构建出你产品的“气质”。比如：你要做一款移动端的APP，你的概念是：吸引用户的注意力，让用户花更多时间在你这个APP上，那你可以结合移动端的场景，线框图尽量采取可视化的图形，吸引用户的注意力，采用拖拽、滑动的操作方式，方便用户使用；整体营造出一个“沉浸式”的设计。在构思这一步，应该对产品最终的设计风格，交互方式有一定的想法，记录下来，在后面视觉设计、动效设计时，这可是一笔不可多得的财富。

三、动笔

1.对页面进行布局的规划。

将整个产品的页面进行分类，进而对整个产品的布局进行划分。（部分特殊页面布局可能会相应改变）

2.将页面的内容罗列出来，细究各个内容的表现方式，最终再进行排版。

将每个页面中的内容按类型&重要程度进行分类，在这就要求我们对用户任务流程、业务流程有足够深的理解，才又快又好的完成这部分工作。分类完成后，我们再细究每种类型内容的表现形式（常用的表现形式为：大小、颜色、对比度、图形化）。最后，将我们不断思考、斟酌的页面内容放入我们已经设计好的布局中，再进行排版，这样我们的设计草图就已经完成了。

3.将设计草图转换为设计稿

将原本在纸上的设计草图，转化为电子版的设计稿，更加方便团队内部的评审、修改。

今天就废话到此啦，谢谢各位的观看

作者：Rack 授权转载

原文地址：http://www.jianshu.com/p/7805bc8d7593