用3個步驟，手把手幫你掌握用戶流程設計

編者按：本文從用戶流程設計的定義、為什么要做用戶流程設計以及如何做用戶流程設計3個方面，幫你掌握用戶流程設計。

用戶流程設計，是用戶與產品互動的內在交互邏輯，用戶能感受到，但卻不能直觀地看見，它通常是以用戶流程圖的形式進行輸出和呈現，多用于項目團隊內部進行溝通。

好的用戶流程設計不僅能夠幫助用戶完成目標，而且還能給用戶帶來愉悅甚至驚喜。交互設計是對用戶行為的設計，而流程設計，核心就是用戶與產品互動的行為步驟和順序，所以想要做好交互設計，必須要打好流程設計的基本功。

因為流程設計的表現載體是流程圖，所以我們就從流程圖開始入手學習，把看不見的流程可視化，方便我們學習和交流：

圖 1 流程圖的定義

流程圖，是以特定的圖形符號+輔助說明，表示某一任務過程的具體步驟和方向的圖。一般包括起始、輸入、判斷、處理、輸出與終結等基本節點及執行邏輯。

比如把大象放入冰箱的 3 步流程，我們就可以用上圖所示的符號、文字和箭頭來表達。

為了便于識別，繪制流程圖有約定俗成的圖形符號：以圓角矩形表示“開始”與“結束”，矩形表示行動方案、普通工作環節，菱形表示問題判斷或判定環節，用平行四邊形表示輸入輸出，箭頭代表工作流方向等。

圖 2 流程圖的繪制規則

還是以把大象放進冰箱的流程為例，在把大象放進冰箱前，我們需要先判斷一下冰箱是否能裝下大象，能則開始裝，不能則找一個更大的冰箱或者尋求其他解決方法。

下面我們就切入正題，講講跟用戶行為密切相關的用戶流程圖。

1. What | 什么是用戶流程圖？

用戶流程圖是指用戶為了達成某個目標，而與產品交互的步驟及順序的圖。

圖 3 用戶流程圖的定義和示意

在交互工作中，設計師通常會繪制 2 種用戶流程圖：

1. 抽象的符號流程圖：采用約定俗成的流程圖符號，表示用戶與產品互動的流程。
2. 具象的頁面流程圖：采用用戶真實可見的界面，表示用戶與產品互動的流程。

后者更直觀好理解，比較適合流程少且步驟相對短的流程；前者更抽象概括，在表現復雜的多步驟多分支的流程更有優勢。

當我們進行用戶流程的全局梳理及思考迭代時，我更建議用抽象的符號流程圖，這樣會減少頁面細節的干擾，讓我們聚焦到更本質的流程思考中，所以本文用戶流程設計，也是以符號流程圖為載體向大家進行介紹。

2. Why | 為什么要繪制用戶流程圖？

用戶流程圖屬于交互文檔的一部分，當我們從 0 到 1 構建某個任務流程，或者對某個流程進行整體優化時，一般建議繪制用戶流程圖，以便更直觀的展現用戶與產品互動的具體步驟和順序。

繪制流程圖對設計師來講有 4 大價值：

圖 4 用戶流程圖的價值

① 認清現況。

當我們接觸新項目或新功能時，將現有用戶流程繪制出來，可以讓我們對全局流程有更清楚的認識，否則隨著步驟的增加，大腦的工作記憶會不足以支撐我們認知、記憶和理解。

② 流程優化。

通過對流程圖的全局審視和競品對比，可以幫助我們快速發現現有流程中存在的問題，同時可視化的呈現方式也更有利于激發我們創新流程設計的想法。

③ 避免遺漏。

有完整的用戶流程圖打底，可以保證我們后續在設計具體界面和細節時，沒有遺漏，各種情況都考慮到。

④ 高效溝通。

當我們將新舊流程優化后，流程圖可以更直觀地向團隊傳達流程差異，團隊溝通效率更高。

3. How | 如何進行用戶流程設計

