原生流程圖範本

App 或網站單一任務的使用者流程圖

畫出使用者完成一項任務會經過的畫面與操作,包含登入檢查、錯誤狀態與返回路徑,而且每條分支都有終點。

App 或網站單一任務的使用者流程圖範例
流程圖
你會得到

一張單一使用者任務的流程圖,從進入點開始,經過你的畫面、操作與條件判斷,走到每個成功或離開點。畫面與系統檢查會以不同形狀呈現。請把每條分支、返回路徑與錯誤狀態和你的設計對照。

兩個完整範例

一般需求與邊界情況。

一般輸入

瑜伽課程預約,含登入檢查與候補分支

進入點
使用者在靜水瑜伽 App 首頁點選「預約課程」
依序列出畫面與操作
畫面 - 課程列表 動作 - 點選課程 畫面 - 課程詳情 動作 - 點選「預約」 畫面 - 付款 動作 - 使用已儲存的信用卡付款 畫面 - 預約成功
條件判斷,以及各答案的去向
已登入?否 → 登入畫面,之後回到課程詳情。是 → 預約 課程已額滿?是 → 加入候補畫面。否 → 付款
成功與離開點
預約成功;已加入候補;在付款頁離開
標示方式或強調重點
成功終點用綠色,放棄與錯誤終點用灰色
邊界輸入

結帳流程,含付款重試上限、返回路徑與較長的畫面名稱

進入點
回訪顧客在手機上從提醒信件開啟購物車
依序列出畫面與操作
畫面 - 購物車,含已儲存商品與預計送達時間 動作 - 點選「結帳」 畫面 - 收件地址與配送時段選擇 動作 - 選擇時段 畫面 - 付款,含已儲存的信用卡與新增信用卡選項 動作 - 點選「付款」 畫面 - 訂單確認,含物流追蹤連結
條件判斷,以及各答案的去向
地址仍然有效?否 → 編輯地址畫面,之後回到收件地址。是 → 選擇時段 付款成功?是 → 訂單確認。否 → 付款失敗畫面,重試(最多重試兩次,之後前往聯絡客服畫面) 使用者在付款頁點選「返回」→ 回到收件地址,並保留已選時段
成功與離開點
完成下單;付款多次失敗後轉至聯絡客服;在任一畫面離開流程
標示方式或強調重點
留白

用來確認重試迴圈在兩次後停止並走向聯絡客服、返回路徑回到正確的畫面,以及較長的畫面名稱被完整保留。

同一任務,三種方向

選一個方向開始。

01

先畫理想路徑

主要的成功路徑畫成一直線,所有替代路徑都從它分岔出去,方便和利害關係人快速檢視。

02

錯誤與邊界狀態

同一個任務,把每個失敗、重試與死路都呈現出來,適合 QA 規劃或設計審查。

03

新使用者與回訪使用者

兩條進入路徑在共用畫面匯合,適合在核心流程前先分成註冊與登入的任務。

範本會保留的部分

維持一致的元素。

01

畫面與操作分開呈現

畫面是方框,操作則標在畫面之間的移動上,讀起來就像一趟完整的操作導覽。

02

每條分支都有出口

每條路徑都會走到你列出的離開點,或帶著說明標籤回到先前的畫面。

03

你的畫面名稱

名稱和你在設計檔與工單中使用的一致。

使用方式

從填寫資料到取得成果。

  1. 01

    選定一項任務與進入點

    預約課程、重設密碼、結帳。一張圖一項任務,才容易閱讀。

  2. 02

    依序列出畫面與操作

    每行開頭寫「畫面」或「動作」,流程圖才分得出哪些是頁面、哪些是使用者的操作。

  3. 03

    加上條件判斷

    把每個檢查寫成問題,並說明每個答案的去向,包括返回與重試路徑。

  4. 04

    列出所有離開點,再到 Vizify 檢查

    成功、放棄與錯誤終點。送出需求前不會執行任何動作。

  5. 05

    把每條分支和設計稿對照

    沿著每條路徑走到終點,並確認畫面名稱和你的線框稿一致。

輸出限制

使用前請先確認。

  • 流程圖呈現的是流程,而不是畫面本身。不會畫出線框稿、介面文案或版面。
  • Vizify 不會測試你的 App,也不會找出遺漏的邊界情境。它只會指出沒有去向的分支,而不是你沒提到的路徑。
  • 一張圖一項任務。把多項任務放在同一張圖中,很快就會難以理解。
  • 版面為自動排列。匯出選項以 Vizify App 為這張圖提供的為準。
常見問題
使用者流程圖和線框稿有什麼不同?

使用者流程圖呈現一項任務中畫面與判斷的順序;線框稿則呈現單一畫面長什麼樣子。先用流程圖確認路徑,再開始設計畫面。

要怎麼表示使用者可以返回上一步?

加上一行,例如「使用者在付款頁點選『返回』→ 回到收件地址」。它會變成一個指向先前畫面、附有標籤的箭頭。

這個使用者流程圖範本也能用在網站上嗎?

可以。畫面可以是網頁、彈出視窗或表單中的步驟。請使用團隊已經在用的名稱,讓流程圖與工單一致。

如果我不確定錯誤發生後會怎樣呢?

把這個問題留在需求中。Vizify 會詢問這條分支應該走向哪裡,而不是自行編造一個錯誤畫面,讓你更容易和團隊提出這個缺口。

繼續探索