465 lines
11 KiB
Markdown
465 lines
11 KiB
Markdown
# 🎨 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 設計團隊 |