---
stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
inputDocuments: ['test-samples/sample-a/PRD-AquaFlow-V1.0.md']
workflowType: 'ux-design'
lastStep: 14
status: 'complete'
project_name: 'AquaFlow SaaS 專案管理協作平台'
user_name: '東杰'
date: '2025-12-25'
---

# UX Design Specification: AquaFlow SaaS 專案管理協作平台

**Author:** 東杰
**Date:** 2025年12月25日
**Version:** 1.0

---

## 產品背景摘要

**產品名稱:** AquaFlow
**產品類型:** 雲端 SaaS 專案管理協作平台
**目標受眾:** 中小型企業團隊領導者、專案經理、跨職能團隊成員

### 解決的核心問題
1. 現有工具太複雜或太輕量，團隊需要平衡清晰度、速度和適當結構的產品
2. 任務狀態追蹤困難
3. 新手上手時間過長

### 核心功能模組
- 專案管理（建立和管理多個專案）
- 任務看板（看板拖曳、快速新增）
- 任務詳情（指派、截止日期、優先級、評論）
- 搜尋與篩選
- 通知系統（應用內 + Email）

### 設計風格方向
- 關鍵字：trust、efficiency、clarity、professional
- 風格：Modern Professional SaaS

---

## Executive Summary

### Project Vision

AquaFlow 是專為中小型企業團隊打造的雲端專案管理協作平台。我們的目標是提供比 Jira 更輕量、更直覺的體驗，同時保持專業團隊所需的核心功能。

**核心價值主張：**
- 直覺的拖曳看板，讓任務管理變得簡單
- 清晰的團隊進度可見度，一眼掌握全局
- 快速上手，5分鐘即可開始使用
- 合理的價格，不需要企業級預算

### Target Users

**主要使用者：**
- 團隊領導者與專案經理（有 Jira 經驗）
- 跨職能團隊成員
- 營運與行銷團隊

**使用者特徵：**
- 技術熟練度：中高（有專案管理與 Jira 經驗）
- 主要設備：桌面電腦
- 使用情境：辦公室環境，團隊協作型任務

**核心痛點：**
- Jira 成本過高
- 現有工具過於複雜或功能不足

### Key Design Challenges

1. **避免「另一個 Jira」的印象** — 需要更簡潔但不失專業
2. **傳達價值感** — UI 需要讓用戶感受到「更划算且更好用」
3. **團隊協作可見度** — 清晰呈現「誰在做什麼、進度如何」

### Design Opportunities

1. **快速上手體驗** — 比 Jira 更低的學習門檻
2. **視覺化進度** — 一眼看清團隊全局
3. **極致拖曳體驗** — 讓核心互動成為產品亮點
4. **輕量專業** — 保持專業外觀，去除不必要複雜度

---

## Core User Experience

### Defining Experience

**核心互動：** 新增任務 + 拖曳任務狀態

這兩個動作是 AquaFlow 的靈魂。用戶每天會執行這些操作數十次，必須做到：
- **新增任務**：10 秒內完成，只需輸入標題
- **拖曳任務**：絲滑流暢，即時視覺回饋

**差異化策略（vs Jira）：**

| 面向 | Jira 痛點 | AquaFlow 解法 |
|------|-----------|---------------|
| 新增任務 | 要填很多欄位 | 「標題即任務」— 只需標題，其他選填 |
| 拖曳體驗 | 有時卡頓 | Spring 動畫 + 樂觀更新 |
| 進度可見度 | 要看報表 | 欄位計數器 + 進度環 |
| 設定複雜度 | 設定太多 | 智慧默認，開箱即用 |

### Platform Strategy

| 面向 | 決策 |
|------|------|
| **主要平台** | 響應式 Web App |
| **互動方式** | 滑鼠/鍵盤為主 |
| **離線功能** | V1 暫不支援（辦公室使用為主） |
| **瀏覽器支援** | Chrome, Firefox, Safari, Edge（最新兩版） |

### Effortless Interactions

1. **極速新增** — 浮動按鈕 + `Cmd+K` 快捷鍵
2. **絲滑拖曳** — Spring 動畫 + 樂觀更新
3. **一眼進度** — 欄位計數器 + 進度環
4. **快速搜尋** — `Cmd+K` 全域搜尋

### Critical Success Moments

