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

十大易用性
原則

Nielsen's 10 Heuristics · UX 審查實務

UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 06 02 / 12

Agenda

課程大綱

第 1 小時 10 條原則解析 逐條說明與案例示範
第 2 小時 案例分析 好設計與壞設計的對比
第 3 小時 審查實作 用檢查表評估一個真實介面
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 06 03 / 12

Overview

十大易用性原則

Jakob Nielsen，1994 年提出，至今仍是最實用的 UX 評估框架

  • 系統狀態可見性
  • 現實世界對應
  • 使用者控制與自由
  • 一致性與標準
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 06 04 / 12

H1–H2

可見性與現實對應

讓使用者隨時知道「現在在哪裡、發生什麼事」

  • H1 系統狀態可見性：進度條、載入動畫、已讀標記
  • H2 現實世界對應：用使用者熟悉的語言，避免系統術語
  • 案例：購物車圖示 vs「儲存至暫存清單 ID#4829」
  • 使用者的心智模型優先於系統邏輯
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
3
Unit 06 05 / 12
H3–H4

控制與一致性

使用者需要「後悔藥」與「熟悉感」

  • H3 使用者控制：Undo / Redo、取消操作、返回上一頁
  • H4 一致性與標準：同樣功能用同樣圖示，同樣詞彙
  • 打破一致性 = 增加認知負擔
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
5
Unit 06 06 / 12
H5–H6

預防錯誤與識別記憶

避免問題發生，比修復問題更重要

  • H5 錯誤預防：刪除前的確認對話框、表單格式即時驗證
  • H6 識別而非記憶：將選項顯示出來，不讓使用者靠記憶操作
  • 好設計讓使用者「不可能出錯」
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 06 07 / 12

H7–H10

彈性、美感、錯誤與說明

給不同程度使用者的體驗設計

  • H7 彈性與效率：快捷鍵、進階功能、個人化設定
  • H8 美感與極簡：只顯示必要資訊，去除干擾
  • H9 錯誤識別與修復：清楚說明錯誤並提供解法
  • H10 說明文件：在使用者需要時找得到幫助
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 06 08 / 12

Case Study

好設計 vs 壞設計

同樣功能，不同體驗

  • 案例一：錯誤訊息「Error 403」vs「您沒有權限，請聯絡管理員」
  • 案例二：無確認的「清空購物車」按鈕
  • 案例三：表單送出後才告知格式錯誤
  • 找看看你常用的 App 中的反例
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 06 09 / 12

Audit

易用性審查方法

系統性地找出設計問題

  • 選定一個介面（App 或網站）
  • 用 10 條原則逐一對照
  • 記錄問題：原則 + 截圖 + 說明
  • 評估嚴重程度（1–4 級）
  • 提出改善建議
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 06 10 / 12

Live Demo

審查示範

老師實際操作一份易用性審查

  • 選定目標介面
  • 套用 H1–H5 進行初步掃描
  • 記錄 3 個主要問題
  • 說明改善方向
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 06 11 / 12

Workshop

課堂實作
易用性審查

找出至少 3 個易用性問題

  • 選一個你熟悉的 App
  • 用 10 條原則（至少選 5 條）進行審查
  • 截圖標記問題位置
  • 寫出問題說明與改善建議
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 06 12 / 12

Review

討論與點評

分享你找到的易用性問題

  • 你找到的最嚴重問題是什麼？
  • 這個問題違反了哪條原則？
  • 你的改善建議是什麼？
UI 設計實作：Figma 與 UX 流程 × AI 設計整合