使用者介面設計課程講義

UI 設計 / 單元講義 / 04 UI 開發流程前置作業.fig
0%
Week 05–06
Unit 04 · Week 05–06

UI 開發流程前置作業
× Figma Agent 實戰

把「詞彙地圖」到「UI Flow」十四個前置關卡,串在同一個案例「拾器 Pick It」上。每一關都是同一個節奏:先懂定義 → 在頁面上動手玩 → 看 Figma Agent 怎麼做 → 換成你的題目。

第 05–06 週14 個前置關卡案例:拾器 Pick It期中 13 項交付
01 研究:詞彙・案例
Frame 00 — 開始之前
Before you start
00

開始之前:案例、複習影片與 AI 使用規則

研究方法教你「想清楚」,Figma Agent 教你「畫出來」。你不用死背名詞,跟著拾器走一輪,就等於練過一次完整的前置作業。

拾
拾器 Pick It設計系學生的二手工具/材料交換 App:讓學期末想脫手材料的人,跟正好需要的學弟妹配對成功。

選一種你習慣的讀法

講義、影片、簡報是同一份內容。可以只選一種,也可以搭配著用。

十四關前置作業,9 分鐘快速複習

點右邊的章節,影片會直接跳到那一關。

在 YouTube 觀看 影片無法在頁面上播放時(例如直接在電腦上開啟 HTML 檔),點這裡到 YouTube 觀看;點章節後,連結會跟著跳到該時間。

學習路線:6 段,照順序走

每一段讀完卡片會變綠;發亮的那張是建議你接著讀的地方。每一章結尾也有「下一章」按鈕。

1STEP 1

準備

先學會 ChatGPT 與 Figma Agent 怎麼分工、怎麼問。

學會:做出產品定位卡與背景段落

0 / 2
2STEP 2

探索

認識詞彙、蒐集案例、看懂整個流程。

產出:心智圖、案例比較表

0 / 3
3STEP 3

定義問題

從訪談找出要解決的問題與第一期功能。

產出:人物誌、痛點分組、MVP 路線圖

0 / 5
4STEP 4

規劃結構與流程

把功能排成架構,再走一遍使用流程。

產出:資訊架構、旅程圖、流程圖

0 / 4
5STEP 5

交付畫面

畫出線框圖,串成 UI Flow。

產出:Wireframe+UI Flow

0 / 2
6STEP 6

檢核

自我檢核,對照期中作業必要項目。

交出:期中報告

0 / 2

14 個關卡在雙鑽石裡的位置

雙鑽石的前兩個階段「把問題搞懂」,後兩個「把答案做出來」;每一關標題下方都會標示它屬於哪一個階段、承接誰、交給誰。

① DISCOVER 探索

01 詞彙地圖・02 案例蒐集

② DEFINE 定義

04 主題・05 使用者・07 痛點・08 MVP・09 資訊架構

③ DEVELOP 發展

06 同理心地圖・10 故事地圖・11 旅程圖・12 流程圖

④ DELIVER 交付

13 線框圖・14 UI Flow

跟 Figma Agent 合作的三個規則

RULE 01

提示詞先跟 ChatGPT 討論

下一章完整教你怎麼切換、怎麼問 → 跟 Figma Agent 對話前,先到 ChatGPT 或 Gemini 把題目的規劃與定義想清楚,請 AI 整理成給 Figma Agent 的完整指令。

RULE 02

一開始就講清楚背景

先說「這是什麼 App、要解決誰的什麼問題」——拾器=設計系學生的材料交換平台,AI 才不用用猜的。

RULE 03

同一個對話串走到底

14 關都在同一串「接著問」,指令直接說「延續拾器」「承接上一關」,AI 才記得前面做過什麼,產出才前後呼應。

Figma Agent 試用期提醒|10/6 起恢復扣點:Beta 試用將於 2026 年 10 月 6 日到期,之後每一次生成或修改都會扣 AI 點數,點數用完就無法繼續使用。①10/6 前先把期中要用的圖生成好並存檔;②指令先在 ChatGPT/Gemini 想清楚,一次講清楚;③全部關卡放在同一個對話串;④改字、換色、移位置這類小調整自己動手改。

Frame 00+ — ChatGPT × Figma Agent 協作法
ChatGPT → You → Figma Agent
AI

