使用者流程圖（User Flow）畫的是使用者為了完成一個任務，從進入網站或 App 開始，經過哪些畫面、做了哪些操作、系統如何回應，直到完成任務或中途離開的路徑。畫法是先確定使用者是誰、要完成什麼任務、從哪裡進來，再把畫面、操作與判斷三種節點依序連起來，並補上登入逾時、欄位錯誤、查無資料這類例外狀態。它和網站架構圖不同：架構圖說明網站有哪些頁面與層級，使用者流程圖說明人怎麼在頁面之間移動，以及卡住時會發生什麼事。
使用者流程圖和其他圖的差別
網站與 App 專案裡常同時出現好幾種圖，各自回答不同的問題，搞混了就會在錯的階段討論錯的事：
| 圖種 | 回答的問題 | 常用的階段 |
|---|---|---|
| 網站架構圖 | 有哪些頁面、分幾層、選單怎麼分類 | 需求確認後、設計前 |
| 使用者流程圖 | 使用者怎麼一步步完成某個任務 | 架構確認後、線框圖前 |
| 線框圖 | 每個畫面放哪些內容與按鈕 | 流程確認後 |
| 作業流程圖 | 公司內部誰在什麼時候處理什麼 | 系統需求盤點 |
| 系統流程圖 | 程式與資料怎麼處理 | 開發規格 |
使用者流程圖站在使用者的角度，只畫使用者看得到、做得到的事；後台誰收到通知、資料存到哪裡，屬於作業流程或系統流程。兩者會在「送出」這類節點交會，可以在圖上標註「此處觸發後台流程」，再另外畫一張。作業流程圖的盤點方法可參考製作流程圖的步驟，系統面的圖種分辨則見系統開發流程圖。
畫之前先確定使用者、任務與進入點
一張使用者流程圖只處理一個任務，動手之前先寫下三件事：
- 使用者：是新訪客、已登入的會員，還是後台的管理員？同一個任務，不同身分走的路可能完全不同。
- 任務與成功條件：用一句話寫出任務，例如「預約下週的諮詢時段」，並定義什麼狀態算完成，例如收到預約確認信。
- 進入點：使用者從哪裡開始？搜尋結果點進的服務頁、廣告的著陸頁、LINE 訊息裡的連結、App 推播，起點不同，看到的首個畫面就不同。
流程圖若預設使用者都從首頁進來，就會漏掉從搜尋或廣告直接進入內頁的人，他們可能沒看過首頁的說明，也還沒登入。每個主要進入點都應該能接上流程，否則使用者一進來就迷路。任務清單可以從客服常被問的問題、業務經常處理的需求與現有網站的數據整理出來，再依重要程度排出要先畫哪幾張。
使用者流程圖的畫法步驟
- 列出畫面：依任務順序寫下會經過的每個畫面或彈出視窗，例如服務頁、預約時段頁、填寫資料頁、確認頁、完成頁。
- 標出操作：畫面之間的箭頭寫上使用者做了什麼，例如「選擇時段」「按下送出」，不要只畫一條沒有文字的線。
- 加入判斷點：系統或使用者需要選擇的地方放判斷點，例如「是否已登入」「時段是否還有名額」，每個出口都標條件。
- 補上系統回應：送出之後系統做什麼，例如寄出確認信、顯示預約編號，讓使用者知道任務已經完成。
- 畫出離開與返回：使用者在哪些地方可能中途離開、按返回或取消，回來之後是從頭開始，還是保留已填的資料。
- 和團隊走一遍：請設計、工程與業務各自從使用者的角度念一次，找出跳步或說不通的地方。
畫面節點用矩形、判斷用菱形、起點與終點用圓角矩形，符號不必多，但整份圖要一致。圖的方向建議由左而右排出主要路徑，例外分支往上下拉開，主線一眼就看得出來。
功能流程圖：把例外與系統回應畫進去
只畫順利完成的路徑，圖就少了一半。例外狀態沒有事先畫出來，就會由工程師在開發時自行決定，畫面與文案未必經過確認。逐項檢查下列情況：
- 未登入或登入逾時：要求登入後，能不能回到原本的畫面並保留資料？
- 欄位錯誤：錯誤訊息出現在哪裡、寫了什麼，使用者能不能看出要怎麼修正？
- 送出失敗：網路中斷或伺服器錯誤時顯示什麼，資料會不會遺失，能不能重試？
- 重複送出：使用者連按兩次送出，會不會產生兩筆資料？
- 查無資料：搜尋沒有結果、購物車是空的時候，畫面要引導使用者去哪裡？
- 權限不足：一般會員點到只有特定身分能用的功能，看到的是說明還是錯誤頁？
把這些狀態畫進圖裡，就成了功能流程圖：每個功能的正常路徑、例外路徑與系統回應都清楚，設計師知道要多做哪些畫面，工程師知道要處理哪些情況，測試時也有一份清單可以逐項驗收。
範例：官網詢問表單與會員註冊流程
詢問表單
- 使用者從搜尋結果進入服務頁，閱讀說明後點「預約諮詢」。
- 進入表單頁，填寫姓名、聯絡方式與需求說明。
- 判斷欄位是否正確：錯誤時在欄位旁顯示原因並保留已填內容；正確時進入下一步。
- 送出後顯示感謝頁，說明多久內會收到回覆，並寄出確認信。
- 送出失敗時顯示錯誤說明與重試按鈕，同時提供電話或其他聯絡方式。
會員註冊
- 使用者在結帳或預約時被要求登入，選擇「註冊新帳號」。
- 填寫電子郵件與密碼，判斷該電子郵件是否已註冊：已註冊時提示改用登入或重設密碼。
- 寄出驗證信，畫面說明下一步；使用者未收到信時，提供重新寄送。
- 驗證完成後，帶使用者回到原本要結帳或預約的畫面，而不是首頁。
兩個範例的共同點是：每個判斷都有兩條以上的出口，而且失敗的路徑仍然能讓使用者繼續完成任務。
App使用者流程要多確認的地方
App 的流程和網站大致相同，但有幾個網站比較少遇到的節點，畫圖時要特別標出來：
- 首次開啟：使用說明、登入與權限請求出現的順序，以及使用者拒絕權限後，功能要怎麼降級或改走其他路。
- 推播與分享連結：使用者從推播或別人分享的連結直接進到某個內頁，如果還沒登入或已登出，要先去哪裡、登入後能否回到原本的內容。
- 返回操作：每個畫面按返回鍵或用手勢返回時會回到哪裡，要先講好。
- 離線與中斷：網路斷線或來電中斷時，正在填寫的資料是否保留。
這些節點各平台的介面慣例，要在設計階段依 Apple 與 Google 的設計指南調整，流程圖先把「要去哪裡」講清楚，後續的畫面設計可參考 App 設計流程的整理。
用數據與測試驗證使用者流程
流程圖是團隊的假設，上線前後都要驗證。上線前，用流程圖寫出測試任務，請符合目標客群條件的人實際操作，觀察他們在哪個節點猶豫或走錯；上線後，對照網站數據看使用者在哪一步離開，例如表單頁的瀏覽很多、送出很少，就回到流程圖檢查那一段的欄位與說明。
流程圖也要跟著網站一起更新。每次調整表單、會員或結帳功能，先改圖再改畫面，客服與業務收到的使用者問題也記在對應的節點旁，下一次改版時就知道要先處理哪裡。
常見問題
使用者流程圖要用什麼工具畫？
能畫方塊、菱形與箭頭，並保留可編輯檔的工具都可以。早期討論用白板或紙筆畫草圖就很快，確認後再轉成數位檔，方便和設計稿、規格文件放在一起管理與更新。
使用者流程圖和顧客旅程地圖有什麼不同？
顧客旅程地圖涵蓋多個通路與階段，關注使用者的想法與感受；使用者流程圖聚焦在網站或 App 裡完成一個任務的操作路徑與系統回應，顆粒度更細，可以直接交給設計與開發。
一個網站要畫幾張使用者流程圖？
依核心任務決定，一個任務一張。形象官網可能只有詢問與下載資料，會員或預約網站則還有註冊、登入、預約、修改與取消。先畫影響轉換與營運的任務，再補次要流程。
使用者流程圖要畫到每個按鈕嗎？
不需要。節點畫到畫面與關鍵操作即可，按鈕位置與文案交給線框圖處理。判斷標準是工程師與設計師看了圖，能說出每個畫面接下來可能去哪裡。
已經上線的網站還需要補畫流程圖嗎？
建議補畫核心任務的流程。改版或新增功能時，有現況流程圖才能評估影響範圍，也能對照數據找出使用者離開的節點，不必每次重新摸索網站目前的運作方式。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
如果網站或 App 正要規劃新功能，建議先挑出核心任務，各畫一張含例外狀態的使用者流程圖，再進入線框圖與設計。京采可以協助整理使用者任務與網站架構，規劃表單、會員、預約等功能的流程，並在開發與驗收時對照流程圖逐項測試，做法可參考網頁設計服務，也歡迎與我們聯繫討論你的專案。