| 時刻 | 用戶情感 | 設計策略 |
|------|----------|----------|
| **第一次拖曳到「完成」** | 「哇，好順！」 | 微慶祝動畫 |
| **看到團隊進度** | 「終於不用問了」 | 進度環 + 計數器 |
| **10秒內新增任務** | 「比 Jira 簡單」 | 快速新增流程 |
| **找到上週任務** | 「搜尋好用！」 | `Cmd+K` 全域搜尋 |

### Experience Principles

1. **🚀 速度優先** — 任何操作 200ms 內有視覺回應
2. **👁️ 資訊清晰** — 一眼看到：誰負責、何時截止、什麼狀態
3. **🎯 專注當下** — 減少干擾，專注於當前任務
4. **🔄 流暢過渡** — 所有狀態變化都有自然動畫
5. **⌨️ 效率捷徑** — 為專業用戶提供鍵盤快捷鍵

---

## Desired Emotional Response

### Primary Emotional Goals

| 情感 | 觸發時機 | 設計策略 |
|------|----------|----------|
| **掌控感** | 看到團隊進度 | 進度環 + 清晰的狀態欄 |
| **效率感** | 快速完成操作 | 200ms 內有回應 |
| **輕鬆感** | 首次使用 | 智慧默認，不需要設定 |
| **成就感** | 完成任務 | 微慶祝動畫 |

### Emotional Journey Mapping

| 階段 | 情感 | 設計策略 |
|------|------|----------|
| **發現** | 好奇 + 期待 | 清晰的價值主張，5秒內吸引注意 |
| **註冊** | 信任 + 輕鬆 | 最少步驟，支援社群登入 |
| **首次使用** | 自信 + 引導 | 引導式 onboarding，不壓迫 |
| **日常使用** | 高效 + 滿足 | 流暢操作，即時回饋 |
| **完成任務** | 成就感 | 微慶祝動畫，進度視覺化 |
| **出錯時** | 被理解 + 有方向 | 友善錯誤訊息，明確解決方案 |

### Micro-Emotions

**強化的正面情感：**
- ✅ **自信** vs ❌ 困惑 → 清晰的視覺層級
- ✅ **信任** vs ❌ 懷疑 → 一致的互動模式
- ✅ **成就感** vs ❌ 挫折 → 漸進式任務分解
- ✅ **歸屬感** vs ❌ 孤立 → 團隊活動可見性

**避免的負面情感：**
- 😰 焦慮 — 避免資訊過載（vs Jira 太多欄位）
- 😤 挫折 — 避免複雜操作流程
- 😵 困惑 — 避免不一致的 UI 元素
- 😒 厭煩 — 避免過多確認對話框

### Emotional Design Principles

1. **🏆 慶祝進步** — 每個完成的任務都值得微小的慶祝動畫
2. **🤝 溫暖的錯誤處理** — 錯誤訊息像朋友在幫忙，不像機器在責備
3. **✨ 驚喜時刻** — 隱藏的彩蛋讓日常使用不無聊
4. **🧘 減少認知負擔** — 默認值聰明，讓用戶少做決定
5. **👋 個人化觸點** — 使用者名字、偏好設定優先

---

## UX Pattern Analysis & Inspiration

### Inspiring Products Analysis

| 產品 | 優點 | 可借鑒的 UX 模式 |
|------|------|-----------------|
| **Trello** | 極致直覺的拖曳體驗 | 看板 + 卡片設計、封面圖片、標籤系統 |
| **Asana** | 多視圖無縫切換 | 列表/看板/時間軸視圖、右側滑出面板 |
| **Notion** | 鍵盤導向操作 | `Cmd+K` 萬能搜尋、斜線指令 |
| **Linear** | 極簡專業風格 | 清晰資訊層級、快捷鍵系統 |

### Transferable UX Patterns

**導航模式：**
- 側邊欄工作區切換（像 Slack 一樣快速切換）
- 麵包屑導航（工作區 > 專案 > 任務的清晰路徑）
- 全域搜尋 `Cmd+K`（快速找到任何東西）

**互動模式：**
- Trello 風格的流暢拖曳
- 右側滑出詳情面板（不離開上下文）
- @提及自動完成（自然的協作語法）

### Anti-Patterns to Avoid

| 反模式 | 來源 | 為什麼避免 |
|--------|------|-----------|
| 過度功能 | Jira | 中小企業不需要複雜設定 |
| 資訊過載 | Monday.com | 太多欄位造成認知負擔 |
| 強制教學 | 某些企業軟體 | 阻斷新手的探索慾望 |
| 深層導航 | 舊版 Basecamp | 超過 3 層深度造成迷失 |

### Design Inspiration Strategy

