Unit 02 01 / 15
UI 設計實作課程 · 2026

設計思考
與 AI 協作

Design Thinking × AI-Assisted Workflow

3 小時 15 張 含 Workshop 討論
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 02 02 / 15

Agenda

課程大綱

第 1 小時 設計思考框架解說 雙鑽石模型 + 5 個階段 + AI 協作角色
第 2 小時 Workshop 討論（上） 同理、定義、發想實作演練
第 3 小時 Workshop 討論（下） 原型產出、團隊發表與點評
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 02 03 / 15

Design Thinking

什麼是設計思考？

一套「以人為本」的解決問題方法論，核心在於透過同理心深入理解需求，並透過反覆實驗找到解答。

Key 1
非線性流程
可以隨時跳回前一步，不是做完 1 才能做 2。
Key 2
擁抱失敗
快速失敗（Fail Fast），是為了更便宜地找到正確路徑。
Key 3
問題導向
不要先想「做什麼產品」，要先想「解決什麼問題」。
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 02 04 / 15

Double Diamond

雙鑽石模型

發散與收斂的節奏感

第一顆鑽石：做正確的事
發散
Discover 發現 走入現場，觀察使用者（利用 Persona 模擬情境）
收斂
Define 定義 找出核心痛點，產出 HMW（How Might We）
第二顆鑽石：把事做正確
發散
Develop 發展 針對問題發散各種解決方案
收斂
Deliver 交付 轉化為 Functional Map，產出原型
「大部分的專案失敗，是因為他們在還沒搞清楚第一顆鑽石時，就急著衝進第二顆鑽石。」
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 02 05 / 15

Design Thinking

設計思考五階段

以人為本的問題解決框架

  • 同理 Empathize
  • 定義 Define
  • 發想 Ideate
  • 原型 Prototype
  • 測試 Test
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
1
Unit 02 06 / 15
Stage 1 · Empathize

同理

站在使用者的鞋子裡

  • 使用者訪談 User Interview
  • 觀察法 Observation
  • 同理心矩陣 Empathy Map
  • 目標：找出真正的問題，而非表面症狀
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
2
Unit 02 07 / 15
Stage 2 · Define

定義

將雜亂的資訊結構化，找出核心痛點

  • HMW 問題陳述（How Might We？）
  • 使用者旅程圖 User Journey
  • 目標：清楚說明「我們要為誰解決什麼問題」
抱怨 「這咖啡好難喝！」
→
HMW 機會 「我們可以如何提供更多元的口味選擇？」
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
3
Unit 02 08 / 15
Stage 3 · Ideate

發想

推翻直覺，尋找「不合理但有效」的點子

  • 腦力激盪 Brainstorming
  • Crazy 8 快速草圖
  • 心智圖 Mind Map
  • 目標：產出多元解法，再篩選最有潛力的方向
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
4
Unit 02 09 / 15
Stage 4 · Prototype

原型

將想法具現化，快速製作可測試的版本

  • Functional Map 功能地圖
  • 低保真 Wireframe
  • Figma 互動稿
  • 目標：用最低成本驗證設計假設
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
5
Unit 02 10 / 15
Stage 5 · Test

測試

驗證假設，從真實使用者身上學習

  • 使用者測試 Usability Testing
  • AI 壓力測試
  • 觀察、記錄與迭代改進
  • 目標：回到同理，不斷優化
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 02 11 / 15

AI × Design Thinking

AI 的三種角色

把 AI 視為「團隊中的第 N 個成員」

🔍
Researcher
研究員
從訪談筆記中快速分類痛點，整理 HMW 清單
💡
Catalyst
創意催化劑
當團隊卡住時，提供 20 個「壞點子」打破僵局
😈
Adversary
魔鬼代言人
扮演最機車的使用者，挑戰你們的功能地圖邏輯
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 02 12 / 15

Workshop Rules

討論守則

讓討論發揮最大效益的四條規則

  • 01
    暫時放下評判 發散階段不說「這不可能」、「這沒用」
  • 02
    建立在他人想法之上 說「對，而且⋯（Yes, and...）」而不是「但是⋯（But...）」
  • 03
    AI 不是真理 AI 提供的只是「假設」，最終的判斷權在團隊手中
  • 04
    視覺化思考 善用便利貼與草圖，不要只用說的
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 02 13 / 15

Workshop Prep

User Flow 與
Wireframe 入門

設計前先規劃路徑

  • User Flow：使用者完成一個任務的完整路徑
  • Wireframe：頁面版面的骨架草圖
  • 工具：Figma / FigJam / 紙筆皆可
  • 本單元實作：選一個功能，畫出 Flow 與 3 個畫面
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 02 14 / 15

Workshop

課堂實作

設計思考 × User Flow

  • 選定一個生活場景（訂餐、報名、購票⋯）
  • 用 HMW 陳述使用者問題
  • 畫出 User Flow，標出主要決策點
  • 讓 AI 扮演魔鬼代言人，挑戰你的設計
設計思考提示詞協作指南
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 02 15 / 15

Review

討論與點評

分享你的 Flow 與設計思考過程

  • 說明你選的場景與使用者問題
  • 展示你的 User Flow
  • AI 幫了什麼？哪裡還需要人的判斷？
UI 設計實作：Figma 與 UX 流程 × AI 設計整合