# UI/UX 設計規範

## 概述
定義 Drama Ling 應用的完整使用者介面和使用者體驗設計標準，確保整體設計的一致性和使用性。

## 設計原則

### 核心設計理念
- [ ] **沉浸式學習**: 創造身歷其境的語言學習環境
- [ ] **簡潔直觀**: 界面設計簡潔明瞭，操作直觀易懂
- [ ] **鼓勵互動**: 透過視覺設計鼓勵用戶積極參與學習
- [ ] **成就感驅動**: 設計元素突出學習進步和成就感
- [ ] **文化包容**: 設計考量多元文化背景用戶需求

### 使用者體驗原則
- [ ] **學習導向**: 所有設計決策以提升學習效果為優先
- [ ] **減少阻力**: 消除學習過程中不必要的操作阻力
- [ ] **即時回饋**: 提供即時的視覺和互動回饋
- [ ] **個人化體驗**: 基於用戶偏好和程度調整介面
- [ ] **無障礙設計**: 確保不同能力用戶都能順利使用

## 視覺設計系統

### 色彩規範

#### 主要色彩 (Primary Colors)
```css
:root {
  /* 主要品牌色 - 學習藍 */
  --primary-blue: #2196F3;
  --primary-blue-light: #64B5F6; 
  --primary-blue-dark: #1976D2;
  
  /* 輔助色 - 成功綠 */
  --success-green: #4CAF50;
  --success-green-light: #81C784;
  --success-green-dark: #388E3C;
  
  /* 強調色 - 活力橙 */
  --accent-orange: #FF9800;
  --accent-orange-light: #FFB74D;
  --accent-orange-dark: #F57C00;
}
```

#### 功能性色彩 (Functional Colors)
```css
:root {
  /* 錯誤和警告 */
  --error-red: #F44336;
  --warning-yellow: #FFC107;
  
  /* 資訊提示 */
  --info-cyan: #00BCD4;
  
  /* 中性色調 */
  --text-primary: #212121;
  --text-secondary: #757575;
  --background-primary: #FFFFFF;
  --background-secondary: #FAFAFA;
  --divider: #E0E0E0;
}
```

#### 遊戲化色彩 (Gamification Colors)
```css
:root {
  /* 等級和成就 */
  --bronze: #CD7F32;
  --silver: #C0C0C0;
  --gold: #FFD700;
  --platinum: #E5E4E2;
  
  /* 排行榜 */
  --rank-1st: #FFD700;
  --rank-2nd: #C0C0C0;
  --rank-3rd: #CD7F32;
  --rank-other: #90A4AE;
}
```

### 字體系統

#### 中文字體
- [ ] **主要字體**: Noto Sans TC (Google Fonts)
- [ ] **備用字體**: PingFang TC, Microsoft JhengHei, sans-serif
- [ ] **特殊用途**: 標題可使用 Noto Serif TC 增加正式感

#### 英文字體  
- [ ] **主要字體**: Inter (現代、易讀)
- [ ] **備用字體**: -apple-system, BlinkMacSystemFont, Roboto, sans-serif
- [ ] **等寬字體**: JetBrains Mono (程式碼、發音標記)

#### 字體大小規範
```css
:root {
  /* 移動設備字體大小 */
  --text-xs: 12px;    /* 提示文字 */
  --text-sm: 14px;    /* 輔助資訊 */
  --text-base: 16px;  /* 正文內容 */
  --text-lg: 18px;    /* 重要文字 */
  --text-xl: 20px;    /* 小標題 */
  --text-2xl: 24px;   /* 標題 */
  --text-3xl: 30px;   /* 大標題 */
  
  /* 桌面設備字體大小 */
  --text-desktop-base: 18px;
  --text-desktop-lg: 20px;
  --text-desktop-xl: 22px;
}
```

### 間距系統

#### 標準間距單位
```css
:root {
  --space-1: 4px;   /* 超小間距 */
  --space-2: 8px;   /* 小間距 */
  --space-3: 12px;  /* 中小間距 */
  --space-4: 16px;  /* 標準間距 */
  --space-5: 20px;  /* 中間距 */
  --space-6: 24px;  /* 大間距 */
  --space-8: 32px;  /* 超大間距 */
  --space-10: 40px; /* 區塊間距 */
  --space-12: 48px; /* 頁面間距 */
}
```

