在用戶體驗設(shè)計領(lǐng)域，設(shè)計師常常用流程圖的方法進行需求解析，任務(wù)描述，所有情況羅列、發(fā)掘新設(shè)計點等。流程圖是非常有效的將需求轉(zhuǎn)化為具體設(shè)計稿的思考工具。本文中，小可將會結(jié)合自己的經(jīng)歷，來講下用戶體驗設(shè)計中流程圖（UX Flowchart）的運用。

歡迎關(guān)注點融設(shè)計中心DDC微信公眾號（微信ID：DR_DDC）

5分鐘也可以學(xué)會這些常識：

1. 《設(shè)計師最好知道一下的用戶體驗術(shù)語小科普》
2. 《新人入門教材！風光后期術(shù)語全方位科普（一）》
3. 《術(shù)語小科普！聊聊線框稿、視覺稿與原型的區(qū)別》

最早關(guān)于流程圖的概念由Frank 和 Lillian Gilbreth 在1921年美國機械工程師社團（American Society of Mechanical Engineers）的《流程圖：尋找工作最有途徑的第一步》（“ProcessCharts: First Steps in Findingthe One Best Way to do Work”）演講中提出【1】。隨著在工程領(lǐng)域中的逐漸推廣和運用，流程圖（Flowchart）已經(jīng)成為描述計算機算法的常用工具之一。

流程圖中的常用圖形

流程線（FlowLine）是單箭頭線，起始于一個圖形，終止于另一個圖形，代表了流程的流轉(zhuǎn)。通常用實線表示，在多任務(wù)間跳轉(zhuǎn)或次要流程流轉(zhuǎn)時，也可以使用虛線表示。

起終點（Terminal）可以用圓型、橢圓或圓角矩形來畫，通常寫著“開始”、“結(jié)束”，或其他代表流程結(jié)束的短語，如“提交信息”等。

操作（Process）用矩形表示，指某件事發(fā)生了、做了什么操作等，如“輸入身份證號”、“查詢交易記錄”等。

條件判斷（Decision）在多情景中，需要進行條件判斷，用菱形表示。一般來說，條件判斷多為是與非（或?qū)εc錯）的結(jié)果，于是就有兩條流程線從條件判斷中流轉(zhuǎn)出，通常正面回答的流程線從下方流轉(zhuǎn)出，負面回答的流程線從右側(cè)流轉(zhuǎn)出。每條流轉(zhuǎn)出的流程先必須標明判斷結(jié)果（即是或非）。當然也會存在多種判斷結(jié)果的情況，這時候會有多條流轉(zhuǎn)出的流程線，注意標注清楚每條流程線上的適用條件。在這種情況下，要特別注意是否遺漏某些條件，所以建議將復(fù)雜的條件判斷，拆分為多個二元判斷的組合，這對于后續(xù)對外溝通、自我檢查來說也更加友好。

預(yù)定義操作（PredefinedProcess）用左右雙線的矩形表示。在一些復(fù)雜流程中，有些復(fù)雜模塊可以單獨進行詳述，此時在主流程中，就可以使用預(yù)定義操作模塊進行指代，并在其他地方進行詳述。

以上五種是流程圖中最最基礎(chǔ)的常用圖形，對于設(shè)計師來說，也基本夠用了。在學(xué)習(xí)完基本功后，你就可以進行自我修行了?。ú回撠熑蔚淖髡甙∥筼(+一︿一)o）

一個小練習(xí)?

好了，那我們來做一個小練習(xí)——最常見的登錄功能。這，似乎看起來很簡單。于是有了以下這張流程圖：

似乎并沒有什么問題。但是（記住，通常每個“似乎”都有一個“但是”在等TA），這里的登錄要素只考慮了手機號+密碼一種方式，是否滿足需求呢？為什么沒有郵箱登錄？昵稱登錄？手機號+短信驗證碼登錄？繼續(xù)看第一步輸入手機號，是否會存在手機號格式錯誤、手機號未注冊的情況？系統(tǒng)是否有必要對手機號進行單獨檢驗？如果單獨檢驗，會不會有什么安全隱患？不檢驗，是否體驗友好？如何進行評估？其中的操作、判斷是由用戶來做還是系統(tǒng)來做？系統(tǒng)做的話，是前端還是后端做呢？用戶忘記了密碼怎么辦？等等等等?？此坪唵蔚牡卿浟鞒蹋谷粫绱藸顩r百出。

這里分享幾條我畫流程圖的心得體會：

面向操作的流程圖?不同的學(xué)科、不同的人都有不同的畫流程圖偏好。有些人喜歡面向頁面的流程圖，有些人偏愛面向狀態(tài)的流程圖，而我更傾向面向操作的流程圖畫法，這樣做可以更聚焦在任務(wù)本身，排除界面元素干擾，（具體界面設(shè)計應(yīng)在流程圖的基礎(chǔ)上進行后續(xù)的深入）。

由繁入簡?在剛開始訓(xùn)練的時候，建議盡可能地將流程圖畫細，每一個操作每一次判斷都詳細畫出，能拆分的情況都進行拆分，思考盡可能地全面。

站在不同的角色角度進行思考?在畫流程圖的時候，應(yīng)當多思考各項操作、判斷的操作者是誰，是系統(tǒng)還是用戶，并用不同顏色（或其他方式）標明。

不同情況全覆蓋?對照流程圖檢驗是否滿足所有情況。最簡單的檢驗原則就是每條路都應(yīng)該走得通，都有開始和結(jié)束的點而非莫名終端，每個判斷都至少有兩條流轉(zhuǎn)出的路。

發(fā)掘新設(shè)計點?在流程圖中，可以這樣問自己，會不會有無法進行某操作的情況？在每一種發(fā)生錯誤的時候，是否有對應(yīng)的設(shè)計對策？如在登錄的任務(wù)中，就發(fā)掘出了用戶忘記密碼的情況。

基于以上考慮，我們來優(yōu)化下登錄功能的流程圖，假設(shè)這里的登錄方式僅允許手機號+密碼一種方式：

注意，因為涉及到“注冊”、“忘記密碼”兩種新的情況，所以在這里限于篇幅，就用虛線流轉(zhuǎn)線、預(yù)定義操作的圖形來簡述。若要具體展開，那就是一整套的登錄/注冊咯~

關(guān)于流程圖的學(xué)習(xí)就先講到這里。

流程圖的練習(xí)是一個熟能生巧的過程，記?。赫驹诓煌巧嵌榷嗨伎?、勤練習(xí)多推敲、覆蓋全情況、發(fā)掘新設(shè)計點。相信在經(jīng)過嚴謹?shù)挠?xùn)練之后，面對再復(fù)雜的需求也能夠游刃有余化繁為簡了。

「優(yōu)設(shè)有不少內(nèi)部資料，挑幾個好的給大家」

1. 網(wǎng)易內(nèi)部設(shè)計規(guī)范：《內(nèi)部教程！超實用6步透視網(wǎng)易設(shè)計規(guī)范（附完整PDF下載）》
2. 臉書內(nèi)部的互評過程：《內(nèi)部傳統(tǒng)項目！揭秘FACEBOOK 設(shè)計互評的實戰(zhàn)過程》
3. 公司內(nèi)部的交互設(shè)計培訓(xùn)：《內(nèi)部培訓(xùn)資料！幫你從零開始掌握交互設(shè)計的學(xué)習(xí)筆記》

歡迎關(guān)注點融設(shè)計中心DDC微信公眾號（微信ID：DR_DDC）：

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com