使用者介面設計課程講義

Unit 04．UI 開發流程前置作業

從 0 到 1：跟著拾器一起做，
前置作業FOCUS不再是紙上談兵

研究方法教你「想清楚」，Figma Agent 教你「畫出來」。

這一堂課把「詞彙地圖」到「UI Flow」十四個前置關卡，全部串在同一個案例上——每一關都先用一句話講清楚「這是什麼、為什麼重要」，接著直接在頁面上動手操作，結果立刻長出來。你不用死背名詞，跟著拾器走一輪，就等於練過一次完整的前置作業。

0前置流程關卡，一次貫穿一個案例

0案例主線：拾器 Pick It

0期中作業必要交付項目

內容整理於 2026 年 9 月．中國科大視傳系｜使用者介面設計

拾

拾器 Pick It 設計系學生的二手工具／材料交換 App

開始之前：兩個完整案例可以對照參考

案例一讀菇－毒菇識別 App｜Figma Agent 深度實戰講義 案例一讀菇－毒菇識別 App｜Figma 實作範例檔案 案例二拾器 PICK IT｜本頁案例的 Figma 實作範例檔案

01詞彙地圖 02案例蒐集 03雙鑽石模式 04主題發想 05設定使用者 06同理心地圖 07痛點分析 08規劃 MVP 09資訊架構 10故事地圖 11旅程圖 12流程圖 13線框圖 14UI Flow

詞彙地圖案例蒐集雙鑽石模式主題發想設定使用者同理心地圖痛點分析規劃 MVP資訊架構故事地圖旅程圖流程圖線框圖繪製UI Flow 詞彙地圖案例蒐集雙鑽石模式主題發想設定使用者同理心地圖痛點分析規劃 MVP資訊架構故事地圖旅程圖流程圖線框圖繪製UI Flow

這堂課怎麼上 每一關都是「先讀定義 → 立刻操作 → 馬上看到結果」——操作區塊都在頁面上就能玩，不用另外開軟體；等你熟悉邏輯之後，再回頭看 Figma Agent 怎麼把同一件事自動化。

怎麼下指令，AI 才聽得懂 往下看每一關「跟 Figma Agent 對話」的範例，都刻意示範兩件事：①一開始就先講清楚「這是什麼 App、要解決誰的什麼問題」——拾器＝設計系學生的材料交換平台，AI 才不用用猜的；②全部 14 關都放在同一個對話串裡「接著問」，後面的指令會直接說「延續拾器」「承接上一關」，不用每次重講一次背景，AI 才記得住前面做過什麼、產出才會前後呼應。你自己操作時也建議開一個對話串走到底，不要每一關都重開新對話。

STAGE 01

UX 研究詞彙地圖

在動手做之前，先把接下來會一直用到的名詞看過一輪——這些詞彙不用死背，跟著拾器做過一次自然就記得。右邊可以依類別篩選，先抓重點看，看不懂也沒關係，做到那一關時回來看一次會更有感覺。

參考資料

操作提醒不用一次全部記住，這頁書籤起來，之後每進到一個新關卡，都可以回來對照一下這關用到的詞彙。

示意圖．拾器詞彙心智圖 ── 點一個節點，直接跳到它的完整說明

Persona／人物誌研究方法

把訪談歸納出的典型使用者，寫成一個具體的人。

比「使用者輪廓」更進一步——不是統計平均值，而是把同一類使用者的目標、習慣、痛點濃縮成一個有名字、有故事的角色，讓團隊討論功能時有共同的想像對象。拾器裡的雷雷（想脫手工具的賣家）、恩恩（剛入學的買家）就是兩個人物誌範例，之後的痛點分析、故事地圖都會持續對照這兩個角色。

痛點 Pain Point研究方法

使用者在達成目標過程中，卡住、不滿的地方。

痛點不是使用者的抱怨本身，而是抱怨背後「真正卡住的原因」。同一句抱怨可能對應不同痛點，例如「約網友見面拿東西有點怕」背後其實是「交易缺乏信任機制」。找痛點的重點是分類、歸納出重複出現的模式，而不是每則語錄都當成獨立問題處理。

旅程圖 Journey Map研究方法

使用者從頭到尾的完整過程，含情緒起伏。

把使用者完成一件事（例如刊登二手工具）從頭到尾會經過的階段、行為、情緒都畫出來，特別是標出情緒最低點——那通常就是最該優化的地方。旅程圖跟故事地圖不同：旅程圖看的是「一個使用者的完整心路歷程」，故事地圖看的是「一個功能拆成哪些具體任務」。

同理心地圖 Empathy Map定義工具

用說／想／做／感受四象限，整理使用者的言行與心理。

把訪談內容拆成「說了什麼」「心裡在想什麼」「實際做了什麼」「當下感受如何」四個象限，幫助團隊把散落的訪談重點整理成一個角色的完整心理狀態，跟人物誌互補——人物誌是角色的長期輪廓，同理心地圖是角色在特定情境當下的即時反應。

