11 KiB

Raw Permalink Blame History

🎨 Web端設計系統指南

📋 文檔概述

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

🎯 設計哲學

🌟 Web端設計核心

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

🔄 平台一致性原則

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

🎨 視覺設計標準

🌈 色彩系統 (基於 design-system.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端特殊色彩

/* 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;   /* 細線邊框 */
}

📐 佈局系統

網格系統

/* 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));
}

間距系統

/* 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端字體層級

/* 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;                   /* 說明文字 */
}

字體應用規範

/* 字體使用情境 */
.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;
}

🧩 組件設計規範

🔘 按鈕系統

按鈕層級

<!-- 主要按鈕 -->
<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端按鈕增強

.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;
}

📝 輸入框系統

智能輸入框

<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>

📊 卡片系統

學習卡片設計

<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>

🎮 交互設計規範

🖱️ 懸停與點擊

懸停狀態

/* 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);
}

聚焦狀態

/* 鍵盤導航聚焦 */
.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;
}

⌨️ 快捷鍵設計

快捷鍵視覺提示

<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>

快捷鍵樣式

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);
}

📱 響應式設計原則

🖥️ 斷點系統

/* 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設定

// 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 設計團隊

11 KiB Raw Permalink Blame History Unescape Escape