docs: update UI-UX guidelines to match actual 05_views designs

- Complete color system overhaul from blue to teal + purple theme - Switch from light to dark theme as primary design - Add comprehensive gamification design system - Include hexagonal level nodes, star rating, user avatars - Add dialogue bubble styles and EXP progress bars - Update typography, spacing, and component specifications - Add game-specific animations and visual effects - Document actual implementation cases from 71 screen designs 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-06 02:54:31 +08:00 · 2025-09-06 02:54:31 +08:00 · cc94096dfe
parent f2439273e5
commit cc94096dfe
1 changed files with 373 additions and 91 deletions
--- a/docs/02_design/ui-ux-guidelines.md
+++ b/docs/02_design/ui-ux-guidelines.md
@ -26,20 +26,20 @@
 #### 主要色彩 (Primary Colors)
 ```css
 :root {
-  /* 主要品牌色 - 學習藍 */
-  --primary-blue: #2196F3;
-  --primary-blue-light: #64B5F6; 
-  --primary-blue-dark: #1976D2;
+  /* 主要品牌色 - 青綠色 */
+  --primary-teal: #00E5CC;
+  --primary-teal-light: #33E8D1; 
+  --primary-teal-dark: #00B3A0;
  
-  /* 輔助色 - 成功綠 */
-  --success-green: #4CAF50;
-  --success-green-light: #81C784;
-  --success-green-dark: #388E3C;
+  /* 輔助色 - 紫色系 */
+  --secondary-purple: #8E44AD;
+  --secondary-purple-light: #A569BD;
+  --secondary-purple-dark: #6C3483;
  
-  /* 強調色 - 活力橙 */
-  --accent-orange: #FF9800;
-  --accent-orange-light: #FFB74D;
-  --accent-orange-dark: #F57C00;
+  /* 強調色 - 活力紫 */
+  --accent-violet: #9B59B6;
+  --accent-violet-light: #BB8FCE;
+  --accent-violet-dark: #7D3C98;
 }
 ```

@ -47,44 +47,51 @@
 ```css
 :root {
  /* 錯誤和警告 */
-  --error-red: #F44336;
-  --warning-yellow: #FFC107;
+  --error-red: #E74C3C;
+  --warning-yellow: #F39C12;
  
  /* 資訊提示 */
-  --info-cyan: #00BCD4;
+  --info-cyan: #3498DB;
  
-  /* 中性色調 */
-  --text-primary: #212121;
-  --text-secondary: #757575;
-  --background-primary: #FFFFFF;
-  --background-secondary: #FAFAFA;
-  --divider: #E0E0E0;
+  /* 暗色主題色調 */
+  --text-primary: #FFFFFF;
+  --text-secondary: #B8BCC8;
+  --background-primary: #2C3E50;
+  --background-secondary: #34495E;
+  --background-dark: #1A252F;
+  --divider: #4A5568;
+  --card-background: #3A4A5C;
 }
 ```

 #### 遊戲化色彩 (Gamification Colors)
 ```css
 :root {
+  /* 星級評分 */
+  --star-active: #F1C40F;
+  --star-inactive: #7F8C8D;
+  
  /* 等級和成就 */
  --bronze: #CD7F32;
  --silver: #C0C0C0;
  --gold: #FFD700;
-  --platinum: #E5E4E2;
+  --diamond: #B9F2FF;
  
-  /* 排行榜 */
-  --rank-1st: #FFD700;
-  --rank-2nd: #C0C0C0;
-  --rank-3rd: #CD7F32;
-  --rank-other: #90A4AE;
+  /* 遊戲化元素 */
+  --exp-bar: #00E5CC;
+  --level-background: #8E44AD;
+  --achievement-glow: #F39C12;
+  --rank-other: #718096;
 }
 ```

 ### 字體系統

 #### 中文字體
- [ ] **主要字體**: Noto Sans TC (Google Fonts)
- [ ] **備用字體**: PingFang TC, Microsoft JhengHei, sans-serif
- [ ] **特殊用途**: 標題可使用 Noto Serif TC 增加正式感
+- [ ] **主要字體**: PingFang TC, -apple-system-font, "Helvetica Neue"
+- [ ] **備用字體**: "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif
+- [ ] **遊戲化字體**: 粗體變體用於數字和等級顯示
+- [ ] **特殊用途**: 使用系統字體確保最佳性能和一致性

 #### 英文字體  
 - [ ] **主要字體**: Inter (現代、易讀)