MVP 最小可行產品定義工具

用最少功能驗證核心價值的第一個版本。

MVP 不是「功能閹割版」，而是「先驗證核心價值有沒有人要」的版本——只做能讓使用者完成最關鍵任務的功能，其餘先砍掉，上線後再依真實回饋決定要不要加。判斷一個功能是不是 MVP，可以問：「沒有這個功能，使用者還完成得了核心任務嗎？」

資訊架構 IA定義工具

把功能與內容分類、排出層級的樹狀結構。

資訊架構回答的是「東西放在哪一層、叫什麼名字」——把 MVP 清單整理成 3～5 個一級分類，再往下展開子項目，之後的頁面清單、導覽列命名都是從這棵樹長出來的。好的資訊架構讓使用者不用想就能猜到功能藏在哪裡。

故事地圖 Story Map定義工具

把使用者活動排成主幹，拆成一則則故事並分優先序。

先把使用者會做的一連串活動橫向排成一條主幹（backbone），再往下把每個活動拆成一則則具體的使用者故事，依優先順序分成「MVP 要做」跟「之後再做」。故事地圖是連接資訊架構跟開發排程的橋樑，能清楚看出每個功能屬於哪個活動、優先序又是什麼。

流程圖 Flow Chart產出物

用節點與箭頭表示任務的步驟與判斷分支。

流程圖把一個任務拆成明確的步驟跟判斷點，決策的地方用菱形標出分支，讓開發跟設計都知道「接下來會怎麼走」，尤其是「條件不成立時該怎麼辦」這種例外狀況，很容易在只用文字描述時被忽略。

Wireframe 線框稿產出物

只畫版面結構、不上色的低保真設計稿。

Wireframe 只畫版面的「骨架」——內容放哪裡、大小關係、操作動線，先不管顏色字型，目的是在花時間做視覺設計之前，先確認頁面結構跟資訊優先順序是對的。範圍通常不只一個畫面，而是從進入頁一路到各功能頁都要先想過。

UI Flow產出物

以頁面為單位，畫出畫面之間怎麼跳轉的流程。

UI Flow 把一個任務會經過的「畫面」串成一條線，比流程圖更聚焦在「有哪些頁面、頁面之間怎麼跳轉」，是線框稿之間的目錄。跟流程圖的差別是：流程圖的節點是「步驟或判斷」，UI Flow 的節點是「一整個畫面」。

Figma Agent 實際生成｜期中發表版心智圖

Figma Agent

我們這學期的期中範例是「拾器 Pick It」——一個給設計系學生用的二手工具／材料交換 App，目標是讓學期末想脫手材料的人，跟正好需要材料的學弟妹配對成功，減少材料浪費。接下來這整個對話我都會沿用這個設定跟你討論十四關前置作業，先記住：App 名稱「拾器」、對象是設計系學生、核心目的是材料閒置媒合。第一件事：這是我們這學期會用到的 10 個 UX 詞彙，我先依用途分成三類——研究方法（了解使用者用的）：痛點、旅程圖、同理心地圖；定義工具（決定做什麼用的）：Persona、MVP、資訊架構；產出物（畫出來的成果）：故事地圖、流程圖、Wireframe、UI Flow。幫我畫成一張以「拾器」為中心的放射狀心智圖，三類節點分別用不同顏色呈現（研究方法＝藍、定義工具＝紫、產出物＝綠），每個節點旁加一行 10 字內的白話定義，方便期中報告直接截圖使用。

已記住拾器的設定（設計系學生的材料交換平台），後續每一關都會延續這個脈絡。心智圖已建立，中心節點為「拾器」，10 個詞彙依你指定的三色分類排列成放射狀分支（藍＝研究方法、紫＝定義工具、綠＝產出物），並附上每個詞彙的一行定義，可直接列印當作課堂小抄。

記得在跟Figma Agent對話前，請到ChatGpt或Gemini等AI工具，討論題目的詳細規劃與定義，並請AI整理給Figma Agent對應的指令。

Figma Agent 可把一串詞彙清單直接整理成分類心智圖

STAGE 02

如何蒐集案例

案例蒐集不是隨便找幾張截圖，而是帶著問題去看——這個功能別人怎麼做？為什麼這樣設計？看多了，你才知道拾器可以借鏡什麼、又該避開什麼坑。右邊是我們幫拾器蒐集到的三個參考案例。

Figma Agent 輔助

Figma Agent 小提醒把蒐集到的截圖貼進 Figma Agent，請它幫忙依「功能相似度」分組整理，比自己一張張比對更有效率。

去哪裡找案例

Figma Community｜搜尋同類型 App 的範本與 UI Kit（把關鍵字換成你自己的題目） Mobbin｜依產業、功能分類瀏覽真實上架 App 的完整截圖與操作流程

示意圖．三個參考案例快照 ── 點一張截圖，看它的優缺點分析

參考案例．已蒐集 3 個相似服務