ChatGPT × Figma Agent:先想清楚,再畫出來

很多同學一打開 Figma Agent 就說「幫我畫一個人物誌」,結果每次畫出來都不一樣、一直重畫、點數也燒光。原因是:Figma Agent 很會「畫」,但不會替你「想」。這一章教你在兩個 AI 之間怎麼切換、每一步要怎麼問,讓每一句指令都精確到可以直接畫出符合需求的設計。

先搞懂分工:誰負責什麼?

ChatGPT/Gemini

負責「想」:決定要畫什麼

  • 產品定位:給誰用、解決什麼、跟別人哪裡不同
  • 每一關的內容:人物誌欄位、痛點分組、功能優先序、頁面清單
  • 真實文字:品名、按鈕字、說明文案
  • 把以上整理成一段精確的 Figma Agent 指令
你挑選・修正・檢查
Figma Agent

負責「畫」:把內容變成設計

  • 心智圖、比較表、人物誌卡片、旅程圖
  • 資訊架構、流程圖、Wireframe、UI Flow
  • 版面、對齊、顏色、字級、連線
  • 依你的回饋做小幅修改(對齊、換色、補漏畫)

一句話記住:ChatGPT 決定「畫什麼」,Figma Agent 負責「怎麼畫」。內容還沒想清楚之前,不要打開 Figma Agent。

切換流程:6 個步驟,在三個位置之間來回

點圖上的節點或下面的步驟按鈕,看每一步「在哪個視窗、做什麼、怎麼說」。

01

在 ChatGPT・整學期只做一次

產品定位:讓 AI 認識你的 App

回答「給誰用、解決什麼問題、跟現有做法哪裡不同」,請 ChatGPT 整理成一張產品定位卡,再濃縮成一段 3~4 句的背景段落。之後每一句 Figma Agent 指令都把背景段落放在最前面。問法在下面「第一步」。

1 / 6

練習:遇到這個狀況,要回哪一邊?

判斷規則:要重新「想」的回 ChatGPT;內容已經確定、只是「畫」錯了,留在 Figma Agent。

第一步:先跟 ChatGPT 做「產品定位」

把下面的空格換成你的題目,複製到 ChatGPT。它會先反問你,回答完再請它輸出定位卡。

你 → ChatGPT|產品定位
你是一位資深 UX 產品經理。我要做一個 App 當作 UI 設計課的期中專題,請先幫我把「產品定位」想清楚。
・暫定名稱:拾器 Pick It
・想服務的人:設計系學生
・他們遇到的問題:學期末工具材料閒置,學弟妹卻買不起新的
・目前大家怎麼解決:在社團貼文、私下問學長姐
請你:
1. 先問我 5 個你還需要知道的問題,等我回答;
2. 回答後,用表格輸出「產品定位卡」:一句話定位、目標使用者(2 種角色)、核心痛點(3 個)、MVP 功能(3 個)、跟現有做法的差異、風格關鍵字(3 個)、這次不做的事;
3. 最後把定位卡濃縮成 3~4 句的「背景段落」,讓我之後貼在每一句 Figma Agent 指令的最前面。
App 名稱:
想服務的人:
他們的問題:
目前怎麼解決:

ChatGPT 應該回給你的「產品定位卡」(拾器範例)

一句話定位
讓設計系學生把閒置的工具材料,交給剛好需要的學弟妹。
目標使用者
賣方:想脫手工具的大三大四(雷雷)/買方:預算有限的新生(恩恩)
核心痛點
二手交易不安心・工具材料太貴・社團貼文洗版找不到
MVP 功能
拍照刊登・瀏覽搜尋・站內私訊洽談
差異
只限學校信箱註冊、校園內面交、依科系分類
風格關鍵字
親切・俐落・像校園布告欄
這次不做
線上金流、運送、跨校交易
背景段落(之後每句指令都放最前面)「拾器 Pick It」是給設計系學生用的二手工具/材料交換 App,讓學期末想脫手材料的學長姐,跟預算有限的學弟妹在校園內配對交易。使用者分成賣方雷雷與買方恩恩,核心痛點是交易不安心、材料太貴、資訊被洗版。風格親切俐落,像校園布告欄。

精確指令的 6 個要素

點一個要素,看它在下面這段指令的哪裡。缺任何一項,Figma Agent 就只能用猜的。

模糊的指令