@ -95,18 +102,19 @@
 ```css
 :root {
  /* 移動設備字體大小 */
-  --text-xs: 12px;    /* 提示文字 */
-  --text-sm: 14px;    /* 輔助資訊 */
+  --text-xs: 11px;    /* 標籤和提示 */
+  --text-sm: 13px;    /* 輔助資訊 */
  --text-base: 16px;  /* 正文內容 */
  --text-lg: 18px;    /* 重要文字 */
-  --text-xl: 20px;    /* 小標題 */
-  --text-2xl: 24px;   /* 標題 */
-  --text-3xl: 30px;   /* 大標題 */
+  --text-xl: 22px;    /* 卡片標題 */
+  --text-2xl: 28px;   /* 頁面標題 */
+  --text-3xl: 34px;   /* 大數字顯示 */
+  --text-4xl: 42px;   /* 統計數字 */
  
-  /* 桌面設備字體大小 */
-  --text-desktop-base: 18px;
-  --text-desktop-lg: 20px;
-  --text-desktop-xl: 22px;
+  /* 遊戲化特殊字體 */
+  --text-game-score: 24px;    /* 分數顯示 */
+  --text-game-level: 14px;    /* 等級標籤 */
+  --text-game-title: 20px;    /* 遊戲標題 */
 }
 ```

@ -124,6 +132,8 @@
  --space-8: 32px;  /* 超大間距 */
  --space-10: 40px; /* 區塊間距 */
  --space-12: 48px; /* 頁面間距 */
+  --space-16: 64px; /* 大區塊間距 */
+  --space-20: 80px; /* 頁面大間距 */
 }
 ```

@ -139,10 +149,11 @@
 #### 圓角規範
 ```css
 :root {
-  --radius-sm: 4px;   /* 小元件 */
-  --radius-md: 8px;   /* 標準元件 */
-  --radius-lg: 12px;  /* 卡片元件 */
-  --radius-xl: 16px;  /* 模態視窗 */
+  --radius-sm: 8px;   /* 小元件 */
+  --radius-md: 12px;  /* 標準元件 */
+  --radius-lg: 16px;  /* 卡片元件 */
+  --radius-xl: 24px;  /* 大型卡片 */
+  --radius-2xl: 32px; /* 遊戲化元素 */
  --radius-full: 50%; /* 圓形元素 */
 }
 ```
@ -164,21 +175,30 @@
 #### 主要按鈕 (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;
+  background: var(--primary-teal);
+  color: var(--background-dark);
+  padding: 14px 28px;
+  border-radius: var(--radius-lg);
+  font-weight: 700;
+  font-size: var(--text-lg);
+  border: 2px solid var(--primary-teal);
  cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
 }

 .btn-primary:hover {
-  background: var(--primary-blue-dark);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
+  background: var(--primary-teal-light);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(0, 229, 204, 0.3);
+}
+
+.btn-secondary {
+  background: transparent;
+  color: var(--primary-teal);
+  border: 2px solid var(--primary-teal);
+  padding: 14px 28px;
+  border-radius: var(--radius-lg);
+  font-weight: 600;
 }
 ```

@ -201,17 +221,24 @@
 ```css
 .input-field {
  width: 100%;
-  padding: 12px 16px;
+  padding: 16px 20px;
+  background: var(--background-secondary);
  border: 2px solid var(--divider);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg);
  font-size: var(--text-base);
-  transition: border-color 0.2s ease;
+  color: var(--text-primary);
+  transition: all 0.3s ease;
 }

 .input-field:focus {
  outline: none;
-  border-color: var(--primary-blue);
-  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
+  background: var(--card-background);
+  border-color: var(--primary-teal);
+  box-shadow: 0 0 0 4px rgba(0, 229, 204, 0.15);
+}
+
+.input-field::placeholder {
+  color: var(--text-secondary);
 }
 ```

@ -227,25 +254,32 @@
 #### 基礎卡片設計
 ```css
 .card {
-  background: var(--background-primary);
-  border-radius: var(--radius-lg);
-  padding: var(--space-6);
-  box-shadow: var(--shadow-sm);
+  background: var(--card-background);
+  border-radius: var(--radius-xl);
+  padding: var(--space-8);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--divider);
-  transition: all 0.2s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .card:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
+  transform: translateY(-4px);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
+}
+
+.card-game {
+  background: linear-gradient(135deg, var(--secondary-purple), var(--accent-violet));
+  border: 2px solid var(--primary-teal);
+  border-radius: var(--radius-2xl);
 }
 ```

 #### 特殊卡片變體
