3、交互流程设计

交互设计笔记（下）：流程设计

设计笔记库关注作者

2020-02-24

2 评论1.2万浏览96 收藏9 分钟

九大用户体验研究方法论，告别臆测用户想法，让你迅速明确用户真实需求，精准迭代产品！了解一下 >>

释放双眼，带上耳机，听听看~！

00:00

优秀的流程设计不仅能帮助用户更好的完成任务，还能帮助设计师更充分的思考错误，本文从定义出发，深入浅出地阐述流程设计的步骤及交互原型的画法。

1. 流程设计是什么

流程设计既要兼顾业务需求，也要兼顾用户需求，是以不干扰用户使用流程的方式完成业务需求。

交互设计师输出的虽然是页面，但实际是设计用户完成任务的方式。页面流程图展示的是页面之间的跳转关系，明确用户当前的所处状态，及下一步的操作。用户通过某种流程完成任务，举个简单的例子，支付宝转账主要流程如图所示，这是最简单且正常情况下的流程。

2. 流程设计怎么做

2.1 理解业务需求，明确核心功能主线

工作中，交互设计师接到需求后，首先要进行需求分析，充分理解业务需求和功能逻辑，根据业务流程梳理出主要的页面流程。此时需要考虑业务目标是什么，受到哪些技术限制，输出的设计才能被公司和用户接受。

2.2 细化场景，寻找所有接触点

任务与流程是一对多的关系，用户完成同一个任务可能通过不同的流程。所以需要找到用户完成任务时的所有接触点。接触点是用户和产品发生交互的关键点，比如用户点击了转账按钮，就是一个接触点。

接触点来自于用户场景（基于用户模型、经验，用户调研的体验故事）。设计师要拥有用户场景的构思能力，根据用户画像，思考所有可能出现的场景。或者基于自己的经验创建之前不存在的场景，在脑子里模拟出来并把它记录下来。

在用户场景中，通过接触点的模式找出用户看到的信息和所做的事情。

如图所示为转账流程中的接触点。用户完成转账这一任务，可能经过不同的流程，如点击首页转账按钮/ 朋友页面手指向下滑动，可以触发找人转账的提示 / 聊天界面输入数字也可以触发给对方转账的提示等等。

注意：

Tip1: 合并同类项，为了完成流程设计，需要构建的用户场景有多个，但有些接触点是重复的；

Tip2: 顾及头尾，考虑第一个和最后一个接触点，因为他们是最容易被遗漏的接触点；

2.3 梳理接触点，制作流程图

接触点指用户做了某件事或看到某个信息，梳理接触点有以下三种模式：

模式一：做事-看信息-做事是最舒服的模式，能对用户起到良好的引导作用；

模式二：做事-做事用于用户经验足以支撑的场景下，如输入账号-输入密码

模式三：看信息-看信息用于信息量大，需要用户理解的场景；如看淘宝促销活动大致流程-具体参与规则

利用三种模式将接触点串联起来，明确每个页面的核心元素，理清页面之间的逻辑关系，也就是页面的来源和去处。

一个转账流程如图所示，由于用户场景不同，流程会出现分支，所以梳理接触点时考虑清楚，哪些是需要判断的关键节点，将接触点串联起来。

简言之，流程设计就是在理解业务需求的基础上，构思用户使用一个功能或完成一个任务的场景，找到所有接触点，再对接触点进行梳理，考虑各种状态，将接触点串联起来，完成页面流程图的设计。

3. 如何根据流程设计交互原型

在交互稿上体现用户操作流程，通过触发点的虚拟表示和箭头，把页面横向串联起来，展示用户一步一步完成任务会发生怎样的页面跳转和操作行为。如图所示，通过红色点击区和箭头展示用户的操作步骤。

注意：

Tip1：如果流程出现分支时，不要制作在一个页面中，这样会使交互稿的可读性变低，更好的做法是体现在站点对图上，通过站点地图拆分子流程。保证每个页面是一条流程走到底的，遇到较长流程分支时可以建立跳转，链接到子页面。

Tip2：注意前后页面的关联性和一致性，如当前页面的button和下一页面的title要一致。

Tip3：完成交互稿后，对照接触点流程检查一遍交互，确认每个接触点的过度是自然的。提供完成一个接触点所需要的全部信息。

4. 处理异常流程

为了保证流程设计的全面性，需要预判用户或系统可能出现的错误。

交互稿中，异常页面位于正常页面的下方，横向是正常流程，纵向是异常流程补充，需要开发和测试注意的，处理这个页面的一些异常情况。

必须考虑的异常流程：

用户网络故障/服务器资源不足时，不要造成不可挽回的损失，设置自动保存机制；

预判用户可能出现的错误（错误的点击），对于造成重大损失的按钮，提供二次确认的对话框；

处理异常流程的方式：Toast和Alert

Toast：提示文字少，出现2秒左右会自动消失。用于轻提示，马上可以重试的；

Alert：提示文字较多，有按钮，需要用户确认。用于业务的确认，当业务逻辑比较复杂时，用户的操作存在违规或者造成重大损失，用Alert提示。

5. 总结

中篇所讲的信息架构关注产品的全局性，考虑将多条流程整合在一起；本篇流程设计关注每一条流程的合理性，帮助用户更好更快的完成任务。

流程设计步骤可归纳为：

理解业务需求，明确核心功能主线；

细化场景，寻找所有接触点；

梳理接触点，制作流程图；

然后根据流程图设计交互稿，注重流程设计的全面性，思考异常流程的处理。