
流程圖
你會得到一張單一使用者任務的流程圖,從進入點開始,經過你的畫面、操作與條件判斷,走到每個成功或離開點。畫面與系統檢查會以不同形狀呈現。請把每條分支、返回路徑與錯誤狀態和你的設計對照。
兩個完整範例
一般需求與邊界情況。
一般輸入瑜伽課程預約,含登入檢查與候補分支
- 進入點
- 使用者在靜水瑜伽 App 首頁點選「預約課程」
- 依序列出畫面與操作
- 畫面 - 課程列表
動作 - 點選課程
畫面 - 課程詳情
動作 - 點選「預約」
畫面 - 付款
動作 - 使用已儲存的信用卡付款
畫面 - 預約成功
- 條件判斷,以及各答案的去向
- 已登入?否 → 登入畫面,之後回到課程詳情。是 → 預約
課程已額滿?是 → 加入候補畫面。否 → 付款
- 成功與離開點
- 預約成功;已加入候補;在付款頁離開
- 標示方式或強調重點
- 成功終點用綠色,放棄與錯誤終點用灰色
邊界輸入結帳流程,含付款重試上限、返回路徑與較長的畫面名稱
- 進入點
- 回訪顧客在手機上從提醒信件開啟購物車
- 依序列出畫面與操作
- 畫面 - 購物車,含已儲存商品與預計送達時間
動作 - 點選「結帳」
畫面 - 收件地址與配送時段選擇
動作 - 選擇時段
畫面 - 付款,含已儲存的信用卡與新增信用卡選項
動作 - 點選「付款」
畫面 - 訂單確認,含物流追蹤連結
- 條件判斷,以及各答案的去向
- 地址仍然有效?否 → 編輯地址畫面,之後回到收件地址。是 → 選擇時段
付款成功?是 → 訂單確認。否 → 付款失敗畫面,重試(最多重試兩次,之後前往聯絡客服畫面)
使用者在付款頁點選「返回」→ 回到收件地址,並保留已選時段
- 成功與離開點
- 完成下單;付款多次失敗後轉至聯絡客服;在任一畫面離開流程
- 標示方式或強調重點
- 留白
用來確認重試迴圈在兩次後停止並走向聯絡客服、返回路徑回到正確的畫面,以及較長的畫面名稱被完整保留。
同一任務,三種方向
選一個方向開始。
01先畫理想路徑
主要的成功路徑畫成一直線,所有替代路徑都從它分岔出去,方便和利害關係人快速檢視。
02錯誤與邊界狀態
同一個任務,把每個失敗、重試與死路都呈現出來,適合 QA 規劃或設計審查。
03新使用者與回訪使用者
兩條進入路徑在共用畫面匯合,適合在核心流程前先分成註冊與登入的任務。
範本會保留的部分
維持一致的元素。
01畫面與操作分開呈現
畫面是方框,操作則標在畫面之間的移動上,讀起來就像一趟完整的操作導覽。
02每條分支都有出口
每條路徑都會走到你列出的離開點,或帶著說明標籤回到先前的畫面。
03你的畫面名稱
名稱和你在設計檔與工單中使用的一致。
使用方式
從填寫資料到取得成果。
- 01
選定一項任務與進入點
預約課程、重設密碼、結帳。一張圖一項任務,才容易閱讀。
- 02
依序列出畫面與操作
每行開頭寫「畫面」或「動作」,流程圖才分得出哪些是頁面、哪些是使用者的操作。
- 03
加上條件判斷
把每個檢查寫成問題,並說明每個答案的去向,包括返回與重試路徑。
- 04
列出所有離開點,再到 Vizify 檢查
成功、放棄與錯誤終點。送出需求前不會執行任何動作。
- 05
把每條分支和設計稿對照
沿著每條路徑走到終點,並確認畫面名稱和你的線框稿一致。
輸出限制使用前請先確認。
- 流程圖呈現的是流程,而不是畫面本身。不會畫出線框稿、介面文案或版面。
- Vizify 不會測試你的 App,也不會找出遺漏的邊界情境。它只會指出沒有去向的分支,而不是你沒提到的路徑。
- 一張圖一項任務。把多項任務放在同一張圖中,很快就會難以理解。
- 版面為自動排列。匯出選項以 Vizify App 為這張圖提供的為準。
常見問題使用者流程圖和線框稿有什麼不同?+
使用者流程圖呈現一項任務中畫面與判斷的順序;線框稿則呈現單一畫面長什麼樣子。先用流程圖確認路徑,再開始設計畫面。
要怎麼表示使用者可以返回上一步?+
加上一行,例如「使用者在付款頁點選『返回』→ 回到收件地址」。它會變成一個指向先前畫面、附有標籤的箭頭。
這個使用者流程圖範本也能用在網站上嗎?+
可以。畫面可以是網頁、彈出視窗或表單中的步驟。請使用團隊已經在用的名稱,讓流程圖與工單一致。
如果我不確定錯誤發生後會怎樣呢?+
把這個問題留在需求中。Vizify 會詢問這條分支應該走向哪裡,而不是自行編造一個錯誤畫面,讓你更容易和團隊提出這個缺口。