- [ ] **場景卡片**: 包含圖片、標題、難度標籤
- [ ] **成就卡片**: 徽章圖示、成就名稱、進度條
- [ ] **排行榜卡片**: 排名、用戶頭像、分數
- [ ] **學習記錄卡片**: 日期、學習時長、完成項目
+- [ ] **關卡卡片**: 六角形設計、關卡圖標、星級評分、進度指示
+- [ ] **角色對話卡片**: 角色頭像、對話氣泡、翻譯功能、音頻播放
+- [ ] **統計卡片**: 深色背景、彩色圖標、大數字顯示、箭頭指示器
+- [ ] **詞彙卡片**: 翻轉式設計、學習進度、收藏功能
+- [ ] **成就徽章**: 圓形設計、發光效果、等級色彩區分

 ### 導航組件

@ -256,33 +290,39 @@
  bottom: 0;
  left: 0;
  right: 0;
-  background: var(--background-primary);
+  background: var(--background-secondary);
  border-top: 1px solid var(--divider);
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  display: flex;
  justify-content: space-around;
-  padding: var(--space-2) 0;
+  padding: var(--space-4) var(--space-2);
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
 }

 .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
-  padding: var(--space-2);
+  padding: var(--space-3);
+  border-radius: var(--radius-lg);
  color: var(--text-secondary);
-  transition: color 0.2s ease;
+  transition: all 0.3s ease;
+  min-width: 48px;
 }

 .nav-item.active {
-  color: var(--primary-blue);
+  color: var(--primary-teal);
+  background: rgba(0, 229, 204, 0.1);
+  transform: translateY(-2px);
 }
 ```

 #### 導航項目設計
- [ ] **首頁**: 家圖示，學習概覽
- [ ] **練習**: 對話氣泡圖示，對話練習
- [ ] **進度**: 圖表圖示，學習進度  
- [ ] **排行榜**: 獎盃圖示，競爭排名
- [ ] **個人**: 用戶圖示，個人資料
+- [ ] **學習地圖**: 地圖圖示，關卡選擇和進度查看
+- [ ] **對話練習**: 對話氣泡圖示，情境對話訓練
+- [ ] **詞彙複習**: 卡片圖示，詞彙學習和複習
+- [ ] **排行榜**: 獎盃圖示，社交競爭和好友
+- [ ] **個人中心**: 用戶頭像，統計和設定

 ## 互動設計規範

@ -292,16 +332,32 @@
 ```css
 /* 頁面進入動畫 */
 .page-enter {
-  animation: slideInRight 0.3s ease-out forwards;
+  animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }

