上周的文章婚夫，介紹了流程設計方法的公式：發(fā)現(xiàn) → 了解 → 操作 → 跟進恰起。這是一個很好用的公式燃少，可以幫你理清流程設計的思路终蒂。這周的文章我們著重來講一講如何運用這個公式來設計流程恬吕。

流程圖的作用

設計一個流程签则，一般是用流程圖來表達。繪制流程圖有什么用呢铐料？流程圖可以清晰地表現(xiàn)出用戶完成一個任務所要經(jīng)歷的各種步驟和操作渐裂。它就像一張地圖，表現(xiàn)出功能的前進路線钠惩。交互設計師畫出流程圖柒凉，第一，可以保證用戶所經(jīng)歷的流程是明確妻柒、清晰扛拨、簡單的——當我們畫出了流程圖，設計師就可以對功能的流程有更清晰的認識和把控举塔，便于發(fā)現(xiàn)流程里的問題绑警；第二，流程圖可以保障我們的交互方案邏輯清晰央渣，結構完整计盒。流程圖給出了功能的骨架。有了流程圖芽丹，設計師只需要將流程里的每一步北启，用具體的頁面表現(xiàn)出來，就可以得到一份質(zhì)量很高的交互稿拔第。所以咕村，一個好的流程圖是一個好的交互方案的前提。

另外蚊俺，流程圖對于開發(fā)和測試同事懈涛，也有很大的幫助：流程圖可以清晰地表達出實現(xiàn)一個功能的邏輯順序，方便開發(fā)的同事寫代碼時抓住脈絡泳猬，也方便測試同學在測試的時候有跡可循批钠。

原則

在畫流程圖的時候，我們只需要表現(xiàn)三種元素：界面得封、動作埋心、條件。比如如下這個登錄流程：

需要注意的是忙上，除非有特殊情況拷呆，否則除了以上三種元素，一般不添加別的元素。比如下面的三個反例：

1. 在流程圖里茬斧，只畫界面邏輯箫柳，不要畫內(nèi)部算法邏輯，因為這些用戶不必care啥供，加上它們只會影響你的設計思路。比如下圖中紅色的部分是不必要的库糠，需要刪掉：

2.不要把步驟和界面本身都表現(xiàn)出來伙狐，應該只表達界面。需要注意的是瞬欧，找出流程圖每個界面應該包含的元素贷屎，以及設計要點，是畫完流程圖應該做的工作艘虎。這可以為后續(xù)設計界面服務唉侄。你可以在畫流程圖的時候同時標出設計要點，但是我還是建議先畫出流程圖野建，再標出要點属划。這樣可以保證你的設計思路是清晰的、不被打擾的候生。下圖中紅框的部分應該合并為“登錄頁”：

3. 一般來說同眯，流程圖里只表現(xiàn)界面，不表達界面中出現(xiàn)的錯誤提示等信息唯鸭。當然须蜗，如果你覺得標出錯誤提示可以幫助你完成后面的交互原型，也可以這樣做目溉。但是由于每一步其實都有可能出錯明肮，所以這樣很可能會使整個流程圖變得很龐大和復雜。

案例

下面我們通過一個理財應用續(xù)約的功能缭付，來進一步說明一下如何設計一個流程柿估，如何畫一個流程圖。

現(xiàn)在某理財應?用要做?一個續(xù)約的功能,主要針對購買的理財產(chǎn)品將要到期的?用戶蛉腌，提醒他們可以續(xù)約官份。提供的續(xù)約信息包括?用作續(xù)約的本?金，續(xù)約?方式（本息續(xù)約）烙丛，預期增加收益舅巷，續(xù)約期限，續(xù)約后的到期?日河咽，續(xù)約說明钠右。續(xù)約操作后需要審核，審核?一般需要1~2?小時忘蟹，通過后會有短信通知飒房。

由于續(xù)約能夠給公司帶來不少收益搁凸，因此希望?用戶在操作上?比較流暢，保證不會因為操作?而流失?用戶狠毯。

首先分析一下护糖，這個功能的目標用戶，是那些已經(jīng)購買了理財嚼松，并且理財產(chǎn)品將要到期的用戶嫡良。

本文為小密圈“交互小殿堂”本周主題“場景思維”的節(jié)選內(nèi)容。文章后半部分將介紹流程的完整性献酗。感興趣的朋友可加入小密圈“交互小殿堂”查看原文寝受。

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

交互小殿堂設置了6個主題，幫助你系統(tǒng)學習交互：

- 場景思維（2周）

- 心理模型（1周）

- 流程設計（5周）

- 正確使用控件（15周）

- 測試方案（3周）

- 用研（3周）

以上這些專題罕偎，將每周固定發(fā)布在我的小密圈“交互小殿堂”很澄。

同時，為了讓大家更好地掌握每周的專題颜及，安排每周的計劃如下：

- 周一在小密圈“交互小殿堂”獨家發(fā)布一篇主文甩苛，介紹本周主題；

- 周二至周五解答圈友們關于本周主題的問題俏站；

- 周六分享優(yōu)秀交互設計案例浪藻，并帶領大家解析設計亮點；

- 周日總結本周所學乾翔。

6個專題結束后爱葵，會為大家提供7個需求，供大家實戰(zhàn)反浓，鍛煉之前學到的技能萌丈。

具體的安排如下：

第一周，給出需求說明和重點提示雷则；

第一周剩下的幾天以及第二周辆雾，大家根據(jù)需求進行交互方案設計；

第三周集中點評大家的方案月劈，給出建議度迂。

歡迎加入，和大家一起系統(tǒng)學習交互猜揪。

加入小密圈方法

方法一：可保存下面的二維碼到相冊惭墓，然后使用微信“掃一掃”→“從相冊選取二維碼”。注：長按識別二維碼會出bug而姐，導致無法支付（攤手）腊凶。

方法二：點擊鏈接加入http://t.xiaomiquan.com/MBiq7qV

現(xiàn)在圈子剛剛建立，實行短暫優(yōu)惠：

兩人一起報名，享8折優(yōu)惠钧萍；

三人一起報名褐缠，享7折優(yōu)惠；

四人一起報名风瘦，享6折優(yōu)惠队魏；

五人及五人以上一起報名，享5折優(yōu)惠万搔；