校園系上社團公告版（Facebook）——免費、大家都在用，但貼文洗版快、訊息很快就找不到

競品旋轉拍賣 App——找二手東西方便，但不是校園情境，運費與面交比較麻煩

介面Figma Community 二手交換範本——可以借鏡分類篩選、物品卡片的畫面配置

Figma Agent 實際生成｜案例比較表

Figma Agent

延續拾器的設定，我照「材料交換」這個方向蒐集了社團公告版、旋轉拍賣、Figma Community 三個參考案例的截圖，幫我整理成一張三欄比較表，欄位是使用情境、優點、缺點；比較完之後在表格最下面加一列「拾器決定沿用／不沿用」，具體列出至少 3 個拾器可以直接借鏡的功能設計（例如分類篩選、物品卡片、站內洽談這種具體功能名稱，不要寫「介面不錯」這種空泛評語），方便直接寫進期中報告的案例分析段落。

已建立比較表，3 欄分別對應三個案例，列出「使用情境」「優點」「缺點」三列；最下面「拾器決定沿用」列具體標記了 3 個借鏡功能：社團公告版的分類篩選、旋轉拍賣的物品卡片格式、Figma Community 的站內洽談留言區，並各自附上一行「為什麼採用」的理由。

Figma Agent 可以把蒐集到的截圖／連結整理成比較表或心智圖

STAGE 03

雙鑽石設計流程

雙鑽石模式把設計拆成「探索 Discover → 定義 Define → 發展 Develop → 交付 Deliver」四個階段，前兩個負責「把問題搞懂」，後兩個負責「把答案做出來」。接下來所有關卡，其實都能對應到這四個階段的其中一個。

框架總覽

操作提醒卡關的時候先想「我現在是在搞懂問題，還是在做答案？」通常就知道該回頭做哪一步。

示意圖．雙鑽石設計流程 ── 點一個菱形區塊，下面的步驟卡會直接跳到那一階段

互動練習．點步驟看四個階段

Figma Agent 實際生成｜雙鑽石流程圖

Figma Agent

接著在同一個對話裡繼續問：剛剛的案例比較表跟詞彙心智圖都是「探索」階段會用到的工具，幫我畫一張雙鑽石設計流程圖，左邊是「探索、定義」問題空間，右邊是「發展、交付」答案空間，中間標出洞察點，每個階段下面各列出 2～5 個對應的作業關卡名稱，並在最上方加一句話說明「左邊發散找問題、右邊收斂做設計」，讓還沒上過課的同學也看得懂。

已建立雙鑽石流程圖，左右兩個菱形分別用兩種顏色區分問題空間與答案空間，中間標出洞察點，並在四個階段下方各自條列對應關卡，可直接匯出當作報告封面圖。

Figma Agent 可依文字描述直接生成雙鑽石／流程框架類的示意圖

STAGE 04

如何發想主題

主題發想不是「等靈感」，而是把「誰＋在什麼情境＋卡在哪裡」組成一句話，題目自然就出現了。拾器這個案例，就是從這三個空格填出來的——右邊你可以自己組組看，換個組合，題目也會跟著變。

動手練習

Figma Agent 小提醒找題目卡住時，可以先在 Figma Agent 開一張腦力激盪板，把「使用者／情境／困擾」各列一排關鍵字，AI 會幫你做初步分類，再回來這裡組句子會快很多。

示意圖．主題句是怎麼組成的 ── 點一個空格，直接跳到下面對應的選項

互動練習．組出你的主題句

即時產出

Figma Agent

回到拾器的主題發想，我們訪談了 5 位設計系學生（跟一開始設定的目標對象一致），聽到的關鍵字有：預算有限、工具閒置、找不到人接手、二手交易不安心、社團貼文洗版快。幫我先歸納成「誰 WHO／情境 WHERE／困擾 WHAT」三欄便利貼板，每欄各自整理出 3 個候選描述，再從三欄裡各挑一個組成一句「WHO 在 WHERE 情境下，因為 WHAT 而困擾」的主題句候選，最後把票選出來、確定採用的那一句另外框起來標註「本次採用」，方便對照下一關的人物誌設定。

已建立三欄便利貼板：WHO（設計系學生／新生／畢業生）、WHERE（開學採購／學期末清空／急需材料）、WHAT（找不到安心管道／東西閒置／訊息洗版），並組出 3 句候選主題句，票選框起來標註「本次採用」的是：「畢業生在學期末清空的情境下，因為東西閒置找不到人接手而困擾」——這句之後會直接對應到雷雷（賣家）人物誌的核心動機。

Figma Agent 可把訪談關鍵字自動分類整理成腦力激盪板

STAGE 05

設定使用者：先決定「你在為誰設計」

同一個 App，賣方和買方要解決的問題完全不同。設定使用者，就是先把「誰會用」寫清楚——年齡、身份、目標、會卡住的地方，寫得越具體，之後的功能取捨就越有依據。拾器一開始就同時服務兩種角色，右邊切換看看兩人的差異。