**採用 (Adopt)：**
- ✅ Trello 的拖曳體驗 → 核心看板互動
- ✅ Asana 的視圖切換 → 列表/看板無縫切換
- ✅ Notion 的 Cmd+K → 全域快捷搜尋

**改編 (Adapt)：**
- 🔄 Asana 的慶祝動畫 → 更輕量的完成微動畫
- 🔄 Linear 的鍵盤導向 → 簡化為常用快捷鍵

**避免 (Avoid)：**
- ❌ 任何需要培訓的功能 → 自助可發現
- ❌ 深層選單 → 最多 3 層

---

## Design System Foundation

### Design System Choice

**選定方案：** Chakra UI v2 + React

**技術組合：**
- UI 框架：Chakra UI v2
- 圖標庫：Lucide Icons
- 拖曳：@dnd-kit/core
- 動畫：Framer Motion（內建）
- 表單：React Hook Form + Chakra

### Rationale for Selection

| 考量因素 | Chakra UI 優勢 |
|----------|----------------|
| **React 整合** | 原生支援，符合 PRD 技術栈 |
| **可主題化** | 輕鬆建立 AquaFlow 品牌識別 |
| **無障礙** | 內建 WCAG 標準支援 |
| **開發體驗** | 清晰文件、TypeScript 支援 |
| **拖曳支援** | 易於整合 @dnd-kit |

### Implementation Approach

1. **Phase 1: 基礎設定**
   - 安裝 Chakra UI 和依賴套件
   - 配置主題 (theme.ts)
   - 建立設計令牌 (Design Tokens)

2. **Phase 2: 基礎組件**
   - Button, Input, Card 等基礎組件
   - 導航組件 (Sidebar, Navbar)
   - 版面配置組件

3. **Phase 3: 業務組件**
   - TaskCard (任務卡片)
   - KanbanColumn (看板欄)
   - ProjectList (專案列表)

### Customization Strategy

**設計令牌 (Design Tokens)：**
- 品牌色：待 Step 8 定義
- 字型：Inter (Google Fonts)
- 間距：4px 基礎單位
- 圓角：sm=4px, md=8px, lg=16px
- 陰影：使用 Chakra 默認 shadow tokens

---

## Visual Design Foundation

### Color System

**色彩來源：** UI/UX Pro Max 知識庫 (SaaS Modern Professional)

| 角色 | Hex 色碼 | 用途 |
|------|----------|------|
| **Primary** | `#2563EB` | 主按鈕、連結、品牌識別 |
| **Secondary** | `#3B82F6` | hover 狀態、次要強調 |
| **CTA** | `#F97316` | 行動呼籲按鈕 |
| **Background** | `#F8FAFC` | 頁面背景 |
| **Text** | `#1E293B` | 主要文字 |
| **Border** | `#E2E8F0` | 邊框、分隔線 |

**語意色彩：**
- Success: `#22C55E`
- Warning: `#EAB308`
- Error: `#EF4444`
- Info: `#3B82F6`

**設計理念：** Trust blue + accent contrast（信任藍 + 對比強調色）

### Typography System

**字型來源：** UI/UX Pro Max 知識庫 (Minimal Swiss)

