來源與介紹
你有沒有遇過這樣的情境：想要解釋一個流程，結果講了半天，對方還是霧裡看花？這時候，一張清楚的流程圖可以讓複雜的概念一目了然，就像 GPS 幫助我們找到最短路徑一樣！
流程圖能幫助團隊快速理解系統操作流程，理清每個步驟的邏輯順序及可能的分支，是簡潔有效的視覺化工具。流程圖最早起源於20世紀初期，由 Frank Gilbreth和他的團隊在工作流程優化中首次提出，用於視覺化展示任務步驟和流程。如今，流程圖廣泛應用於產品設計、業務規劃和系統開發等領域，用來清楚表達一個流程的開始、結束、執行任務和選擇決策等關鍵環節。在 UX 設計中，當我們完成 IA（資訊架構）與功能地圖後，流程圖便是接下來的重要產出，負責串連結構層的細節。
若無法清楚看到圖片文字，請點擊下方連結預覽 or 下載查看清晰版本 :
流程，簡單來說，就「一連串有條理的行動，讓事情從開始走向完成」。想像一下，你的每一天就是一場小型的流程管理：從睜開眼睛起床，到刷牙洗臉、享用早餐，最後準備好精神出門上班——這不就是一個經典的日常流程嗎？
專業地說，這樣的流程也能用 BPMN（業務流程建模與標記法，Business Process Model and Notation）來描述。BPMN是專門用來描繪商業活動的視覺化語言，但它的概念也適用於任何循序漸進的事情——BPMN 可以幫助我們定義流程，無論是企業的決策還是你早晨「咖啡 vs 奶茶」的選擇困難症，其實都可以用流程圖來呈現！
舉個例子，早晨流程可以分解為：
- 開始（睜開眼睛，告別賴床模式）
- 任務（洗漱整理、準備早餐、收拾行裝）
- 決策（今天是搭公車還是開車？）
- 結束（踏出家門，邁向新一天的挑戰）
所以，下次當你面對流程圖時，別被它的專業外表嚇到。其實，它就是把我們生活中的做什麼、怎麼做，並且用圖形描繪出來。既有趣又實用，還能讓你更高效地搞定所有任務！
流程圖的基本元素
1. 事件元素
- 開始/結束（圓形，可參考下圖灰色圓形） 使用圓形來表示流程的起點和終點，例如”開始訂單處理”或”結束發送通知”。
- 任務（方形，可參考下圖藍色方形） 方形代表執行的任務，採用動詞 + 名詞的形式，例如”填寫表單”或”生成報表”。
- 連接元素（箭頭，可參考下圖紅色箭頭） 箭頭用於指引任務和決策之間的流向，也就是連結兩個不同的活動。
若無法清楚看到圖片文字，請點擊下方連結預覽 or 下載查看清晰版本 :
2. 選擇元素（菱形，可參考下圖黃色菱形）
關鍵決策點是流程中的重要環節，通常基於不同的條件進行判斷，例如需要解決的問題、可選擇的方案，以及接下來的行動方向。這些決策點通常會引發 流程的分岔，因此以 菱形元素表示，與事件的圓形或任務的方形不同。
菱形元素不僅能清晰標示出流程中的選擇點，還可以用來決定路徑的分流（根據條件分開進行不同操作）和合併（在流程中多條分支匯合回主線）。這種視覺化的表達方式，讓複雜的邏輯變得一目了然，幫助團隊更高效地理解和執行流程。
若無法清楚看到圖片文字，請點擊下方連結預覽 or 下載查看清晰版本 :
如何規劃流程圖？
Step 1 : 確定流程步驟
從文字敘述中找出關鍵動詞，如檢查訂單、確認付款等，提取出每個步驟的行動點。
Step 2 : 設計任務元素
將每個動作寫成 動詞 + 名詞的形式，放入方形框中，例如”檢查訂單”或”發送通知”。
Step 3 : 建立選擇點
對需要決策的步驟，設置菱形框，標註條件或選擇路徑，例如”付款成功？”。
Step 4 : 連接流程
使用箭頭將流程的開始、任務、決策和結束依序連接，形成一個完整的圖示。
來挑戰一下！試著將下面這段飲料店的流程畫成流程圖吧！
💡 Tips 找出動詞+名詞，抓出事件元素 (紅字)，再將決策點 (黃字) 揪出來就可以畫出完整流程了!
在一間生意繁忙的飲料店，店員每天忙得不可開交，因為店裡提供的果汁、奶茶和咖啡深受顧客喜愛。客人們一早就 排起了長隊，依序走到櫃台前 點餐。櫃台上方掛著一個大大的菜單看板，上面清楚地列出了各種飲品的名稱、價格以及可選的配料。顧客會根據自己的喜好從菜單中跟店員告知要 選擇什麼飲品，比如有人喜歡清爽的果汁，有人則偏愛香濃的奶茶或提神的咖啡。接著並立即進行 結帳付款。店員確認無誤後開始 製作飲品，製作完成後，飲料會被 放到等候區 的取餐架上，顧客聽到自己的號碼被叫到時，再到等候區 領取飲品，完成這一段快速又有條不紊的購買流程。
公布解答拉 ! 根據上述文字內容，製作了下圖的流程圖，並 進一步將流程依照不同角色區分，這就是泳道流程圖。
若無法清楚看到圖片文字，請點擊下方連結預覽 or 下載查看清晰版本 :
這樣的設計是不是讓流程看起來更直觀了呢？每個角色的責任和行動步驟都一清二楚，整體流程也變得一目了然～是不是覺得更好理解、更方便追蹤了呢？
這邊再追加一個範例，用上面提到的 EDM 郵件寄送管理來試畫一個流程圖 :
若無法清楚看到圖片文字，請點擊下方連結預覽 or 下載查看清晰版本 :
其實，產品經理在繪製流程圖時，通常會根據功能的複雜度產出多個流程圖。像上圖這種自行設計的拖拉模板工具，就可能自成一個流程圖。流程圖的厲害在於，它能幫助跨團隊的夥伴們輕鬆搞懂產品功能邏輯，堪稱設計和溝通的秘密武器！無論你是什麼類型的 PM，學會畫一張好用的流程圖，絕對是職場必備技能，保證讓你的工作效率飆升！
規劃注意要點
- 明確目的與對象
- 確定流程圖的目的是什麼：解釋產品功能、優化業務流程，還是輔助開發溝通？
- 理解目標讀者的需求，是技術人員、非技術人員，還是跨部門成員？根據對象選擇合適的表達方式。
- 定義流程範圍
- 界定流程的起點和終點，避免圖示過於冗長或模糊。
- 確認流程中涵蓋的主要步驟，刪除無關緊要的細節。
- 使用標準化符號
- 採用常見的標準符號如圓形（事件）、方形（任務）、菱形（決策）、箭頭（流程方向）。
- 如果是跨部門流程，考慮使用泳道圖清楚劃分角色責任。
- 步驟命名簡潔清楚
- 以動詞 + 名詞的格式描述步驟，避免使用模糊的詞彙，例如「確認付款」而非「檢查」。
- 為決策點設置清晰的條件標籤，例如「付款成功？」或「是否有庫存？」
- 設置關鍵決策點
- 分析流程中可能的選擇或條件，將其標示為菱形的決策節點。
- 確保每個決策都有清晰的後續路徑，避免邏輯中斷。
- 強調流程邏輯與順序
- 使用箭頭明確指引流程方向，避免出現雙向箭頭或錯亂的連結。
- 如果有循環過程，例如錯誤重試，需清楚標明循環的起點與條件。
- 按角色分配泳道
- 確保每個角色的任務與責任明確，避免角色混淆。
- 使用直觀的視覺化劃分，讓讀者快速定位角色相關的步驟。
- 保持設計簡潔
- 避免過度裝飾和不必要的色彩，重點突出步驟、條件和邏輯關係。
- 一個流程圖建議控制在一頁內，讓人一目了然。
- 持續優化與更新
- 根據實際使用情況，持續改進流程圖的邏輯與結構。
- 隨著產品迭代，確保流程圖與當前實際情況一致。
按照這些要點進行規劃，無論是內部溝通還是對外展示，流程圖都能成為 PM 的有力助手，讓你的產品邏輯更直觀、團隊執行更高效！
結論 Recap
學會畫流程圖，工作就順啦！流程圖看起來很專業，其實就像是一份超會「解釋清楚再執行」的視覺秘笈！不管是優化業務流程還是搞定產品邏輯，它都是PM職場的必備神技。
💡 記住：流程圖有開始、有步驟、有選擇、有結束，動詞+名詞的方塊，外加箭頭串連一切，順手加個泳道，讓大家都 On the same page ! 有共同的理解 !
學會畫流程圖後，你就不只是會動動嘴，而是會更好地講故事、解難題、帶節奏。只要是一連串有順序的事件，不只是產品規劃，就讓流程圖來做你的 MVP（Most Valuable Partner）吧！
