UI/UX 設計 UI/UX Design
以用戶為中心的設計思維
適用場景
- 設計用戶介面和互動流程
- 建立設計系統和元件庫
- 進行可用性評估
- 確保無障礙合規
- 製作線框圖和原型
設計原則
┌─────────────────────────────────────────────────────────────────┐
│ 核心設計原則 │
│ │
│ 1. 一致性 Consistency │
│ └─ 相同功能使用相同的視覺和互動模式 │
│ │
│ 2. 可見性 Visibility │
│ └─ 重要資訊和操作應該容易被發現 │
│ │
│ 3. 回饋 Feedback │
│ └─ 每個操作都應該有即時的視覺或聽覺回饋 │
│ │
│ 4. 容錯 Forgiveness │
│ └─ 允許用戶撤銷操作，避免災難性錯誤 │
│ │
│ 5. 簡約 Simplicity │
│ └─ 只顯示必要的資訊，減少認知負荷 │
└─────────────────────────────────────────────────────────────────┘
視覺層級
| 層級 |
用途 |
設計手法 |
| Primary |
主要行動 |
大按鈕、強對比色 |
| Secondary |
次要行動 |
較小、輪廓按鈕 |
| Tertiary |
輔助資訊 |
文字連結、淡色 |
層級建立技巧
視覺重量由大到小：
大小 > 顏色對比 > 粗細 > 位置 > 間距
範例：
┌──────────────────────────────────────┐
│ 標題（24px, Bold, #000） │ ← 最高層級
│ 副標題（16px, Medium, #666） │ ← 次要層級
│ 內文（14px, Regular, #999） │ ← 最低層級
└──────────────────────────────────────┘
間距系統
8pt Grid System（業界標準）
間距倍數：
- xs: 4px (0.5x)
- sm: 8px (1x)
- md: 16px (2x)
- lg: 24px (3x)
- xl: 32px (4x)
- xxl: 48px (6x)
使用規則：
- 相關元素：sm (8px)
- 區塊間距：md-lg (16-24px)
- 章節間距：xl-xxl (32-48px)
色彩使用
語意色彩
| 色彩 |
用途 |
Hex 範例 |
| Primary |
品牌主色、主要 CTA |
#0066FF |
| Success |
成功、確認、完成 |
#00C853 |
| Warning |
警告、需注意 |
#FFB300 |
| Error |
錯誤、危險、刪除 |
#FF3D00 |
| Info |
資訊、提示 |
#00B0FF |
對比度要求（WCAG 2.1）
| 層級 |
普通文字 |
大型文字 |
| AA |
4.5:1 |
3:1 |
| AAA |
7:1 |
4.5:1 |
無障礙設計（Accessibility）
WCAG 2.1 核心要求
## POUR 原則
### Perceivable（可感知）
- [ ] 所有圖片有 alt 文字
- [ ] 色彩不是唯一的資訊傳達方式
- [ ] 對比度符合 AA 標準
### Operable（可操作）
- [ ] 所有功能可用鍵盤操作
- [ ] Focus 狀態明顯
- [ ] 沒有會導致癲癇的閃爍內容
### Understandable（可理解）
- [ ] 語言明確指定
- [ ] 表單有清楚的標籤和錯誤提示
- [ ] 導航一致
### Robust（健壯）
- [ ] 語意化 HTML
- [ ] ARIA 標籤正確使用
- [ ] 跨瀏覽器/輔助工具相容
常見修復
| 問題 |
解決方案 |
| 圖片無 alt |
<img alt="描述"> |
| 低對比度 |
使用對比度檢查工具 |
| 無鍵盤導航 |
確保 tabindex 正確 |
| 無 focus 指示 |
加入 :focus 樣式 |
互動設計模式
常用模式
┌─ 導航模式 ────────────────────────────────────────────────────┐
│ Tab Bar: 3-5 個主要功能（行動裝置） │
│ Side Nav: 多層級導航（桌面） │
│ Breadcrumb: 深層結構回溯 │
└───────────────────────────────────────────────────────────────┘
┌─ 輸入模式 ────────────────────────────────────────────────────┐
│ Inline Validation: 即時驗證 │
│ Progressive Disclosure: 逐步顯示 │
│ Default Values: 預填合理預設 │
└───────────────────────────────────────────────────────────────┘
┌─ 回饋模式 ────────────────────────────────────────────────────┐
│ Toast: 非阻斷式通知 │
│ Modal: 需要用戶決策 │
│ Skeleton: 載入中佔位 │
└───────────────────────────────────────────────────────────────┘
設計系統元件
核心元件清單
基礎元件：
├── Button (Primary/Secondary/Ghost)
├── Input (Text/Number/Password)
├── Select/Dropdown
├── Checkbox/Radio
├── Toggle/Switch
└── Icon
複合元件：
├── Card
├── Modal/Dialog
├── Toast/Notification
├── Table
├── Pagination
└── Navigation (Tab/Breadcrumb/Menu)
版面元件：
├── Container
├── Grid
├── Stack
└── Divider
可用性檢查清單
## 上線前檢查
### 導航
- [ ] 用戶知道自己在哪裡
- [ ] 用戶知道可以去哪裡
- [ ] 用戶可以輕鬆返回
### 內容
- [ ] 重要資訊在折疊線之上
- [ ] 文案清晰、無歧義
- [ ] 錯誤訊息有幫助
### 互動
- [ ] 可點擊元素看起來可點擊
- [ ] 操作有回饋
- [ ] 表單驗證即時
### 效能
- [ ] 首次載入 < 3 秒
- [ ] 互動回應 < 100ms
- [ ] 動畫流暢（60fps）
常見錯誤
| 錯誤 |
正確做法 |
| 按鈕顏色區分功能 |
用大小/位置/文字區分 |
| Placeholder 當標籤 |
使用獨立的 label |
| 無 hover 狀態 |
所有可互動元素有 hover |
| 自動播放影片 |
需要用戶主動播放 |
工具推薦
- 設計：Figma, Sketch
- 原型：Figma, ProtoPie
- 協作：Figma, Zeplin
- 無障礙測試：axe, WAVE
- 對比度：WebAIM Contrast Checker
用戶測試
可用性測試類型
| 類型 |
說明 |
適用階段 |
| 探索性 |
了解用戶如何自然使用 |
早期原型 |
| 任務導向 |
完成特定任務 |
設計中期 |
| 比較測試 |
A vs B 方案 |
決策階段 |
| 基準測試 |
量化效能指標 |
上線前/後 |
測試準備框架
┌─────────────────────────────────────────────────────────────────┐
│ 可用性測試準備清單 │
│ │
│ 1. 定義目標 │
│ • 要驗證的假設是什麼？ │
│ • 成功指標是什麼？ │
│ │
│ 2. 設計任務 │
│ • 3-5 個核心任務 │
│ • 模擬真實使用情境 │
│ • 任務描述不暗示答案 │
│ │
│ 3. 招募受試者 │
│ • 5-8 人即可發現 80% 問題 │
│ • 符合目標用戶特徵 │
│ • 準備適當酬勞 │
│ │
│ 4. 準備環境 │
│ • 原型/測試版本 │
│ • 錄影/錄音設備 │
│ • 觀察記錄表 │
│ │
│ 5. 測試引導話術 │
│ • 「請一邊操作一邊說出你的想法」 │
│ • 「沒有對錯，我們在測試產品不是測試你」 │
│ • 遇到卡住：「你期望這裡會發生什麼？」 │
└─────────────────────────────────────────────────────────────────┘
測試報告模板
## 可用性測試報告
### 測試概要
- 測試日期：
- 參與人數：
- 原型版本：
### 任務成功率
| 任務 | 成功率 | 平均時間 | 難度評分 |
|------|--------|----------|----------|
| 任務 1 | | | |
| 任務 2 | | | |
### 發現問題
#### 嚴重問題 (Critical)
- [ ] 問題描述 → 建議解決方案
#### 主要問題 (Major)
- [ ] 問題描述 → 建議解決方案
#### 次要問題 (Minor)
- [ ] 問題描述 → 建議解決方案
### 用戶回饋亮點
- 正面回饋
- 改進建議
響應式設計
斷點標準
## 常見斷點（Mobile First）
| 裝置 | 寬度 | CSS |
|------|------|-----|
| 手機 | < 640px | 預設 |
| 平板 | ≥ 768px | @media (min-width: 768px) |
| 筆電 | ≥ 1024px | @media (min-width: 1024px) |
| 桌機 | ≥ 1280px | @media (min-width: 1280px) |
| 大螢幕 | ≥ 1536px | @media (min-width: 1536px) |
## 響應式策略
內容層級：
- 手機：堆疊排列，單欄
- 平板：兩欄或調整版面
- 桌面：完整多欄布局
互動調整：
- 手機：較大觸控區域（44px+）
- 平板：兼顧觸控和指標
- 桌面：hover 狀態、精細操作
響應式元件模式
┌─────────────────────────────────────────────────────────────────┐
│ 常見響應式模式 │
│ │
│ 1. Hamburger Menu │
│ 手機：收合成漢堡選單 │
│ 桌面：展開成水平導航 │
│ │
│ 2. 卡片重排 │
│ 手機：1 column │
│ 平板：2 columns │
│ 桌面：3-4 columns │
│ │
│ 3. 表格變形 │
│ 手機：堆疊式卡片 or 水平滾動 │
│ 桌面：標準表格 │
│ │
│ 4. 側邊欄 │
│ 手機：收合或底部彈出 │
│ 桌面：常駐側邊 │
└─────────────────────────────────────────────────────────────────┘
設計交接
開發交接清單
## 設計規格文件應包含
### 視覺規格
- [ ] 色彩變數（包含深色模式）
- [ ] 字型規格（字體、大小、行高、字重）
- [ ] 間距系統
- [ ] 圓角規格
- [ ] 陰影規格
- [ ] 動畫/過渡時間
### 元件規格
- [ ] 各狀態樣式（default, hover, active, disabled, focus, error）
- [ ] 尺寸變體（sm, md, lg）
- [ ] 響應式行為
### 互動規格
- [ ] 動畫描述（時間、緩動函數）
- [ ] 手勢支援（swipe, pinch 等）
- [ ] 載入狀態
### 資產輸出
- [ ] Icon（SVG，含多尺寸）
- [ ] 圖片（1x, 2x, 3x）
- [ ] Logo（各格式、各背景版本）
設計 Token 規範
// Design Token 結構範例
{
"color": {
"primary": {
"50": "#E3F2FD",
"500": "#2196F3", // 主色
"900": "#0D47A1"
},
"semantic": {
"success": "#4CAF50",
"warning": "#FF9800",
"error": "#F44336"
}
},
"spacing": {
"xs": "4px",
"sm": "8px",
"md": "16px",
"lg": "24px",
"xl": "32px"
},
"typography": {
"heading-1": {
"fontSize": "32px",
"lineHeight": "40px",
"fontWeight": "700"
}
},
"shadow": {
"sm": "0 1px 2px rgba(0,0,0,0.05)",
"md": "0 4px 6px rgba(0,0,0,0.1)"
}
}
動效設計
動效原則
| 原則 |
說明 |
實作 |
| 目的性 |
每個動效都要有意義 |
引導注意力、表達關係 |
| 自然性 |
符合物理直覺 |
使用緩動函數 |
| 快速 |
不讓用戶等待 |
大多 200-300ms |
| 一致性 |
相同動作相同動效 |
建立動效規範 |
緩動函數參考
┌─────────────────────────────────────────────────────────────────┐
│ 常用緩動曲線 │
│ │
│ ease-out (減速) │
│ • 元素進入畫面 │
│ • 展開動作 │
│ • cubic-bezier(0.0, 0.0, 0.2, 1) │
│ │
│ ease-in (加速) │
│ • 元素離開畫面 │
│ • 收合動作 │
│ • cubic-bezier(0.4, 0.0, 1, 1) │
│ │
│ ease-in-out (先加後減) │
│ • 位置移動 │
│ • 狀態切換 │
│ • cubic-bezier(0.4, 0.0, 0.2, 1) │
│ │
│ 時間建議： │
│ • 快速回饋：100-150ms │
│ • 標準過渡：200-300ms │
│ • 複雜動畫：300-500ms │
└─────────────────────────────────────────────────────────────────┘
深色模式設計
深色模式原則
## 顏色調整
### 不是簡單反轉
❌ 黑底白字 + 顏色反轉
✅ 重新設計色階，維持層級
### 背景層級
- 最底層：#121212（基底）
- 表面層 1：#1E1E1E（卡片、面板）
- 表面層 2：#2D2D2D（彈出層）
- 表面層 3：#383838（懸浮）
### 文字顏色
- 主要文字：87% 白（rgba 255,255,255,0.87）
- 次要文字：60% 白（rgba 255,255,255,0.6）
- 禁用文字：38% 白（rgba 255,255,255,0.38）
### 強調色調整
- 亮色模式的強調色可能太刺眼
- 使用飽和度較低的版本
- 確保對比度仍符合 AA 標準
啟發式評估
Nielsen 10 大可用性啟發式
| # |
啟發式 |
檢查問題 |
| 1 |
系統狀態可見 |
用戶知道目前發生什麼事嗎？ |
| 2 |
現實與系統匹配 |
使用用戶熟悉的語言嗎？ |
| 3 |
用戶控制與自由 |
可以撤銷/返回嗎？ |
| 4 |
一致性與標準 |
遵循平台慣例嗎？ |
| 5 |
錯誤預防 |
是否預防錯誤發生？ |
| 6 |
識別而非回憶 |
選項是否可見？ |
| 7 |
靈活與效率 |
有快捷方式嗎？ |
| 8 |
美學與極簡 |
是否只顯示必要資訊？ |
| 9 |
錯誤恢復 |
錯誤訊息有幫助嗎？ |
| 10 |
幫助與文件 |
需要時能找到幫助嗎？ |
設計系統建立指南
┌─────────────────────────────────────────────────────────────────┐
│ 設計系統建立步驟 │
│ │
│ Phase 1: 審計 (Audit) │
│ • 收集現有 UI 截圖 │
│ • 識別不一致之處 │
│ • 列出所有元件變體 │
│ ↓ │
│ Phase 2: 定義 (Define) │
│ • 建立 Design Token（色彩、字型、間距） │
│ • 定義核心元件規格 │
│ • 撰寫使用指南 │
│ ↓ │
│ Phase 3: 建立 (Build) │
│ • Figma 元件庫 │
│ • 程式碼元件庫 │
│ • 文件網站 │
│ ↓ │
│ Phase 4: 維護 (Maintain) │
│ • 版本控制 │
│ • 貢獻流程 │
│ • 定期審查更新 │
└─────────────────────────────────────────────────────────────────┘
相關資源