動手練習

操作提醒寫使用者角色時，「目標」跟「挫折」要對得起來——挫折通常就是後面痛點分析的原始素材。

互動練習．切換角色看差異

雷雷，設計二

主修產品設計・宿舍住宿

目標: 學期結束前，把用不到的美工工具換成現金或其他材料
挫折: 社團公告版洗版很快，私訊約時間又常被放鳥
行為: 習慣用手機拍照上傳，懶得寫太長的說明文字

動手做：產生你自己的人物誌 期中作業至少要交出兩個人物誌——可以像拾器一樣「一買一賣」兩個對照角色，也可以是同一角色下兩種明顯不同的極端使用者。把訪談或觀察到的目標、挫折、行為填進上面的卡片格式，就是一份能用的人物誌。

Figma Agent 實際生成｜人物誌卡片

Figma Agent

承接上一關選定的主題，我有兩位受訪者的筆記：雷雷（想脫手工具的賣家）、恩恩（剛入學的買家），幫我各自整理成一張人物誌卡片，包含頭像、姓名年齡、身份、目標、挫折、常用行為六個欄位，兩張卡片尺寸統一、並排放置，方便比較買賣雙方的需求差異——這兩位之後的痛點分析、故事地圖都會持續用到，請記住他們的設定。

已建立兩張人物誌卡片，欄位與版型一致，方便並排比較；已依你提供的筆記填入目標、挫折、行為欄位內容。

Figma Agent 可依訪談筆記，直接排版成統一格式的人物誌卡片

STAGE 06

使用者同理心地圖

同理心地圖用「說・想・做・感受」四個象限，把使用者的外在言行跟內在情緒對照起來看——跟 Persona 不同的是，它更聚焦在「這個當下」的心理狀態。這一關要先把雷雷、恩恩兩份訪談筆記各自攤開整理成同理心地圖，下一關的痛點分析才有原始素材可以分類。右邊點開每個象限看拾器買方的同理心地圖。

動手練習

操作提醒「想」跟「感受」最容易混在一起——「想」偏向理性判斷、「感受」偏向情緒反應，分開寫會更精準。

示意圖．同理心地圖四象限 ── 點一個象限，下面對應的內容會直接展開

互動練習．點開四個象限

說 SAYS

「有沒有便宜一點的美工刀啊，二手也可以。」「這款切割墊看起來滿新的，賣家人應該不錯。」

想 THINKS

如果東西跟照片落差很大怎麼辦？跟陌生人約見面安全嗎？可以先問賣家問題再決定嗎？

做 DOES

在社團公告版滑很久找便宜工具、比對照片跟賣家評價，私訊詢問細節後才決定要不要約時間。

感受 FEELS

怕買貴、怕被放鳥、怕東西跟描述不符；找到划算又順利的交換時，會很開心、想再回來用。

Figma Agent 實際生成｜同理心地圖（買方＋賣方）

Figma Agent

回到恩恩這位人物誌，這是他（買方）的訪談重點筆記，幫我整理成一張同理心地圖，分成說、想、做、感受四象限，中間放使用者頭像，每個象限至少放 3 則具體內容（不要空泛的形容詞），方便對照逐字稿檢查有沒有遺漏。

已建立同理心地圖範本，中央為使用者頭像圖示，四周依四象限自動排入你筆記中對應的句子，並用不同顏色區分理性（想）與情緒（感受）內容。

Figma Agent 可把訪談筆記直接排版成標準四象限同理心地圖

STAGE 07

痛點分析：把抱怨變成看得懂的分類

痛點分析不是把使用者的抱怨照抄一遍，而是幫這些抱怨「分類」，找出重複出現、影響最大的幾組，才知道之後 MVP 該先解決什麼。右邊是訪談雷雷、恩恩他們蒐集到的真實語錄，點分類看看哪一類最多人在抱怨。

Figma Agent 輔助

Figma Agent 小提醒把訪談逐字稿貼進 Figma Agent，請它「依主題分類重點」，幾秒鐘就能得到初步分類，你再人工核對、調整就好，比自己一句句貼便利貼快很多。

示意圖．便利貼分類（affinity map）── 點一疊便利貼，直接篩選出那一類語錄

互動練習．點下面的分類按鈕，看每一類各有幾則語錄（已依數量由多到少排序）

「跟陌生網友約見面拿東西，其實有點怕。」— 恩恩，視傳一

「怕買到的工具跟照片落差很大，錢付了才發現。」— 訪談對象 D

「約在校外面交，其實不太確定對方是不是真的學生。」— 訪談對象 G

「每學期買新的筆刀、切割墊，一學期下來也是一筆錢。」— 恩恩，視傳一

「工具行的東西不便宜，學生真的買到肉痛。」— 訪談對象 C

「畢業前一堆工具用不到，丟掉又覺得浪費。」— 雷雷，設計二

「抽屜裡有三支美工刀，其實只用過一次。」— 訪談對象 E

