《交互9》线框图的设计指南

一.谁需要，为什么需要线框图

线框图是在视觉UI之前需要做的，为避免视觉的反复改稿，以及预算开发成本，和相关部门讨论方案可行性，需要快速高效的画出产品设计方案。让工作中以最低成本，最快反馈速度，协作。

视觉设计师需要线框图再根据品牌调性，统一视觉元素，细化图标，和突出产品的定位和品调。

后端开发需要根据线框图确认功能内容层级框架，整体交互流程，预估功能点实现的难易程度。

运营，市场分析师用线框图确认产品是否实现商业目标，重点内容是否被突出，是否符合市场的当前热点趋势。

总结来说，线框图解决问题主要是：

1. 结构：各页面如何安放？
2. 内容：页面显示什么？
3. 信息层级：如何组织显示相关内容？
4. 功能：界面是如何工作的？
5. 行为：如何与用户交互，运转 ？

二.线框图的种类和软件

线框图主要分为手绘和软件绘制。
分为低保真原型，高保真原型，媒体原型，可直接交互原型。

例如方框图，灰框图，文本高保真，图片高保真，色彩高保真等。

内容层级越丰富，细节涉及点越多，越接近视觉高，越保真。但它的目的是上述所说关注结构，内容，层级，功能，行为。在绘制原型时切莫注重过多视觉细节，本末倒置，反而影响思路和效率。

常见的非软件工具：

1.草图 or 白板

来自网络

优点：效率，速度，灵活无干扰；
缺点：重复工作低保真，不标准，有限的细节等

可增加工具，类似使用纸质原型，和打印以及交互设计尺子，提升草图绘制效率和标准化。

但总体草图绘制无干扰元素，专注到原型本身，适合于头脑风暴，前期初步方案构思，确认，以及收集灵感点子。

使用工具和打印原型纸是为了视觉更美观，标准化，绘制更效率速度。

2.视觉设计软件工具

来自网络

视觉设计软件常指：photoshop，Illustrator，sketch等视觉作图软件。

对于熟悉此类软件的设计师，基本上可实现所有想到的功能设计，也可嵌套常用模版提升效率。不熟悉的设计师，则需要很大入门学习软件操作成本。

缺点是：软件本身功能庞大累赘，不够轻便，切不方便团队协作。无法制作可点击的交互原型。

3.原型设计软件工具

Axure： 无论是产品经理，交互是设计师最常用的是Axure，它可加载模版原型，以及标注说明，绘制流程图，众多素材图标元素选择。可导出网页直接分享团队协作方便。是目前工作使用概率占比较大的原型软件。

墨刀： 最近新尝试的一款线上原型绘制工具，对于新手或Axure不熟练的设计师来说，在axure2小时实现的界面，也许墨刀让你1小时实现。

软件本身嵌套大量设计模版，界面更加简洁，操作视觉化，可在手机上浏览效果。直接连线跳转，绘制可点击的交互原型。
可直接导出原型流程图，并分享为网页或图片。团队在线协作，直接共享同一个项目，实时更新反馈。支持直接从sketch中导入设计稿。

缺点： 多为移动端原型设计，不适合电脑端网页原型，不适合内容页面量大的原型。

三.线框图设计原则

交互设计需要始终记得我们的核心用户是谁？