流程圖不只是工程師的專利，對產品經理與交互設計師而言，它是理解複雜業務、梳理邏輯、溝通協作的核心工具。本文由資深設計師 Felix Ding（丁宇）撰寫，系統整理了從基本思路到視覺詞彙、實戰範例、工具模板的完整知識體系，助你畫出既專業又高效的 Web 流程圖。

前言：從簡單到複雜的覺醒

職業生涯初期，我的流程圖節點寥寥、邏輯直白。直到加入支付寶，面對龐大且快速迭代的業務體系，才真正體會到流程圖的威力——它不僅幫助我快速理解需求，更成為交互設計的基石，甚至讓工程師直接拿來指導開發。2008 年我在部落格發表《畫 Web 流程圖的一點心得》，引發廣泛迴響，但也因未遵循業界通用的「視覺詞彙表」而留下遺憾。如今，結合多年新經驗，我將這份指南全面升級，並附上自製模板下載。

一、基本思路：流程圖是什麼？能幹什麼？

定義

流程圖，顧名思義，是描述系統在不同情境下，如何應對使用者狀態、決策與行為的圖示化工具。

核心價值

• 理解需求：將抽象業務邏輯具象化，快速釐清主流程與分支。
• 溝通橋樑：產品、設計、開發三方對齊認知，減少口頭溝通成本。
• 交互設計依據：直接對應線框圖與原型，確保邏輯閉環。
• 開發指導：工程師可據此編寫狀態機、設計資料庫流程。

二、視覺詞彙表：標準化的「設計語言」

採用統一視覺符號，才能讓流程圖被團隊無障礙閱讀。以下為核心元素規範：

1. 起點與終點

每個流程圖有且僅有一個起點，代表交互啟動；至少一個終點，標示流程結束。嚴禁多起點，否則邏輯入口模糊。

2. 界面

矩形圓角框代表頁面或視窗。建議編號（如 N01、N02），協作時可直接呼叫「節點 23」；線框圖命名同步編號（23.png），工程師秒找對應設計稿。

3. 對話框

針對 AJAX 彈層、模態/非模態浮層（如表單驗證提示）設計的專用符號。避免為微小狀態變化重繪整頁線框圖，極大提升繪圖效率。註：若非類桌面級 Web App，建議減少 JS 依賴，參考「JapMag」設計語言。

4. 決策點

菱形節點，表示使用者需主動選擇（如「確認/取消」）。規約：肯定分支向下，否定分支向右，符合閱讀習慣，主幹左側垂直延伸，分支右側展開，結構清晰。

5. 條件分支

外觀似決策點，但語意不同：由系統後台自動判斷路徑（如權限驗證、庫存檢查），非使用者主動操作。標註條件表達式（如 `user.isVIP == true`）。

6. 子流程

可復用的獨立流程模組（如登入驗證、支付流程）。主流程中以預定義框引用，附註子流程編號。交付文檔時必須同步提供所有子流程圖，否則閱讀者斷層。

7. 跳轉點

圓圈內標註目標節點編號，用於跨頁面、跨模組的非線性跳轉。本質是某條路徑的終點，避免連線橫跨全圖造成視覺混亂。

8. 描述

附註說明框，補充業務規則、異常處理、技術限制等文字資訊。善用描述可大幅減少會議解釋時間，但不可替代必要的面對面溝通。

9. 系統行為

橢圓形節點，標示後台自動執行的動作（發送郵件、寫入日誌、推送通知）。與使用者操作節點明確區分，便於開發識別異步任務。

三、實戰範例：從註冊到下單的完整鏈路

（此處應放置一張完整流程圖範例，展示上述符號組合運用。受限於文字格式，建議下載文末模板查看高清大圖。）

四、避坑指南與效率技巧

1. 一圖一主題：單圖節點超過 20 個即拆分子流程，避免「一張圖看盡天下事」導致認知過載。
2. 版本管理：流程圖隨需求迭代，務必標註版本號、修改日期、修改人，配合 Git/SVN 管理。
3. 泳道圖輔助：跨部門/角色協作時，加入泳道區分責任主體（如：使用者、前端、後端、風控）。
4. 工具推薦：Axure RP（交互強）、Microsoft Visio（企業級）、draw.io（免費雲端）、PlantUML（代碼生成圖）。
5. 模板下載：文末提供標準視覺詞彙元件庫（.axurelib / .vss / .svg），開箱即用。

五、工具與模板下載

• Axure 元件庫：flow-vocab.axurelib
• Visio 樣板：flow-vocab.vss
• SVG 矢量圖標包：flow-icons.zip
• 範例源文件：flow-examples.rp

掌握標準化流程圖，不只是畫圖技能，更是產品邏輯思維的外化。從今天起，用專業視覺語言講好產品故事吧！