「社團公告洗版太快，貼文兩小時就找不到了。」— 雷雷，設計二

動手做：換成你自己蒐集到的語錄把你訪談蒐集到的語錄，依重複出現的主題分成 3～5 組，每組取一個好懂的分類標籤，再數數看哪一組語錄最多——真實訪談的分組通常不會平均分配，數量最多的那一組，才是下一關規劃 MVP 時最優先要解決的痛點。

Figma Agent 實際生成｜親和圖兩種版型

Figma Agent

延續雷雷跟恩恩的訪談，這是我們蒐集到的 8 則語錄逐字稿：①「跟陌生網友約見面拿東西，其實有點怕。」（恩恩）②「怕買到的工具跟照片落差很大，錢付了才發現。」（訪談對象D）③「約在校外面交，其實不太確定對方是不是真的學生。」（訪談對象G）④「每學期買新的筆刀、切割墊，一學期下來也是一筆錢。」（恩恩）⑤「工具行的東西不便宜，學生真的買到肉痛。」（訪談對象C）⑥「畢業前一堆工具用不到，丟掉又覺得浪費。」（雷雷）⑦「抽屜裡有三支美工刀，其實只用過一次。」（訪談對象E）⑧「社團公告洗版太快，貼文兩小時就找不到了。」（雷雷）。幫我依主題分成幾組便利貼，每組下一個分類標籤，並統計每組有幾則、依數量由多到少排序，方便我們決定痛點分析報告要先講哪一組。

已依主題分成 4 組，並依數量由多到少排序：信任安全（3）＞花費（2）＝閒置浪費（2）＞資訊落差（1）。信任安全這組語錄最多，代表「怕被騙、怕東西跟描述不符、怕約見面不安全」是目前最多人在意的痛點，建議痛點分析報告從這組先講起，花費與閒置浪費並列第二，資訊落差目前語錄最少可以放最後。

上面是示範：把逐字稿貼給 Figma Agent，幾秒鐘就能自動分組、標註數量，並直接排出報告要先講哪一組

STAGE 08

規劃 MVP：先做「影響大、成本低」的事

MVP（最小可行產品）不是「功能砍半」，而是用一張 2×2 矩陣，把每個功能依「對使用者的影響」與「開發成本」定位，優先做左上角那一群。右邊勾選功能，系統會自動幫你排出 P0（優先）與 P1（之後）清單。

動手練習

操作提醒P0 建議控制在 3～4 個以內——這正是拾器期中要優先做出來的核心流程：刊登、瀏覽、洽談。

互動練習．勾選功能，自動排優先序

影響力（高 → 低）

高影響・低成本＝先做

高影響・高成本＝規劃

低影響・低成本＝順手做

低影響・高成本＝先不做

成本低成本高

刊登工具（拍照上傳）瀏覽搜尋清單站內私訊洽談信用評價系統 AI 估價建議校園面交地點地圖收藏追蹤賣家

Figma Agent 產出．分期功能路線圖（P0 第一期實心卡／P1 第二期虛線卡，圓點為預估開發時間）

小約 1 週內　中約 2～3 週　大超過 3 週或需外部資源

Figma Agent 實際生成｜功能路線圖

Figma Agent

根據剛剛整理出的痛點分組（信任安全 3 則最多、花費與閒置浪費各 2 則、資訊落差 1 則最少），我把 7 個候選功能排出優先序：P0 是刊登工具（拍照上傳）、瀏覽／搜尋清單、站內私訊洽談——這三個直接對應信任安全與花費這兩組最多人在意的痛點；P1 是信用評價系統、AI 估價建議、校園面交地點地圖、收藏／追蹤賣家。幫我畫成一張分兩期的功能路線圖，第一期（P0）用實心卡片、第二期（P1）用虛線卡片，兩期中間畫箭頭連接；並在每個功能卡片上標註我估計的開發時間——刊登工具＝中、瀏覽搜尋清單＝小、站內私訊洽談＝中、信用評價系統＝中、AI 估價建議＝大、校園面交地點地圖＝小、收藏追蹤賣家＝小，方便排進期中到期末的時程規劃。

已建立兩期功能路線圖：第一期（P0）3 個功能以實心卡片呈現——刊登工具（中）、瀏覽搜尋清單（小）、站內私訊洽談（中）；第二期（P1）4 個功能以虛線卡片呈現——信用評價系統（中）、AI 估價建議（大）、校園面交地點地圖（小）、收藏追蹤賣家（小），並用箭頭標出期程先後順序，可直接放進期中簡報。

Figma Agent 可把 P0／P1 清單直接排成分期功能路線圖，上面的路線圖會跟著左邊勾選狀態即時更新

STAGE 09

資訊架構：把功能收進看得懂的樹狀清單

資訊架構（IA）回答的是「東西放在哪一層、叫什麼名字」。從剛剛的 MVP 清單出發，把功能收進 3～5 個一級分類，再往下展開子項目，之後的頁面清單、導覽列都是從這棵樹長出來的。右邊點開每一層看看拾器的架構。

