//寫(xiě)在前面：
適合人群：
視覺(jué)轉(zhuǎn)交互 / UI Designer 想懂交互邏輯 / 想寫(xiě)出好交互文檔的新手
內(nèi)容結(jié)構(gòu)：
-
流程圖是什么，不是畫(huà)圖，是表達(dá)“用戶(hù)怎么一步步完成目標(biāo)”
-
流程圖包含什么組成？（觸發(fā)—操作—反饋）
-
初學(xué)者常犯的理解誤區(qū)：關(guān)注畫(huà)面，不關(guān)注“操作過(guò)程”
-
拆解一個(gè)真實(shí)任務(wù)流（比如“預(yù)定會(huì)議室”/“注冊(cè)賬號(hào)”）
-
如何從用戶(hù)目標(biāo)出發(fā)，寫(xiě)出一張不依賴(lài)原型圖的流程清單
-
總結(jié)一套“新手流程圖五步法”
很多初入交互設(shè)計(jì)的小伙伴，都會(huì)聽(tīng)到一個(gè)建議：“先從畫(huà)流程圖開(kāi)始。”
但流程圖到底**畫(huà)什么？表達(dá)什么？**為什么它對(duì)交互設(shè)計(jì)那么關(guān)鍵？
今天這篇文章，我們就來(lái)系統(tǒng)梳理這件事，并教你如何用純文字也能表達(dá)出完整的用戶(hù)任務(wù)流程。
流程圖是什么，不是畫(huà)圖，是表達(dá)“用戶(hù)怎么一步步完成目標(biāo)”
流程圖（User Flow）的本質(zhì)，不是圖，而是一條用戶(hù)的操作路徑。
你可以把它理解為一張“任務(wù)執(zhí)行地圖”：
它不是設(shè)計(jì)頁(yè)面樣子，不是決定按鈕放哪里，而是回答一個(gè)核心問(wèn)題：用戶(hù)是怎么一步步完成這件事的？
舉個(gè)例子：
當(dāng)你用滴滴打車(chē)的流程，其實(shí)是：
markdown
復(fù)制編輯
1. 打開(kāi)App → 看到“打車(chē)”入口 2. 輸入起點(diǎn)和終點(diǎn) 3. 選擇車(chē)型 → 確認(rèn)訂單 4. 等待司機(jī)接單 → 上車(chē) 5. 到達(dá)目的地 → 支付 → 評(píng)價(jià)
這其實(shí)就是一張流程圖的雛形。
流程圖包含什么組成？用三段式理解（觸發(fā) → 執(zhí)行 → 反饋）
為了讓新手更容易掌握，我們可以把一個(gè)用戶(hù)流程拆成以下三段：
| 階段 |
說(shuō)明 |
關(guān)鍵點(diǎn) |
| 觸發(fā) Trigger |
用戶(hù)產(chǎn)生動(dòng)機(jī)/看到入口 |
任務(wù)從哪里開(kāi)始？入口清晰嗎？ |
| 執(zhí)行 Action |
用戶(hù)一步步完成操作 |
步驟順暢嗎？邏輯連貫嗎？ |
| 反饋 Feedback |
系統(tǒng)響應(yīng)結(jié)果 |
是否完成目標(biāo)？有沒(méi)有確認(rèn)提示？ |
這三段不是理論，而是你畫(huà)流程、寫(xiě)文檔時(shí)必須考慮的三個(gè)設(shè)計(jì)面。
初學(xué)者常犯的誤區(qū)：關(guān)注“頁(yè)面”，而忽略“操作過(guò)程”
很多設(shè)計(jì)小白在學(xué)習(xí)初期，習(xí)慣一上來(lái)就畫(huà)界面、堆按鈕。
但問(wèn)題是——你連用戶(hù)要做什么都沒(méi)搞清楚，怎么知道該放什么控件？
典型誤區(qū)：
正確思維應(yīng)該是：
“用戶(hù)要完成一件事 → 他需要經(jīng)過(guò)哪幾步 → 每一步中他需要系統(tǒng)給什么？”
拆解一個(gè)真實(shí)任務(wù)流示例：「預(yù)約會(huì)議室」
我們以一個(gè)企業(yè)內(nèi)部系統(tǒng)中的真實(shí)任務(wù)流為例：
用戶(hù)目標(biāo)：預(yù)約明天下午的會(huì)議室開(kāi)會(huì)
用戶(hù)流程拆解：
markdown
復(fù)制編輯
1. 登錄系統(tǒng) → 首頁(yè)選擇“會(huì)議室預(yù)約”入口 2. 選擇日期 → 選擇時(shí)間段（如14:00-15:00） 3. 選擇會(huì)議室（系統(tǒng)過(guò)濾出可用的） 4. 填寫(xiě)用途說(shuō)明 → 提交預(yù)約 5. 顯示預(yù)約成功提示 → 可查看預(yù)約記錄
這張流程圖體現(xiàn)的設(shè)計(jì)思考包括：
如何從用戶(hù)目標(biāo)出發(fā)，寫(xiě)出一張不依賴(lài)原型圖的流程清單
很多人以為流程圖就必須要“畫(huà)”，但對(duì)于剛?cè)腴T(mén)的同學(xué)，用文字寫(xiě)出一張流程清單，已經(jīng)很強(qiáng)了！
操作方法：
以“注冊(cè)賬號(hào)”為例，試著這樣寫(xiě)清楚流程：
markdown
復(fù)制編輯
【用戶(hù)目標(biāo)】注冊(cè)一個(gè)新賬號(hào)
【觸發(fā)入口】 - 打開(kāi)App → 點(diǎn)擊“注冊(cè)”
【執(zhí)行過(guò)程】 1. 輸入手機(jī)號(hào) 2. 獲取驗(yàn)證碼 → 系統(tǒng)發(fā)送 3. 輸入驗(yàn)證碼 → 系統(tǒng)校驗(yàn) 4. 設(shè)置密碼 5. 勾選用戶(hù)協(xié)議 → 點(diǎn)擊“注冊(cè)”
【反饋結(jié)果】 - 注冊(cè)成功 → 跳轉(zhuǎn)至首頁(yè) - 如果失敗 → 顯示具體錯(cuò)誤（如驗(yàn)證碼錯(cuò)誤）
這個(gè)結(jié)構(gòu)比直接畫(huà)個(gè)框圖更清晰、更全面，還方便和開(kāi)發(fā)、產(chǎn)品對(duì)齊邏輯。
總結(jié)一套「新手流程圖五步法」
很多人不知道從哪開(kāi)始畫(huà)流程，其實(shí)你可以用下面這套通用五步法
新手流程圖五步法：
| 步驟 |
問(wèn)題提示 |
示例 |
| 1. 明確用戶(hù)目標(biāo) |
他要完成什么任務(wù)？ |
預(yù)約會(huì)議室、提交訂單等 |
| 2. 確定起點(diǎn)入口 |
他從哪開(kāi)始這件事？ |
首頁(yè)、菜單欄、按鈕 |
| 3. 列出關(guān)鍵步驟 |
他必須做哪些操作？ |
選擇、輸入、確認(rèn)等 |
| 4. 標(biāo)記系統(tǒng)反饋 |
系統(tǒng)會(huì)給出什么回應(yīng)？ |
成功提示、錯(cuò)誤校驗(yàn)等 |
| 5. 考慮中斷/異常 |
用戶(hù)會(huì)在哪些地方卡住？ |
驗(yàn)證失敗、網(wǎng)絡(luò)斷開(kāi)等 |
有時(shí)候不需要一次做得很完美，先寫(xiě)出主流程，再補(bǔ)充邊界情況，也很棒。
推薦你這樣開(kāi)始練習(xí)：
選擇一個(gè)你熟悉的 App，如微信、小紅書(shū)、餓了么
模擬一個(gè)真實(shí)任務(wù)，如“下單”、“發(fā)評(píng)論”、“修改資料”
用上面五步法寫(xiě)出完整流程清單，別畫(huà)圖也行！
蘭亭妙微(m.gyxygd.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