#### 佈局間距規範
- [ ] **元件內邊距**: 16px (--space-4)
- [ ] **元件間間距**: 24px (--space-6) 
- [ ] **區塊間間距**: 40px (--space-10)
- [ ] **頁面邊距**: 20px (mobile) / 32px (desktop)
- [ ] **列表項目間距**: 12px (--space-3)

### 圓角和陰影

#### 圓角規範
```css
:root {
  --radius-sm: 4px;   /* 小元件 */
  --radius-md: 8px;   /* 標準元件 */
  --radius-lg: 12px;  /* 卡片元件 */
  --radius-xl: 16px;  /* 模態視窗 */
  --radius-full: 50%; /* 圓形元素 */
}
```

#### 陰影系統
```css
:root {
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
```

## 元件設計規範

### 按鈕組件

#### 主要按鈕 (Primary Button)
```css
.btn-primary {
  background: var(--primary-blue);
  color: white;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-base);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: var(--primary-blue-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
```

#### 按鈕狀態設計
- [ ] **正常狀態**: 標準顏色和樣式
- [ ] **懸停狀態**: 顏色加深，輕微上移效果
- [ ] **按下狀態**: 顏色更深，無上移效果  
- [ ] **禁用狀態**: 透明度50%，不可點擊
- [ ] **載入狀態**: 顯示載入動畫

#### 按鈕尺寸變體
- [ ] **大型按鈕**: 48px高度，主要行動按鈕
- [ ] **標準按鈕**: 40px高度，一般操作按鈕
- [ ] **小型按鈕**: 32px高度，次要操作按鈕
- [ ] **迷你按鈕**: 24px高度，標籤或圖示按鈕

### 輸入框組件

#### 文字輸入框設計
```css
.input-field {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--divider);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: border-color 0.2s ease;
}

.input-field:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}
```

#### 輸入框狀態
- [ ] **正常狀態**: 灰色邊框，清楚標示輸入區域
- [ ] **聚焦狀態**: 藍色邊框，外圍藍色光暈
- [ ] **錯誤狀態**: 紅色邊框，搭配錯誤訊息
- [ ] **成功狀態**: 綠色邊框，表示輸入正確
- [ ] **禁用狀態**: 灰色背景，無法互動

### 卡片組件

#### 基礎卡片設計
```css
.card {
  background: var(--background-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--divider);
  transition: all 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
```

#### 特殊卡片變體
- [ ] **場景卡片**: 包含圖片、標題、難度標籤
- [ ] **成就卡片**: 徽章圖示、成就名稱、進度條
- [ ] **排行榜卡片**: 排名、用戶頭像、分數
- [ ] **學習記錄卡片**: 日期、學習時長、完成項目

### 導航組件

#### 底部導航列
```css
.bottom-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--background-primary);
  border-top: 1px solid var(--divider);
  display: flex;
  justify-content: space-around;
  padding: var(--space-2) 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.nav-item.active {
  color: var(--primary-blue);
}
```

#### 導航項目設計
- [ ] **首頁**: 家圖示，學習概覽
- [ ] **練習**: 對話氣泡圖示，對話練習
- [ ] **進度**: 圖表圖示，學習進度  
- [ ] **排行榜**: 獎盃圖示，競爭排名
- [ ] **個人**: 用戶圖示，個人資料

## 互動設計規範

### 動畫效果

#### 頁面轉場動畫
```css
/* 頁面進入動畫 */
.page-enter {
  animation: slideInRight 0.3s ease-out forwards;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
```

#### 互動回饋動畫
- [ ] **點擊回饋**: 輕微縮放效果 (scale 0.95)
- [ ] **載入動畫**: 旋轉或脈衝效果
- [ ] **成功動畫**: 綠色勾選圖示彈出
- [ ] **錯誤動畫**: 紅色搖擺效果
- [ ] **進度動畫**: 平滑的進度條填充

#### 遊戲化動畫
- [ ] **獲得積分**: 積分數字向上飛出效果
- [ ] **解鎖成就**: 徽章閃爍和彈出動畫
- [ ] **等級提升**: 光芒四射的升級特效
- [ ] **連擊效果**: 連續成功時的視覺強化
- [ ] **排名變化**: 排名上升或下降的動態效果

### 觸控互動

#### 手勢支援
- [ ] **輕觸 (Tap)**: 選擇、確認操作
- [ ] **長按 (Long Press)**: 顯示詳細資訊或選單
- [ ] **滑動 (Swipe)**: 頁面導航、項目操作
- [ ] **雙擊 (Double Tap)**: 快速操作或放大
- [ ] **捏放 (Pinch)**: 縮放內容 (如文字大小)