我把用戶流程設計過程拆分成了 4 大步：

圖 5 用戶流程的設計步驟

1. 定義流程圖符號，這是我們表達用戶流程的工具。
2. 用流程符號，繪制用戶完成目標的主流/核心流程。
3. 審視流程的起點和終點，思考在現有流程外，有哪些流程可以替代現有流程，讓用戶一步直達或者通過其他路徑更快捷地達成目標。
4. 回顧每條流程，逐一審視流程的每一步，思考在現有流程下，如何能降低用戶操作成本，更快捷地幫助用戶達成目標。

① 定義流程圖符號

作為設計師，一般不會直接用軟件中的形狀來繪制流程圖（確實有點丑），但要注意不能對形狀樣式改變太大，徒增團隊成員認知成本。同時，也要考慮到并不是所有項目成員都接觸過流程圖，所以依然要對你的流程圖符號進行圖例解釋，保證大家都能理解流程圖中每個節點的涵義。

給大家看一下我自己常用到的流程圖符號：

圖 6 用戶流程圖常用符號

我保留了圓角矩形、矩形、菱形、箭頭的基本涵義，并增加了一個頁面節點，就像我之前表達用戶旅程圖中的行為一樣，我認為頁面節點可以將操作節點場景化，更易于還原用戶的線上使用場景（非必須，大家也可以不用頁面節點）。同時我還為不同的節點賦予了不同的顏色，方便大家通過顏色及形狀快速識別起始節點和中間節點。

② 繪制主流/核心流程

如果是已有的產品，則按照用戶操作步驟，用流程圖符號逐一繪制核心流程，如果是規劃中的產品，則繪制出你規劃的核心流程。我還是以瀏覽器搜索為例：

圖 7 搜索的核心流程

用戶想要在瀏覽器中進行搜索，需要經歷點擊瀏覽器→點擊搜索框→手動輸入→點擊搜索→點擊結果，這幾步核心操作才能達成目標。

③ 思考替代流程

現有/理想流程繪制完成之后，審視起點（啟動瀏覽器）和終點（找到想要的結果），思考為了達成目標，是否有其他（更快捷的）流程呢？

這一步會比較難，所以很容易被設計師跳過，因為并不是每次思考都會有結果。但這一步其實更有價值和意義，只有我們時刻都想著這一步的優化，才有可能產生創意頓悟，萌生新的解決方案。所以建議大家一定要多花點時間，持續思考，頭腦里思考得多，排列組合得多，某個對的組合就更有可能快速閃現。

全新的替代流程，往往非常具有創新性。比如我們之前提到的 QQ 的一鍵消除所有未讀消息的設計：

圖 8 QQ 的一鍵消除所有未讀消息的流程設計

把原來至少 2 步，最多 2N 步的操作步驟，縮減為極致的一步，真的讓用戶大快人心，爽感爆棚。

再比如登錄流程，本機號碼一鍵登錄也是一種非常創新的方式：

圖 9 本機號碼一鍵登錄的流程設計

把原來繁瑣的登錄流程也縮減為極致的一步，也大大提升了用戶的登錄意愿和產品的登錄完成率。

回到我們的瀏覽器搜索場景，除了前面提到的文本搜索的典型搜索流程，還有什么便捷的流程替代方式呢?大家可以先思考 1 分鐘，看看你能想到幾種？窮盡思考之后再往下接著看？

————————我是思考的分界線，不要忽略我，先想想哦———————

我相信大家很容易想到語音或者圖片搜索的這種方式，我們可以把這算做第一類：

圖 10 語音搜索流程

那除了語音/圖片搜索還有更快捷的搜索方式嗎？

我們可以回顧一下《一個公式教你搞定場景化設計》中提到的前置行為角度，如果我們檢測到用戶剛剛復制了某個網址，那當用戶打開瀏覽器時，我們是有非常大信心認為用戶是要打開網址的，那我們可以在首頁出現一個打開復制網址的提示，從而實現一鍵打開結果詳情頁的設計。

