「Flow Chart 流程圖」是一種可以將複雜流程，以可視化方式呈現的圖，圖表中包含「步驟」、「順序」和「決策」，讓團隊容易理解，是由工業工程師 Frank 和 Lillian Gilbreth 於 1921 年首次將此工具引入美國機械工程師協會 (ASME)。流程圖有很多種類型，包含系統流程圖、邏輯流程圖等，而身為 UIUX 設計師的我們，會以產品流程圖的類型繪製，可以幫助我們將複雜的使用流程更好展示給開發團隊進行討論以及設計說明，同時幫助自己盤點清楚流程中的問題點、可被優化之處，以及是否所有情境都被考量進去，以利提升使用者體驗！一起來看看 Flow Chart 流程圖製作要注意什麼、以及流程圖符號定義吧。
為什麼需要 Flow Chart 流程圖
視覺化複雜流程
Flow Chart（流程圖）可以將複雜的操作過程視覺化，讓設計與開發相關團隊能夠更直觀地理解系統的運作邏輯，方便討論和流程上的調整。
提高設計效率
透過 Flow Chart（流程圖），設計師可以提前發現潛在的問題，同時盤點清楚所有流程都被考量進去，在進到設計畫面之前，就能確保頁面與流程不會被遺漏或邏輯上得衝突，也能提前和工程師確保執行上的限制與可行性，不會進到設計與開發後才發現錯誤而回頭調整，節省時間和成本。
提升溝通效率
Flow Chart（流程圖）成為開發與設計之間的一種通用語言，可以幫助團隊中不同領域的對象（例如產品經理 PM、UIUX 設計師、前後端工程師）之間更有效地溝通，確保所有人對設計過程的理解一致。
幫助使用者測試安排
Flow Chart（流程圖）不僅可以協助開發團隊的理解，亦可以提升在和客戶、易用性測試的使用者們進行流程上的說明，好讓非專案成員都可以更快釐清專案的背景與測試內容。
何時該使用 Flow Chart 流程圖
Flow Chart（流程圖）通常在 UX 設計過程的初期使用，特別是在需求分析、痛點梳理，到進行資訊架構設計階段。當設計師需要理解使用者歷程，或在設計原型前需要確定各個互動體驗的環節時，Flow Chart（流程圖）能夠提供重要的參考價值，幫助設計師明確設計方向。
Flow Chart流程圖怎麼畫
流程圖是由多個具有代表意義的符號所組成的，以下這些是常見的流程圖符號定義
Flow Chart 流程圖符號定義
流程線｜Flowline
流程線用以將兩個區塊連結起來，透過箭頭的指向性，以顯示流程的進行方向。
開始/結束｜Terminator
結束或終止符號用以表示流程圖的流程起始點或結束點，會以圓角舉行的方式。
過程｜Process
流程符號是流程圖中最常見的組成部分，以矩形來繪製，用以表示流程中的一個步驟。
決策｜Decision
此符號代表需要做出系統判斷的決定，以進入流程的下個步驟。這通常會是一個 Yes / No 的決定。
輸入/輸出｜Input/output
輸入/輸出的符號代表輸入或輸出外部資料的過程。
文件｜Document
以一個帶有波浪底部的舉行，代表一份文件。
手動輸入｜Manual Input
以不對稱左低右高的矩形，代表需要手動輸入至系統中的資料或資訊。
預定義流程｜Predefined Process
以矩形加上左右兩槓，用以標示已在別處定義的流程，在繪製時就無需將該整段流程再次放上，降低閱讀負擔。
Flow Chart 流程圖繪製注意事項
- 流程線可以的話，盡量不要有交錯，降低連線方向被誤判的可能性。
- 重複的流程，可以套過譽定義流程，降低畫面有過多重複性的複雜內容。
- 可以分為叫全面性的架構流程，以及細部的功能流程。若需要有整體架構資料關聯，可以先以最高維度的方式做初步的架構規劃完成一張，並額外繪製重點功能流程。
- 若為探究重點功能的流程，會獨立拆開來繪製，一條路徑可以描述一個主要功能流程，不會以整個系統架構全部畫出來，以防畫面過於複雜不好閱讀。
- 要記得使用以定義好的符號來繪製，不然會造成閱讀者在解讀上的困惑。
- 繪製時要確保將所有功能清單的資料都滿足後，再來進行規劃。
- 若為現有產品需要新增規格，要確保流程中的所有邏輯都符合，不會因為加了該功能而造成邏輯上的錯誤，導致資料或系統出錯。
Flow Chart 流程圖範例
以下就以登入流程來作為範例：
Flow Chart 流程圖工具
想要繪製流程圖的話有非常多工具可以繪製，其中因為 UIUX 設計目前大宗為使用 Figma 軟體，所以可以點開 Figma 之後，開啟 Flow Chart 外掛，就可以輕鬆繪製流程圖囉！
Flow Chart 流程圖的好處
流程圖的主要好處包括：將複雜的流程視覺化成易懂的圖表、增強團隊溝通、提升問題解決的效率，並且能夠輔助使用者體驗設計的各個階段，提升最終產品的體驗。
Flow Chart 流程圖跟 Wireframe 線框稿的相互關係
Flow Chart（流程圖）和 Wireframe（線框稿）在 UX 設計中都扮演著重要角色，但它們有著不同的功能和用途。Flow Chart 主要用來表示系統或使用者操作的邏輯流程，強調步驟、頁面之間的關係。而 Wireframe 則是用來展示介面的資訊架構（Information Architecture）和佈局（Layout），強調使用者介面易用的設計。兩者都會在開發產品時使用上，但在設計過程中，我們通常會先使用 Flow Chart 流程圖來理解使用者流程，確定整體的架構與關西之後，再進行每個單一頁面 Wireframe 設計，以確保介面設計符合預期使用者操作邏輯。
Flow Chart 流程圖符號定義只要熟悉後，操作幾次就可以上手了！想要達到設計流程更順暢，那就嘗試在設計前規劃看看吧！
延伸閱讀
- UIUX 是什麼？UIUX設計師的工作在做什麼？
- UXUI 設計顧問工作大開箱！6 大技巧提高你的設計價值
- 擺脫新手設計師！解析 6 大 Wireframe 實作技巧與軟體工具
- Wireframe 是什麼？UIUX設計師必學 3 大關鍵流程
- UX/UI 設計師工作大解析：薪水行情、面試、職位內容