-@keyframes slideInRight {
+@keyframes slideInUp {
  from {
-    transform: translateX(100%);
+    transform: translateY(100%) scale(0.95);
    opacity: 0;
  }
  to {
-    transform: translateX(0);
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+/* 遊戲化彈出動畫 */
+.popup-enter {
+  animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+}
+
+@keyframes popIn {
+  0% {
+    transform: scale(0) rotate(-360deg);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
 }
@ -315,11 +371,13 @@
 - [ ] **進度動畫**: 平滑的進度條填充

 #### 遊戲化動畫
- [ ] **獲得積分**: 積分數字向上飛出效果
- [ ] **解鎖成就**: 徽章閃爍和彈出動畫
- [ ] **等級提升**: 光芒四射的升級特效
- [ ] **連擊效果**: 連續成功時的視覺強化
- [ ] **排名變化**: 排名上升或下降的動態效果
+- [ ] **星級評分**: 星星逐個點亮的序列動畫
+- [ ] **經驗值增長**: EXP條的平滑填充動畫
+- [ ] **解鎖成就**: 徽章旋轉彈出和發光效果
+- [ ] **等級提升**: 角色周圍的光芒特效和粒子動畫
+- [ ] **連擊效果**: 連續正確時的螢幕震動和色彩增強
+- [ ] **對話氣泡**: 打字機效果的文字逐字顯示
+- [ ] **關卡完成**: 六角形關卡的勝利動畫和星光效果

 ### 觸控互動

@ -417,6 +475,206 @@
 - [ ] **節日活動**: 配合當地節日調整介面元素
 - [ ] **法規遵循**: 遵循各地區的法規和標準

+## 遊戲化設計系統
+
+### 關卡設計
+
+#### 關卡地圖樣式
+```css
+.level-map {
+  background: linear-gradient(180deg, var(--background-dark) 0%, var(--background-secondary) 100%);
+  min-height: 100vh;
+  padding: var(--space-4);
+  position: relative;
+  overflow: hidden;
+}
+
+.level-node {
+  width: 120px;
+  height: 160px;
+  background: linear-gradient(135deg, var(--secondary-purple), var(--accent-violet));
+  border: 3px solid var(--primary-teal);
+  border-radius: var(--radius-2xl);
+  position: relative;
+  margin: var(--space-6) auto;
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.level-node:hover {
+  transform: translateY(-8px) scale(1.05);
+  box-shadow: 0 12px 40px rgba(0, 229, 204, 0.4);
+}
+
+.level-node.completed {
+  background: linear-gradient(135deg, var(--success-green), var(--primary-teal));
+  box-shadow: 0 0 20px rgba(0, 229, 204, 0.6);
+}
+
+.level-node.locked {
+  background: var(--divider);
+  border-color: var(--text-secondary);
+  opacity: 0.6;
+}
+```
+
+#### 星級評分系統
+```css
+.star-rating {
+  display: flex;
+  gap: var(--space-1);
+  justify-content: center;
+  margin: var(--space-2) 0;
+}
+
+.star {
+  width: 24px;
+  height: 24px;
+  fill: var(--star-inactive);
+  transition: all 0.3s ease;
+}
+
+.star.active {
+  fill: var(--star-active);
+  filter: drop-shadow(0 0 8px rgba(241, 196, 15, 0.6));
+  animation: starGlow 2s ease-in-out infinite alternate;
+}
+
+@keyframes starGlow {
+  0% {
+    filter: drop-shadow(0 0 8px rgba(241, 196, 15, 0.6));
+  }
+  100% {
+    filter: drop-shadow(0 0 16px rgba(241, 196, 15, 0.9));
+  }
+}
+```
+
+### 角色和頭像設計
+
+#### 用戶頭像樣式
+```css
+.user-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  border: 4px solid var(--primary-teal);
+  background: linear-gradient(135deg, var(--secondary-purple), var(--accent-violet));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.user-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.user-avatar::after {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: conic-gradient(var(--primary-teal), var(--accent-violet), var(--primary-teal));
+  border-radius: 50%;
+  z-index: -1;
+  animation: rotate 3s linear infinite;
+}
+
+@keyframes rotate {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+```
+
+### 對話界面設計
+
+#### 對話氣泡樣式
+```css
+.dialogue-bubble {
+  background: var(--card-background);
+  border-radius: var(--radius-xl);
+  padding: var(--space-4) var(--space-5);
+  margin: var(--space-3) 0;
+  position: relative;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+
+.dialogue-bubble.user {
+  background: linear-gradient(135deg, var(--primary-teal), var(--primary-teal-dark));
+  color: var(--background-dark);
+  margin-left: var(--space-8);
+}
+
+.dialogue-bubble.character {
+  background: var(--secondary-purple);
+  color: var(--text-primary);
+  margin-right: var(--space-8);
+}
+
+.dialogue-bubble::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 8px solid transparent;
+}
+
+.dialogue-bubble.user::before {
+  right: -16px;
+  border-left-color: var(--primary-teal);
+}
+
+.dialogue-bubble.character::before {
+  left: -16px;
+  border-right-color: var(--secondary-purple);
+}
+```
+
+### 經驗值和進度條
+
+#### EXP 進度條設計
+```css
+.exp-bar-container {
+  background: var(--background-secondary);
+  border-radius: var(--radius-full);
+  height: 12px;
+  overflow: hidden;
+  position: relative;
+  border: 1px solid var(--divider);
+}
+
+.exp-bar {
+  height: 100%;
+  background: linear-gradient(90deg, var(--primary-teal), var(--primary-teal-light));
+  border-radius: var(--radius-full);
+  position: relative;
+  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.exp-bar::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  animation: shimmer 2s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+```
+
 ## 品牌視覺規範

 ### Logo 使用規範
@ -516,6 +774,30 @@

 ---

+## 實際應用案例
+
+### 登入頁面組合
+- 暗色背景 + 青綠色主按鈕
+- 大圓角輸入框 + 垂直布局
+- 強烈的品牌 Logo 與色彩一致性
+
+### 關卡地圖頁面
+- 遊戲化六角形關卡設計
+- 立體陰影和激活動畫效果
+- 經驗值和星級進度指示
+
+### 對話練習頁面
+- 沉浸式對話氣泡設計
+- 角色頭像和身份區分
+- 即時翻譯和語音播放功能
+
+### 個人中心頁面
+- 大型用戶頭像和個人資訊顯示
+- 統計數據的卡片式呈現
+- 清晰的資訊分層和視覺強化
+
+---
+
 **最後更新**: 2024年9月5日  
-**負責人**: 待分配  
-**審查週期**: 每兩週檢討一次
+**基於實際設計**: 05_views 目錄中的71個畫面設計  
+**審查週期**: 每兩週檢討一次，與實際設計保持同步