**主要字型：** Inter (Google Fonts)
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
```

**字級階層：**

| 元素 | 大小 | 粗細 | 行高 |
|------|------|------|------|
| H1 | 32px | 700 | 1.2 |
| H2 | 24px | 600 | 1.3 |
| H3 | 20px | 600 | 1.4 |
| Body | 16px | 400 | 1.5 |
| Small | 14px | 400 | 1.5 |
| Caption | 12px | 400 | 1.4 |

### Spacing & Layout Foundation

**基礎單位：** 4px

**間距系統 (Chakra UI)：**
```
space.1 = 4px
space.2 = 8px    ← 最小按鈕間距
space.3 = 12px
space.4 = 16px   ← 常用內邊距
space.6 = 24px   ← 區塊間距
space.8 = 32px
space.10 = 40px
space.12 = 48px
```

**版面配置：**
- 最大寬度：1280px
- 側邊欄寬度：240px
- 卡片內邊距：16px
- 欄位間距：16px

### Accessibility Considerations

- ✅ 色彩對比度符合 WCAG AA 標準（4.5:1）
- ✅ 主要按鈕使用至少 44x44px 觸控區域
- ✅ 相鄰按鈕間距至少 8px
- ✅ Inter 字型具備優秀的可讀性
- ✅ 支援鍵盤導航（Tab/Shift+Tab）

---

## Design Direction Decision

### Design Directions Explored

由於設計決策已在前面步驟中明確定義，跳過多變體 mockups 生成。

**已確定的設計元素：**
- 設計系統：Chakra UI v2
- 配色：Trust Blue (#2563EB) + Orange CTA (#F97316)
- 字型：Inter
- 風格：Modern Professional SaaS

### Chosen Direction

**選定方向：Modern Professional SaaS**

| 面向 | 設計決策 |
|------|----------|
| **布局** | 側邊欄導航 + 主內容區看板 |
| **視覺密度** | 中等密度，留白適當 |
| **互動風格** | 輕量動畫、Spring 拖曳 |
| **導航模式** | 左側邊欄 + 頂部麵包屑 |
| **卡片風格** | 白底圓角 + 輕陰影 |

### Design Rationale

1. **側邊欄導航** — 符合 SaaS 產品標準，用戶有 Jira 經驗
2. **中等密度** — 平衡資訊呈現和清晰度（vs Jira 的高密度）
3. **輕量動畫** — 支持「速度優先」原則，不影響效能
4. **白底圓角卡片** — 現代專業感，符合 Trust + Efficiency 關鍵字

### Implementation Approach

1. **Chakra UI Theme** — 配置自訂顏色和字型
2. **Layout Components** — Sidebar + Main + SlidePanel
3. **Card Components** — TaskCard、ProjectCard
4. **Animation Library** — Framer Motion for Spring animations

---

## User Journey Flows

### Journey 1: 新增任務

**目標：** 10 秒內建立新任務

```mermaid
flowchart TD
    A[點擊 + 按鈕 / Cmd+K] --> B[輸入任務標題]
    B --> C{按 Enter?}
    C -->|是| D[任務建立成功 ✓]
    C -->|否| E[展開詳情面板]
    E --> F[填寫其他欄位]
    F --> D
    D --> G[微慶祝動畫]
```

**關鍵設計決策：**
- 只需標題即可建立任務
- 其他欄位皆為選填
- 支援快捷鍵 `Cmd+K`

### Journey 2: 拖曳任務狀態

**目標：** 絲滑流暢的狀態切換

```mermaid
flowchart TD
    A[抓取任務卡片] --> B[拖曳中 - 陰影提升]
    B --> C[放置到目標欄]
    C --> D{樂觀更新}
    D -->|成功| E[Spring 動畫完成]
    D -->|失敗| F[回滾位置 + 錯誤提示]
    E --> G[欄位計數器更新]
```

**關鍵設計決策：**
- 樂觀更新（先顯示成功，再同步後端）
- Spring 動畫增加流暢感
- 失敗時優雅回滾

### Journey 3: 全域搜尋

**目標：** 快速找到任何任務

```mermaid
flowchart TD
    A[按 Cmd+K] --> B[搜尋框浮現]
    B --> C[輸入關鍵字]
    C --> D[即時顯示結果]
    D --> E{選擇結果}
    E -->|Enter/Click| F[跳轉到任務]
    E -->|Esc| G[關閉搜尋]