幫我畫一個人物誌。

Agent 不知道是誰、幾個人、要哪些欄位、內容是什麼——每次畫出來都不一樣。

精確的指令

延續「拾器 Pick It」(設計系學生的二手工具交換 App)的設定,幫我建立人物誌卡片,共 2 張:雷雷(想脫手工具的賣家)與恩恩(剛入學的買家),每張包含頭像、姓名年齡、身份、目標、挫折、常用行為 6 個欄位,兩張尺寸統一、左右並排;欄位內容使用下面這段已整理好的文字:〔貼上 ChatGPT 整理並由你修改過的內容〕;不要自行新增欄位,配色用灰階加一個品牌色 #0ABAB5,每個欄位 30 字以內。

轉換問法:請 ChatGPT 把內容變成 Figma Agent 指令

你 → ChatGPT|轉成指令(每一關都可以用)
上面是我修改好的「人物誌」內容。請把它整理成一段要貼給 Figma Agent 的指令,規則:
1. 第一句放我的背景段落:〔貼上背景段落〕;
2. 依序寫清楚:任務(要畫什麼圖)→ 產出物與數量 → 結構規格(欄位、排列、尺寸)→ 真實內容(完整貼上,不要摘要)→ 樣式與限制;
3. 所有數量都寫成數字,不要用「一些」「幾個」;
4. 不要加入我沒提供的內容;
5. 只輸出指令本身,寫成一段,方便我直接複製。
這一關是:

指令精確度檢查器

把 ChatGPT 給你的指令貼進來,檢查 6 個要素有沒有寫到(依關鍵字判斷,僅供參考,最後還是要自己讀一遍)。

每一關的切換表:先問 ChatGPT 什麼,再帶什麼去 Figma Agent

選一關看完整的問法。每一關的「③-1 先問 ChatGPT」也放了同一段,跟著關卡做就好。

最常見的 5 個錯誤

ERROR 01

叫 Figma Agent 幫你想題目

它會畫出很漂亮但跟你無關的東西。定位與內容一律先在 ChatGPT 想清楚。

ERROR 02

沒有數字

「幾個功能」「一些欄位」→ 改成「3 個功能」「6 個欄位」「375×812」。

ERROR 03

每一關開新對話

新對話等於失憶,Agent 不記得拾器是什麼。同一串走到底,開頭說「延續」。

ERROR 04

內容錯了卻在 Agent 裡硬改

一直叫 Agent「再想一下」很燒點數。內容問題回 ChatGPT,改好再帶過去。

ERROR 05

直接照抄 AI 的草稿

沒有經過步驟 3(你挑選修改),作品就不是你的,也和訪談對不起來。

TIP

小修要說「哪裡、改成什麼」

不要說「好醜」「再好看一點」,要說「標題字級改 24、卡片間距 16、對齊左邊」。

Frame 01 — 詞彙地圖
10 Terms
01

UX 研究詞彙地圖

接下來 14 關會一直出現這 10 個名詞。不用背定義,先用生活中的比喻抓住「它是用來幹嘛的」,做到那一關時再回來對照。

探索 Discover起點開始之前交給02 案例蒐集
①是什麼: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
②動手玩:這件事屬於哪一種用途?
把訪談結果濃縮成「雷雷」「恩恩」兩個角色人物誌:定義工具——決定「我們在為誰設計」。
決定第一版只做「刊登、瀏覽、洽談」MVP:定義工具——決定第一版先做什麼。
把首頁、刊登、洽談排成樹狀層級資訊架構:定義工具——決定東西放在哪一層。
一張只有灰階色塊的手機版面Wireframe:產出物——把版面畫出來給人看。
標出情緒最低點的使用過程旅程圖:研究方法——了解使用者每一步的心情。
用菱形標出判斷分支的步驟圖流程圖:產出物——把步驟畫出來給人看。
答對 0 / 6 
③跟 Figma Agent 說(可直接複製,再換成你的題目)
你 → Figma Agent
我們這學期的期中範例是「拾器 Pick It」——一個給設計系學生用的二手工具/材料交換 App,目標是讓學期末想脫手材料的人,跟正好需要材料的學弟妹配對成功,減少材料浪費。接下來這整個對話我都會沿用這個設定跟你討論十四關前置作業,先記住:App 名稱「拾器」、對象是設計系學生、核心目的是材料閒置媒合。第一件事:這是我們這學期會用到的 10 個 UX 詞彙,我先依用途分成三類——研究方法(了解使用者用的):痛點、旅程圖、同理心地圖;定義工具(決定做什麼用的):Persona、MVP、資訊架構;產出物(畫出來的成果):故事地圖、流程圖、Wireframe、UI Flow。幫我畫成一張以「拾器」為中心的放射狀心智圖,三類節點分別用不同顏色呈現(研究方法=藍、定義工具=紫、產出物=綠),每個節點旁加一行 10 字內的白話定義,方便期中報告直接截圖使用。

