使用者介面設計課程講義
期中作業
UI 前置調查期中簡報
把前置作業整理成一份 5 分鐘的簡報。老師準備了兩份可以直接複製的範例——Duplicate to your drafts，換上你的內容就完成了。
範例：拾器 Pick It 期中簡報封面（點圖放大）
期中作業：UI 前置調查期中簡報
把 ui04 做過的前置作業（動機、人物誌、旅程圖、流程圖……）和 ui05 的線框圖，整理成一份 5 分鐘講得完的簡報。不用從零開始——老師準備了兩份範例，複製一份改成你的就好。
先看影片：8 分鐘看懂期中作業
點右邊的章節，影片會直接跳到那一段；字幕已經在畫面上。
新竹 10/26 放假，請在家完成
台北 11/05（四）
★ 加分：現場展示 Wireframe Prototype
三步驟完成
- 確認前置作業都做好了
對照下一章的表格，13 項內容都要有。缺哪一項，就點右邊的連結回 ui04／ui05 補做。
- 複製老師的範例簡報，換成你的內容
打開範例 → Duplicate to your drafts → 一頁一頁把文字和圖換掉。怎麼複製 →
- 試講一次，控制在 5 分鐘，交出連結
每頁標題寫成一句結論，照 5 個章節的時間分配講。Figma 連結上傳 Moodle 及 Figma 作業繳交區。怎麼講 →
期中除了介紹簡報，如果能把線框圖接成「可以點的原型」，在講到線框時現場點一遍給大家看，可以加分。不需要上色、不需要動畫，主要流程點得通就好。怎麼做 →
兩種做法，建議用 A
拾器 Pick It｜二手工具／材料交換 App
ui04 講義全程使用的案例。26 頁，分 5 章，表格多、版面規矩，最適合直接套用。
讀菇｜野外毒菇識別 App
Figma Agent 示範案例。20 頁，版面留白多、重點放大，適合想做得精簡一點的同學。
DESIGN 跟 SLIDES 差在哪？DESIGN 檔是「工作桌」：所有前置作業圖表攤在同一頁，方便對照。SLIDES 檔是「上台用的簡報」：一頁講一件事，可以直接播放。期中要交的是 SLIDES；DESIGN 檔可以當作你整理素材的地方。
簡報要放什麼：5 個章節、13 項內容
照這個順序排，就是一個完整的故事：先說問題，再說使用者，接著是架構，最後是畫面。點「拾器／讀菇」的頁碼可以直接看範例長什麼樣子。
| 頁面 | 要放什麼 | 拾器 | 讀菇 | 不會做？回去看 |
|---|---|---|---|---|
| CH 01｜問題與研究 | ||||
| 封面 | 主題名、一句話定位、學號姓名 | P01 | P01 | — |
| 研究動機 | 誰、在什麼情境、遇到什麼困擾 | P02 | P03 | 04 主題發想 |
| 研究目的 | 想達成的 2～3 個目標，與研究問題 | P03 | P04 | 04 主題發想 |
| 研究方法 | 用雙鑽石說明做了哪些研究 | P04 | P02 | 03 雙鑽石 |
| 競品分析 | 至少 3 個案例，比較優點、限制與你的取捨 | P05 | P10P11 | 02 案例蒐集 |
| CH 02｜使用者與洞察 | ||||
| 訪談整理 | 訪談對象、情境、關鍵字 | P06P07 | （併在其他頁） | 07 痛點分析 |
| 研究洞察 | 證據 → 解讀 → 設計機會，收斂成一句 HMW | P08 | P09 | 07 痛點分析 |
| 人物誌（目標對象） | 至少兩位，含目標、困擾、行為 | P09 | P05P06 | 05 設定使用者 |
| 同理心地圖 | 說・想・做・感受四格都要有內容 | P10P11 | P07 | 06 同理心地圖 |
| 使用者旅程圖 | 階段 × 行為／想法／痛點／機會＋情緒曲線 | P12 | P08 | 11 旅程圖 |
| CH 03｜架構與流程 | ||||
| MVP 核心需求 | P0 先做 3～4 個，P1 之後再做 | P13 | P13 | 08 規劃 MVP |
| 使用者故事地圖 | 任務主幹 × 使用者故事 × 第一期／第二期 | P14 | P12 | 10 故事地圖 |
| 資訊架構圖 | 至少三層，涵蓋所有主要功能 | P15 | P14 | 09 資訊架構 |
| 使用者流程圖 | 整個 App 的流程，至少一個決策點 | P16 | P15 | 12 流程圖 |
| CH 04｜線框與串接 | ||||
| Wireframe 線框圖 | 依功能分組，每張畫面下寫一句用途 | P17P18P19P20P21P22P23 | P16P17 | ui05 Wireframe |
| UI Flow | 把線框串起來，標出「點哪裡、去哪裡」 | P24 | P18P19 | 14 UI Flow |
| ★ 加分：Wireframe Prototype | 把線框接成可以點的原型，發表時現場展示 | （現場展示） | （現場展示） | 本頁 03-1 Prototype |
| CH 05｜檢核與下一步 | ||||
| 期中檢核與下一步 | 還沒驗證的地方、期末要補什麼 | P25P26 | P20 | — |
每頁只講一件事，標題寫成結論。例如拾器第 2 頁不是寫「研究動機」，而是「有人需要材料，也有人找不到接手的人」——評審只看標題也知道你想說什麼。
方法 A：複製範例，改成你的（推薦）
老師的範例檔你只能看、不能改。先複製一份到自己的草稿（Drafts），就可以隨便改了。DESIGN 檔和 SLIDES 檔都是同樣的操作。
- 先登入 Figma
沒登入看得到檔案，但沒辦法複製。用你平常上課的 Figma 帳號登入。
- 打開範例連結
從下方挑一份：拾器（26 頁，比較完整）或讀菇（20 頁，比較精簡）。兩份都可以複製。
- 點左上角檔名旁的 ⌄，選 Duplicate to your drafts
Figma 會開一個新分頁，那就是「你的」檔案，檔名後面會多一個「(Copy)」。
- 改檔名
點檔名改成「學號姓名＋主題｜UI 前置調查期中簡報」，例如「A1234567 王小明 讀菇｜UI 前置調查期中簡報」。檔案在左側 Drafts 找得到。
- 一頁一頁替換內容
先換文字（雙擊文字框）；再換圖：從你的前置作業檔複製圖表（⌘/Ctrl＋C），貼到簡報頁（⌘/Ctrl＋V）。用不到的頁面就刪掉，缺的頁面就複製一頁相近的改。
- 分享連結、繳交
右上角 Share → 權限改成 Anyone with the link · can view → Copy link，貼到 Moodle 及 Figma 作業繳交區。權限沒開，老師點進去只會看到「請求存取」。
拾器 Pick It｜二手工具／材料交換 App
ui04 講義全程使用的案例。26 頁，分 5 章，表格多、版面規矩，最適合直接套用。
讀菇｜野外毒菇識別 App
Figma Agent 示範案例。20 頁，版面留白多、重點放大，適合想做得精簡一點的同學。
換內容時最常漏掉的地方
可以改風格嗎？可以。範例只是骨架，配色、字體、版面都能換成你的主題風格；但「5 個章節的順序」和「每頁一句結論標題」建議保留。
方法 B：請 Figma Agent 一次整理成簡報
如果你的前置作業都已經放在同一個 Figma 檔裡，可以用一句指令請 Figma Agent 把它們排成簡報。拾器和讀菇的 DESIGN 檔，就是用這個方法整理出來的。
先看這裡：這個指令很花點數。它要一次讀完十幾項內容再重新排版，一次就會用掉大量 AI 點數，點數用完就不能再用 Agent 了。所以老師已經把兩個案例做好，建議優先用方法 A 複製修改；方法 B 當作備案。
下指令前先準備
- 把所有前置作業放進同一個 Figma 檔
動機、競品、訪談、人物誌、同理心地圖、旅程圖、故事地圖、資訊架構、流程圖、線框圖、UI Flow 都在同一個檔案裡，Agent 才讀得到。
- 先在 ChatGPT 檢查內容有沒有缺
把清單貼給 ChatGPT，問「這些內容還缺什麼？」補齊了再下指令，避免生成兩次。
- 開新頁面，貼上下面的指令
指令只下一次。產生後的小修改（改字、換色、移位置）自己動手改，不要再叫 Agent。
請將前置調查的內容，包含動機、目的、競品分析、訪談整理、人物誌（目標對象）、研究洞察、同理心地圖、資訊架構圖、使用者故事地圖、使用者旅程圖、使用者流程圖、wireframe（線框圖）、ui flow 等，整理成清楚的 UI 前置調查的期中簡報，直接整理在同一頁。
產生之後一定要檢查
內容是不是你的
Agent 有時會自己補內容。對照你的原始資料，沒做過的訪談、沒有的數字要刪掉。
項目有沒有漏
用第 01 章的表格逐項對，13 項都要出現。
字夠不夠大
投影出來要看得清楚。字太小就拆成兩頁，或搬到 SLIDES 檔重排。
★ 加分項：展示 Wireframe 的 Prototype
簡報是「講」你的設計，Prototype 是「點給大家看」。把線框圖用 Figma 的 Prototype 功能串起來，發表講到線框時，直接點一遍主要流程——評審一看就懂使用者怎麼用你的 App。
主線點得通
選一條最重要的任務（例如拾器的「刊登物品」），從首頁一路點到完成，再能回到首頁。
上色、動畫、每頁都接
灰階線框就可以。次要頁面沒接到沒關係，先把主線做完整。
加分支與覆蓋層
「返回修改」接回上一步、點欄位跳出鍵盤（Open Overlay），會更像真的 App。
Figma 裡 5 步驟接好
- 切到 Prototype 面板
右側面板上方從 Design 切到 Prototype（快捷鍵 Shift＋E）。
- 點起點按鈕，拖出連接線
選首頁的按鈕（例如「＋」），右邊出現藍色小圓點，拖到下一張畫面放開。
- 設定動作
一般換頁選 On click → Navigate to；鍵盤、彈窗選 Open overlay，關閉按鈕再設 Close overlay。
- 設定起點
選首頁畫面 → Prototype 面板的 Flow starting point 按 ＋，播放時才會從首頁開始。
- 播放測試、複製連結
右上角 ▶ Present 從頭點一遍；確認沒問題後按 Share prototype 複製連結，貼到簡報最後一頁或備忘。
發表時怎麼展示？上台前先把 Prototype 開在另一個分頁。講到「CH 04 線框與串接」時切過去，邊點邊用一句話說明：「使用者從首頁按＋，拍照、填成色、預覽，最後上架成功。」約 30～45 秒，點完切回簡報。保險起見，可以先錄一段操作影片當備案。
範例一：拾器 Pick It（26 頁）
設計系學生的二手工具／材料交換 App，也是 ui04 講義從頭到尾的案例。點任一張可以放大，用左右鍵翻頁；每張下面寫著「這一頁在做什麼」。
P01封面主題名＋一句話定位＋組別，下方列出 5 個章節。
P02研究動機需求端 → 斷點 → 提供端，一張圖講完「為什麼要做」。
P03研究目的與產品方向3 個目標＋3 個研究問題，並標明「方向，不是已證明成效」。
P04研究方法與雙鑽石把已完成／尚待執行的產出放進雙鑽石四階段。
P05競品與參考案例比較用表格比「定位、可借鏡、限制、我們的取捨」。
P06訪談整理Who／Context／Pain 三欄，原始關鍵字＋衍生情境。
P07訪談語錄親和圖8 則語錄聚合成 4 個主題，每則標出說話的人。
P08研究洞察與問題定義證據 → 解讀 → 設計機會，最後收斂成一句 HMW。
P09人物誌與目標對象兩個角色並排：提供者 vs 需求者，各有困擾與行為。
P10同理心地圖（恩恩）說・想・做・感受四格，最下面寫需求結論。
P11同理心地圖（雷雷）第二位人物誌也做一張，對照兩端需求。
P12使用者旅程圖五個階段 × 行為／想法／痛點／機會，加上情緒曲線。
P13核心需求與 MVPP0 核心閉環 3 項＋P1 進階，從洞察收斂成需求。
P14使用者故事地圖任務主幹 × 使用者故事 × 第一期／第二期。
P15資訊架構圖五個核心模組，每個模組列出底下的頁面與功能。
P16使用者流程圖三條主線＋決策點（◆），交代返回、修改與取消。
P17Wireframe｜起始與帳號啟動、引導、登入、註冊，每張畫面下寫一句用途。
P18Wireframe｜探索與篩選首頁、搜尋、篩選、列表。
P19Wireframe｜聯絡與面交詳情頁、聊天、約面交。
P20Wireframe｜刊登前半拍照上傳、填寫品名與成色。
P21Wireframe｜刊登後半設定方式、預覽、發布成功。
P22Wireframe｜交易結果與信任完成交易、互評、信任機制。
P23Wireframe｜個人管理個人頁、我的刊登、收藏、設定。
P24UI Flow 模組串接把線框依模組串起來，箭頭標出點哪裡去哪裡。
P25
P26值得學的地方：每頁都有「來源」頁尾，標明這頁根據哪份資料；還沒驗證的內容會直接寫「待驗證」「非已驗證成果」。期中是研究報告，誠實比好看重要。
範例二：讀菇・野外毒菇識別 App（20 頁）
用 Figma Agent 示範的案例。頁數比較少、重點字放得比較大，適合想做得精簡的同學參考。
P01封面讀菇・UI 前置調查期中簡報。
P02調查範圍與證據現況8 個前置作業一張串起來，分清楚「現有素材」與「待補研究」。
P03動機與問題定義為什麼需要毒菇識別 App。
P04設計目的與成功衡量目的之外，也寫出怎麼算成功。
P05
P06
P07
P08
P09
P10
P11
P12
P13
P14資訊架構從五分頁收斂為四分頁，說明為什麼改。
P15使用者流程圖雙路徑，共同進入詳情頁。
P16Wireframe｜核心辨識拍照辨識的主要畫面。
P17Wireframe｜瀏覽與安全圖鑑瀏覽與安全提醒。
P18UI Flow｜首次使用與帳號第一次打開 App 的流程。
P19UI Flow｜主流程與補充狀態主流程＋錯誤、空白等補充狀態。
P20期中成果與下一步已完成什麼、期末接著做什麼。
值得學的地方：第 2 頁用一張圖把 8 個前置作業串起來，讓聽眾先知道整份簡報的路線；第 14 頁「從五分頁收斂為四分頁」直接講出規劃怎麼修正，比只放結果更有說服力。
發表：5 分鐘怎麼講
5 分鐘很短，不可能每頁都講。照下面的時間分配，重點放在「你發現了什麼問題」和「你打算怎麼解決」。
頁數多沒關係，但快速帶過的頁面只講標題那一句結論就好。
「線框與串接」這 1 分鐘不用一張張翻線框，直接切到 Prototype 點一遍主線（30～45 秒），再回簡報講下一步。總時間一樣控制在 5 分鐘。
每一章，用一句話開頭
「我們發現＿＿＿（誰）在＿＿＿（情境）時，會遇到＿＿＿（困擾）。」
「訪談＿位同學後，最大的痛點是＿＿＿，所以我們的問題是：如何＿＿＿？」
「第一期只做＿個核心功能：＿＿＿，整個 App 分成＿個模組。」
「這是使用者從＿＿＿到＿＿＿的主要畫面，共＿張。」
有 Prototype：「我們直接點一遍：使用者從＿＿＿開始……」
常見問題
交出前檢核：15 項＋1 個加分項
發表前一天逐項確認，瀏覽器會記住你的勾選。前 15 項是必要的，第 16 項 Prototype 是加分項。