圖 11 網址搜索流程

還有更快捷的搜索方式嗎？

我們可以像淘寶首頁的搜索框一樣，直接在框內猜測用戶可能會感興趣的搜索詞，并提供搜索按鈕，這樣用戶就可以通過一步點擊搜索得到相應的結果。

圖 12 推薦詞搜索流程

還有更快捷的搜索方式嗎？

移動場景下用戶使用任何產品都是碎片化的，隨時都有可能被外界干擾所中斷，如果用戶正在瀏覽某個結果頁的時候，一個電話進來，用戶接通電話之后又在手機上處理了幾個別的事物，然后才想起來剛剛的搜索結果沒有看完，這時候瀏覽器在后臺的進程可能已經死掉了，用戶再打開瀏覽器就需要再重新就進行前面的搜索行為（這種情況在瀏覽器中概率非常大，因為歷史記錄詞的搜索占比能達到 20%~30%）所以類似這種用戶并非主動退出結果頁的流程，如果下次用戶打開瀏覽器時能做到自動恢復上次的結果頁，基本上就實現了 0 步直達搜索結果頁，這應該算是最快捷的結果直達方式，已經跳出了搜索這條路徑了。

圖 13 自動恢復流程

大家可以參考《一個公式教你搞定場景化設計》中提到的場景因素，從不同的角度出發，思考是否有新的流程和方式可以幫助用戶更快捷地達成目標。

④ 優化現有流程。

總目標=目標 1(A1 * X1%)+目標 2(A2 * X2%)+……+目標N(An * Xn%)

要達成某個目標，可以將達成方式分解成 N 種渠道（N 種流程），分別用 A1,A2…An表示，每種渠道的完成率用Xn表示（乘法拆解），那么各個渠道的累加完成量就是總的目標值。

我們通過替代流程的方式，實現了流程的場景化和多樣化，接下來的任務就是逐一地去打磨每一條流程，提升每條流程的轉化率。

我們還以典型的文本搜索流程為例，如何去提升這個流程的轉化率呢？

我們可以通過提供歷史記錄、猜你想搜等模塊，幫助用戶一步直達搜索結果。

圖 14 歷史記錄/猜你想搜搜索流程

這一步要考慮的是如何提升歷史記錄和猜你想搜的命中率，主要通過提升算法和增加數量的方式來達成。

如果一定需要用戶輸入的話，除了提供前面的提到的語音/圖片的搜索方式外，還有什么方式可以減少輸入成本呢？

答案是搜索聯想詞。通過關鍵詞自動匹配輸入聯想，可以讓用戶盡可能少的進行文本輸入。

圖 15 聯想詞搜索流程

那除了聯想詞還有什么方法能夠讓用戶更快地達成目標呢？

答案是即時搜索。伴隨用戶的輸入，不僅出聯想詞，而且也出最有可能命中用戶需求的搜索結果卡片，讓用戶可以通過點擊卡片，一鍵直達搜索結果頁。

圖 16 聯想卡片搜索流程

那到了搜索結果頁，還有沒有方法可以縮短用戶操作路徑呢？

百度給出答案是框計劃，直接在搜索結果第一位顯示用戶需要的詳情信息，讓用戶在信息結果頁即滿足需求，而不需要進詳情頁查看。

圖 17 框計劃搜索流程

以上都是圍繞文本搜索，業界已經給出的一些減少操作步驟的具體實踐，如果我們將所有替代流程和優化流程，再加上判斷條件繪制到一起，就形成了一張全局的用戶搜索流程圖（僅作示意，真實的瀏覽器用戶搜索流程比這更復雜）：

圖 19 全局搜索流程示意圖

好了，用戶流程設計到這里就結束了，希望這次搜索的案例，能夠給你一些啟發，讓你有思路迭代你的用戶流程設計，為用戶帶來更方便快捷的流程體驗。

歡迎關注作者微信公眾號：「悅姐聊設計」