Figma Agent:已記住拾器的設定(設計系學生的材料交換平台),後續每一關都會延續這個脈絡。心智圖已建立,中心節點為「拾器」,10 個詞彙依你指定的三色分類排列成放射狀分支,並附上每個詞彙的一行定義,可直接列印當作課堂小抄。

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

提示詞裡的分類與 Agent 的分類略有不同也沒關係——重點是先講清楚背景,之後每一關都能延續。

⑤動手做

這頁書籤起來,之後每進到一個新關卡,都可以回來對照這關用到的詞彙。

Frame 02 — 案例蒐集
3 Cases
02

如何蒐集案例

案例蒐集不是隨便找幾張截圖,而是帶著問題去看——這個功能別人怎麼做?為什麼這樣設計?看多了,才知道拾器可以借鏡什麼、該避開什麼坑。

探索 Discover承接01 詞彙地圖交給03 雙鑽石模式
①去哪裡找案例
②拾器範例:3 個參考案例,點分頁看分析
優點

免費、大家都在用。

缺點

貼文洗版快、訊息很快就找不到。→ 拾器借鏡:分類篩選

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

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

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

④Agent 實際生成
案例比較表
案例比較表
⑤動手做

找 3 個跟你題目相近的服務,每個都寫出 1 個值得學習處與 1 個體驗瑕疵,最後具體列出你決定沿用的功能。

Frame 03 — 雙鑽石模式
Double Diamond
03

雙鑽石設計流程

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

框架總覽承接02 案例蒐集交給04 主題發想
①②點每個階段,看它在做什麼、對應哪些關卡
→→→
01

① Discover 探索

盡量發散蒐集,不急著下結論。
對應關卡:詞彙地圖・案例蒐集

1 / 4

卡關時先問自己:「我現在是在搞懂問題,還是在做答案?」通常就知道該回頭做哪一步。

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

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

④Agent 實際生成
雙鑽石流程圖
雙鑽石流程圖
Frame 04 — 主題發想
WHO · WHERE · WHAT
04

如何發想主題

主題發想不是「等靈感」,而是把「誰+在什麼情境+卡在哪裡」組成一句話,題目自然就出現了。拾器就是從這三個空格填出來的。

定義 Define承接03 雙鑽石模式交給05 設定使用者
①②動手組:從每一組各挑一個
WHO 誰
WHERE 情境
WHAT 困擾

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

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

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

Frame 05 — 設定使用者
2 Personas
05

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

同一個 App,賣方和買方要解決的問題完全不同。把「誰會用」寫清楚——身份、目標、會卡住的地方,寫得越具體,之後的功能取捨就越有依據。

定義 Define承接04 主題發想交給06 同理心地圖
②拾器範例:切換兩個角色比較

雷雷,設計二

主修產品設計・宿舍住宿|手上有工具想脫手
目標
學期結束前,把用不到的美工工具換成現金或其他材料
挫折
社團公告版洗版很快,私訊約時間又常被放鳥
行為
習慣用手機拍照上傳,懶得寫太長的說明文字

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

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

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

④Agent 實際生成
人物誌卡片
人物誌卡片
⑤動手做:填出你自己的兩個人物誌
A
B
期中作業至少要兩個人物誌:一買一賣,或同一角色的兩種極端使用者
Frame 06 — 同理心地圖
Says · Thinks · Does · Feels
06

使用者同理心地圖

用「說・想・做・感受」四個象限,把使用者的外在言行跟內在情緒對照起來看。跟人物誌不同,它聚焦在「這個當下」的心理狀態——也是下一關痛點分析的原始素材。

發展 Develop承接05 設定使用者交給07 痛點分析
②拾器範例:恩恩(買方)的同理心地圖
說 SAYS

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

