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

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

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

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

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

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

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

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

二.线框图的种类和软件

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

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

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

常见的非软件工具：

1.草图 or 白板

来自网络

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

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

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

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

2.视觉设计软件工具

来自网络

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

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

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

3.原型设计软件工具

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

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

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

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

三.线框图设计原则

交互设计需要始终记得我们的核心用户是谁？
用户的需求和目标是什么？
商业目标是什么？
产品设计模式是否可以借鉴？
实现当下功能会有哪些问题和困难？
哪些需求是为了满足用户？
限制条件是什么？例如时间，资源，技能，薪水等。

遵循的原则有：
1.设置预期效果不仅是目标。
无需设置太过详细的目标，抠的太死减少发挥控制，受制于流程。

2.从用户的需求入手：设计和艺术的区别在于设计更能卓有成效的解决问题。提前明确真实用户实际场景的需求。避免添加个人想当然的使用习性。

3.专注考虑产品如何运作：重点不是你的产品有什么功能。例如注册不是让这个功能如何完善，而是如何让用户无痛快捷顺利的注册完成。支付时如何让用户放心支付；按钮不仅仅是功能性按钮，而是如何吸引引导用户完成操作等，让每步设计充满价值。

4.从简单的开始，保持简单：明确产品的特色，吸引用户记住产品。前期简单有利于更多时间思考测试，找出最佳解决办法。因为简单而专注极致。

5.改变并不等于提高：并非所有的改变都能带来提高，有些细节无论如何修改都难满足用户，产品无实质性的进展。需要不断深入挖掘产品问题，剖析本质原因。这是一个不断尝试测试调研试错的循环过程。

6.一切元素皆有意义：草图线框图原型都是用来交流的语言。界面上颜色，字体，大小文本都有自己的意义。

7.一致不等于同质化：一个产品使用同一种设计语言设计模式，让用户熟悉习惯，产生信任感，统一感。
8.低保真原型未必不好：不被花哨炫技遮挡交互的本质，低保真效率，探索更多可能。
9.多实验测试：多走流程才能发现捷径和创新。
10.考虑开发问题：仰望星空，也要脚踏实地。只有被实现使用才有价值，注重技术因素。

手绘导图笔记

四.线框图始终是一个工具

不必太过于追求完美，原型是表达产品理念而非最终形式。
大家不在意概念元素是否精美，而是未完成的概念合适才能完成，完成后有多精致。线框图只是用来组织逻辑，规划架构，容纳创意的容器。
一旦确认后，就要赶紧投入到实现阶段，产出成本被使用才能体现它最终的价值。

前期回顾：
第1章：《交互》1.产品设计开发是怎样的过程
第2章：《交互》2.如何理顺问题，搞清设计目标
第3章：《交互》3.如何建立有效的人物模型
第4章：《交互》4.如何构建场景和挖掘设计需求
第5章：《交互》5.如何呈现功能和定义框架
第6章：《交互6》如何设定良好产品的行为基础
第7章：《交互7》数字产品礼仪和做人感悟
第8章：《交互8》如何让用户保持专注度和效率

我是糕小糕，糕小糕，正在用思维导图阅读法，攻克经典书籍。希望整理的对你有用。
正所谓：书宜杂读，业宜精钻
你知道吗，你的赞，会让我欣喜若狂