APP设计师进阶之路【三】：交互输出物与交互设计工具

前面25学堂分别跟大家分享了移动APP设计师进阶之路【一】：设计书籍与规范和移动APP设计师进阶之路【二】：设计原则大全 两篇入门级别的APP设计学习文档。或者说是APP设计学习的目录。

如何从零开始学习APP界面设计？

只要大家按照这样的步骤来学习，一定会成为一名资深的APP设计大牛的。

当我们学习阅读了APP设计规范和原则之后，下一步那就是实战操作了。

开始制作我们的APP产品设计原型图以及高低保真的交互输出物。

换句话说：理论知识可以看做是修炼内功，实战技能则是转化为招式——即 设计方案。作为新人，最基础的是有输出交互设计方案的能力。之后更多的是积累都在于如何提出易用性高、用户满意喜欢的设计方案。

A、交互设计输出物包含哪些？

互输出物是设计师对于产品或者需求的思考总结的一种表现形式。设计师将需求方提出的项目需求和已有的数据加以整理、分析，经过发散的创造性思维创新和严谨的逻辑论证后，得到了逐渐成熟的交互产物。这个思辨的过程贯穿于交互设计工作流程的每个环节。

1）流程图 

1、国外精美的APPUI界面设计作品流程图欣赏

2、UI/UX设计师及产品经理必备的APP手绘草图模板

3、一款高校类APP产品设计流程完整版|APP设计信息图

4、移动商街APP界面设计欣赏和移动APP设计流程

5、APP界面设计流程和APP产品设计流程知识汇总

2）线框图 （Wireframe）

设计师或者需求方对于产品的一种快速的、静态的、清晰的表达手段。用于项目前期的讨论和沟通，给项目成员间或者和客户沟通时提供一个大致的概念和讨论方向，以便快速的理解和及时的提出自己的建议。

1、APP原型界面设计教程：线框图的链接跳转设计

2、2套APP产品原型流程线框图案例学习

3、APP原型线框图模板PSD下载，移动设计师必备素材

4、APP产品经理必备的APP线框图工具【Android和iOS】

线框图输出最方便的就是手绘。在一张纸上呈现简易的界面布局和关键的注释，在敏捷项目流程中运用的比较广泛。通常在敏捷团队中，用快速迭代的线框图和团队中大量的沟通和讨论，产出项目关键的界面方案，视觉和前端开发即可开始下个阶段的工作，交互设计师则继续完善方案细节和状态的补充。多种角色齐头并进，这是敏捷设计相对传统的瀑布式合作方式来说独具特色的地方。

当然画线框图的工具也很多，常用的有Balsamiq Mockups，Axure，PPT，Sketch等。每个工具都有各具特色，也各有利弊。不要刻意地纠结于形式和工具方法，能使用的习惯和满足自己设计方案的表达即可。

3）原型(Prototype)

原型比线框图更接近产品最终的形态，它用作对用户进行可用性测试和项目的设计输出。项目早期的原型测试能够及时的发现问题和漏洞，节省后续的开发投入成本。原型是可交互的，并且尽可能接近最终的产品界面的高保真设计稿。

1、1天搞定的网站首页Axure原型图设计思路总结

2、小议Axure制作APP原型尺寸规范和注意事项

3、APP原型设计精品视频教程—inVision原创出品

4、快速做出逼真的移动交互APP原型工具—乎之原型

5、最好用的在线App原型设计工具推荐-墨刀

6、用Axure制作APP交互原型的视频教程【共6节课】

4）交互说明文档

1、如何写一份交互说明文档（作者：heidixie）

2、如何编写交互设计详细说明文档（作者：heidixie）

3、如何制作实用美观的设计文档（作者：yoyo）

B、APP交互工具推荐

工具的作用是用来表达自己的设计方案，初期讨论、沟通想法时用纸币来的最快最方便。软件的好处则是利于存档、多人协作、传递。

1、Axure

虽然交互设计工具几年来层出不穷，但是实用性最强的个人觉得还是Axure ，学习成本低、简单好用、多平台通用。对于新手，前期可从排版开始练习画线框图，不用沉迷于做复杂的交互效果，因为工作中可能没有时间做非常细腻的交互动效。当然，如果是给大领导演示方案，一些点击跳转还是有必要做的。

绘制高、低保真网页原型图;可作为产品、交互文档输出工具。

2、产品经理的APP设计工具：mockplus、墨刀和justinmind

3、Sketch

完全针对移动端设计而生的软件。界面干净直观，分层的概念符合设计师工作习惯，当界面复杂时明确的图层与分组使元素控件管理起来非常方便。Artboard、Symbol和Text style 的运用简化了重复内容调用的工作也减轻了后续修改工作，图配文的文档输出管理好过Axure。第三方插件的开发和控件库资源使设计更方便，还有很多其他的小功能，比如Share(用其他电脑可以实时观看设计进度)，自己还要边使用边发现。与Axure对比，前者更适合网页原型设计而后者更倾向于移动端产品。

绘制高、低保真移动端原型图;绘制图标、视觉设计稿;可切图输出;可作为交互文档和视觉设计说明文档的输出工具。

4、Pixate和Quartz Composer-Origami

两者都是交互原型制作工具，可生成模拟器或者mirror到手机上，更直观地推敲设计交互原型。前者被Google收购已经免费。

最大的特点是运用了图层概念，将交互手势、动画直接添加到图层上，并用base on将页面联系起来。后者是Facebook在苹果原生Quartz Composer动画设计软件上的插件，大大降低了设计使用门槛。特点是模块化，用编程的逻辑制作动画。不同的交互手势和动效样式有各自的一个模块，用线将模块联系起来，软件的动效调用基本源于FB的Pop Animation库。两者学习成本很高，尤其后者，页面多、交互多时制作面板非常复杂，但做出的动效精确优美。可适用于个别页面中少数重要、精确的交互原型制作。

制作精准的交互动效原型。