当产品的用户体验要求越来越高时，交互设计师的职责也越来越明晰了。交互设计师除了自身的基本功外，还需要有一个规范的流程，才能够使工作完整有序。

图1 交互设计在产品设计中的流程图

一、版本计划

版本计划是指在产品或项目立项时，对产品的一个总的规划，通常包括产品的需求与目标，比如能够实现哪些功能，性能上如何。这一过程，交互很少直接参与，或 者列席一下发版立项，对计划情况有所知晓。交互可以纵观一下历史版本，对比行业内外的相关产品，以及满怀未来产品的一种期待：实用、方便、美观……

二、需求分析

在版本计划立项完成后，产品经理就会把版本计划分解，并整理成需求稿给交互设计师。交互设计师拿到需求稿后，开始需求分析。当发现有些逻辑不够合理，或者 有任何不够清晰的地方，都需要跟产品经理协商。此时，交互可以使用各种原理与方法，比如根据产品的历史用户数据进行用户研究，与开发人员进行一些实现效果 上的交流。

在与产品经理或开发沟通过程中，可以用自己方便的方式，随时记下或画下各种功能、效果与要求。交互设计是产品设计中的一个把需求变成模型的实现过程，产品 经理是产品设计的核心，在交互设计过程中只要有问题，都寻求产品经理解决或协调。但是他们的主要工作是做需求，一个优秀的交互设计师所做的工作，产品经理 往往是不容易做到的。

三、交互设计

前期的准备工作做好了，就进入交互设计阶段了。这一阶段，交互需要借助axure等原型工具，将产品由抽象概念转化为可演示的模型概念。

交互设计可以按三个小的步骤来走。第一个步骤，是交互过程的梳理，即用流程图把交互过程梳理出来。比如在设计一种手机自动问答股票证券的功能，流程需要从 入口、首次使用示例、询问、回答到答案的分享等。同时，需要注意在使用过程中各种突发的事件，如网络连接、服务器异常等问题提示，有回答不了的问题怎么给 出回应等。

图2 交互流程示例图

第二个就是完成产品的功能需求，即把产品的基本功能通过一个完整演示的原型来实现。这个过程，可以用线框图来表示，争取每一种效果都能做出来，如果做不出 来，就用文字说明标注。这一步做出来的低保真原型完成后，可以向产品经理演示，确认是否还有遗漏。一个有着完整交互效果的原型沟通起来还是能发挥出方便直 观优势的，拿给开发演示，让测试作为评测的依据，也比长篇大论的文章交流效率高很多。

图3 原型演示稿及说明

交互设计的第三个步骤，就是把完整的原型详细分解到每一步动作进行说明。开发、测试关心每一步怎么做，视觉也会根据每一步进行设计。在设计时，将理想效果 大胆表达出来，当然这里少不了你宽阔的知识面。不需要对技术了解太深，但需要知道哪些效果实现起来方便并符合整体风格，哪些效果在技术上极难实现，而这些 见识就要加强与开发的沟通。当然，对视觉的基础也是要有的，各种布局设计也要在产品整体的视觉风格之内，否则视觉设计时的改动会比较大。

图4 交互动作分解与说明

交互稿的审核，需要研发人员的共同参与。在审核过程中，抓住需求这条主线，从用户的角度考虑，主要从软件的基本交互规律上讨论。做产品必须有前瞻性，而非事后的。主观上的感觉也是一个方面，但分量不能过重。

总之，交互设计完成后的产出物需要满足两个条件：完成产品需求，分解到每一步动作。这两个条件具备了，就是一个不错的交互文档，图和动作加上说明，比任何密密麻麻的文档都直观。

四、视觉设计

交互稿通过研发人员的审核后，交给开发前，需要进行视觉设计。视觉设计师不但要完成图片图标的设计，还要标注好背景色、字体、字号、间距等等。当然，除了 图标类的设计外，字体、间距、对齐等，交互设计师应该在规范文档的指导下，在交互稿中有所体现了。但是即使有完善的规范，也只能完成70%-80%，很多 东西需要在场景变化时，进行适当的调整。

五、开发

产品的开发过程中，交互的主要任务就是跟进。功能方面，测试自然能够把关，但是交互方面，哪怕前期沟通得再好，开发会一不小心还是会给做打折的。如果难度 太大或实在有问题，开发应该主动找你协商。所以，在无关性能的影响下，只要能够让用户体验度再上升一点点，不要跟开发太多妥协。

六、测试

测试是你的好帮手，交互稿做得到位了，测试会帮你把好关。

七、版本发布

当测试完成了产品的各种验证后，版本就要发布了，此时交互参与的这次研发基本进入了一个闭环。

八、用户反馈

产品的版本发布后，会通过系统、电话等方式收到一些用户反馈，有可能直接修改交互稿，或者直接跟开发提交互效果的更新，对版本进行一些完善。当然，过了刚发布后的一段时间，进入稳定期，才是真正完成了本次版本的交互工作闭环。之后的反馈，可以为下一个版本提供参考。

需要提一下的是，产品的设计，并不一定有专门的视觉参与，就像产品设计过程并不一定有专门的交互设计师一样。这个时候，交互设计师就要有一定的视觉设计能力了。

总结

简单说来，交互设计过程如下图所示，作为本文的一个总结。

图5 交互设计简洁过程图

原文来自：UED学院

作者：流泉闪韵