「交互设计」多面线框图

线框图的价值体现在产品迭代的每一个阶段，产品经理、设计师、工程师、信息架构师、商业分析师等每一个角色都可以用它来沟通和交流想法。它是整个产品的设计蓝图。

线框图的作用

线框图，字面意思理解为由线条和图形组成的设计图，实际上确实如此。但怎么画、如何画、画成什么样的精细度却是它的精髓所在。线框图的应用场景很多，一般我们会使用它作为一种快速草图，既可以用一些软件进行绘制，也可以用身边的纸笔。有人会说这和原型有什么区别，我的看法是它们之间并没有明确的界限。不同的团队、不同的迭代流程和交流范围都会影响方案的最终形态，在实际中应该灵活选择最合适的风格来适应工作需求。

产品立场：

• 快速表达产品概念
• 将产品的设计逻辑和信息表现形式完整联系起来
• 通过可视化的形式传递整个产品的架构，包括内容的布局、信息的组织方式、接口的功能及同用户交互的行为体现等等。

角色立场

• 交互设计师和信息架构师用来表现视图和页面之间的用户流。
• 平面设计师利用线框图推进视觉设计。
• 开发者通过线框图能够了解产品的功能，判断哪些部分需要何种代码实现。
• 对于后台开发人员，低保真的线框图能够表达清楚整个产品的结构和功能即可。对于前端工程师，最好使用高保真的线框图来表达清楚产品的细节。

每个特定角色的关注点都不同，产品内部的相关者需要确保设计满足需求，以适合整个产品的全局实现。作为产品的早期画像，线框图也直接影响着最终的产品形态。

线框图的表现形式

你在线框图上添加的每一个元素、功能或者是动作都会影响相关人员或是用户对产品概念的最终理解。所以制作线框图，准确表达我们需要传递的想法才是最终目的，工具或者定义都不要过分纠结。

工具

使用任何工具都不是问题，只要能够达到你的期望效果。有时候也需要根据不同阶段选择最适合的表现形式，来达到事半功倍的效果。

手绘草图

• 手绘草图：交互设计师必练的基本功，在产品原始的概念阶段，这个时候，很可能只有一个产品的大体架构或者流程，建议用纸笔即可，一方面实现快速，也便于修改。有人可能觉得纸笔没什么技术含量，但是如果你从来没有用过或者很少的话，你会发现，明明头脑里有很多想法，却完全不知道怎么画出来，我自己就有这样的体会，当时找了一些手绘的草图来学习，看着很简单，结果自己画出来真的很丑。

• 软件：Axure、Balsamiq等是我认为比较实用的交互工具，虽然现在各种交互软件层出不穷，但是我仍然觉得axure是很强大的一款工具，如果你能够把它用穿。当然各种交互动画的实现不在我们讨论的范围之内。另外，设计师同样可以用PS、AI、Sketch等绘图软件来实现。

类型（保真度）
这里讨论的保真度包括了我们常说的低（高）保真原型，在实际工作中你会发现，当我们对线框图进行不同程度的加工之后，它的形态往往就变成了我们所谓的原型。

无论采用何种设计形式，开始阶段一定要确定好框架和流程，保证全局无误。否则如果边做边想或者做到一半再去修改，会平添很多不必要的工作量，先有骨骼，再有皮囊在这里是一样的道理。

• 简图：最简单的一种线框图，提供了一些基本必要信息，布局、信息层次等。你也可以添加不同尺寸的文本来体现信息的主次关系。也可以算作设计的架构形式。

• 灰度模型：灰度模型主要为后面的图像设计做铺垫，通过灰度的深浅来体现信息的主次关系，这种形式比较适合表现用户流，可以只用色块完成，也可以根据偏好适当细化增加文本内容。

可以根据实际需要细化文本和图像 描述用户流

• 文本高保真：字体颜色内容等方面都进行了细化，所以一般不需要过多的解释，也比较适合推进视觉设计。

• 颜色高保真：在视觉设计之前令线框图更细腻，利用颜色能够更好的强调主次以及用户行为等，但是不要花费大量精力在颜色的选择上，首先你不一定能用对，其次会令相关人员产生不必要的困惑，使用比较通用的颜色即可。

颜色的使用要恰到好处

• 交互高保真：让静态的线框图动起来，表现更多视觉无法体现的细节：弹窗、缩放、滚动、点击等等，这种形态一般就是我们常说的原型。

添加细节

如何添加细节，需要精细到何种程度，同样需要根据实际情况进行考量。

• 基础型：如果你是产品原型的主要负责人（小公司比较常见的状态），那么能够确保自己理解无误、没有遗漏即可，可以适当省略一些比较直观的细节；如果设计师是个经验丰富的人，而你又希望他有一定的自由发挥空间的话，也可以同样处理；此外，如果你为自己的线框图或是原型图准备了相近的说明文档，线框图做的简单一些也无妨。

• 注释型：图形的表现形式毕竟有限，有些细节需要我们做一些辅助说明。比如一些交互细节，像点击、缩放、输入数据，文本、跳转链接、图片的尺寸变化以及一些复杂的动画形式、速度等等，只要表述不明的地方，最好都能附上辅助说明。Axure可以实现大部分的简单交互，甚至逻辑判断，但是这些实现对于一般的普通用户来说往往比较耗时，同时，即使你实现了，相关人员可能根本没有注意到，此时，最好再附上说明，例如：“点击后出现XXX弹窗”。

线框图和原型的概念很相近，原型让线框图能够动起来，能够直观的体验到多个线框图之间的交互过程，帮助开发人员或者用户快速理解产品，对于设计人员来说，精细化的静态页面则更有助于他们实现预想中的产品设计。

总之，制作线框图最重要的一点就是千万不要纠结用什么工具什么软件，用自己最顺手的就好，如何设计，如何准确的表达出我们的想法才是我们需要修炼的内功。

---

部分图片来源于google
内容参考：uxpin_the_guide_to_wireframing.pdf

如果你也热爱设计，欢迎通过公众号与我交流