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

用戶流程設(shè)計(jì)，是用戶與產(chǎn)品互動(dòng)的內(nèi)在交互邏輯，用戶能感受到，但卻不能直觀地看見(jiàn)，它通常是以用戶流程圖的形式進(jìn)行輸出和呈現(xiàn)，多用于項(xiàng)目團(tuán)隊(duì)內(nèi)部進(jìn)行溝通。

好的用戶流程設(shè)計(jì)不僅能夠幫助用戶完成目標(biāo)，而且還能給用戶帶來(lái)愉悅甚至驚喜。交互設(shè)計(jì)是對(duì)用戶行為的設(shè)計(jì)，而流程設(shè)計(jì)，核心就是用戶與產(chǎn)品互動(dòng)的行為步驟和順序，所以想要做好交互設(shè)計(jì)，必須要打好流程設(shè)計(jì)的基本功。

因?yàn)榱鞒淘O(shè)計(jì)的表現(xiàn)載體是流程圖，所以我們就從流程圖開(kāi)始入手學(xué)習(xí)，把看不見(jiàn)的流程可視化，方便我們學(xué)習(xí)和交流：

圖 1 流程圖的定義

流程圖，是以特定的圖形符號(hào)+輔助說(shuō)明，表示某一任務(wù)過(guò)程的具體步驟和方向的圖。一般包括起始、輸入、判斷、處理、輸出與終結(jié)等基本節(jié)點(diǎn)及執(zhí)行邏輯。

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

為了便于識(shí)別，繪制流程圖有約定俗成的圖形符號(hào)：以圓角矩形表示"開(kāi)始"與"結(jié)束"，矩形表示行動(dòng)方案、普通工作環(huán)節(jié)，菱形表示問(wèn)題判斷或判定環(huán)節(jié)，用平行四邊形表示輸入輸出，箭頭代表工作流方向等。

圖 2 流程圖的繪制規(guī)則

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

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

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

用戶流程圖是指用戶為了達(dá)成某個(gè)目標(biāo)，而與產(chǎn)品交互的步驟及順序的圖。

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

在交互工作中，設(shè)計(jì)師通常會(huì)繪制 2 種用戶流程圖：

1. 抽象的符號(hào)流程圖：采用約定俗成的流程圖符號(hào)，表示用戶與產(chǎn)品互動(dòng)的流程。
2. 具象的頁(yè)面流程圖：采用用戶真實(shí)可見(jiàn)的界面，表示用戶與產(chǎn)品互動(dòng)的流程。

后者更直觀好理解，比較適合流程少且步驟相對(duì)短的流程；前者更抽象概括，在表現(xiàn)復(fù)雜的多步驟多分支的流程更有優(yōu)勢(shì)。

當(dāng)我們進(jìn)行用戶流程的全局梳理及思考迭代時(shí)，我更建議用抽象的符號(hào)流程圖，這樣會(huì)減少頁(yè)面細(xì)節(jié)的干擾，讓我們聚焦到更本質(zhì)的流程思考中，所以本文用戶流程設(shè)計(jì)，也是以符號(hào)流程圖為載體向大家進(jìn)行介紹。

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

用戶流程圖屬于交互文檔的一部分，當(dāng)我們從 0 到 1 構(gòu)建某個(gè)任務(wù)流程，或者對(duì)某個(gè)流程進(jìn)行整體優(yōu)化時(shí)，一般建議繪制用戶流程圖，以便更直觀的展現(xiàn)用戶與產(chǎn)品互動(dòng)的具體步驟和順序。

繪制流程圖對(duì)設(shè)計(jì)師來(lái)講有 4 大價(jià)值：

圖 4 用戶流程圖的價(jià)值

① 認(rèn)清現(xiàn)況。

當(dāng)我們接觸新項(xiàng)目或新功能時(shí)，將現(xiàn)有用戶流程繪制出來(lái)，可以讓我們對(duì)全局流程有更清楚的認(rèn)識(shí)，否則隨著步驟的增加，大腦的工作記憶會(huì)不足以支撐我們認(rèn)知、記憶和理解。

② 流程優(yōu)化。

通過(guò)對(duì)流程圖的全局審視和競(jìng)品對(duì)比，可以幫助我們快速發(fā)現(xiàn)現(xiàn)有流程中存在的問(wèn)題，同時(shí)可視化的呈現(xiàn)方式也更有利于激發(fā)我們創(chuàng)新流程設(shè)計(jì)的想法。

③ 避免遺漏。

有完整的用戶流程圖打底，可以保證我們后續(xù)在設(shè)計(jì)具體界面和細(xì)節(jié)時(shí)，沒(méi)有遺漏，各種情況都考慮到。

④ 高效溝通。

當(dāng)我們將新舊流程優(yōu)化后，流程圖可以更直觀地向團(tuán)隊(duì)傳達(dá)流程差異，團(tuán)隊(duì)溝通效率更高。

3. How | 如何進(jìn)行用戶流程設(shè)計(jì)

