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

UX 5層架構
與 AI 設計流程

Figma × UX 原則 · 初學者導論

3 小時 17 張投影片 含實作練習
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 01 02 / 17

Agenda

課程大綱

第 1 小時 UX 5層架構
觀念 從策略層到表現層的完整設計思維架構
第 2 小時 講解與實作
Persona / Functional Map 建立 利用 AI 工具輔助，建立 Persona 與 Functional Map
第 3 小時 課後作業練習 (Homework) 探討 AI 輔助設計的可能性
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 01 03 / 17

UX Framework

什麼是 UX 5層架構？

Jesse James Garrett 提出的由下而上設計思維

5. 表現層 Surface視覺設計 · 感知呈現
4. 骨架層 Skeleton介面 · 導覽 · Wireframe
3. 結構層 Structure互動設計 · 資訊架構
2. 範圍層 Scope功能規格 · 內容需求
1. 策略層 Strategy使用者需求 · 商業目標

具體 Concrete視覺細節、最終呈現

抽象 Abstract概念定義、核心目標

UI 設計實作：Figma 與 UX 流程 × AI 設計整合
1
Unit 01 04 / 17
Layer 1 · Strategy

策略層

為何而做？為誰而做？

  • 商業目標 Business Goals
  • 使用者需求 User Needs
  • 定義產品存在的核心價值
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
2
Unit 01 05 / 17
Layer 2 · Scope

範圍層

要做什麼？不做什麼？

  • 功能規格 Functional Specifications
  • 內容需求 Content Requirements
  • 確立產品的邊界與守備範圍
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
3
Unit 01 06 / 17
Layer 3 · Structure

結構層

使用者如何操作與導覽？

  • 互動設計 Interaction Design
  • 資訊架構 Information Architecture
  • 規劃 User Flow 與介面邏輯
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
4
Unit 01 07 / 17
Layer 4 · Skeleton

骨架層

介面的具體佈局？

  • 介面設計 Interface Design
  • 導覽設計 Navigation Design
  • 資訊設計 Information Design
  • Wireframe 的主要產出階段
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
5
Unit 01 08 / 17
Layer 5 · Surface

表現層

視覺與感官的最終呈現

  • 視覺設計 Visual Design
  • 排版、色彩、字體系統
  • 高保真 UI（High-Fidelity）的最終樣貌
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 01 09 / 17

Live Demo

Persona / Functional Map 建立

講師講解

  • 介面導覽與基礎工具介紹
  • 圖層面板與畫布管理
  • 基礎形狀、文字建立與樣式設定
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 01 10 / 17

AI-Assisted Design

AI 輔助設計流程

讓 AI 成為你的設計助理

  • 使用 Gemini、ChatGPT 加速前期分析
  • AI 生成 Persona（人物誌）草稿
  • 痛點分析與使用者需求梳理
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 01 11 / 17

Persona

Persona 不只是
使用者畫像

一套行為模擬系統

  • 傳統定義：年齡、職業、興趣的靜態描述
  • 進階定義：Goals、Mental Model、Context 的動態系統
  • 核心目的：錨定設計決策基準，讓全團隊對「使用者」有共同認知
  • 沒有 Persona，每個人心中的「使用者」都不同
Persona 提示詞建立流程
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 01 12 / 17
Anti-Pattern

彈性使用者陷阱

沒有 Persona 時，誰是使用者？

  • 開發者：「使用者跟我一樣懂技術」
  • 行銷：「使用者有無窮的耐心與預算」
  • PM：「使用者願意學習任何功能」
  • Persona 的存在，是為了錨定決策基準
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 01 13 / 17
Persona · Structure

Persona 深層構成

三個核心維度

  • 目標驅動力：他們為什麼在這裡？
    例：追求效率 vs. 追求探索
  • 心智模型：他們習慣如何思考？
    例：習慣實體目錄的人，可能不習慣漢堡選單
  • 環境脈絡：他們在哪裡使用？
    例：吵雜的捷運 vs. 靜謐的辦公室，需求截然不同
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 01 14 / 17
Functional Map

功能地圖

將「需求」映射為「系統邊界」

  • 核心路徑：支援 Persona 達成首要目標的必要功能
  • 邊緣案例：處理例外狀況（密碼錯誤、網路斷線、權限不足）
  • 資訊層級：哪些功能放第一層？依 Persona 的使用頻率決定

目標：最精簡的功能組合，而非列出所有可能

功能地圖範例
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 01 15 / 17

Comparison

Persona vs Functional Map

感性發散 → 理性收斂

比較維度 Persona（人物誌） Functional Map（功能地圖）
屬性 感性、行為導向、發散 理性、邏輯導向、收斂
解決問題 「誰」在用？「為什麼」用？ 產品「能做什麼」？
產出價值 建立同理心與設計方向 定義開發範圍與資訊架構
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 01 16 / 17

Workflow

從發散到收斂
的設計閉環

四個階段反覆迭代

  • Empathy：用 Persona 挖掘潛在痛點，盡可能發散各種可能性
  • Translation：將痛點轉化為功能需求
    因為 Persona「容易分心」→ 功能需要「草稿自動儲存」
  • Architecture：用 Functional Map 梳理邏輯，剔除冗餘功能
  • Validation：每個功能都能對應 Persona 的某個痛點嗎？
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 01 17 / 17

Workshop

回家作業
跨領域產品定義練習

運用 persona 與 Functional Map

  • 選擇一個領域：（如：永續餐飲、二手車交易、寵物行為矯正）。
  • Persona 產出： 利用 AI 輔助，建立一個具有「矛盾需求」的 Persona（例如：想省錢但追求高品質的租屋族）。
  • 功能地圖： 針對該 Persona，列出產品的 Functional Map。必須標註出「哪三個功能」是直接對應 Persona 的核心痛點。
  • AI 溝通紀錄： 附上你與 AI 協作的 Prompt 截圖或文字，並說明你如何修改 AI 給你的初版建議。
UI 設計實作：Figma 與 UX 流程 × AI 設計整合