想 THINKS

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

做 DOES

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

感受 FEELS

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

②動手玩:這句是「想」還是「感受」?
「如果東西跟照片落差很大怎麼辦?」想:理性的判斷與疑問。
「怕被放鳥」感受:情緒反應。
「可以先問賣家問題再決定嗎?」想:在評估做法。
「找到划算的交換,很開心」感受:情緒反應。
「跟陌生人約見面安全嗎?」想:理性判斷安全性。
「怕東西跟描述不符」感受:害怕是情緒。
答對 0 / 6 
③跟 Figma Agent 說(可直接複製,再換成你的題目)
你 → Figma Agent
回到恩恩這位人物誌,這是他(買方)的訪談重點筆記,幫我整理成一張同理心地圖,分成說、想、做、感受四象限,中間放使用者頭像,每個象限至少放 3 則具體內容(不要空泛的形容詞),方便對照逐字稿檢查有沒有遺漏。

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

④Agent 實際生成
恩恩・買方視角
恩恩・買方視角
雷雷・賣方視角
雷雷・賣方視角
Frame 07 — 痛點分析
Affinity Map
07

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

痛點分析不是把抱怨照抄一遍,而是幫它們「分類」,找出重複出現、影響最大的幾組,才知道 MVP 該先解決什麼。

定義 Define承接06 同理心地圖交給08 規劃 MVP
②拾器範例:8 則訪談語錄,分成 4 類
信任安全3
花費2
閒置浪費2
資訊落差1
「跟陌生網友約見面拿東西,其實有點怕。」— 恩恩,視傳一
「怕買到的工具跟照片落差很大,錢付了才發現。」— 訪談對象 D
「約在校外面交,其實不太確定對方是不是真的學生。」— 訪談對象 G
「每學期買新的筆刀、切割墊,一學期下來也是一筆錢。」— 恩恩,視傳一
「工具行的東西不便宜,學生真的買到肉痛。」— 訪談對象 C
「畢業前一堆工具用不到,丟掉又覺得浪費。」— 雷雷,設計二
「抽屜裡有三支美工刀,其實只用過一次。」— 訪談對象 E
「社團公告洗版太快,貼文兩小時就找不到了。」— 雷雷,設計二

結論:真實訪談的分組通常不會平均——數量最多的「信任安全」,就是下一關規劃 MVP 時最優先要解決的痛點。

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

Figma Agent:已依主題分成 4 組並依數量排序:信任安全(3)>花費(2)=閒置浪費(2)>資訊落差(1)。信任安全這組語錄最多,代表「怕被騙、怕東西跟描述不符、怕約見面不安全」是目前最多人在意的痛點,建議報告從這組先講起。

④Agent 實際生成
版型 A.分類看板+分析結論
版型 A.分類看板+分析結論
版型 B.便利貼+核心命題收斂
版型 B.便利貼+核心命題收斂
⑤動手做

把你蒐集到的語錄依重複出現的主題分成 3~5 組,每組取一個好懂的分類標籤,再數數看哪一組最多。

Frame 08 — 規劃 MVP
P0 · P1
08

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

MVP 不是「功能砍半」,而是用一張 2×2 矩陣,依「對使用者的影響」與「開發成本」定位每個功能,優先做高影響、低成本的那一群。

定義 Define承接07 痛點分析交給09 資訊架構
②動手玩:勾選功能,自動排出分期路線圖

時間:小 約 1 週內|中 約 2~3 週|大 超過 3 週或需外部資源

操作提醒:P0 建議控制在 3~4 個以內——拾器期中要優先做出來的核心流程就是:刊登、瀏覽、洽談,它們直接對應「信任安全」與「花費」兩組最多人在意的痛點。

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

Figma Agent:已建立兩期功能路線圖:第一期(P0)3 個功能以實心卡片呈現,第二期(P1)4 個功能以虛線卡片呈現,並標註開發時間、用箭頭標出期程先後,可直接放進期中簡報。

④Agent 實際生成
功能路線圖
功能路線圖
Frame 09 — 資訊架構
Tree
09

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

資訊架構(IA)回答「東西放在哪一層、叫什麼名字」。從 MVP 清單出發,把功能收進 3~5 個一級分類,再展開子項目,之後的頁面清單、導覽列都從這棵樹長出來。