我把用戶流程設(shè)計(jì)過(guò)程拆分成了 4 大步：

圖 5 用戶流程的設(shè)計(jì)步驟

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

① 定義流程圖符號(hào)

作為設(shè)計(jì)師，一般不會(huì)直接用軟件中的形狀來(lái)繪制流程圖（確實(shí)有點(diǎn)丑），但要注意不能對(duì)形狀樣式改變太大，徒增團(tuán)隊(duì)成員認(rèn)知成本。同時(shí)，也要考慮到并不是所有項(xiàng)目成員都接觸過(guò)流程圖，所以依然要對(duì)你的流程圖符號(hào)進(jìn)行圖例解釋，保證大家都能理解流程圖中每個(gè)節(jié)點(diǎn)的涵義。

給大家看一下我自己常用到的流程圖符號(hào)：

圖 6 用戶流程圖常用符號(hào)

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

② 繪制主流/核心流程

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

圖 7 搜索的核心流程

用戶想要在瀏覽器中進(jìn)行搜索，需要經(jīng)歷點(diǎn)擊瀏覽器→點(diǎn)擊搜索框→手動(dòng)輸入→點(diǎn)擊搜索→點(diǎn)擊結(jié)果，這幾步核心操作才能達(dá)成目標(biāo)。

③ 思考替代流程

現(xiàn)有/理想流程繪制完成之后，審視起點(diǎn)（啟動(dòng)瀏覽器）和終點(diǎn)（找到想要的結(jié)果），思考為了達(dá)成目標(biāo)，是否有其他（更快捷的）流程呢？

這一步會(huì)比較難，所以很容易被設(shè)計(jì)師跳過(guò)，因?yàn)椴⒉皇敲看嗡伎级紩?huì)有結(jié)果。但這一步其實(shí)更有價(jià)值和意義，只有我們時(shí)刻都想著這一步的優(yōu)化，才有可能產(chǎn)生創(chuàng)意頓悟，萌生新的解決方案。所以建議大家一定要多花點(diǎn)時(shí)間，持續(xù)思考，頭腦里思考得多，排列組合得多，某個(gè)對(duì)的組合就更有可能快速閃現(xiàn)。

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

圖 8 QQ 的一鍵消除所有未讀消息的流程設(shè)計(jì)

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

再比如登錄流程，本機(jī)號(hào)碼一鍵登錄也是一種非常創(chuàng)新的方式：

圖 9 本機(jī)號(hào)碼一鍵登錄的流程設(shè)計(jì)

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

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

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

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

圖 10 語(yǔ)音搜索流程

圖 11 網(wǎng)址搜索流程

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

我們可以像淘寶首頁(yè)的搜索框一樣，直接在框內(nèi)猜測(cè)用戶可能會(huì)感興趣的搜索詞，并提供搜索按鈕，這樣用戶就可以通過(guò)一步點(diǎn)擊搜索得到相應(yīng)的結(jié)果。

圖 12 推薦詞搜索流程

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

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

圖 13 自動(dòng)恢復(fù)流程

大家可以參考《一個(gè)公式教你搞定場(chǎng)景化設(shè)計(jì)》中提到的場(chǎng)景因素，從不同的角度出發(fā)，思考是否有新的流程和方式可以幫助用戶更快捷地達(dá)成目標(biāo)。

④ 優(yōu)化現(xiàn)有流程。

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

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

我們通過(guò)替代流程的方式，實(shí)現(xiàn)了流程的場(chǎng)景化和多樣化，接下來(lái)的任務(wù)就是逐一地去打磨每一條流程，提升每條流程的轉(zhuǎn)化率。

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

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

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

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

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

答案是搜索聯(lián)想詞。通過(guò)關(guān)鍵詞自動(dòng)匹配輸入聯(lián)想，可以讓用戶盡可能少的進(jìn)行文本輸入。

圖 15 聯(lián)想詞搜索流程

那除了聯(lián)想詞還有什么方法能夠讓用戶更快地達(dá)成目標(biāo)呢？

答案是即時(shí)搜索。伴隨用戶的輸入，不僅出聯(lián)想詞，而且也出最有可能命中用戶需求的搜索結(jié)果卡片，讓用戶可以通過(guò)點(diǎn)擊卡片，一鍵直達(dá)搜索結(jié)果頁(yè)。

圖 16 聯(lián)想卡片搜索流程

那到了搜索結(jié)果頁(yè)，還有沒(méi)有方法可以縮短用戶操作路徑呢？

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

圖 17 框計(jì)劃搜索流程

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

圖 19 全局搜索流程示意圖

好了，用戶流程設(shè)計(jì)到這里就結(jié)束了，希望這次搜索的案例，能夠給你一些啟發(fā)，讓你有思路迭代你的用戶流程設(shè)計(jì)，為用戶帶來(lái)更方便快捷的流程體驗(yàn)。

作者：悅姐聊設(shè)計(jì)