【UXD工作坊】: 從0-1洞悉全貌的Function flow 功能流程圖、State Diagram 狀態圖 全攻略🫴#04｜white diary

🧐如何透過上帝視角觀看全局，描述機制運作的流程呢？

📢 嗨嗨~ 各位朋朋們👋這是第三屆 UXD 產品設計 學習營 的學習筆記區👀 也到了Week#04 課程內容為「Function flow 功能流程圖、State Diagram 狀態圖」，有興趣了解的朋朋，可以繼續看下去文章~

【文章目錄】 🔜 課程內容&時程 🔜 Function Flow 功能流程圖 🔜 State Diagram 狀態圖 🔜 Function Flow常見的錯誤 🔜 案例練習 🔜 課程心得 🔜 更多資訊

課程內容&時程

⭐️課程內容 : 產品需求文件 PRD 資訊架構 Information Architecture 產品線框圖 Wireframe 完成一個虛擬專案的前後台規劃 ⭐️課程時程 : 2024.08.14(三) -2024.10.02(三) 20:00~23:00 (3小時)

➰此課程未有 前期研究訪談 及 UI設計內容 教學 ➰全程以線上工作坊形式，透過直播軟體 Zoom 與設計服務 FigJam 進行 ➰適合新手PM、In-house UI/UX Designer、要寫PRD和PM、RD溝通的Product Designer🫶🏻

⚠️覺得有被改課堂作業會幫助很多，所以不推薦只看課後的影片。

Function Flow 功能流程圖

描繪具體功能時的操作邏輯，以及檢查規則。

• 功能流程圖要素
• 重要因素 : 輸入、輸出、功能運作。
• 檢查點
• 結局 : 理想終點、其他結局。

UXD課程_Function Flow 架構

UXD課程_Function Flow 範例

State Diagram 狀態圖

描述資訊物件經歷事件後產生的狀態變化。

• 主體物件 : 主要的物件角色。
• 事件 : 促使狀態發生變化的行為。
• 狀態 : 物件目前的情況。
• 轉移 : 狀態之間的關係。

UXD課程_State Diagram 狀態圖範例

Function Flow常見的錯誤🙅

✘ 當成 Sitemap 在思考 ✔ 描述機制運作的流程 ✘ 描述 UI 細節或防呆條件 ✔ 描述資訊輸入輸出與功能運作 ✘ 侷限單一角色觀點 ✔ 上帝視角全局觀點

案例練習

在自動販賣機狀態圖練習上，庫存也可以拉出來，不要連在一起，這樣會比較好處理，Function Flow 流程圖上也須多考慮販賣機是否有找錢的相關情境~才能串接起來~

UXD課程練習_自動販賣機

課程心得

Week#04 最近課程開始變得難，在Function Flow 流程圖的題目練習中，會需要過去對於Function Flow 架構有些了解，圖案有些了解會比較好進行，不然會有些疑惑為甚麼要有不同形狀；「功能」、「狀態」名稱容易搞混😢

上課中有同學疑惑 :「為甚麼要有兩個圖，Function Flow 流程圖一個就好了啊??」，我覺得也許各位朋朋也會有這個疑惑，所以也把我看法放上來~

以電商為例，Function Flow 流程圖比較像平台上的流程；State Diagram 狀態圖比較像營運會出現的各環節流程，那為甚麼兩個都要會呢?因為營運和平台環環相扣哈哈💫

更多資訊

課程指導：Soking 更多瞭解相關資訊>>>課程頁面、 ​2024.04.17 說明會​

關注我更多文章>> 【UXD工作坊】: 邏輯大考驗🧠UseCase 機制分析 #03｜white diary 【UXD工作坊】: User Goal & User flow #02｜white diary 【UXD工作坊】: 我切我切切!!! 任務步驟分析 #01｜white diary

【UX 慢慢談】: 招募問卷 設計 你不可以不知道的事｜white diary 【UX 慢慢談】: 研究計畫 慘兮兮 到底為什麼失敗？｜white diary 【UX 慢慢談】: 噓🤫訪談 禁忌話題 要小心…｜white diary

※以上為個人心得感想，有任何不妥問或資訊相關問題，請來信hihifm28@gmail.com，會在第一時間改正，謝謝。