定義 Define承接08 規劃 MVP交給10 故事地圖
②拾器範例:點開每一層
拾器 App(首頁)
今日推薦・分類捷徑・最新刊登
瀏覽/搜尋
分類篩選(工具類/材料類/書籍類)關鍵字搜尋・距離排序物品詳情頁(照片・成色・估價)
刊登物品
拍照上傳・填寫成色說明AI 估價建議(P1)
交換洽談
站內私訊・面交地點建議交換完成確認
個人檔案
我的刊登・收藏清單・信用評價

Figma Agent 小提醒:把這棵樹的文字結構貼給 Figma Agent,請它「依此生成資訊架構圖」,就能直接得到可編輯的節點圖。

③跟 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 項,依瀏覽動線由左至右排列、同層對齊。

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

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

Frame 10 — 故事地圖
Backbone · MVP · Later
10

使用者故事地圖

故事地圖把使用者「一連串的活動」橫向排成主幹(backbone),再往下拆成具體的使用者故事,並分成「MVP 要做」跟「之後再做」。

發展 Develop承接09 資訊架構交給11 旅程圖
②拾器範例:切換三個活動
使用者活動
打開 App選分類看物品詳情私訊賣家
MVP 故事
以分類瀏覽清單看照片與成色說明一鍵傳送私訊
之後再做
依距離排序相似物品推薦AI 估價提示

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

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

Figma Agent:已建立故事地圖,頂層 4 張卡片為活動主幹,中層 3 張為 MVP 故事,底層 2 張為之後再做的故事,並用直向對齊線標出每個故事屬於哪個活動。

④Agent 實際生成
使用者故事地圖
使用者故事地圖
Frame 11 — 旅程圖
Emotion Curve
11

使用者旅程圖

旅程圖把使用者從「開始」到「結束」的過程依時間排開,再畫出一條情緒曲線——曲線往下掉的地方,通常就是設計要優先解決的關卡。

發展 Develop承接10 故事地圖交給12 流程圖
②拾器範例:點曲線上的點,走一遍雷雷刊登工具的旅程
開心焦慮
01

① 想脫手工具,打開拾器

使用者行為:猶豫要不要花時間拍照上傳,怕沒人要
情緒與系統回應:普通|首頁立刻顯示「附近正有人在找這類工具」

1 / 5

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

③跟 Figma Agent 說(可直接複製,再換成你的題目)
你 → Figma Agent
換成雷雷這位賣家的視角,這是他刊登工具的 5 個階段與對應情緒(普通、順手、略焦慮、安心、開心),幫我畫成一張旅程圖,上面是情緒曲線,下面是每個階段的行為說明,並在情緒最低點旁加註「這裡最需要優化」的提示文字。

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

④Agent 實際生成
使用者旅程圖
使用者旅程圖
Frame 12 — 流程圖
Flow Chart
12

流程圖製作

流程圖把一個任務拆成明確的步驟與判斷點,決策的地方用菱形標出分支,讓開發跟設計都知道「接下來會怎麼走」。

發展 Develop承接11 旅程圖交給13 線框圖
②拾器範例:按「產生下一步」,看流程一步步長出來
開始:想刊登二手工具雷雷決定把用不到的筆刀刊登出去
上傳物品照片(最多 5 張)手機直接拍,系統自動裁切成統一比例
填寫成色說明與分類選「全新/良好/堪用」,加一句話描述
系統給 AI 估價建議?P1 功能:依照片與分類推估合理價格區間
確認內容後送出可調整估價建議,也能直接手動填價
上架成功,等待買家私訊同步通知附近正在找同類工具的使用者
1 / 6

這一關要畫的是「整個 App」,不是單一個功能:上面只是示範怎麼畫決策節點(菱形+條件分支)。期中作業的流程圖要從 App 啟動開始,涵蓋登入/註冊、首頁、瀏覽搜尋、刊登物品、交換洽談、個人檔案彼此怎麼連接,直到完成任務為止——範圍要跟下面 Figma Agent 生成的完整版一樣大。

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

Figma Agent:已建立完整版 App 流程圖:Start 到 App 啟動、引導頁、登入/註冊決策、首頁後,平行展開瀏覽搜尋、刊登物品、個人檔案三大模組,決策節點都套用菱形並標註「是/否」,模組間以跨模組虛線箭頭連接,最終都收斂回 End,並附圖例。

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

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