```

**關鍵設計決策：**
- 全域快捷鍵 `Cmd+K`
- 即時搜尋結果
- 支援鍵盤導航

### Journey Patterns

**通用模式：**
1. **快捷鍵入口** — 所有常用功能支援 keyboard shortcut
2. **即時回饋** — 200ms 內有視覺回應
3. **樂觀更新** — 先顯示成功，後台同步
4. **優雅錯誤處理** — 自動回滾 + 友善訊息

### Flow Optimization Principles

| 原則 | 說明 |
|------|------|
| **10 秒法則** | 核心操作必須在 10 秒內完成 |
| **200ms 回應** | 任何操作有即時視覺回饋 |
| **一鍵可及** | 最常用功能一次點擊/按鍵即可 |
| **漸進揭露** | 進階功能隱藏，需要時才顯示 |

---

## Component Strategy

### Design System Components (Chakra UI v2)

**基礎組件（直接使用）：**
- Button, IconButton, ButtonGroup
- Input, Select, Checkbox, Radio, Switch
- Card, Box, Flex, Grid, Stack
- Modal, Drawer, Popover, Tooltip
- Alert, Toast, Progress, Spinner
- Tabs, Breadcrumb, Menu

### Custom Components

#### 1. TaskCard (任務卡片)

| 項目 | 規格 |
|------|------|
| **用途** | 看板上的可拖曳任務卡片 |
| **內容** | 標題、標籤、負責人頭像、截止日期、優先級 |
| **狀態** | default, hover, dragging, selected, loading |

**KB 指南參考：**
- #28 Focus States → `focus:ring-2 focus:ring-blue-500`
- #29 Hover States → `hover:bg-gray-50 cursor-pointer`
- #30 Active States → `active:scale-[0.99]`
- #84 Truncation → 標題超長用 `line-clamp-2`
- #40 ARIA Labels → 拖曳需 `aria-grabbed` 屬性

#### 2. KanbanColumn (看板欄)

| 項目 | 規格 |
|------|------|
| **用途** | 任務狀態欄（待辦/進行中/完成） |
| **內容** | 欄標題、任務計數器、進度環、新增按鈕 |
| **狀態** | default, drop-target-active, empty |

**KB 指南參考：**
- #80 Empty States → 空欄顯示「尚無任務，拖曳或點擊新增」
- #10 Loading States → 載入中顯示 Skeleton

#### 3. CommandPalette (快捷指令面板)

| 項目 | 規格 |
|------|------|
| **用途** | Cmd+K 全域搜尋/快捷指令 |
| **內容** | 搜尋框、分類結果、最近項目 |
| **狀態** | open, searching, results, empty |

**KB 指南參考：**
- #41 Keyboard Navigation → 完整鍵盤支援（↑↓ Enter Esc）
- #28 Focus States → 清晰的選項焦點指示
- #89 Search Autocomplete → 即時顯示搜尋建議

#### 4. ProgressRing (進度環)

| 項目 | 規格 |
|------|------|
| **用途** | 視覺化任務完成進度 |
| **內容** | 百分比數字、動畫環 |
| **尺寸** | sm(24px), md(32px), lg(48px) |

**KB 指南參考：**
- #8 Duration Timing → 動畫 200ms
- #9 Reduced Motion → 尊重 `prefers-reduced-motion`

### Component Implementation Strategy

**通用狀態規範（基於 KB 指南）：**

```css
/* 所有互動組件必須實作 */
.interactive {
  /* #28 Focus States */
  focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
  
  /* #29 Hover States */
  hover:bg-gray-50 transition-colors
  
  /* #30 Active States */
  active:scale-[0.98]
  
  /* #22 Touch Target */
  min-h-[44px] min-w-[44px]
}

/* #8 Animation Timing */
transition: all 200ms ease-out;

