# 🎨 Web端設計系統指南

## 📋 文檔概述

**文檔名稱**: Drama Ling Web端設計系統指南  
**建立日期**: 2025-09-12  
**目標受眾**: UI/UX設計師、前端工程師、產品經理  
**基礎依據**: `design-system.css` + Web端特化需求

## 🎯 設計哲學

### 🌟 **Web端設計核心**
- **效率優先**: 利用桌面環境的高效操作體驗
- **資訊豐富**: 大螢幕空間的充分利用
- **多任務友好**: 支援並行學習和操作
- **專業感**: 適合辦公室和學習環境的專業設計

### 🔄 **平台一致性原則**
- **業務邏輯統一**: 與Mobile端保持相同的學習流程
- **視覺語言延續**: 繼承品牌色彩和基礎設計元素
- **交互模式適配**: 針對Web環境優化交互方式

## 🎨 視覺設計標準

### 🌈 **色彩系統** (基於 design-system.css)

#### 主要色彩應用
```css
/* Web端色彩應用重點 */
:root {
  /* 主要品牌色 - Web端應用 */
  --primary-teal: #00E5CC;        /* 主要按鈕、連結、進度條 */
  --primary-teal-light: #33E8D1;  /* 懸停狀態、高亮顯示 */
  --primary-teal-dark: #00B3A0;   /* 按下狀態、深色強調 */
  
  /* 功能色 - Web端強化 */
  --success-green: #4CAF50;       /* 完成狀態、成功回饋 */
  --warning-yellow: #F39C12;      /* 注意提示、待完成 */
  --error-red: #E74C3C;          /* 錯誤狀態、警告資訊 */
  --info-cyan: #3498DB;          /* 資訊提示、幫助內容 */
}
```

#### Web端特殊色彩
```css
/* Web端專用色彩 */
:root {
  --web-accent-blue: #2196F3;     /* Web端連結色 */
  --web-hover-bg: rgba(0,229,204,0.08); /* 懸停背景 */
  --web-focus-ring: rgba(0,229,204,0.4); /* 聚焦框 */
  --web-border-subtle: #E1E8ED;   /* 細線邊框 */
}
```

### 📐 **佈局系統**

#### 網格系統
```css
/* Web端網格佈局 */
.web-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.web-grid {
  display: grid;
  gap: var(--space-6);
}

/* 常用網格模板 */
.web-grid-main {
  grid-template-columns: 280px 1fr 320px; /* 側欄+主內容+工具欄 */
}

.web-grid-content {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.web-grid-cards {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
```

#### 間距系統
```css
/* Web端間距指南 */
.web-spacing {
  --space-section: var(--space-12);    /* 大區塊間距 48px */
  --space-group: var(--space-8);       /* 組件群組間距 32px */
  --space-item: var(--space-4);        /* 項目間距 16px */
  --space-inline: var(--space-2);      /* 行內元素間距 8px */
}
```

### 🔤 **字體系統**

#### Web端字體層級
```css
/* Web端字體應用 */
.web-typography {
  /* 標題層級 */
  --text-hero: clamp(40px, 5vw, 56px);    /* 主標題 */
  --text-h1: clamp(32px, 4vw, 42px);      /* 頁面標題 */
  --text-h2: clamp(24px, 3vw, 32px);      /* 區塊標題 */
  --text-h3: clamp(20px, 2.5vw, 24px);    /* 小節標題 */
  
  /* 內容字體 */
  --text-body-lg: 18px;                   /* 重要內容 */
  --text-body: 16px;                      /* 一般內容 */
  --text-body-sm: 14px;                   /* 輔助資訊 */
  --text-caption: 12px;                   /* 說明文字 */
}
```

#### 字體應用規範
```css
/* 字體使用情境 */
.web-text-primary {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text-primary);
}

.web-text-heading {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.web-text-label {
  font-size: var(--text-body-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
```

## 🧩 組件設計規範