#### 觸控回饋
- [ ] **視覺回饋**: 觸控時的顏色變化或陰影
- [ ] **觸覺回饋**: 重要操作提供震動回饋
- [ ] **音效回饋**: 成功、錯誤、點擊的音效
- [ ] **狀態回饋**: 清楚顯示操作結果和狀態變化

## 響應式設計

### 斷點設計
```css
:root {
  /* 響應式斷點 */
  --breakpoint-sm: 640px;   /* 小型平板 */
  --breakpoint-md: 768px;   /* 平板 */
  --breakpoint-lg: 1024px;  /* 小型筆電 */
  --breakpoint-xl: 1280px;  /* 桌面 */
}
```

### 設備適配策略

#### 手機版 (< 640px)
- [ ] **單欄布局**: 垂直排列所有內容
- [ ] **大觸控目標**: 最小44x44px觸控區域
- [ ] **簡化導航**: 隱藏次要功能，突出主要操作
- [ ] **全螢幕模式**: 充分利用螢幕空間
- [ ] **拇指友好**: 重要操作放在拇指易達區域

#### 平板版 (640px-1024px)  
- [ ] **混合布局**: 部分內容可並排顯示
- [ ] **侧邊導航**: 利用寬螢幕顯示更多導航選項
- [ ] **多欄內容**: 列表和詳細資訊可同時顯示
- [ ] **適中字體**: 在可讀性和螢幕利用間平衡

#### 桌面版 (> 1024px)
- [ ] **多欄布局**: 充分利用寬螢幕空間
- [ ] **懸停效果**: 支援滑鼠懸停互動
- [ ] **快捷鍵**: 提供鍵盤快捷鍵支援
- [ ] **多工視窗**: 支援多個內容區域同時顯示

### 內容適配原則
- [ ] **內容優先**: 根據內容重要性調整佈局
- [ ] **漸進增強**: 基礎功能在所有設備可用，進階功能在大螢幕優化
- [ ] **一致體驗**: 核心功能在各設備保持一致
- [ ] **效能考量**: 小螢幕設備優化載入速度和流量使用

## 可用性設計

### 無障礙設計 (Accessibility)

#### 視覺無障礙
- [ ] **色彩對比**: 確保文字和背景對比度 ≥ 4.5:1
- [ ] **色彩獨立**: 重要資訊不僅依賴顏色傳達
- [ ] **字體大小**: 支援系統字體大小設定
- [ ] **高對比模式**: 提供高對比度主題選項
- [ ] **暗黑模式**: 提供護眼的暗色主題

#### 操作無障礙
- [ ] **鍵盤導航**: 所有功能可透過鍵盤操作
- [ ] **焦點指示**: 清楚的鍵盤焦點視覺指示
- [ ] **語意標籤**: 正確使用HTML語意標籤
- [ ] **螢幕閱讀器**: 支援VoiceOver、TalkBack等
- [ ] **操作時間**: 提供充足的操作反應時間

#### 認知無障礙
- [ ] **簡潔介面**: 避免認知負擔過重的複雜介面
- [ ] **一致性**: 保持操作和佈局的一致性
- [ ] **錯誤預防**: 設計防止用戶犯錯的機制
- [ ] **幫助資訊**: 提供易懂的使用說明和幫助
- [ ] **進度提示**: 清楚顯示當前位置和進度

### 國際化考量

#### 多語言支援
- [ ] **文字長度**: 考量不同語言文字長度差異
- [ ] **文字方向**: 支援從右到左的語言 (如阿拉伯文)
- [ ] **字體支援**: 確保各語言字體正確顯示
- [ ] **文化色彩**: 考量不同文化對色彩的認知差異
- [ ] **符號理解**: 使用全球通用的圖示和符號

#### 本地化介面
- [ ] **日期格式**: 依據地區顯示適當的日期格式
- [ ] **數字格式**: 支援不同的數字和貨幣格式
- [ ] **時區處理**: 正確處理不同時區的時間顯示
- [ ] **節日活動**: 配合當地節日調整介面元素
- [ ] **法規遵循**: 遵循各地區的法規和標準

## 品牌視覺規範

### Logo 使用規範