Figma Agent 輔助

Figma Agent 小提醒把這棵樹的文字結構貼給 Figma Agent，請它「依此生成資訊架構圖」，就能直接得到可編輯的節點圖，不用自己手動一格格畫。

示意圖．拾器資訊架構樹 ── 點一個節點，下面對應的層級會直接展開

互動練習．點開每一層

拾器 App（首頁）

今日推薦・分類捷徑・最新刊登

瀏覽／搜尋

分類篩選（工具類／材料類／書籍類）

關鍵字搜尋・距離排序

物品詳情頁（照片・成色・估價）

刊登物品

拍照上傳・填寫成色說明

AI 估價建議（P1）

交換洽談

站內私訊・面交地點建議

交換完成確認

個人檔案

我的刊登・收藏清單・信用評價

Figma Agent 實際生成｜完整資訊架構圖

Figma Agent

接著把上一關 MVP 路線圖裡第一期（P0）確定要做的三個功能——刊登工具（拍照上傳）、瀏覽／搜尋清單、站內私訊洽談，分別對應成「刊登物品」「瀏覽搜尋」「交換洽談」三個頁面節點；再加上使用者一定會用到、但不算獨立功能的「首頁」跟「個人檔案」，總共 5 個一級節點。這是完整規劃，不是只做其中一部分：幫我畫一張詳細完整的資訊架構圖，APP ROOT 為「拾器 Pick It」，5 個一級節點都要各自展開完整的二到三級子項目（每個節點至少 4～5 項，不要省略成只列大方向），每一項都附一行說明文字，同層節點對齊、加上編號（1.1、1.2…），方便之後直接對照頁面命名與網址規劃。

已建立完整資訊架構圖：APP ROOT「拾器 Pick It」下 5 個一級節點（首頁／刊登物品／瀏覽搜尋／交換洽談／個人檔案），每個節點都展開了完整的子項目與一行說明，總計超過 20 項，依瀏覽動線由左至右排列、同層對齊，可直接對照規劃頁面命名與網址結構。

提示詞明確要求「詳細完整」＋每個節點的最低子項目數，生成結果才不會只給大方向

STAGE 10

使用者故事地圖

故事地圖把使用者「一連串的活動」橫向排成一條主幹（backbone），再往下拆成一則則具體的使用者故事，並依優先順序分成「MVP 要做」跟「之後再做」。右邊切換不同活動，看拾器怎麼把功能拆成故事、分出先後。

動手練習

操作提醒每則故事盡量寫成「使用者能做到什麼」，而不是「系統有什麼功能」——例如「上傳照片」比「支援圖片上傳功能」更貼近使用者視角。

示意圖．故事地圖分層結構

互動練習．切換活動看故事拆解

Figma Agent 實際生成｜使用者故事地圖

Figma Agent

對照剛剛資訊架構裡的「刊登物品」節點，使用者活動依序是：拍照上傳、填寫成色說明、設定方式、送出刊登。幫我畫成故事地圖，主幹放這 4 個活動；下面 MVP 這排放 3 個故事——「手機相機直接拍照上傳」「用文字描述物品新舊成色」「按下送出後立刻出現在瀏覽清單」；之後再做這排放 2 個故事——「AI 根據照片自動建議成色等級」「新增郵寄以外的面交地點選項」，用不同顏色卡片區分兩排，方便之後直接轉成開發排程。

已建立故事地圖，頂層 4 張卡片為活動主幹，中層 3 張淺色卡片為 MVP 故事（拍照上傳、成色描述、送出後上架），底層 2 張卡片為之後再做的故事（AI 成色建議、郵寄交換選項），並用直向對齊線標出每個故事屬於哪個活動。

Figma Agent 可把活動與故事清單直接排成三層故事地圖版面

STAGE 11

使用者旅程圖

旅程圖把使用者從「開始」到「結束」的完整過程，依時間排開，並額外畫出一條情緒曲線——曲線往下掉的地方，通常就是設計要優先解決的關卡。右邊拖著步驟走一遍雷雷刊登工具的旅程，看情緒曲線怎麼變化。

動手練習

操作提醒「等待買家私訊」是情緒曲線的最低點——這正是拾器要在系統回應裡補上「已有 X 人瀏覽」這類小提示的原因。

示意圖．情緒曲線

互動練習．點步驟看情緒曲線

Figma Agent 實際生成｜使用者旅程圖

Figma Agent

換成雷雷這位賣家的視角，這是他刊登工具的 5 個階段與對應情緒（普通、順手、略焦慮、安心、開心），幫我畫成一張旅程圖，上面是情緒曲線，下面是每個階段的行為說明，並在情緒最低點旁加註「這裡最需要優化」的提示文字。

已建立旅程圖，上方以折線標出 5 個階段的情緒高低，最低點自動標紅提醒是需要優先改善的關卡，下方對應每階段的使用者行為與系統回應文字。