### 🔘 **按鈕系統**

#### 按鈕層級
```html
<!-- 主要按鈕 -->
<button class="web-btn web-btn-primary">
  <span class="btn-icon">🚀</span>
  開始學習
  <kbd class="btn-shortcut">Ctrl+S</kbd>
</button>

<!-- 次要按鈕 -->  
<button class="web-btn web-btn-secondary">
  查看詳情
</button>

<!-- 輔助按鈕 -->
<button class="web-btn web-btn-tertiary">
  <span class="btn-icon">ℹ️</span>
</button>
```

#### Web端按鈕增強
```css
.web-btn {
  /* 基礎樣式繼承 design-system.css */
  position: relative;
  overflow: visible; /* 允許快捷鍵提示 */
}

.web-btn:hover .btn-shortcut {
  opacity: 1;
  transform: translateY(0);
}

.btn-shortcut {
  position: absolute;
  top: -30px;
  right: 0;
  background: var(--background-dark);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.2s ease;
}
```

### 📝 **輸入框系統**

#### 智能輸入框
```html
<div class="web-input-group">
  <label class="web-input-label">
    你的回應
    <span class="input-hint">按 Tab 接受建議</span>
  </label>
  
  <div class="web-input-container">
    <textarea class="web-input-field" 
              placeholder="輸入你的對話回應..."></textarea>
    
    <div class="web-input-suggestions">
      <div class="suggestion-item">That sounds great!</div>
      <div class="suggestion-item">I'd love to try that.</div>
    </div>
    
    <div class="web-input-toolbar">
      <button class="toolbar-btn">💡 提示</button>
      <button class="toolbar-btn">🔄 翻譯</button>
      <button class="toolbar-btn">🎤 語音</button>
    </div>
  </div>
</div>
```

### 📊 **卡片系統**

#### 學習卡片設計
```html
<div class="web-card web-card-learning">
  <div class="card-status">
    <span class="status-badge status-current">進行中</span>
    <span class="card-progress">3/5</span>
  </div>
  
  <div class="card-header">
    <h3 class="card-title">詞彙學習 - Level 1</h3>
    <p class="card-subtitle">買菜小冒險</p>
  </div>
  
  <div class="card-content">
    <div class="card-preview">
      <span class="vocab-item">market</span>
      <span class="vocab-item">vegetables</span>
      <span class="vocab-item">price</span>
    </div>
  </div>
  
  <div class="card-actions">
    <button class="web-btn web-btn-primary">繼續學習</button>
    <button class="web-btn web-btn-tertiary">查看詳情</button>
  </div>
</div>
```

## 🎮 交互設計規範

### 🖱️ **懸停與點擊**

#### 懸停狀態
```css
/* Web端懸停效果指南 */
.web-interactive {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.web-interactive:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 卡片懸停 */
.web-card:hover {
  border-color: var(--primary-teal);
  box-shadow: 0 12px 40px rgba(0, 229, 204, 0.15);
}

/* 按鈕懸停 */
.web-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
```

#### 聚焦狀態
```css
/* 鍵盤導航聚焦 */
.web-focusable:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--web-focus-ring);
  border-color: var(--primary-teal);
}

/* 聚焦指示器 */
.focus-indicator::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid var(--primary-teal);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s;
}

.focus-indicator:focus::after {
  opacity: 1;
}
```

### ⌨️ **快捷鍵設計**

#### 快捷鍵視覺提示
```html
<div class="web-shortcuts-panel">
  <h4>鍵盤快捷鍵</h4>
  <div class="shortcut-list">
    <div class="shortcut-item">
      <kbd>Ctrl</kbd> + <kbd>1</kbd>
      <span>切換到詞彙學習</span>
    </div>
    <div class="shortcut-item">
      <kbd>Space</kbd>
      <span>播放音頻</span>
    </div>
    <div class="shortcut-item">
      <kbd>Enter</kbd>
      <span>確認答案</span>
    </div>
  </div>
</div>
```

