1.User story > 2.Functional Map > 3.Flow Chart > 4.UI Flow > 5.Wireframe > 6.Mockup > 7.Prototype
圖片來源｜ UX/UI 設計師準備要做的事情
本章節將帶領大家以Figma或FigJam工具，製作UI（使用者介面設計）前置工作：用戶體驗研究，將更能了解產品的功能架構（Functional Map）、人物誌（Persona）、使用者旅程（用戶感受）、流程地圖（Flow Chart）製作等。
ChatGPT： https://chat.openai.com/chat/
善用AI工具，可以讓UX前置工作更有效率，請大家也試試看，如何讓ChatGPT協助動機、目的、人物誌、使用者旅程（用戶感受）、流程地圖（Flow Chart）...等用戶體驗研究，能更有效率的完成。
參考文章｜
在面對產品開發時，功能地圖 Functional Map 首先要確認資訊架構，釐清產品脈絡、定義功能、分類與組織訊息、規劃層級。在確認使用者之後，將使用者需求變成功能規格圖表的方法。主要用於與開發人員確認功能，通常以心智圖方式呈現。
範例圖片出處：設計流程 (二)：Functional Map 功能地圖
Functional Map（功能地圖）類似於心智圖，每一個功能是一個節點，事先預想有什麼運行的功能要建立，我需要得到什麼資訊才能讓功能運轉，方便事先告知後端工程師準備適當的API。同時也理清操作上的細節，有不清楚的地方趁開始做之前和客戶確認。任何一套心智圖軟體都可以使用，我們的重點在有視覺化的圖案能和別人討論，這份心智圖大概也只有自己會編輯，網路上有許多免費的資源可以借來用， 可直接以Figma繪製，或像是 Coggle和 MindMeister，或者下載的軟體像是 XMind 及 MindNode。
更多FigJam的介紹，請看［數位白板工具］FigJam
人物誌是一種在行銷規劃或商業設計上描繪目標使用者的方法，經常有多種組合，方便規劃者用來分析並設定其針對不同使用者類型所開展的策略。 人物誌當中，簡單者可能僅具有年紀、職業和一段基本敘述，複雜者可能具有人口、態度、收入、使用物品、喜好與行為方式等等具體描繪的事物。
人物誌能幫助你了解某個特定族群的特質，了解該族群的想法及樣貌。Persona 用於更好得解讀用戶的行為和需求，和傳統的客群分析比起來，更關注用戶和產品互動的方式。Persona並非一個標準，它更像是團隊溝通、協作、決策的一個可視化的工具。
Persona 是以虛構方式來表達產品目標用戶（TA，target audience）的工具，若產品有不同的用戶，亦可產出多種 Persona 來呈現。此外，每個 Persona 需要包含虛構的名字、年齡、性別、職業、喜好、使用產品動機、需求、圖片 … 等資訊。每個虛構角色在使用產品時，都有不同的目的或任務，這些資訊在架構與內容設計上就具相當的價值與幫助，例如可考量 Persona 的需求資訊來設計導航列、互動、功能與視覺。簡言之，Persona 是個能影響各方面決策的重要參考資訊。
在確認你的用戶是哪些人之後，最重要的就是要如何彙整這些用戶的資料，並且清楚知道用戶的哪些資料對你來說是重要的。以下是 Make my Persona 分享的用戶人格特質建立之模板
常見的Persona內容格式｜ User Persona Template: Free Download and How-to Guide
常見的 「人物誌」Persona 實際範例。我們會為他取名，放一張代表這類群眾的大頭照，並且寫下所有關於這些客群的特徵。｜圖片來源｜ Persona人物誌攻略！套入9個問題抓出目標消費者
「同理心地圖」（Empathy Map）是用來理解人物誌所處的狀況或情緒的方法之一。它有助我們在分析目標或設計行銷策略時，擁有更具體的概念，同時縮小團隊成員對目標人物的認知落差。
參考文章｜
用戶旅程圖範本
對照 大予創意「eMask口罩預購」的設計優化概念提案
學長姐範例： 石二鍋-APP-UI-Redesign｜ Figma
學長姐範例： PX-Pay-APP-UI-Redesign
範例圖片出處： 看似線性的流程，但在橘色部分實作起來會一直需要回到前一步驟更迭修改
Logic Flow也可以說是操作邏輯流程，常常也會聽到許多不同名詞，例如Task Flow、User Flow、Flow Chart等等，這些其實都是Flow，也就是為了了解流程而產生的東西，而在創建這些流程時有助於我們思考之後畫Wireframe時的重要依據，包括連結頁面跟頁面之間的關係，並確認所有需要的功能，也有助於與開發人員討論與了解所有狀態如何運作，便於前端後端開發時的資訊顯示依據。
創建流程圖有助於我們思考之後畫Wireframe時的重要依據，包括連結頁面跟頁面之間的關係，並確認所有需要的功能，也有助於與開發人員討論與了解所有狀態如何運作，便於前端後端開發時的資訊顯示依據。
在製作ReDesign時，我會會先整理出原APP的使用流程，整理出流程上與使用上的問題，將問題整理後，再重新思考與繪製新的流程圖，這是ReDesign專案中不可或缺的一個部分。
範例圖片出處：經典燈泡案例｜WIKI-流程圖 FLOWCHART
範例圖片出處：登入註冊的Flow Chart
學長姐範例： PX-Pay-APP-UI-Redesign
請練習以FigJam畫流程圖｜ FigJam 流程圖範例｜Flow Chart Example
參考文章｜ 先別急著畫UI，你聽過Flow Chart嗎
Functional Map 主要目的在「將抽象的需求轉變成能被實現的功能」；而 UI Flow 則是「 妥善安排功能與資訊在頁面之間的操作動線 」。UI Flow則更重視頁面的數量呈現以及頁面細節和操作動線，也被當作是Wireframe目錄。
UI Flow 與 Wireframe 的中間產物就是 Wireflow，有頁面的線框稿呈現、也有頁面間的動線，適合擅長視覺思考的設計師使用。
UI Flow｜介面流程｜旅遊APP範例｜ Wireflow for Traveling App
設計流程 (三)：Logic Flow 操作邏輯流程
Gathr - User Journey & Flow (Community)
由Wireframe建構的Site Flow（網站流程（地圖））
學長姐範例： PX-Pay-APP-UI-Redesign
參考文章｜
Figma的Community中有非常多流程圖資源，大家可以搜尋『 FLOW 』會有很多驚喜，可以先以手稿畫出流程圖的草圖，多幾次練習與構思，再進入電腦中完成，或者可以Figma中的資料庫，選擇適合自己的風格與元素，進行練習，並完成ReDesign主題的流程圖。
請多閱讀相關文獻，以了解更詳盡的UX操作方式與意義，更能活用相關做法在案例當中。
請以『Figma 簡報範例』（內容及設計樣式請務必自行更改及設計，範本樣式僅供參考），不需要的頁數請自行刪除，持續完成後續問題。
本單元提到的：