Figma Agent 可依階段與情緒數值直接畫出情緒曲線旅程圖

STAGE 12

流程圖製作

流程圖把一個任務拆成明確的步驟與判斷點，決策的地方用菱形標出分支，讓開發跟設計都知道「接下來會怎麼走」。右邊按「產生下一步」，看拾器的「刊登二手工具」流程怎麼一步步長出來。

Figma Agent 輔助

Figma Agent 小提醒把步驟文字直接貼給 Figma Agent，請它「依此生成流程圖，決策節點用菱形」，就能得到一份可以繼續編輯的流程圖設計稿。

互動練習．按「產生下一步」

開始：想刊登二手工具

雷雷決定把用不到的筆刀刊登出去

↓

上傳物品照片（最多 5 張）

手機直接拍，系統自動裁切成統一比例

↓

填寫成色說明與分類

選「全新／良好／堪用」，加一句話描述

↓

系統給 AI 估價建議？

P1 功能：依照片與分類推估合理價格區間

↓

確認內容後送出

可調整估價建議，也能直接手動填價

↓

上架成功，等待買家私訊

同步通知附近正在找同類工具的使用者

1 / 6

動手做：這一關要畫的是「整個 App」，不是單一個功能 左邊「產生下一步」只是示範怎麼畫決策節點（菱形＋條件分支）的教學小工具，真正交作業時請不要只畫「刊登工具」這一小段。期中作業的流程圖要從 App 啟動開始，一路涵蓋登入／註冊、首頁、瀏覽搜尋、刊登物品、交換洽談、個人檔案這幾個模組彼此怎麼連接、使用者從頭到尾可能走的每一條主要路徑，直到完成任務（例如一次交換）為止——範圍要跟下面 Figma Agent 生成的完整版一樣大，而不是切一小塊來畫。

Figma Agent 實際生成｜整個 App 的完整流程圖

Figma Agent

現在要畫的不是單一功能，而是「拾器 Pick It」整個 App 從啟動到完成交換的完整流程圖。請依這個範圍畫：①開始→App 啟動（Splash 畫面）→引導頁（歡迎／探索／開始）→判斷是否已有帳號，是則登入、否則註冊，兩條路都會合流到首頁；②首頁往下分三大模組平行畫：瀏覽搜尋（瀏覽搜尋頁→物品卡片列表→物品詳情頁→有無興趣的決策→加入收藏或聯絡賣家→聊天室→是否達成共識的決策→確認面交→前往面交→是否完成的決策→互相評價→回到列表或結束）；刊登物品（點選刊登→拍照上傳→填寫名稱成色→選擇分類→設定價格→面交地點偏好→預覽確認→是否確認發布的決策→發布上架或返回修改）；個人檔案（個人資訊→我的刊登→我的收藏→交易紀錄→設定）；③三個模組最後都要能走到 End。決策節點統一用菱形並標「是／否」文字，模組之間用不同顏色的區塊底色區分，箭頭方向由上到下、模組間用跨模組的虛線箭頭連接，整張圖要能一次看懂 App 的完整使用路徑，不是只有其中一段。

已建立完整版 App 流程圖：Start 到 App 啟動、引導頁、登入／註冊決策、首頁後，往下平行展開瀏覽搜尋、刊登物品、個人檔案三大模組，每個模組內的決策節點都已套用菱形並標註「是／否」，模組間以跨模組虛線箭頭連接，三條路徑最終都收斂回 End，並附圖例說明流程節點、決策判斷、流程方向、跨模組四種線條/符號的意思。

提示詞明講「不是單一功能，而是整個 App」＋列出三大模組各自的完整步驟，生成結果才會涵蓋全部路徑而不是一小段

STAGE 13

線框圖繪製 Wireframe

Wireframe 只畫版面的「骨架」——內容放哪裡、大小關係、操作動線，先不管顏色字型。這一關先讓你看過一個 App 大致會有哪些類型的畫面：進入頁、步驟導覽、登入、註冊、首頁、功能頁，右邊可以切換看看骨架長什麼樣子，也可以動手勾選「刊登物品」這個功能頁需要哪些區塊。完整的 Wireframe 製作教學——怎麼用 Figma Agent 一步步畫出整組畫面並串起來——會在下個單元完整說明。

Figma Agent 輔助

Figma Agent 小提醒這一關只是先讓你看過畫面骨架長什麼樣子；下個單元會有完整的 Figma Agent Wireframe 製作教學，帶你一步步操作、一次生成整組畫面。

示意圖．常見畫面類型預覽（進入頁～功能頁）

互動練習．依畫面類型篩選

進入頁Splash / Entry

步驟導覽Onboarding Steps

登入Login

註冊Register

首頁Home

功能頁e.g. 刊登物品

互動練習．勾選「刊登物品」功能頁需要的區塊

即時產出

Figma Agent