/* #9 Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  transition: none;
}
```

### Implementation Roadmap

| 階段 | 組件 | 優先級 | 依賴 |
|------|------|--------|------|
| **Phase 1** | TaskCard | 🔴 P0 | @dnd-kit |
| **Phase 1** | KanbanColumn | 🔴 P0 | TaskCard |
| **Phase 2** | CommandPalette | 🟡 P1 | - |
| **Phase 2** | ProgressRing | 🟡 P1 | - |
| **Phase 3** | ActivityFeed | 🟢 P2 | - |
| **Phase 3** | UserAvatar | 🟢 P2 | - |

---

## UX Consistency Patterns

**KB 指南參考：** #61 Submit Feedback, #4 Back Button, #43 Form Labels

### Button Hierarchy

| 層級 | 用途 | 樣式 | 範例 |
|------|------|------|------|
| **Primary** | 主要行動 | 填充藍色 `#2563EB` + 白字 | 儲存、建立、提交 |
| **Secondary** | 次要行動 | 邊框藍色 + 藍字 | 取消、返回 |
| **Ghost** | 低調行動 | 透明背景 + 灰字 | 更多選項、展開 |
| **Danger** | 破壞性行動 | 紅色 `#EF4444` | 刪除（需確認對話框） |

**按鈕狀態：**
- Default → Hover (`brightness(1.1)`) → Active (`scale(0.98)`) → Disabled (`opacity-50`)

### Feedback Patterns

| 類型 | 觸發 | 呈現 | 持續時間 |
|------|------|------|----------|
| **Success** | 操作完成 | Toast 右上角 ✓ | 3 秒自動消失 |
| **Error** | 操作失敗 | 紅色 Alert + 說明 | 用戶關閉 |
| **Warning** | 需要注意 | 黃色 Alert | 用戶確認 |
| **Info** | 提示資訊 | 藍色 Toast | 5 秒自動消失 |
| **Loading** | 等待中 | Spinner 或 Skeleton | 完成後消失 |

**回饋規則：**
- 小於 300ms 的操作：無需顯示 loading
- 300ms-1s：顯示 spinner
- 大於 1s：顯示 skeleton 或進度條

### Form Patterns

**輸入欄位規範：**
- ✅ 每個 input 都有 `<label>` 關聯
- ✅ 必填欄位標示 `*`
- ✅ 即時驗證（onBlur）
- ✅ 錯誤訊息在欄位下方（紅色）
- ✅ 送出按鈕顯示 loading 狀態
- ✅ 成功後顯示確認訊息 + 自動跳轉

**表單佈局：**
```
[Label]          * (required)
[Input Field    ]
[Error message in red]
```

### Navigation Patterns

**一致性規則：**
- ✅ 側邊欄高亮當前頁面
- ✅ 麵包屑顯示完整路徑
- ✅ 支援瀏覽器返回鍵（`history.pushState`）
- ✅ URL 反映當前狀態（可分享）
- ✅ Cmd+K 開啟搜尋面板

### Modal & Overlay Patterns

| 類型 | 用途 | 關閉方式 |
|------|------|----------|
| **Modal** | 需要用戶決策 | 按鈕、Esc、點擊外部 |
| **Drawer** | 側邊詳情面板 | 按鈕、Esc、點擊外部 |
| **Popover** | 短暫資訊 | 點擊外部、Esc |
| **Toast** | 通知訊息 | 自動消失、點擊關閉 |

---

<!-- UX design content will be appended sequentially through collaborative workflow steps -->

## Responsive Design & Accessibility

### Responsive Strategy

**平台優先級：**

| 優先級 | 平台 | 螢幕尺寸 | 說明 |
|--------|------|----------|------|
| 🔴 P0 | **Desktop** | 1024px+ | 主要使用環境 |
| 🟡 P1 | Tablet | 768-1023px | 次要環境 |
| 🟢 P2 | Mobile | 320-767px | 輕量查看 |

**設計策略：** Desktop-first（根據 PRD 主要為桌面辦公室環境）

### Breakpoint Strategy

| 名稱 | 尺寸 | 佈局變化 |
|------|------|----------|
| `mobile` | 320px+ | 單欄佈局、底部導航、隱藏側邊欄 |
| `tablet` | 768px+ | 可收合側邊欄、簡化看板 |
| `desktop` | 1024px+ | 側邊欄常駐、多欄看板、詳情面板 |
| `wide` | 1440px+ | 更寬內容區域、三欄佈局 |

**Chakra UI 對應：**
```javascript
const breakpoints = {
  sm: '320px',   // mobile
  md: '768px',   // tablet
  lg: '1024px',  // desktop
  xl: '1440px',  // wide
}
```

### Accessibility Strategy

**合規等級：** WCAG 2.1 Level AA ✅

| 類別 | 要求 | 實施方式 |
|------|------|----------|
| **色彩對比** | 4.5:1（正常文字）、3:1（大文字） | 已驗證配色符合標準 |
| **觸控區域** | 最小 44x44px | 所有按鈕和互動元素 |
| **鍵盤導航** | 完整 Tab 支援 | Chakra UI 內建 |
| **焦點指示** | 可見焦點環 | `focus:ring-2 focus:ring-blue-500` |
| **Screen Reader** | ARIA 標籤 | 所有圖標按鈕 |
| **動態效果** | 尊重偏好 | `prefers-reduced-motion` |
| **Skip Links** | 跳過導航 | 首個焦點元素 |

### Testing Strategy

**自動化測試：**
- axe-core — 掃描 a11y 問題
- Lighthouse — 效能和無障礙評分
- ESLint jsx-a11y — 程式碼檢查

**手動測試：**
- ✅ 純鍵盤操作測試
- ✅ VoiceOver (macOS) / NVDA (Windows) 螢幕閱讀器
- ✅ 高對比模式
- ✅ 200% 縮放

**裝置測試：**
- Chrome DevTools 裝置模擬
- 實機：iPhone、Android 手機

### Implementation Guidelines

**響應式開發：**
```jsx
// Chakra UI 響應式語法
<Box
  w={{ base: '100%', md: '50%', lg: '33%' }}
  display={{ base: 'none', lg: 'block' }}
/>
```

**無障礙開發：**
```jsx
// 圖標按鈕必須有 aria-label
<IconButton
  aria-label="關閉選單"
  icon={<CloseIcon />}
/>

// 尊重動態偏好
const prefersReducedMotion = usePrefersReducedMotion()
```

---

<!-- End of UX Design Specification -->