#### Logo 變體
- [ ] **完整Logo**: 包含圖示和文字的完整版本
- [ ] **圖示版**: 僅包含圖示的簡化版本
- [ ] **文字版**: 僅包含文字的橫式版本
- [ ] **單色版**: 單色版本適用於特殊情況
- [ ] **反白版**: 深色背景使用的反白版本

#### Logo 使用規則
- [ ] **最小尺寸**: Logo最小顯示尺寸24x24px
- [ ] **安全空間**: Logo周圍保持至少等於Logo高度的空白
- [ ] **背景限制**: 避免在複雜背景上使用Logo
- [ ] **變形禁止**: 不得任意拉伸、旋轉或變形Logo
- [ ] **色彩規範**: 僅使用官方指定的Logo色彩

### 圖示系統

#### 圖示風格
- [ ] **線性風格**: 使用2px線寬的線性圖示
- [ ] **圓角設計**: 圖示轉角使用2px圓角
- [ ] **一致比例**: 所有圖示使用24x24px網格設計
- [ ] **視覺重量**: 保持圖示視覺重量的一致性
- [ ] **識別性**: 確保圖示意義清楚易懂

#### 圖示分類
- [ ] **導航圖示**: 首頁、練習、進度、排行榜、個人
- [ ] **功能圖示**: 播放、暫停、設定、搜尋、分享
- [ ] **狀態圖示**: 正確、錯誤、警告、資訊、載入
- [ ] **遊戲圖示**: 積分、成就、等級、排名、獎勵
- [ ] **學習圖示**: 詞彙、對話、複習、分析、進度

### 插圖風格

#### 插圖設計原則
- [ ] **友善風格**: 使用溫和、友善的插圖風格
- [ ] **多元包容**: 插圖人物體現多元文化和包容性
- [ ] **情境相關**: 插圖內容與學習情境密切相關
- [ ] **色彩和諧**: 插圖色彩與整體設計系統和諧統一
- [ ] **簡潔明瞭**: 避免過於複雜的插圖設計

#### 插圖應用場景
- [ ] **空狀態**: 無內容時的友善提示插圖
- [ ] **載入畫面**: 載入過程中的趣味插圖
- [ ] **成功慶祝**: 完成學習任務的慶祝插圖
- [ ] **引導教學**: 功能介紹和使用教學插圖
- [ ] **情境場景**: 對話練習場景的背景插圖

---

## 設計工具與資源

### 設計系統管理
- [ ] **設計令牌**: 使用設計令牌統一管理設計變數
- [ ] **組件庫**: 建立可重複使用的UI組件庫
- [ ] **圖示庫**: 統一管理和更新所有圖示資源
- [ ] **色彩面板**: 提供設計師和開發者共用的色彩規範
- [ ] **間距指南**: 視覺化的間距和佈局指南

### 原型和測試工具
- [ ] **原型工具**: 使用Figma或Sketch製作高保真原型
- [ ] **互動原型**: 製作可點擊的互動原型進行用戶測試
- [ ] **設計規範**: 自動生成開發者所需的設計規範
- [ ] **版本控制**: 設計檔案的版本管理和協作機制
- [ ] **回饋收集**: 設計評審和用戶回饋的收集機制

### 效能最佳化
- [ ] **圖片最佳化**: 使用WebP格式和適當壓縮比例
- [ ] **字體載入**: 最佳化字體載入策略和fallback機制
- [ ] **動畫效能**: 使用CSS transform和opacity製作高效動畫
- [ ] **懶載入**: 圖片和非關鍵內容的懶載入機制
- [ ] **快取策略**: 靜態資源的快取和更新策略

---

## 待完成任務

### 高優先級
1. [ ] 完成主要UI組件的詳細設計規範
2. [ ] 建立完整的設計系統和組件庫  
3. [ ] 製作各個核心頁面的高保真原型
4. [ ] 進行用戶體驗測試和最佳化

### 中優先級
1. [ ] 設計遊戲化元素的視覺效果和動畫
2. [ ] 建立多語言介面的本地化設計規範
3. [ ] 規劃無障礙設計的實施細節
4. [ ] 設計響應式佈局的各個斷點版本

### 低優先級
1. [ ] 研究最新的UI/UX設計趨勢和最佳實踐
2. [ ] 探索VR/AR介面設計的可能性
3. [ ] 建立設計系統的自動化更新機制
4. [ ] 設計品牌延伸應用的視覺規範

---

**最後更新**: 2024年9月5日  
**負責人**: 待分配  
**審查週期**: 每兩週檢討一次