上周的文章，介绍了流程设计方法的公式：发现 → 了解 → 操作 → 跟进。这是一个很好用的公式，可以帮你理清流程设计的思路。这周的文章我们着重来讲一讲如何运用这个公式来设计流程。

流程图的作用

设计一个流程，一般是用流程图来表达。绘制流程图有什么用呢？流程图可以清晰地表现出用户完成一个任务所要经历的各种步骤和操作。它就像一张地图，表现出功能的前进路线。交互设计师画出流程图，第一，可以保证用户所经历的流程是明确、清晰、简单的——当我们画出了流程图，设计师就可以对功能的流程有更清晰的认识和把控，便于发现流程里的问题；第二，流程图可以保障我们的交互方案逻辑清晰，结构完整。流程图给出了功能的骨架。有了流程图，设计师只需要将流程里的每一步，用具体的页面表现出来，就可以得到一份质量很高的交互稿。所以，一个好的流程图是一个好的交互方案的前提。

另外，流程图对于开发和测试同事，也有很大的帮助：流程图可以清晰地表达出实现一个功能的逻辑顺序，方便开发的同事写代码时抓住脉络，也方便测试同学在测试的时候有迹可循。

原则

在画流程图的时候，我们只需要表现三种元素：界面、动作、条件。比如如下这个登录流程：

需要注意的是，除非有特殊情况，否则除了以上三种元素，一般不添加别的元素。比如下面的三个反例：

1. 在流程图里，只画界面逻辑，不要画内部算法逻辑，因为这些用户不必care，加上它们只会影响你的设计思路。比如下图中红色的部分是不必要的，需要删掉：

2.不要把步骤和界面本身都表现出来，应该只表达界面。需要注意的是，找出流程图每个界面应该包含的元素，以及设计要点，是画完流程图应该做的工作。这可以为后续设计界面服务。你可以在画流程图的时候同时标出设计要点，但是我还是建议先画出流程图，再标出要点。这样可以保证你的设计思路是清晰的、不被打扰的。下图中红框的部分应该合并为“登录页”：

3. 一般来说，流程图里只表现界面，不表达界面中出现的错误提示等信息。当然，如果你觉得标出错误提示可以帮助你完成后面的交互原型，也可以这样做。但是由于每一步其实都有可能出错，所以这样很可能会使整个流程图变得很庞大和复杂。

案例

下面我们通过一个理财应用续约的功能，来进一步说明一下如何设计一个流程，如何画一个流程图。

现在某理财应⽤用要做⼀一个续约的功能,主要针对购买的理财产品将要到期的⽤用户，提醒他们可以续约。提供的续约信息包括⽤用作续约的本⾦金，续约⽅方式（本息续约），预期增加收益，续约期限，续约后的到期⽇日，续约说明。续约操作后需要审核，审核⼀一般需要1~2⼩小时，通过后会有短信通知。

由于续约能够给公司带来不少收益，因此希望⽤用户在操作上⽐比较流畅，保证不会因为操作⽽而流失⽤用户。

首先分析一下，这个功能的目标用户，是那些已经购买了理财，并且理财产品将要到期的用户。

本文为小密圈“交互小殿堂”本周主题“场景思维”的节选内容。文章后半部分将介绍流程的完整性。感兴趣的朋友可加入小密圈“交互小殿堂”查看原文。

关于小密圈“交互小殿堂”

交互小殿堂设置了6个主题，帮助你系统学习交互：

- 场景思维（2周）

- 心理模型（1周）

- 流程设计（5周）

- 正确使用控件（15周）

- 测试方案（3周）

- 用研（3周）

以上这些专题，将每周固定发布在我的小密圈“交互小殿堂”。

同时，为了让大家更好地掌握每周的专题，安排每周的计划如下：

- 周一在小密圈“交互小殿堂”独家发布一篇主文，介绍本周主题；

- 周二至周五解答圈友们关于本周主题的问题；

- 周六分享优秀交互设计案例，并带领大家解析设计亮点；

- 周日总结本周所学。

6个专题结束后，会为大家提供7个需求，供大家实战，锻炼之前学到的技能。

具体的安排如下：

第一周，给出需求说明和重点提示；

第一周剩下的几天以及第二周，大家根据需求进行交互方案设计；

第三周集中点评大家的方案，给出建议。

欢迎加入，和大家一起系统学习交互。

加入小密圈方法

方法一：可保存下面的二维码到相册，然后使用微信“扫一扫”→“从相册选取二维码”。注：长按识别二维码会出bug，导致无法支付（摊手）。

方法二：点击链接加入http://t.xiaomiquan.com/MBiq7qV

现在圈子刚刚建立，实行短暂优惠：

两人一起报名，享8折优惠；

三人一起报名，享7折优惠；

四人一起报名，享6折优惠；

五人及五人以上一起报名，享5折优惠；