ui-ux-design

# UI/UX 設計 UI/UX Design

> 以用戶為中心的設計思維

## 適用場景

- 設計用戶介面和互動流程
- 建立設計系統和元件庫
- 進行可用性評估
- 確保無障礙合規
- 製作線框圖和原型

## 核心設計原則

| 原則 | 說明 |
|------|------|
| **一致性** | 相同功能使用相同的視覺和互動模式 |
| **可見性** | 重要資訊和操作應該容易被發現 |
| **回饋** | 每個操作都應該有即時的視覺或聽覺回饋 |
| **容錯** | 允許用戶撤銷操作，避免災難性錯誤 |
| **簡約** | 只顯示必要的資訊，減少認知負荷 |

## 視覺層級

| 層級 | 用途 | 設計手法 |
|------|------|----------|
| **Primary** | 主要行動 | 大按鈕、強對比色 |
| **Secondary** | 次要行動 | 較小、輪廓按鈕 |
| **Tertiary** | 輔助資訊 | 文字連結、淡色 |

視覺重量優先級：大小 > 顏色對比 > 粗細 > 位置 > 間距

## 間距系統（8pt Grid）

| Token | 值 | 用途 |
|-------|-----|------|
| xs | 4px | 緊湊間距 |
| sm | 8px | 相關元素 |
| md | 16px | 區塊間距 |
| lg | 24px | 區塊間距 |
| xl | 32px | 章節間距 |
| xxl | 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 |

## 無障礙設計 (WCAG POUR)

| 原則 | 核心要求 |
|------|----------|
| **Perceivable** | 圖片有 alt、色彩不是唯一資訊、對比度 AA |
| **Operable** | 鍵盤可操作、Focus 明顯、無閃爍 |
| **Understandable** | 語言指定、表單標籤清楚、導航一致 |
| **Robust** | 語意化 HTML、ARIA 正確、跨裝置相容 |

### 常見修復

| 問題 | 解決方案 |
|------|----------|
| 圖片無 alt | `<img alt="描述">` |
| 低對比度 | 使用對比度檢查工具 |
| 無鍵盤導航 | 確保 `tabindex` 正確 |
| 無 focus 指示 | 加入 `:focus` 樣式 |

> 詳細 WCAG 檢查清單見 `extended/checklists.md`

## 互動設計模式

### 導航模式
- **Tab Bar**: 3-5 個主要功能（行動裝置）
- **Side Nav**: 多層級導航（桌面）
- **Breadcrumb**: 深層結構回溯

### 輸入模式
- **Inline Validation**: 即時驗證
- **Progressive Disclosure**: 逐步顯示
- **Default Values**: 預填合理預設

### 回饋模式
- **Toast**: 非阻斷式通知
- **Modal**: 需要用戶決策
- **Skeleton**: 載入中佔位

## 設計系統元件

### 基礎元件
Button, Input, Select, Checkbox/Radio, Toggle, Icon

### 複合元件
Card, Modal, Toast, Table, Pagination, Navigation

### 版面元件
Container, Grid, Stack, Divider

## Nielsen 10 大可用性啟發式

| # | 啟發式 | 檢查問題 |
|---|--------|----------|
| 1 | 系統狀態可見 | 用戶知道目前發生什麼事嗎？ |
|