使用者介面設計課程講義
UI 開發流程前置作業
× Figma Agent 實戰
把「詞彙地圖」到「UI Flow」十四個前置關卡,串在同一個案例「拾器 Pick It」上。每一關都是同一個節奏:先懂定義 → 在頁面上動手玩 → 看 Figma Agent 怎麼做 → 換成你的題目。
開始之前:案例、複習影片與 AI 使用規則
研究方法教你「想清楚」,Figma Agent 教你「畫出來」。你不用死背名詞,跟著拾器走一輪,就等於練過一次完整的前置作業。
選一種你習慣的讀法
講義、影片、簡報是同一份內容。可以只選一種,也可以搭配著用。
十四關前置作業,9 分鐘快速複習
點右邊的章節,影片會直接跳到那一關。
學習路線:6 段,照順序走
每一段讀完卡片會變綠;發亮的那張是建議你接著讀的地方。每一章結尾也有「下一章」按鈕。
14 個關卡在雙鑽石裡的位置
雙鑽石的前兩個階段「把問題搞懂」,後兩個「把答案做出來」;每一關標題下方都會標示它屬於哪一個階段、承接誰、交給誰。
01 詞彙地圖・02 案例蒐集
04 主題・05 使用者・07 痛點・08 MVP・09 資訊架構
06 同理心地圖・10 故事地圖・11 旅程圖・12 流程圖
13 線框圖・14 UI Flow
跟 Figma Agent 合作的三個規則
提示詞先跟 ChatGPT 討論
下一章完整教你怎麼切換、怎麼問 → 跟 Figma Agent 對話前,先到 ChatGPT 或 Gemini 把題目的規劃與定義想清楚,請 AI 整理成給 Figma Agent 的完整指令。
一開始就講清楚背景
先說「這是什麼 App、要解決誰的什麼問題」——拾器=設計系學生的材料交換平台,AI 才不用用猜的。
同一個對話串走到底
14 關都在同一串「接著問」,指令直接說「延續拾器」「承接上一關」,AI 才記得前面做過什麼,產出才前後呼應。
Figma Agent 試用期提醒|10/6 起恢復扣點:Beta 試用將於 2026 年 10 月 6 日到期,之後每一次生成或修改都會扣 AI 點數,點數用完就無法繼續使用。①10/6 前先把期中要用的圖生成好並存檔;②指令先在 ChatGPT/Gemini 想清楚,一次講清楚;③全部關卡放在同一個對話串;④改字、換色、移位置這類小調整自己動手改。
ChatGPT × Figma Agent:先想清楚,再畫出來
很多同學一打開 Figma Agent 就說「幫我畫一個人物誌」,結果每次畫出來都不一樣、一直重畫、點數也燒光。原因是:Figma Agent 很會「畫」,但不會替你「想」。這一章教你在兩個 AI 之間怎麼切換、每一步要怎麼問,讓每一句指令都精確到可以直接畫出符合需求的設計。
先搞懂分工:誰負責什麼?
負責「想」:決定要畫什麼
- 產品定位:給誰用、解決什麼、跟別人哪裡不同
- 每一關的內容:人物誌欄位、痛點分組、功能優先序、頁面清單
- 真實文字:品名、按鈕字、說明文案
- 把以上整理成一段精確的 Figma Agent 指令
負責「畫」:把內容變成設計
- 心智圖、比較表、人物誌卡片、旅程圖
- 資訊架構、流程圖、Wireframe、UI Flow
- 版面、對齊、顏色、字級、連線
- 依你的回饋做小幅修改(對齊、換色、補漏畫)
一句話記住:ChatGPT 決定「畫什麼」,Figma Agent 負責「怎麼畫」。內容還沒想清楚之前,不要打開 Figma Agent。
切換流程:6 個步驟,在三個位置之間來回
點圖上的節點或下面的步驟按鈕,看每一步「在哪個視窗、做什麼、怎麼說」。
在 ChatGPT・整學期只做一次
產品定位:讓 AI 認識你的 App
回答「給誰用、解決什麼問題、跟現有做法哪裡不同」,請 ChatGPT 整理成一張產品定位卡,再濃縮成一段 3~4 句的背景段落。之後每一句 Figma Agent 指令都把背景段落放在最前面。問法在下面「第一步」。
在 ChatGPT・每一關都做
問這一關需要的內容
用下面「每一關的切換表」或各關卡裡的「③-1 先問 ChatGPT」問法,讓 ChatGPT 產出這一關的文字與資料,例如人物誌 6 個欄位、8 則語錄怎麼分組。要求它用表格或條列輸出,之後比較好貼。
你自己・不能跳過
挑選、刪改、補上真實資料
AI 給的是草稿:刪掉不符合訪談的、改成你同學真的會說的話、補上數字。這一步決定作品是不是「你的」。改好的內容就是下一步要放進指令的「真實內容」。
回到 ChatGPT
請 ChatGPT 轉成「精確的 Figma Agent 指令」
把改好的內容貼回 ChatGPT,用下面的「轉換問法」請它依 6 要素寫成一段指令:背景、任務、產出物與數量、結構規格、真實內容、樣式與限制。寫完先用「精確度檢查器」測一下。
在 Figma Agent・同一個對話串
貼上指令,讓 Agent 畫
一次貼完整段,不要拆成好幾句。第二關之後都在同一個對話串,開頭寫「延續拾器」「承接上一關」,Agent 才會記得前面的設定。
你自己・然後決定回哪裡
檢查,再決定回 ChatGPT 還是留在 Figma Agent
內容不對(想法錯、資料不夠、分類怪)→ 回到步驟 2 問 ChatGPT。畫得不對(沒對齊、漏畫、顏色字級)→ 直接在 Figma Agent 說具體要改哪裡,例如「把恩恩的卡片寬度改成跟雷雷一樣 320px」。
練習:遇到這個狀況,要回哪一邊?
判斷規則:要重新「想」的回 ChatGPT;內容已經確定、只是「畫」錯了,留在 Figma Agent。
第一步:先跟 ChatGPT 做「產品定位」
把下面的空格換成你的題目,複製到 ChatGPT。它會先反問你,回答完再請它輸出定位卡。
你是一位資深 UX 產品經理。我要做一個 App 當作 UI 設計課的期中專題,請先幫我把「產品定位」想清楚。 ・暫定名稱:拾器 Pick It ・想服務的人:設計系學生 ・他們遇到的問題:學期末工具材料閒置,學弟妹卻買不起新的 ・目前大家怎麼解決:在社團貼文、私下問學長姐 請你: 1. 先問我 5 個你還需要知道的問題,等我回答; 2. 回答後,用表格輸出「產品定位卡」:一句話定位、目標使用者(2 種角色)、核心痛點(3 個)、MVP 功能(3 個)、跟現有做法的差異、風格關鍵字(3 個)、這次不做的事; 3. 最後把定位卡濃縮成 3~4 句的「背景段落」,讓我之後貼在每一句 Figma Agent 指令的最前面。
ChatGPT 應該回給你的「產品定位卡」(拾器範例)
- 一句話定位
- 讓設計系學生把閒置的工具材料,交給剛好需要的學弟妹。
- 目標使用者
- 賣方:想脫手工具的大三大四(雷雷)/買方:預算有限的新生(恩恩)
- 核心痛點
- 二手交易不安心・工具材料太貴・社團貼文洗版找不到
- MVP 功能
- 拍照刊登・瀏覽搜尋・站內私訊洽談
- 差異
- 只限學校信箱註冊、校園內面交、依科系分類
- 風格關鍵字
- 親切・俐落・像校園布告欄
- 這次不做
- 線上金流、運送、跨校交易
精確指令的 6 個要素
點一個要素,看它在下面這段指令的哪裡。缺任何一項,Figma Agent 就只能用猜的。
模糊的指令
幫我畫一個人物誌。
Agent 不知道是誰、幾個人、要哪些欄位、內容是什麼——每次畫出來都不一樣。
精確的指令
延續「拾器 Pick It」(設計系學生的二手工具交換 App)的設定,幫我建立人物誌卡片,共 2 張:雷雷(想脫手工具的賣家)與恩恩(剛入學的買家),每張包含頭像、姓名年齡、身份、目標、挫折、常用行為 6 個欄位,兩張尺寸統一、左右並排;欄位內容使用下面這段已整理好的文字:〔貼上 ChatGPT 整理並由你修改過的內容〕;不要自行新增欄位,配色用灰階加一個品牌色 #0ABAB5,每個欄位 30 字以內。
轉換問法:請 ChatGPT 把內容變成 Figma Agent 指令
上面是我修改好的「人物誌」內容。請把它整理成一段要貼給 Figma Agent 的指令,規則: 1. 第一句放我的背景段落:〔貼上背景段落〕; 2. 依序寫清楚:任務(要畫什麼圖)→ 產出物與數量 → 結構規格(欄位、排列、尺寸)→ 真實內容(完整貼上,不要摘要)→ 樣式與限制; 3. 所有數量都寫成數字,不要用「一些」「幾個」; 4. 不要加入我沒提供的內容; 5. 只輸出指令本身,寫成一段,方便我直接複製。
指令精確度檢查器
把 ChatGPT 給你的指令貼進來,檢查 6 個要素有沒有寫到(依關鍵字判斷,僅供參考,最後還是要自己讀一遍)。
每一關的切換表:先問 ChatGPT 什麼,再帶什麼去 Figma Agent
選一關看完整的問法。每一關的「③-1 先問 ChatGPT」也放了同一段,跟著關卡做就好。
最常見的 5 個錯誤
叫 Figma Agent 幫你想題目
它會畫出很漂亮但跟你無關的東西。定位與內容一律先在 ChatGPT 想清楚。
沒有數字
「幾個功能」「一些欄位」→ 改成「3 個功能」「6 個欄位」「375×812」。
每一關開新對話
新對話等於失憶,Agent 不記得拾器是什麼。同一串走到底,開頭說「延續」。
內容錯了卻在 Agent 裡硬改
一直叫 Agent「再想一下」很燒點數。內容問題回 ChatGPT,改好再帶過去。
直接照抄 AI 的草稿
沒有經過步驟 3(你挑選修改),作品就不是你的,也和訪談對不起來。
小修要說「哪裡、改成什麼」
不要說「好醜」「再好看一點」,要說「標題字級改 24、卡片間距 16、對齊左邊」。
UX 研究詞彙地圖
接下來 14 關會一直出現這 10 個名詞。不用背定義,先用生活中的比喻抓住「它是用來幹嘛的」,做到那一關時再回來對照。
去聽、去看使用者,找出他們真正卡在哪裡。
痛點・旅程圖・同理心地圖
把研究結果整理成方向:為誰做、先做什麼、放在哪裡。
人物誌・MVP・資訊架構
把決定變成看得見的圖,給組員、老師、工程師看。
故事地圖・流程圖・Wireframe・UI Flow
點任一張卡片,看「生活比喻+拾器例子+在哪一關會用到」。
痛點 Pain Point研究方法使用者「卡住、不爽」的地方,背後真正的原因。
- 比喻
- 像看醫生:「咳嗽」是症狀,「感冒」才是病因——痛點要找的是病因。
- 拾器
- 「跟網友約面交有點怕」背後的痛點是「交易缺乏信任機制」。
- 用在
- 07 痛點分析
旅程圖 Journey Map研究方法把使用者做一件事的過程從頭排到尾,標出每一步的心情。
- 比喻
- 像一趟旅行的心情日記:哪裡開心、哪裡最煩,一眼就看得出來。
- 拾器
- 雷雷刊登工具的 5 個階段裡,「等買家私訊」心情最低,就是要優先改善的地方。
- 用在
- 11 旅程圖
同理心地圖 Empathy Map研究方法把使用者在某個當下「說、想、做、感受」分四格寫下來。
- 比喻
- 像幫角色寫內心獨白:嘴巴說的,跟心裡想的常常不一樣。
- 拾器
- 恩恩嘴上說「二手也可以」,心裡卻擔心「東西跟照片不一樣怎麼辦」。
- 用在
- 06 同理心地圖
人物誌 Persona定義工具把訪談到的一群人,濃縮成「一個很像真人的虛構角色」。
- 比喻
- 像寫故事前先設定主角:名字、目標、煩惱都寫清楚,大家討論功能時才有同一個對象。
- 拾器
- 雷雷(想賣掉工具的設計二學生)、恩恩(想買便宜工具的新生)。
- 用在
- 05 設定使用者
MVP 最小可行產品定義工具第一版只做「最關鍵、少了就不能用」的功能。
- 比喻
- 像新開的餐廳先只賣招牌菜,確定有人愛吃,再慢慢加菜單。
- 拾器
- 第一版只做刊登、瀏覽、洽談三件事,AI 估價等之後再做。
- 用在
- 08 規劃 MVP
資訊架構 IA定義工具決定 App 裡的東西「放在哪一層、叫什麼名字」。
- 比喻
- 像整理衣櫃:上衣、褲子、外套各一格,要找的時候不用整櫃翻。
- 拾器
- 首頁底下分成瀏覽搜尋、刊登物品、交換洽談、個人檔案四大類。
- 用在
- 09 資訊架構
故事地圖 Story Map產出物把使用者要做的事排成一排,再往下拆成小任務,分出先做/後做。
- 比喻
- 像旅行行程表:上排是每天的主行程,下面列出「必去」和「有空再去」的景點。
- 拾器
- 「刊登物品」拆成拍照上傳、選成色、送出上架(先做);AI 估價(之後再做)。
- 用在
- 10 故事地圖
流程圖 Flow Chart產出物用方塊和箭頭,畫出「一步一步怎麼走、遇到選擇往哪走」。
- 比喻
- 像捷運轉乘圖:到了某一站,要決定往哪個方向搭。
- 拾器
- 刊登工具時,「要不要用 AI 估價?」就是一個用菱形畫的分岔點。
- 用在
- 12 流程圖
Wireframe 線框稿產出物只用灰色方塊畫出畫面上「東西放哪裡」,先不管顏色。
- 比喻
- 像蓋房子的平面圖:先決定客廳、臥室在哪,再挑家具和油漆顏色。
- 拾器
- 刊登頁由上到下:上傳照片、成色選單、描述欄、送出按鈕。
- 用在
- 13 線框圖
UI Flow 畫面流程產出物把一個任務會經過的「畫面」,依順序串起來。
- 比喻
- 像漫畫分鏡:一格一格看出畫面怎麼換到下一格。
- 拾器
- 首頁 → 上傳照片 → 填寫成色 → 預覽確認 → 上架成功。
- 用在
- 14 UI Flow
我們這學期的期中範例是「拾器 Pick It」——一個給設計系學生用的二手工具/材料交換 App,目標是讓學期末想脫手材料的人,跟正好需要材料的學弟妹配對成功,減少材料浪費。接下來這整個對話我都會沿用這個設定跟你討論十四關前置作業,先記住:App 名稱「拾器」、對象是設計系學生、核心目的是材料閒置媒合。第一件事:這是我們這學期會用到的 10 個 UX 詞彙,我先依用途分成三類——研究方法(了解使用者用的):痛點、旅程圖、同理心地圖;定義工具(決定做什麼用的):Persona、MVP、資訊架構;產出物(畫出來的成果):故事地圖、流程圖、Wireframe、UI Flow。幫我畫成一張以「拾器」為中心的放射狀心智圖,三類節點分別用不同顏色呈現(研究方法=藍、定義工具=紫、產出物=綠),每個節點旁加一行 10 字內的白話定義,方便期中報告直接截圖使用。
Figma Agent:已記住拾器的設定(設計系學生的材料交換平台),後續每一關都會延續這個脈絡。心智圖已建立,中心節點為「拾器」,10 個詞彙依你指定的三色分類排列成放射狀分支,並附上每個詞彙的一行定義,可直接列印當作課堂小抄。
提示詞裡的分類與 Agent 的分類略有不同也沒關係——重點是先講清楚背景,之後每一關都能延續。
這頁書籤起來,之後每進到一個新關卡,都可以回來對照這關用到的詞彙。
如何蒐集案例
案例蒐集不是隨便找幾張截圖,而是帶著問題去看——這個功能別人怎麼做?為什麼這樣設計?看多了,才知道拾器可以借鏡什麼、該避開什麼坑。
免費、大家都在用。
貼文洗版快、訊息很快就找不到。→ 拾器借鏡:分類篩選
找二手東西方便。
不是校園情境,運費與面交比較麻煩。→ 拾器借鏡:物品卡片格式
可以借鏡分類篩選、物品卡片的畫面配置。
範本是介面參考,不是真實使用情境。→ 拾器借鏡:站內洽談留言區
Figma Agent 小提醒:把蒐集到的截圖貼進 Figma Agent,請它依「功能相似度」分組整理,比自己一張張比對更有效率。
延續拾器的設定,我照「材料交換」這個方向蒐集了社團公告版、旋轉拍賣、Figma Community 三個參考案例的截圖,幫我整理成一張三欄比較表,欄位是使用情境、優點、缺點;比較完之後在表格最下面加一列「拾器決定沿用/不沿用」,具體列出至少 3 個拾器可以直接借鏡的功能設計(例如分類篩選、物品卡片、站內洽談這種具體功能名稱,不要寫「介面不錯」這種空泛評語),方便直接寫進期中報告的案例分析段落。
Figma Agent:已建立比較表,3 欄分別對應三個案例,列出「使用情境」「優點」「缺點」三列;最下面「拾器決定沿用」列具體標記了 3 個借鏡功能:社團公告版的分類篩選、旋轉拍賣的物品卡片格式、Figma Community 的站內洽談留言區,並各自附上一行「為什麼採用」的理由。
找 3 個跟你題目相近的服務,每個都寫出 1 個值得學習處與 1 個體驗瑕疵,最後具體列出你決定沿用的功能。
雙鑽石設計流程
雙鑽石把設計拆成「探索 → 定義 → 發展 → 交付」四個階段:前兩個負責「把問題搞懂」,後兩個負責「把答案做出來」。接下來所有關卡,都能對應到其中一個階段。
① Discover 探索
盡量發散蒐集,不急著下結論。
對應關卡:詞彙地圖・案例蒐集
② Define 定義
把蒐集到的資訊篩選、收斂成明確方向。
對應關卡:主題發想・設定使用者・痛點分析・規劃 MVP・資訊架構
③ Develop 發展
把方向具體化成好幾種可能的設計。
對應關卡:同理心地圖・故事地圖・旅程圖・流程圖
④ Deliver 交付
選定最終方案,做成看得懂的設計稿。
對應關卡:線框圖繪製・UI Flow
卡關時先問自己:「我現在是在搞懂問題,還是在做答案?」通常就知道該回頭做哪一步。
接著在同一個對話裡繼續問:剛剛的案例比較表跟詞彙心智圖都是「探索」階段會用到的工具,幫我畫一張雙鑽石設計流程圖,左邊是「探索、定義」問題空間,右邊是「發展、交付」答案空間,中間標出洞察點,每個階段下面各列出 2~5 個對應的作業關卡名稱,並在最上方加一句話說明「左邊發散找問題、右邊收斂做設計」,讓還沒上過課的同學也看得懂。
Figma Agent:已建立雙鑽石流程圖,左右兩個菱形分別用兩種顏色區分問題空間與答案空間,中間標出洞察點,並在四個階段下方各自條列對應關卡,可直接匯出當作報告封面圖。
如何發想主題
主題發想不是「等靈感」,而是把「誰+在什麼情境+卡在哪裡」組成一句話,題目自然就出現了。拾器就是從這三個空格填出來的。
Figma Agent 小提醒:找題目卡住時,先在 Figma Agent 開一張腦力激盪板,把「使用者/情境/困擾」各列一排關鍵字,AI 會幫你初步分類,再回來組句子會快很多。
回到拾器的主題發想,我們訪談了 5 位設計系學生(跟一開始設定的目標對象一致),聽到的關鍵字有:預算有限、工具閒置、找不到人接手、二手交易不安心、社團貼文洗版快。幫我先歸納成「誰 WHO/情境 WHERE/困擾 WHAT」三欄便利貼板,每欄各自整理出 3 個候選描述,再從三欄裡各挑一個組成一句「WHO 在 WHERE 情境下,因為 WHAT 而困擾」的主題句候選,最後把票選出來、確定採用的那一句另外框起來標註「本次採用」,方便對照下一關的人物誌設定。
Figma Agent:已建立三欄便利貼板:WHO(設計系學生/新生/畢業生)、WHERE(開學採購/學期末清空/急需材料)、WHAT(找不到安心管道/東西閒置/訊息洗版),並組出 3 句候選主題句。標註「本次採用」的是:「畢業生在學期末清空的情境下,因為東西閒置找不到人接手而困擾」——這句之後會直接對應到雷雷(賣家)人物誌的核心動機。
設定使用者:先決定「你在為誰設計」
同一個 App,賣方和買方要解決的問題完全不同。把「誰會用」寫清楚——身份、目標、會卡住的地方,寫得越具體,之後的功能取捨就越有依據。
雷雷,設計二
主修產品設計・宿舍住宿|手上有工具想脫手- 目標
- 學期結束前,把用不到的美工工具換成現金或其他材料
- 挫折
- 社團公告版洗版很快,私訊約時間又常被放鳥
- 行為
- 習慣用手機拍照上傳,懶得寫太長的說明文字
恩恩,視傳一
剛入學・工具箱幾乎全新|要找便宜堪用的工具- 目標
- 用一半預算,買齊繪圖、裁切等基本工具
- 挫折
- 不確定二手工具堪不堪用,也怕約見面不安全
- 行為
- 會先比價、看評價,猶豫很久才敢私訊賣家
操作提醒:寫使用者角色時,「目標」跟「挫折」要對得起來——挫折通常就是後面痛點分析的原始素材。
承接上一關選定的主題,我有兩位受訪者的筆記:雷雷(想脫手工具的賣家)、恩恩(剛入學的買家),幫我各自整理成一張人物誌卡片,包含頭像、姓名年齡、身份、目標、挫折、常用行為六個欄位,兩張卡片尺寸統一、並排放置,方便比較買賣雙方的需求差異——這兩位之後的痛點分析、故事地圖都會持續用到,請記住他們的設定。
Figma Agent:已建立兩張人物誌卡片,欄位與版型一致,方便並排比較;已依你提供的筆記填入目標、挫折、行為欄位內容。
使用者同理心地圖
用「說・想・做・感受」四個象限,把使用者的外在言行跟內在情緒對照起來看。跟人物誌不同,它聚焦在「這個當下」的心理狀態——也是下一關痛點分析的原始素材。
「有沒有便宜一點的美工刀啊,二手也可以。」「這款切割墊看起來滿新的,賣家人應該不錯。」
如果東西跟照片落差很大怎麼辦?跟陌生人約見面安全嗎?可以先問賣家問題再決定嗎?
在社團公告版滑很久找便宜工具、比對照片跟賣家評價,私訊詢問細節後才決定要不要約時間。
怕買貴、怕被放鳥、怕東西跟描述不符;找到划算又順利的交換時,會很開心、想再回來用。
回到恩恩這位人物誌,這是他(買方)的訪談重點筆記,幫我整理成一張同理心地圖,分成說、想、做、感受四象限,中間放使用者頭像,每個象限至少放 3 則具體內容(不要空泛的形容詞),方便對照逐字稿檢查有沒有遺漏。
Figma Agent:已建立同理心地圖範本,中央為使用者頭像圖示,四周依四象限自動排入你筆記中對應的句子,並用不同顏色區分理性(想)與情緒(感受)內容。
痛點分析:把抱怨變成看得懂的分類
痛點分析不是把抱怨照抄一遍,而是幫它們「分類」,找出重複出現、影響最大的幾組,才知道 MVP 該先解決什麼。
「跟陌生網友約見面拿東西,其實有點怕。」— 恩恩,視傳一
「怕買到的工具跟照片落差很大,錢付了才發現。」— 訪談對象 D
「約在校外面交,其實不太確定對方是不是真的學生。」— 訪談對象 G
「每學期買新的筆刀、切割墊,一學期下來也是一筆錢。」— 恩恩,視傳一
「工具行的東西不便宜,學生真的買到肉痛。」— 訪談對象 C
「畢業前一堆工具用不到,丟掉又覺得浪費。」— 雷雷,設計二
「抽屜裡有三支美工刀,其實只用過一次。」— 訪談對象 E
「社團公告洗版太快,貼文兩小時就找不到了。」— 雷雷,設計二
結論:真實訪談的分組通常不會平均——數量最多的「信任安全」,就是下一關規劃 MVP 時最優先要解決的痛點。
延續雷雷跟恩恩的訪談,這是我們蒐集到的 8 則語錄逐字稿:①「跟陌生網友約見面拿東西,其實有點怕。」(恩恩)②「怕買到的工具跟照片落差很大,錢付了才發現。」(訪談對象D)③「約在校外面交,其實不太確定對方是不是真的學生。」(訪談對象G)④「每學期買新的筆刀、切割墊,一學期下來也是一筆錢。」(恩恩)⑤「工具行的東西不便宜,學生真的買到肉痛。」(訪談對象C)⑥「畢業前一堆工具用不到,丟掉又覺得浪費。」(雷雷)⑦「抽屜裡有三支美工刀,其實只用過一次。」(訪談對象E)⑧「社團公告洗版太快,貼文兩小時就找不到了。」(雷雷)。幫我依主題分成幾組便利貼,每組下一個分類標籤,並統計每組有幾則、依數量由多到少排序,方便我們決定痛點分析報告要先講哪一組。
Figma Agent:已依主題分成 4 組並依數量排序:信任安全(3)>花費(2)=閒置浪費(2)>資訊落差(1)。信任安全這組語錄最多,代表「怕被騙、怕東西跟描述不符、怕約見面不安全」是目前最多人在意的痛點,建議報告從這組先講起。
把你蒐集到的語錄依重複出現的主題分成 3~5 組,每組取一個好懂的分類標籤,再數數看哪一組最多。
規劃 MVP:先做「影響大、成本低」的事
MVP 不是「功能砍半」,而是用一張 2×2 矩陣,依「對使用者的影響」與「開發成本」定位每個功能,優先做高影響、低成本的那一群。
時間:小 約 1 週內|中 約 2~3 週|大 超過 3 週或需外部資源
P0 超過 4 個了!建議控制在 3~4 個以內。
操作提醒:P0 建議控制在 3~4 個以內——拾器期中要優先做出來的核心流程就是:刊登、瀏覽、洽談,它們直接對應「信任安全」與「花費」兩組最多人在意的痛點。
根據剛剛整理出的痛點分組(信任安全 3 則最多、花費與閒置浪費各 2 則、資訊落差 1 則最少),我把 7 個候選功能排出優先序:P0 是刊登工具(拍照上傳)、瀏覽/搜尋清單、站內私訊洽談——這三個直接對應信任安全與花費這兩組最多人在意的痛點;P1 是信用評價系統、AI 估價建議、校園面交地點地圖、收藏/追蹤賣家。幫我畫成一張分兩期的功能路線圖,第一期(P0)用實心卡片、第二期(P1)用虛線卡片,兩期中間畫箭頭連接;並在每個功能卡片上標註我估計的開發時間——刊登工具=中、瀏覽搜尋清單=小、站內私訊洽談=中、信用評價系統=中、AI 估價建議=大、校園面交地點地圖=小、收藏追蹤賣家=小,方便排進期中到期末的時程規劃。
Figma Agent:已建立兩期功能路線圖:第一期(P0)3 個功能以實心卡片呈現,第二期(P1)4 個功能以虛線卡片呈現,並標註開發時間、用箭頭標出期程先後,可直接放進期中簡報。
資訊架構:把功能收進看得懂的樹狀清單
資訊架構(IA)回答「東西放在哪一層、叫什麼名字」。從 MVP 清單出發,把功能收進 3~5 個一級分類,再展開子項目,之後的頁面清單、導覽列都從這棵樹長出來。
拾器 App(首頁)
瀏覽/搜尋
刊登物品
交換洽談
個人檔案
Figma Agent 小提醒:把這棵樹的文字結構貼給 Figma Agent,請它「依此生成資訊架構圖」,就能直接得到可編輯的節點圖。
接著把上一關 MVP 路線圖裡第一期(P0)確定要做的三個功能——刊登工具(拍照上傳)、瀏覽/搜尋清單、站內私訊洽談,分別對應成「刊登物品」「瀏覽搜尋」「交換洽談」三個頁面節點;再加上使用者一定會用到、但不算獨立功能的「首頁」跟「個人檔案」,總共 5 個一級節點。這是完整規劃,不是只做其中一部分:幫我畫一張詳細完整的資訊架構圖,APP ROOT 為「拾器 Pick It」,5 個一級節點都要各自展開完整的二到三級子項目(每個節點至少 4~5 項,不要省略成只列大方向),每一項都附一行說明文字,同層節點對齊、加上編號(1.1、1.2…),方便之後直接對照頁面命名與網址規劃。
Figma Agent:已建立完整資訊架構圖:APP ROOT「拾器 Pick It」下 5 個一級節點,每個節點都展開了完整的子項目與一行說明,總計超過 20 項,依瀏覽動線由左至右排列、同層對齊。
提示詞明確要求「詳細完整」+每個節點的最低子項目數,生成結果才不會只給大方向。
使用者故事地圖
故事地圖把使用者「一連串的活動」橫向排成主幹(backbone),再往下拆成具體的使用者故事,並分成「MVP 要做」跟「之後再做」。
操作提醒:每則故事寫成「使用者能做到什麼」,不是「系統有什麼功能」——「上傳照片」比「支援圖片上傳功能」更貼近使用者視角。
對照剛剛資訊架構裡的「刊登物品」節點,使用者活動依序是:拍照上傳、填寫成色說明、設定方式、送出刊登。幫我畫成故事地圖,主幹放這 4 個活動;下面 MVP 這排放 3 個故事——「手機相機直接拍照上傳」「用文字描述物品新舊成色」「按下送出後立刻出現在瀏覽清單」;之後再做這排放 2 個故事——「AI 根據照片自動建議成色等級」「新增郵寄以外的面交地點選項」,用不同顏色卡片區分兩排,方便之後直接轉成開發排程。
Figma Agent:已建立故事地圖,頂層 4 張卡片為活動主幹,中層 3 張為 MVP 故事,底層 2 張為之後再做的故事,並用直向對齊線標出每個故事屬於哪個活動。
使用者旅程圖
旅程圖把使用者從「開始」到「結束」的過程依時間排開,再畫出一條情緒曲線——曲線往下掉的地方,通常就是設計要優先解決的關卡。
① 想脫手工具,打開拾器
使用者行為:猶豫要不要花時間拍照上傳,怕沒人要
情緒與系統回應:普通|首頁立刻顯示「附近正有人在找這類工具」
② 拍照上傳、填寫成色
使用者行為:3 分鐘內拍完照、選好成色等級
情緒與系統回應:順手|表單精簡,填完馬上預覽刊登卡片
③ 等待買家私訊
使用者行為:每天打開 App 看有沒有人詢問,有點焦慮
情緒與系統回應:略焦慮|顯示「已有 3 人瀏覽」給一點回饋
④ 收到私訊、約面交
使用者行為:跟買家對時間地點,確認要面交
情緒與系統回應:安心|站內訊息記錄完整,不怕私訊被洗掉
⑤ 面交完成、標記完成
使用者行為:雙方見面後,在 App 上按下完成交換
情緒與系統回應:開心|工具找到新主人,抽屜也清空了
操作提醒:「等待買家私訊」是情緒曲線的最低點——這正是拾器要在系統回應裡補上「已有 X 人瀏覽」這類小提示的原因。
換成雷雷這位賣家的視角,這是他刊登工具的 5 個階段與對應情緒(普通、順手、略焦慮、安心、開心),幫我畫成一張旅程圖,上面是情緒曲線,下面是每個階段的行為說明,並在情緒最低點旁加註「這裡最需要優化」的提示文字。
Figma Agent:已建立旅程圖,上方以折線標出 5 個階段的情緒高低,最低點自動標紅提醒是需要優先改善的關卡,下方對應每階段的使用者行為與系統回應文字。
流程圖製作
流程圖把一個任務拆成明確的步驟與判斷點,決策的地方用菱形標出分支,讓開發跟設計都知道「接下來會怎麼走」。
這一關要畫的是「整個 App」,不是單一個功能:上面只是示範怎麼畫決策節點(菱形+條件分支)。期中作業的流程圖要從 App 啟動開始,涵蓋登入/註冊、首頁、瀏覽搜尋、刊登物品、交換洽談、個人檔案彼此怎麼連接,直到完成任務為止——範圍要跟下面 Figma Agent 生成的完整版一樣大。
現在要畫的不是單一功能,而是「拾器 Pick It」整個 App 從啟動到完成交換的完整流程圖。請依這個範圍畫:①開始→App 啟動(Splash 畫面)→引導頁(歡迎/探索/開始)→判斷是否已有帳號,是則登入、否則註冊,兩條路都會合流到首頁;②首頁往下分三大模組平行畫:瀏覽搜尋(瀏覽搜尋頁→物品卡片列表→物品詳情頁→有無興趣的決策→加入收藏或聯絡賣家→聊天室→是否達成共識的決策→確認面交→前往面交→是否完成的決策→互相評價→回到列表或結束);刊登物品(點選刊登→拍照上傳→填寫名稱成色→選擇分類→設定價格→面交地點偏好→預覽確認→是否確認發布的決策→發布上架或返回修改);個人檔案(個人資訊→我的刊登→我的收藏→交易紀錄→設定);③三個模組最後都要能走到 End。決策節點統一用菱形並標「是/否」文字,模組之間用不同顏色的區塊底色區分,箭頭方向由上到下、模組間用跨模組的虛線箭頭連接,整張圖要能一次看懂 App 的完整使用路徑,不是只有其中一段。
Figma Agent:已建立完整版 App 流程圖:Start 到 App 啟動、引導頁、登入/註冊決策、首頁後,平行展開瀏覽搜尋、刊登物品、個人檔案三大模組,決策節點都套用菱形並標註「是/否」,模組間以跨模組虛線箭頭連接,最終都收斂回 End,並附圖例。
提示詞明講「不是單一功能,而是整個 App」+列出三大模組各自的完整步驟,生成結果才會涵蓋全部路徑。
線框圖繪製 Wireframe
Wireframe 只畫版面的「骨架」——內容放哪裡、大小關係、操作動線,先不管顏色字型。這一關先認識 App 常見的畫面類型;完整的 Figma Agent 線框圖教學在下個單元 ui05。
勾選的區塊會由上而下出現在右邊的線框稿;已選 0 / 6。
組出線框稿
接著這一關,把APP流程圖的每個畫面,逐一畫成完整的手機版面線框稿——每一頁都要有:頂部標題列、主要內容區、底部操作按鈕,統一用灰階色塊圖片佔位框,圖片以外的所有文字都是真實的文字。編排請考慮使用者操作便利性,因為考慮到後續要用這個線框稿延伸成精稿,希望編排能具設計感,之後也能套用製作的 shader 的風格。
先問 ChatGPT:為了更完整的呈現線框稿的設計,先在 ChatGPT 對話,請它協助生成適合完整線框稿的指令,可參考 與 ChatGPT 的對話。
Figma Agent:已建立低保真 wireframe,4 個區塊由上到下排列,皆以灰階色塊呈現,並標註各區塊的尺寸比例,可直接在此基礎上進行色稿設計。
從進入頁到各功能頁的完整製作流程,下個單元 ui05 Wireframe 線框稿 會用 Figma Agent 一步步示範。
UI Flow:畫面怎麼串起來
UI Flow 把一個任務會經過的「畫面」串成一條線,比流程圖更聚焦在「有哪些頁面、頁面之間怎麼跳轉」,是線框稿之間的目錄。
流程圖 vs UI Flow:流程圖的節點是「步驟或判斷」;UI Flow 的節點是「一整個畫面」。
最後把剛剛那張 wireframe 延伸成完整流程,依照「首頁→上傳照片→填寫成色與描述→預覽確認(決策)→上架成功頁」這 5 個畫面,各畫一張命名清楚的低保真 wireframe,統一用手機比例(375×812)、灰階配色,並依序用箭頭連接成 UI Flow,每張圖左上角標註頁面編號(01、02…)方便對照——這樣拾器從詞彙地圖到 UI Flow 的整個對話串就前後呼應,可以直接對照期中報告使用了。
Figma Agent:已建立 5 張低保真 wireframe,並依序排列、用箭頭連接成一條 UI Flow,「預覽確認」節點加上分支箭頭指回「填寫成色與描述」,可直接作為 ui05 線框稿階段的起點。
本單元自我檢核
7 題快問快答,確認 14 關的核心觀念與彼此的關係。選錯會顯示正確答案與該回去看哪一關。
銜接下一步
- ui05.Wireframe 線框稿|下一個教學單元
- Figma 官方說明|Work with the Figma agent
- UX Research Template|Figma Community
- Figma Agent 深度實戰|讀菇-毒菇識別 App
延伸影片
本頁十四個前置流程關卡以單一案例「拾器」貫穿。Figma Agent 一鍵生成流程圖/組織圖/甘特圖/心智圖為 Figma 官方文件所列功能;人物誌、同理心地圖、故事地圖、旅程圖目前非官方列出的一鍵生成類型。內容整理於 2026 年 9 月。
第七週遠距教學:影片與課程簡報
同一份內容,三種讀法:讀講義、看影片、翻簡報。挑你最順手的方式,也可以搭配著用——例如先看影片抓全貌,再回講義逐關做,最後用簡報複習。
UI 開發流程前置作業 × ChatGPT × Figma Agent × 期中報告(33 分鐘)
點右邊的章節,影片會直接跳到那一段。播放器的「CC」可以開關字幕。
課程簡報:61 張,跟影片同一套
點任一張直接打開簡報。簡報裡按 ←→ 換頁、N 看講稿、G 總覽、F 全螢幕;每一張都能「從這張開始看影片」。
期中簡報怎麼做:把 14 關整理成一份簡報
十四關做完,最後一步是把它們排成 5 分鐘講得完的簡報(第 8 週製作、第 9 週發表)。不用從零開始:老師準備了兩份範例,複製一份改成你的就好。完整說明在 期中作業頁。
期中作業說明影片(8 分鐘)
要放什麼、怎麼複製範例、加分的 Prototype、怎麼發表,一次看懂。點右邊章節可以跳段。
簡報順序:5 個章節
問題與研究
動機・目的・研究方法・競品分析
使用者與洞察
訪談整理・研究洞察・人物誌・同理心地圖・旅程圖
架構與流程
MVP・故事地圖・資訊架構・流程圖
線框與串接
Wireframe・UI Flow
檢核與下一步
還沒驗證的地方、期末計畫
期中除了介紹簡報,再把線框圖接成可以點的原型,發表講到線框時現場點一遍主要流程(30~45 秒),可以加分。灰階線框就好,主線點得通即可。怎麼做 →/ui05 Prototype
兩種做法,建議用 A
A:複製範例,改成你的
- 登入 Figma → 打開範例
- 左上角檔名 ⌄ → Duplicate to your drafts
- 改檔名、一頁一頁換內容,Share 連結交到 Moodle
請將前置調查的內容,包含動機、目的、競品分析、訪談整理、人物誌(目標對象)、研究洞察、同理心地圖、資訊架構圖、使用者故事地圖、使用者旅程圖、使用者流程圖、wireframe(線框圖)、ui flow 等,整理成清楚的 UI 前置調查的期中簡報,直接整理在同一頁。
為什麼推薦 A?這個指令要一次整理十幾項內容,會花掉很多 AI 點數。下面兩個案例就是用這句指令做出來的,老師已經幫你生好了——直接複製來改,省點數也省時間。























