下载掌阅APP，畅读海量书库
立即打开
起初，笔者对“交互设计要干什么”曾经存在以下误解。
· 做一套超级炫酷的动效，学习交互动效将是我的人生目标。
· 做一套差异化的界面，我为自己代言。
· 用最短的页面流程或最少的点击次数衡量方案的好坏。
· 做交互设计终于可以不用在乎高保真交互原型图了。
……
以上看法是对交互设计的误解。交互设计是产品流程和结构设计，所有的工作内容都是围绕用户行为进行设计的，以便用户能更方便、更有效率地完成目标任务，并且获得良好的用户体验。除了屏幕上的交互设计，还有语音交互设计、手势交互设计等。一名合格的交互设计师，应该知道如何表述设计方案。在实际项目中，交互设计师充当的是富有逻辑性的表达角色，产出物就是表达方案最有力的“语言”，它们是思考结果的载体，承载着交互设计师的想法和设计方案，通常以文档的形式输出。
交互设计说明文档（DRD，简称交互文档）是交互设计师的主要产出物，主要用于承载交互设计师的详细设计方案。完整并规范的交互文档可以体现出交互设计师的基本功和专业能力，并且可以帮助交互设计师厘清设计思路、管理迭代版本、沉淀项目经验。一份详细的交互文档包含封面、更新日志、文档图例、设计思路、原型图、流程图、交互说明、信息结构图、功能结构图、组件规范等。对于交互文档的详细撰写方法，笔者将在2.2节进行详细讲解。
原型图是产品的雏形或样本，是对产品流程、功能的具象表达，原型图来自抽象的产品需求，输出原型图的目的是表达具象的设计思路。原型图主要用于在正式进入开发之前，向上、下游的相关工作人员传递功能交互方案。此外，可以利用原型图对用户进行测试和调研，使其设计方案更贴近用户的使用诉求。无论是向上、下游的相关工作人员传递方案，还是用户测试和调研，对交互方案的调整都是轻量级的，因为原型图无须考虑过多的页面细节和视觉元素，只需表述清楚任务流程、信息及功能架构。原型图是交互设计师的重要产出物，交互设计师可以利用原型图模拟产品或功能的交互行为。原型图的显著特征有以下几点。
仅呈现UI框架： 以页面为单位，原型图只需展示基本的组件元素和模块层级，不需要过多的色彩和精细化的视觉元素。
清晰的功能和信息层级： 原型图虽然仅是产品雏形，但仍需要注意各个功能点、信息层级和基本的设计排版，使上、下游的相关工作人员或受访用户能够轻松理解交互设计师的设计思路，从而降低不必要的沟通成本、减少不必要的误解。
实现成本低： 使用笔和纸就可以快速完成原型图设计。市场上有很多快速原型图设计工具和原型图组件库，拿来即用，并且不需要考虑过多的细节规范。
交互性： 具备完整的页面流程、功能交互逻辑、状态和组件的交互规则等，在必要时，可以为原型图设置跳转热区和仿真的交互状态，以便用户测试和方案演示，示例如下图所示。
初入行的交互设计师容易将原型图和线框图搞混。线框图是输出原型图之前的草稿或即兴头脑风暴产出的抽象设计方案，比原型图粗糙得多，并且缺少交互性。笔者在工作中养成了画线框图的习惯，基本每次开会交流设计想法都会带上纸和笔，并且通过简易的线框图记录灵感，方便随时随地找需求方和上、下游的相关工作人员沟通设计想法。通过线框图可以把主线的交互流程确定下来，并且在会后将其整理成细致、完整的原型图。交互设计师在实际工作中，应该避免将过多的精力放在设计精细化的原型图上，要提高分析需求和设计思考的权重。原型图没有传说中那么“玄幻”“炫酷”，仅用于传递想法和测试方案，并不是最终的UI，示例如下图所示。
前面提到的原型图属于低保真原型图，高保真交互原型图的产品交互逻辑、UI视觉效果等非常接近产品最终的落地形态，可以理解为在低保真原型图的基础上添加了视觉颜色和可交互效果。需要注意的是，高保真交互原型图不是最终的视觉设计稿，二者本质上是有区别的。高保真交互原型图仍然处于功能构想阶段，没有视觉设计稿中制作精美的图标和情感化设计。当然，具体情况要根据团队的要求确定，有时高保真交互原型图就是最终交付给开发工程师的视觉设计稿。
高保真交互原型图和低保真原型图都是设计方案的沟通媒介，但高保真交互原型图的质量要求和精细化程度要比低保真原型图的高，利用高保真交互原型图进行用户测试和汇报用户体验明显比利用低保真原型图直观。相应地，高保真交互原型图的设计成本要比低保真原型图的设计成本高。
高保真交互原型图示例如下图所示。如果下游有视觉设计师，那么不建议交互设计师直接输出高保真交互原型图，因为精细化的高保真交互原型图可能会限制下游视觉设计师的发挥，甚至可能因为沟通的非及时性而误导视觉设计师。但某些情况是不可避免的。例如，上级领导或客户要求使用高保真交互原型图进行汇报，甲方要求使用高保真交互原型图参与竞标和讲标，等等。因此，在设计高保真交互原型图前，应该通过线框图或低保真原型图定义好主线流程、主线场景，否则可能会因理解需求有误而推翻高保真交互原型图的方案，并且重新制作。
笔者之所以把高保真交互原型图单独列出，是因为从当前的行业趋势来看，负责B端产品的设计师越来越多。很多B端产品线要求体验设计师、交互设计师输出高保真交互原型图，将其直接交付给开发工程师，并且下游没有单独设立视觉设计师。这种现象表明，当前产品阶段不需要有视觉设计师聚焦于视觉表现层。此外，因为B端产品的特性，用人单位希望体验设计师和交互设计师聚焦于产品业务和用户体验，在UI视觉方面只需兼顾。目前，中台、后台的产品设计通常已经组件化，大部分UI设计工作是通过拼装组件完成的，因此要求体验设计师或交互设计师直接输出高保真交互原型图，可以节约上、下游相关工作人员之间重复沟通的成本，减少下游设计师对业务的理解偏差，从而为团队降本增效。
流程图是交互设计师和产品经理必须掌握的重要工具，它可以将可视化的图形组成一个流程，从而直观地描述一个过程及过程中的节点状态，帮助我们梳理产品逻辑和交互逻辑，发现潜在的问题或遗漏的场景，并且向上、下游的相关工作人员传递交互逻辑。通过绘制流程图，我们可以清晰地看到系统与系统、场景与场景、前端与后端、角色与角色、页面与页面、行为与反馈之间的交互关系。常见的流程图有页面流程图、功能流程图和业务流程图。其中，业务流程图示例如下图所示。
流程图是交互文档中的必备内容。并不是所有的场景都需要绘制流程图。例如，如果一些简单的页面逻辑和常规的前端、后端状态已经成了人们的固有认知，或者在同一个项目中已经有了先例，则可以直接复用，无须花费时间绘制流程图。在通常情况下，复杂且庞大的业务逻辑，以及页面和状态过多的交互逻辑，才会通过流程图简化页面视图，从而直观地展示业务逻辑和交互逻辑。
结构图是根据一个事物的内部组成元素及这些元素之间的从属关系绘制的图表，在产品和交互设计领域通常分为功能结构图和信息结构图。结构图和原型图、流程图同属于交互文档中的重要组成部分，是交互设计师和产品经理从鸟瞰视角管理产品功能的从属关系和模块信息层级的图表工具。在通常情况下，结构图会被传递给上、下游的相关工作人员，帮助他们清晰地了解本次迭代要实现哪些功能，一级功能包含哪些二级功能，这些功能由哪些子模块组成，这些子模块由哪些信息构成，信息的输出规范和结构是怎样的。
功能结构图： 功能的特点是具有可交互性。功能结构图相当于产品的骨架，产品由若干个功能组成，功能由若干个页面组成，页面由若干个模块信息组成。功能结构图主要用于展示功能在产品中的划分和从属关系。例如，微信首页中包括搜索、聚合菜单、会话列表视图、登录状态栏、标签栏导航等功能，其功能结构图如下图所示。
信息结构图： 信息的特点是具有规则性。信息结构图相当于产品的血肉，罗列了信息维度的从属关系及信息组成规则。例如，微信首页的会话列表视图中包括会话头像、会话昵称、会话消息、会话时间等信息，其中会话时间由今天、昨天、本周、＞本周等信息组成规则呈现，其信息结构图如下图所示。
设计规范关系到多方协作和工作效率的问题。对于从0到1的C端产品，可以先参考iOS、Material Design、Vant等的设计规范，再与视觉设计师、前端开发工程师共同制定自家产品的设计规范，并且建立相应的设计系统。对于B端产品，可以沿用Ant Design、Element UI、TDesign等主流设计规范。这些都是非常成熟的设计规范，如果仍然无法满足业务需求，则可以单独制定一套设计规范让前端开发工程师封装。笔者认为，在主导团队组件库设计方面，有视觉设计经验的交互设计师具备一定的优势，因为组件库的构建涉及视觉风格、交互规则、交互状态及前端落地，恰好都是视觉设计师和交互设计师的基本功，有利于交互设计师站在全局视角进行审视和设计。
此外，建议制作一套自己的元件库，将元素组件化，方便后期调用。完整的元件库能大幅降低不必要的设计成本。
验收报告主要体现在设计验收和设计自查，设计验收是迭代发布前的设计走查，设计自查是产出设计方案后的自我检查。
常见的验收测试包含功能测试和界面测试。
功能测试：检验设计的功能和流程是否按照交互文档实现、功能是否正常。笔者常用的方法是为功能和流程编写测试用例，然后产出测试用例文档，协助测试人员完成发布前的把关工作，共同构建“Bug防线”。
界面测试：又称为界面走查，主要用于对产品的每个页面、每个状态进行设计还原度的排查，将实现出来的版本与高保真交互原型图进行对比。界面交互和样式还原测试由视觉设计师完成，交互设计师可以协助完成。界面测试的产出物为设计验收清单、验收报告，如下图所示。
验收报告是在功能测试和界面测试中需要用到的文档。在进行验收测试时，会通过验收报告记录问题并形成文档，用于跟进前端开发工程师整改问题。
如果产品设计不以用户为核心，只是一味地满足产品诉求，那么很难获得优秀的用户体验。好的产品能够满足用户需求并不断寻找新的用户场景，交互设计师的职责是定义并设计产品，是权衡产品诉求和用户诉求的角色，既要达到产品目标，又要考虑用户体验。产品目标很好理解，即产品需要完成什么指标，满足用户怎样的使用场景。对于用户体验，交互设计师需要将注意力聚焦在用户研究上，强烈的主观意识很难保证决策是否正确。因此交互设计师一般会参与或组织用户调研，然后将调研结果整理成文档并将其传递给产品团队。常见的用户调研方法有用户访谈、问卷调查、数据分析、A/B测试、可用性测试、用户体验地图设计、桌面研究等。调研记录示例如下图所示。
竞品分析报告： 竞品分析是指对竞争对手的产品进行分析。在产品团队中，交互设计师一般要对同类产品进行研究，因此会定期输出竞品分析报告，然后将报告发给产品团队，提升自己对产品的分析能力，并且为以后的迭代内容提供一份依据。竞品分析随时都可以做，只不过深度和广度不一样，可以做一份全面的报告，用于熟悉产品、推动优化；也可以在设计中进行碎片化的分析，并且在事后将其整理成文档。例如，某次迭代需要优化支付流程，可以先与其他产品的支付流程进行对比，吸取它们的优点，用于完善自己的方案。
产品体验报告： 产品体验报告是体验者在深入了解某个产品的商业模式、目标用户、使用场景、市场现状、产品功能、交互体验及视觉风格后，总结出来的全方位图文报告。这里的体验者可以是运营、产品、交互、UI、开发等产品相关人员，但笔者建议由交互设计师主动完成，用于快速了解产品的“血”“肉”“骨”“肤”。产品体验报告可以结合竞品分析报告一起输出。
数据埋点报告： 关注数据不只是产品经理或运营人员的工作，交互设计师也需要掌握这方面的基本技能。利用数据，交互设计师可以产出更贴近用户行为的设计方案；监测产品迭代中的问题点，从而找到设计点；为后续的产品迭代提供方向和参考。平时不关注数据的交互设计师经常在出方案时专注于对表现层进行优化，而忽略真实的用户行为。关注用户行为的交互设计师不仅能够验证设计结果，还能不断对产品体验进行打磨，改善用户体验。交互设计师可以使用用户行为数据埋点表进行数据监测管理，示例如下图所示，然后让开发工程师跟随迭代设置数据埋点，最后根据回传的数据进行相关设计优化。
市场上的设计工具五花八门，每个人的使用习惯也不一样。在选择设计工具时，需要遵循以下两个原则。
· 掌握主流设计工具的使用方法。大部分设计工具的使用方法是类似的，掌握了主流工具的使用方法，在使用其他设计工具时更容易上手。
· 掌握现有团队在用的设计工具的使用方法。工具的作用是提高个人产出效率和团队协作效率，根据团队的要求掌握相关工具才有意义。
下面介绍笔者常用的几种设计工具。
1.万能工具：笔和纸
笔者一直认为：笔和纸是设计师最好的朋友。在正式输出原型图前，笔者很喜欢带着笔和纸去沟通需求，因为它们能让笔者在短时间内进行敏捷式头脑风暴，快速输出想法，低成本试错。
2.原型图设计工具：Axure、Sketch
Axure一直是主流的原型图设计工具，也是笔者接触的第一款原型图设计工具，主要用于输出交互文档，导出超链接、HTML文件、Word文件都非常方便。虽然现在很多工具能够在交互演示方面代替它，但它的使用人数仍然很多。
Sketch的定位是专业的UI设计软件，它能够无缝搭配Flinto或Principle，帮助笔者输出高保真演示稿，并且其中强大的第三方插件和组件库能够拉近我和视觉设计师的距离。
3.动效工具：Flinto、Principle
Flinto和Principle是笔者从事UI设计时就掌握的工具，其特点是交互动效还原度极高，可以同步到手机上预览，感受真实的交互效果，在进行方案评审时，可以省去很多文字描述，并且可以非常直观地将落地想法传递给前端开发工程师。
4.演示汇报工具：Keynote、PowerPoint
使用Keynote、PowerPoint编辑和演示幻灯片是互联网企业员工不可缺少的技能。这两种工具不仅在平时的分享会、方案汇报、项目复盘、述职等场景中经常用到，还可以用于实现交互动画，以及撰写用研报告、体验报告、竞品分析报告等。