#### 快捷鍵樣式
```css
kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--background-secondary);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
```

## 📱 響應式設計原則

### 🖥️ **斷點系統**
```css
/* Web端響應式斷點 */
:root {
  --breakpoint-desktop: 1200px;    /* 桌面主要設計 */
  --breakpoint-laptop: 992px;      /* 筆電適配 */
  --breakpoint-tablet: 768px;      /* 平板適配 */
  --breakpoint-mobile: 480px;      /* 手機兼容 */
}
```

### 📐 **適配策略**

#### 桌面版 (1200px+)
- **三欄佈局**: 充分利用寬螢幕
- **豐富交互**: 懸停效果、工具提示
- **詳細資訊**: 統計圖表、進度視覺化

#### 筆電版 (992px-1199px)
- **兩欄佈局**: 可摺疊側邊欄
- **簡化工具欄**: 整合功能按鈕
- **保持核心**: 維持主要功能

#### 平板版 (768px-991px)
- **單欄佈局**: 垂直排列內容
- **觸控優化**: 增大可點擊區域
- **簡化導航**: Tab式底部導航

## 🔧 設計實作指南

### 📏 **設計稿規範**

#### 畫板尺寸
- **桌面設計**: 1440px × 900px
- **筆電設計**: 1024px × 768px  
- **平板設計**: 768px × 1024px

#### 組件設計
- **8px網格系統**: 所有尺寸基於8的倍數
- **最小點擊區域**: 44px × 44px
- **文字對比度**: 至少4.5:1 (WCAG AA標準)

### 🎨 **設計工具設定**

#### Figma設定
```javascript
// Figma變數設定
const WebDesignTokens = {
  colors: {
    primary: '#00E5CC',
    primaryLight: '#33E8D1',
    primaryDark: '#00B3A0'
  },
  spacing: {
    xs: '4px', sm: '8px', md: '16px', 
    lg: '24px', xl: '32px', xxl: '48px'
  },
  typography: {
    fontFamily: 'Inter, system-ui',
    fontSize: {
      sm: '14px', base: '16px', lg: '18px',
      xl: '24px', xxl: '32px'
    }
  }
}
```

### 🔄 **設計工作流程**

#### 1️⃣ **需求分析**
- 確認功能需求和業務目標
- 參考Mobile版設計保持一致性
- 識別Web端特有需求

#### 2️⃣ **原型設計**
- 創建低保真度線框圖
- 確定資訊架構和佈局
- 驗證用戶流程的可行性

#### 3️⃣ **視覺設計**
- 應用設計系統規範
- 創建高保真度視覺稿
- 標註交互狀態和動畫

#### 4️⃣ **開發協作**
- 提供完整的設計規格
- 與前端工程師協作實作
- 進行設計走查和調優

## 📊 設計檢查清單

### ✅ **視覺一致性**
- [ ] 色彩使用符合設計系統
- [ ] 字體層級和間距正確
- [ ] 組件樣式保持統一
- [ ] 圖示和插圖風格一致

### ✅ **交互體驗**
- [ ] 懸停狀態清楚可見
- [ ] 聚焦狀態符合無障礙標準
- [ ] 載入狀態有適當回饋
- [ ] 錯誤狀態有清楚提示

### ✅ **響應式適配**
- [ ] 桌面版充分利用螢幕空間
- [ ] 筆電版保持核心功能
- [ ] 平板版觸控操作友好
- [ ] 手機版提供基本功能

### ✅ **無障礙設計**
- [ ] 色彩對比度符合WCAG標準
- [ ] 支援鍵盤導航
- [ ] 提供適當的語義標記
- [ ] 具備螢幕閱讀器支援

---

**設計系統更新**: 當 `design-system.css` 更新時，請同步更新此設計指南。

**最後更新**: 2025-09-12  
**版本**: v1.0  
**維護者**: Drama Ling 設計團隊