Frame 13 — 線框圖
Wireframe
13

線框圖繪製 Wireframe

Wireframe 只畫版面的「骨架」——內容放哪裡、大小關係、操作動線,先不管顏色字型。這一關先認識 App 常見的畫面類型;完整的 Figma Agent 線框圖教學在下個單元 ui05。

交付 Deliver承接12 流程圖交給14 UI Flow
①常見的 6 種畫面類型
進入頁Splash / Entry
步驟導覽Onboarding
登入Login
註冊Register
首頁Home
功能頁e.g. 刊登物品
②動手玩:「刊登物品」功能頁需要哪些區塊?

勾選的區塊會由上而下出現在右邊的線框稿;已選 0 / 6。

勾選左邊的區塊
組出線框稿
上傳照片(最多 5 張)
成色:全新/良好/堪用 ▾分類:工具類 ▾
一句話描述物品…
✦ AI 建議價格 NT$120–180
刊登預覽卡片:照片+名稱+成色+價格
送出刊登
③跟 Figma Agent 說(可直接複製,再換成你的題目)
你 → Figma Agent
接著這一關,把APP流程圖的每個畫面,逐一畫成完整的手機版面線框稿——每一頁都要有:頂部標題列、主要內容區、底部操作按鈕,統一用灰階色塊圖片佔位框,圖片以外的所有文字都是真實的文字。編排請考慮使用者操作便利性,因為考慮到後續要用這個線框稿延伸成精稿,希望編排能具設計感,之後也能套用製作的 shader 的風格。

先問 ChatGPT:為了更完整的呈現線框稿的設計,先在 ChatGPT 對話,請它協助生成適合完整線框稿的指令,可參考 與 ChatGPT 的對話。

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

從進入頁到各功能頁的完整製作流程,下個單元 ui05 Wireframe 線框稿 會用 Figma Agent 一步步示範。

Frame 14 — UI Flow
UI Flow
14

UI Flow:畫面怎麼串起來

UI Flow 把一個任務會經過的「畫面」串成一條線,比流程圖更聚焦在「有哪些頁面、頁面之間怎麼跳轉」,是線框稿之間的目錄。

交付 Deliver承接13 線框圖交給期中檢核
②拾器範例:按「產生下一步」,看「刊登物品」會經過哪些畫面
01首頁起點:從首頁點擊「+刊登」
02刊登物品|上傳照片拍照或從相簿選取,最多 5 張
03刊登物品|填寫成色與描述選成色等級,加一句話描述
04刊登物品|預覽確認資訊正確嗎?不對就返回上一頁修改
05上架成功頁終點:顯示刊登結果,導回首頁
1 / 5

流程圖 vs UI Flow:流程圖的節點是「步驟或判斷」;UI Flow 的節點是「一整個畫面」。

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

Figma Agent:已建立 5 張低保真 wireframe,並依序排列、用箭頭連接成一條 UI Flow,「預覽確認」節點加上分支箭頭指回「填寫成色與描述」,可直接作為 ui05 線框稿階段的起點。

Frame 15 — 自我檢核
Self-check · 7 Q
15

本單元自我檢核

7 題快問快答,確認 14 關的核心觀念與彼此的關係。選錯會顯示正確答案與該回去看哪一關。

Q1雙鑽石的前兩個階段(探索、定義)負責什麼?前兩個把問題搞懂,後兩個把答案做出來。→ 03
Q2主題句由哪三個空格組成?WHO+WHERE+WHAT。→ 04
Q3人物誌的「挫折」,之後會變成哪一關的素材?挫折通常就是痛點分析的原始素材。→ 05、07
Q4痛點分類後,MVP 應該優先解決哪一組?數量最多、影響最大的那組(拾器是信任安全)。→ 07、08
Q5P0 功能建議控制在幾個以內?3~4 個:拾器是刊登、瀏覽、洽談。→ 08
Q6UI Flow 的「節點」是什麼?流程圖的節點是步驟或判斷,UI Flow 的節點是畫面。→ 14
Q7期中作業的流程圖,範圍應該是?整個 App,至少一個決策節點並標出分支。→ 12
答對 0 / 7 
Frame 16 — 期中作業檢核
Midterm · 13 items
16

期中作業必要項目檢核