接著這一關，把APP流程圖的每個畫面，逐一畫成完整的手機版面線框稿——每一頁都要有：頂部標題列、主要內容區、底部操作按鈕，統一用灰階色塊圖片佔位框，圖片以外的所有文字是都真實的文字。編排請考慮使用者操作便利性，因為考慮到後續要用這個線框稿延伸成精稿，希望編排能具設計感，之後也能套用製作的shader的風格。

為了更完整的呈現線框稿的設計，先在ChatGpt對話，請他協助生成適合完整線框稿的指令，可參考與ChatGpt的對話

已建立低保真 wireframe，4 個區塊由上到下排列，皆以灰階色塊呈現，並標註各區塊的尺寸比例，可直接在此基礎上進行色稿設計。

Figma Agent 可依區塊清單直接生成低保真 wireframe；從進入頁到各功能頁的完整製作流程，下個單元會詳細說明

STAGE 14

UI Flow：畫面怎麼串起來

UI Flow 把一個任務會經過的「畫面」串成一條線，比流程圖更聚焦在「有哪些頁面、頁面之間怎麼跳轉」，是線框稿之間的目錄。右邊按「產生下一步」，看拾器「刊登物品」任務會經過哪些畫面。

Figma Agent 輔助

Figma Agent 小提醒有了 UI Flow 清單，就可以請 Figma Agent「依此清單，各畫一張低保真 wireframe 並依序連接」，一次把整組畫面稿生出來。

互動練習．按「產生下一步」

首頁

起點：使用者從首頁點擊「＋刊登」

↓

刊登物品｜上傳照片

拍照或從相簿選取，最多 5 張

↓

刊登物品｜填寫成色與描述

選成色等級，加一句話描述

↓

刊登物品｜預覽確認

資訊正確嗎？不對就返回上一頁修改

↓

上架成功頁

終點：顯示刊登結果，導回首頁

1 / 5

Figma Agent

最後把剛剛那張 wireframe 延伸成完整流程，依照「首頁→上傳照片→填寫成色與描述→預覽確認（決策）→上架成功頁」這 5 個畫面，各畫一張命名清楚的低保真 wireframe，統一用手機比例（375×812）、灰階配色，並依序用箭頭連接成 UI Flow，每張圖左上角標註頁面編號（01、02…）方便對照——這樣拾器從詞彙地圖到 UI Flow 的整個對話串就前後呼應，可以直接對照期中報告使用了。

已建立 5 張低保真 wireframe，並依序排列、用箭頭連接成一條 UI Flow，「預覽確認」節點加上分支箭頭指回「填寫成色與描述」，可直接作為 ui05 線框稿階段的起點。這一整串對話從拾器的定位、案例、人物誌到現在的畫面流程，脈絡都有延續下來，之後回頭查閱也能一次看懂整個決策過程。

Figma Agent 可依頁面清單一次生成多張 wireframe 並依序連接

銜接下一步：從研究到完整 App／網站

拾器的十四關前置作業走完了，你已經有詞彙、案例、主題、人物誌一路到線框稿與 UI Flow，接上《Figma Agent 深度實戰》完整流程，繼續做互動原型。回頭想再看一次完整案例？下面兩個案例（讀菇－毒菇識別 App、拾器 PICK IT）都可以對照參考。

Figma Agent 深度實戰案例一．讀菇－毒菇識別 App 完整講義↗ 讀菇－毒菇識別 App案例一．Figma 實作範例檔案↗ 拾器 PICK IT案例二．本頁案例的 Figma 實作範例檔案↗ ui05．Wireframe 線框稿下一個教學單元→ Figma 官方說明Work with the Figma agent↗ UX Research TemplateFigma Community↗

延伸影片

UI 開發流程前置作業

[期中作業] UI 開發流程前置作業

Figma 流程圖製作

本頁以課程教材 ui04.html 重新整理排版，全部十四個前置流程關卡改用單一案例「拾器」貫穿，並補上與《Figma Agent 深度實戰》讀菇－毒菇識別 App 案例銜接的操作示範。Figma Agent 一鍵生成流程圖／組織圖／甘特圖／心智圖為 Figma 官方文件所列功能；人物誌、同理心地圖、故事地圖、旅程圖目前非官方列出的一鍵生成類型。內容整理於 2026 年 9 月。

使用者介面設計課程講義

從 0 到 1：跟著拾器一起做，前置作業FOCUS不再是紙上談兵

UX 研究詞彙地圖

如何蒐集案例

雙鑽石設計流程

如何發想主題

設定使用者：先決定「你在為誰設計」

使用者同理心地圖

痛點分析：把抱怨變成看得懂的分類

規劃 MVP：先做「影響大、成本低」的事

資訊架構：把功能收進看得懂的樹狀清單

使用者故事地圖

使用者旅程圖

流程圖製作

線框圖繪製 Wireframe

UI Flow：畫面怎麼串起來

期中作業必要項目檢核

銜接下一步：從研究到完整 App／網站

延伸影片

從 0 到 1：跟著拾器一起做，
前置作業FOCUS不再是紙上談兵