走完十四關,你已經生出一份完整的前置作業——逐項勾選確認別漏東西,瀏覽器會記住你的勾選。完整的作業說明與期末要求在 作業區。

期中進度0 / 13

銜接下一步

延伸影片

本頁十四個前置流程關卡以單一案例「拾器」貫穿。Figma Agent 一鍵生成流程圖/組織圖/甘特圖/心智圖為 Figma 官方文件所列功能;人物誌、同理心地圖、故事地圖、旅程圖目前非官方列出的一鍵生成類型。內容整理於 2026 年 9 月。

Frame 17 — 第七週遠距教學:影片與課程簡報
Week 07 · Video & Slides
17

第七週遠距教學:影片與課程簡報

同一份內容,三種讀法:讀講義、看影片、翻簡報。挑你最順手的方式,也可以搭配著用——例如先看影片抓全貌,再回講義逐關做,最後用簡報複習。

遠距教學出席:請到 Moodle 看完整部影片。Moodle 上的影片會記錄觀看進度,看完 90% 才算完成;這裡的影片與簡報是給你複習、查找用的。

UI 開發流程前置作業 × ChatGPT × Figma Agent × 期中報告(33 分鐘)

點右邊的章節,影片會直接跳到那一段。播放器的「CC」可以開關字幕。

課程簡報:61 張,跟影片同一套

點任一張直接打開簡報。簡報裡按 ←→ 換頁、N 看講稿、G 總覽、F 全螢幕;每一張都能「從這張開始看影片」。

Frame 18 — 期中簡報怎麼做
Midterm deck · W08
18

期中簡報怎麼做:把 14 關整理成一份簡報

十四關做完,最後一步是把它們排成 5 分鐘講得完的簡報(第 8 週製作、第 9 週發表)。不用從零開始:老師準備了兩份範例,複製一份改成你的就好。完整說明在 期中作業頁。

期中作業說明影片(8 分鐘)

要放什麼、怎麼複製範例、加分的 Prototype、怎麼發表,一次看懂。點右邊章節可以跳段。

簡報順序:5 個章節

CH 01

問題與研究

動機・目的・研究方法・競品分析

CH 02

使用者與洞察

訪談整理・研究洞察・人物誌・同理心地圖・旅程圖

CH 03

架構與流程

MVP・故事地圖・資訊架構・流程圖

CH 04

線框與串接

Wireframe・UI Flow

CH 05

檢核與下一步

還沒驗證的地方、期末計畫

★
加分項:展示 Wireframe 的 Prototype

期中除了介紹簡報,再把線框圖接成可以點的原型,發表講到線框時現場點一遍主要流程(30~45 秒),可以加分。灰階線框就好,主線點得通即可。怎麼做 →/ui05 Prototype

兩種做法,建議用 A

推薦

A:複製範例,改成你的

  • 登入 Figma → 打開範例
  • 左上角檔名 ⌄ → Duplicate to your drafts
  • 改檔名、一頁一頁換內容,Share 連結交到 Moodle
不扣 AI 點數
完整 6 步驟
備案

B:請 Figma Agent 一次整理

  • 前置作業都放在同一個 Figma 檔
  • 貼上下面這句指令,只下一次
  • 產生後自己檢查、修正
內容多,一次會用掉大量點數
產生後怎麼檢查
你 → Figma Agent|整理期中簡報(方法 B)
請將前置調查的內容,包含動機、目的、競品分析、訪談整理、人物誌(目標對象)、研究洞察、同理心地圖、資訊架構圖、使用者故事地圖、使用者旅程圖、使用者流程圖、wireframe(線框圖)、ui flow 等,整理成清楚的 UI 前置調查的期中簡報,直接整理在同一頁。

為什麼推薦 A?這個指令要一次整理十幾項內容,會花掉很多 AI 點數。下面兩個案例就是用這句指令做出來的,老師已經幫你生好了——直接複製來改,省點數也省時間。

兩份範例:複製修改

拾器 Pick It|二手工具交換 App 期中簡報封面

拾器 Pick It|二手工具交換 App

本講義的案例。26 頁、5 章,表格多、版面規矩,最好套用。

讀菇|野外毒菇識別 App 期中簡報封面

讀菇|野外毒菇識別 App

Figma Agent 示範案例。20 頁,留白多、重點放大,適合做精簡版。