35 KiB

Raw Blame History

UI/UX 設計規範

概述

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

設計原則

核心設計理念

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

使用者體驗原則

學習導向: 所有設計決策以提升學習效果為優先
減少阻力: 消除學習過程中不必要的操作阻力
即時回饋: 提供即時的視覺和互動回饋
個人化體驗: 基於用戶偏好和程度調整介面
無障礙設計: 確保不同能力用戶都能順利使用
智慧輔助 : 在適當時機提供非侵入性的學習輔助
漸進引導 : 從輔助學習逐步過渡到獨立表達
雙重任務可視化 : 清晰展示劇情任務和詞彙要求的完成狀態
時間壓力管理 : 300秒對話挑戰的直觀計時和警告系統
即時成就反饋 : 任務完成和詞彙使用的立即慶祝動畫
開場對話體驗 : 4-8句開場對話的漸進顯示效果
語音優先設計 : 以語音輸入為主、文字輸入為輔的交互設計
即時語法反饋 : 每句話的語法正確性即時顯示於對話功能欄
詞彙學習流程 : 詞彙展示→選擇題→例句重組→配對練習的漸進式學習
命條生命系統 : 直觀的生命值顯示和消耗反饋
間隔複習提醒 : 智慧提醒用戶進行詞彙複習的時機

視覺設計系統

色彩規範

主要色彩 (Primary Colors)

:root {
  /* 主要品牌色 - 青綠色 */
  --primary-teal: #00E5CC;
  --primary-teal-light: #33E8D1; 
  --primary-teal-dark: #00B3A0;
  
  /* 輔助色 - 紫色系 */
  --secondary-purple: #8E44AD;
  --secondary-purple-light: #A569BD;
  --secondary-purple-dark: #6C3483;
  
  /* 強調色 - 活力紫 */
  --accent-violet: #9B59B6;
  --accent-violet-light: #BB8FCE;
  --accent-violet-dark: #7D3C98;
}

功能性色彩 (Functional Colors)

:root {
  /* 錯誤和警告 */
  --error-red: #E74C3C;
  --warning-yellow: #F39C12;
  
  /* 資訊提示 */
  --info-cyan: #3498DB;
  
  /* 暗色主題色調 */
  --text-primary: #FFFFFF;
  --text-secondary: #B8BCC8;
  --background-primary: #2C3E50;
  --background-secondary: #34495E;
  --background-dark: #1A252F;
  --divider: #4A5568;
  --card-background: #3A4A5C;
}

遊戲化色彩 (Gamification Colors)

:root {
  /* 星級評分 */
  --star-active: #F1C40F;
  --star-inactive: #7F8C8D;
  
  /* 等級和成就 */
  --bronze: #CD7F32;
  --silver: #C0C0C0;
  --gold: #FFD700;
  --diamond: #B9F2FF;
  
  /* 遊戲化元素 */
  --exp-bar: #00E5CC;
  --level-background: #8E44AD;
  --achievement-glow: #F39C12;
  --rank-other: #718096;
}

字體系統

中文字體

主要字體: PingFang TC, -apple-system-font, "Helvetica Neue"
備用字體: "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif
遊戲化字體: 粗體變體用於數字和等級顯示
特殊用途: 使用系統字體確保最佳性能和一致性

英文字體

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

字體大小規範

:root {
  /* 移動設備字體大小 */
  --text-xs: 11px;    /* 標籤和提示 */
  --text-sm: 13px;    /* 輔助資訊 */
  --text-base: 16px;  /* 正文內容 */
  --text-lg: 18px;    /* 重要文字 */
  --text-xl: 22px;    /* 卡片標題 */
  --text-2xl: 28px;   /* 頁面標題 */
  --text-3xl: 34px;   /* 大數字顯示 */
  --text-4xl: 42px;   /* 統計數字 */
  
  /* 遊戲化特殊字體 */
  --text-game-score: 24px;    /* 分數顯示 */
  --text-game-level: 14px;    /* 等級標籤 */
  --text-game-title: 20px;    /* 遊戲標題 */
}

間距系統

標準間距單位

: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; /* 頁面間距 */
  --space-16: 64px; /* 大區塊間距 */
  --space-20: 80px; /* 頁面大間距 */
}

佈局間距規範

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

圓角和陰影

圓角規範

:root {
  --radius-sm: 8px;   /* 小元件 */
  --radius-md: 12px;  /* 標準元件 */
  --radius-lg: 16px;  /* 卡片元件 */
  --radius-xl: 24px;  /* 大型卡片 */
  --radius-2xl: 32px; /* 遊戲化元素 */
  --radius-full: 50%; /* 圓形元素 */
}

陰影系統

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

元件設計規範

按鈕組件

按鈕文字標注原則 (新增重要原則)

功能性按鈕: 對於功能性操作按鈕（如播放、暫停、刪除等），如果按鈕本身功能明確且不會造成負面後果，應避免添加文字標注以減少畫面混亂
高風險按鈕: 對於可能造成負面影響的按鈕（如刪除、支付、退出等），必須包含清楚的文字標注以確保用戶理解操作後果
圖示優先: 當圖示本身足以表達功能且操作是可逆的或無風險的，優先使用純圖示按鈕
一致性考量: 同類型功能的按鈕在整個應用中保持一致的標注策略

範例應用:

/* ✅ 正確：音頻播放按鈕 - 純圖示，功能明確且無風險 */
.audio-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-teal);
}

/* ❌ 錯誤：支付按鈕 - 高風險操作必須有文字 */
.payment-btn {
  /* 必須包含 "確認支付" 等明確文字 */
}

主要按鈕 (Primary Button)

.btn-primary {
  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.3s ease;
}

.btn-primary:hover {
  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;
}

按鈕狀態設計

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

按鈕尺寸變體

大型按鈕: 48px高度，主要行動按鈕
標準按鈕: 40px高度，一般操作按鈕
小型按鈕: 32px高度，次要操作按鈕
迷你按鈕: 24px高度，標籤或圖示按鈕

回覆輔助按鈕 (新增功能)

.btn-reply-help {
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-violet-dark));
  color: white;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--font-sm);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3);
}

.btn-reply-help::before {
  content: '💡';
  font-size: 1.1em;
}

.btn-reply-help:hover {
  background: linear-gradient(135deg, var(--accent-violet-light), var(--accent-violet));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4);
}

.btn-reply-help:disabled {
  background: var(--text-tertiary);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

輸入框組件

文字輸入框設計

.input-field {
  width: 100%;
  padding: 16px 20px;
  background: var(--background-secondary);
  border: 2px solid var(--divider);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.input-field:focus {
  outline: none;
  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);
}

輸入框狀態

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

卡片組件

基礎卡片設計

.card {
  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.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  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);
}

特殊卡片變體

關卡卡片: 六角形設計、關卡圖標、星級評分、進度指示
角色對話卡片: 角色頭像、對話氣泡、翻譯功能、音頻播放
統計卡片: 深色背景、彩色圖標、大數字顯示、箭頭指示器
詞彙卡片: 翻轉式設計、學習進度、收藏功能
成就徽章: 圓形設計、發光效果、等級色彩區分

導航組件

底部導航列

.bottom-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  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-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-3);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  transition: all 0.3s ease;
  min-width: 48px;
}

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

導航項目設計

學習地圖: 地圖圖示，關卡選擇和進度查看
對話練習: 對話氣泡圖示，情境對話訓練
詞彙複習: 卡片圖示，詞彙學習和複習
排行榜: 獎盃圖示，社交競爭和好友
個人中心: 用戶頭像，統計和設定

互動設計規範

情境對話介面設計 (新增核心功能)

雙重任務顯示系統

基於最新規格的任務狀態可視化設計：

劇情任務顯示區域

.plot-task-display {
  background: linear-gradient(135deg, var(--secondary-purple-light), var(--secondary-purple));
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-md);
  position: relative;
}

.plot-task-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: white;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.plot-task-title::before {
  content: '🎭';
  font-size: 1.2em;
}

.plot-task-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plot-task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: white;
  font-size: var(--text-sm);
}

.plot-task-item.completed {
  background: rgba(76, 175, 80, 0.3);
  color: white;
}

.plot-task-item.completed::after {
  content: '✅';
  font-size: 1.1em;
}

指定詞彙顯示區域

.vocabulary-display {
  background: linear-gradient(135deg, var(--accent-violet-light), var(--accent-violet));
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-md);
}

.vocabulary-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: white;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.vocabulary-title::before {
  content: '📝';
  font-size: 1.2em;
}

.vocabulary-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.vocabulary-item {
  background: rgba(255, 255, 255, 0.2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  color: white;
  font-size: var(--text-sm);
  font-weight: 600;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.vocabulary-item.used {
  background: rgba(76, 175, 80, 0.8);
  border-color: #4CAF50;
  animation: vocabularyUsed 0.6s ease;
}

@keyframes vocabularyUsed {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

300秒倒數計時器設計

.countdown-timer {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  background: linear-gradient(135deg, #FF6B6B, #FF5722);
  color: white;
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  z-index: 1000;
  min-width: 120px;
  text-align: center;
}

.countdown-time {
  font-size: var(--text-2xl);
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: var(--space-1);
}

.countdown-progress {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.countdown-progress-bar {
  height: 100%;
  background: white;
  border-radius: var(--radius-full);
  transition: width 1s linear;
}

.countdown-timer.warning {
  background: linear-gradient(135deg, #FF9800, #FF5722);
  animation: pulse 1s infinite;
}

.countdown-timer.critical {
  background: linear-gradient(135deg, #F44336, #D32F2F);
  animation: urgentPulse 0.5s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes urgentPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.1) rotate(1deg); }
  75% { transform: scale(1.1) rotate(-1deg); }
}

即時反饋通知系統

基於最新規格的成功通知和獎勵顯示：

任務完成通知設計

.achievement-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  color: white;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 40px rgba(76, 175, 80, 0.4);
  z-index: 2000;
  text-align: center;
  min-width: 280px;
  animation: achievementPop 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes achievementPop {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1) rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

.achievement-icon {
  font-size: 3rem;
  margin-bottom: var(--space-3);
  animation: celebrateIcon 0.8s ease-in-out infinite alternate;
}

.achievement-title {
  font-size: var(--text-xl);
  font-weight: 800;
  margin-bottom: var(--space-2);
}

.achievement-description {
  font-size: var(--text-base);
  opacity: 0.9;
  margin-bottom: var(--space-4);
}

.achievement-rewards {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.achievement-reward {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: rgba(255, 255, 255, 0.2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  font-weight: 600;
}

@keyframes celebrateIcon {
  0% { transform: scale(1) rotate(-5deg); }
  100% { transform: scale(1.1) rotate(5deg); }
}

詞彙使用成功反饋

.vocabulary-success-feedback {
  position: absolute;
  background: linear-gradient(135deg, #9C27B0, #673AB7);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: var(--shadow-md);
  animation: vocabularyFeedback 2s ease forwards;
  pointer-events: none;
  z-index: 1500;
}

@keyframes vocabularyFeedback {
  0% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }
  20% {
    transform: translateY(-20px) scale(1.1);
    opacity: 1;
  }
  80% {
    transform: translateY(-40px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px) scale(0.8);
    opacity: 0;
  }
}

.vocabulary-success-feedback::before {
  content: '✨';
  margin-right: var(--space-1);
}

回覆輔助介面整合

基於三層輔助架構的介面設計規範：

輔助功能選擇界面

.reply-assistance-panel {
  background: rgba(0, 0, 0, 0.9);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6);
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
  z-index: 1800;
  animation: slideUpPanel 0.4s ease;
}

@keyframes slideUpPanel {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.assistance-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.assistance-option {
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-violet-dark));
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.assistance-option:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(155, 89, 182, 0.4);
  border-color: var(--accent-violet-light);
}

.assistance-option-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.assistance-option-description {
  font-size: var(--text-sm);
  opacity: 0.9;
  margin-bottom: var(--space-3);
}

.assistance-cost {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: rgba(255, 255, 255, 0.2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  width: fit-content;
}

.free-assistance {
  background: rgba(76, 175, 80, 0.3);
  border-color: #4CAF50;
}

.free-assistance .assistance-cost {
  background: rgba(76, 175, 80, 0.8);
  color: white;
}

動畫效果

頁面轉場動畫

/* 頁面進入動畫 */
.page-enter {
  animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideInUp {
  from {
    transform: translateY(100%) scale(0.95);
    opacity: 0;
  }
  to {
    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;
  }
}

互動回饋動畫

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

遊戲化動畫

星級評分: 星星逐個點亮的序列動畫
經驗值增長: EXP條的平滑填充動畫
解鎖成就: 徽章旋轉彈出和發光效果
等級提升: 角色周圍的光芒特效和粒子動畫
連擊效果: 連續正確時的螢幕震動和色彩增強
對話氣泡: 打字機效果的文字逐字顯示
關卡完成: 六角形關卡的勝利動畫和星光效果

觸控互動

手勢支援

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

觸控回饋

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

響應式設計

斷點設計

: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等
操作時間: 提供充足的操作反應時間

認知無障礙

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

國際化考量

多語言支援

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

本地化介面

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

遊戲化設計系統

關卡設計

關卡地圖樣式

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

星級評分系統

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

角色和頭像設計

用戶頭像樣式

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

對話界面設計

對話氣泡樣式

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

回覆卡關輔助介面設計 (新增功能)

輔助面板樣式

.reply-assistance-panel {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  margin: var(--space-4) 0;
  border: 2px solid var(--primary-teal);
  box-shadow: 0 8px 32px rgba(0, 229, 204, 0.15);
  animation: slideInUp 0.4s ease-out;
}

.assistance-section {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.8);
  border-left: 4px solid var(--accent-violet);
}

.assistance-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--secondary-purple);
  margin-bottom: var(--space-3);
  font-size: var(--font-md);
}

.assistance-title::before {
  content: '💡';
  font-size: 1.2em;
  margin-right: var(--space-2);
}

.intent-analysis {
  border-left-color: var(--primary-teal);
}

.thinking-guidance {
  border-left-color: var(--accent-violet);
}

.reply-examples {
  border-left-color: var(--secondary-purple);
}

.translation-helper {
  border-left-color: var(--success-green);
}

互動式回覆範例

.reply-example {
  background: var(--background-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: var(--space-2) 0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.reply-example:hover {
  border-color: var(--primary-teal);
  background: var(--primary-teal-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 229, 204, 0.2);
}

.example-text {
  font-size: var(--font-md);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.example-level {
  display: inline-block;
  background: var(--accent-violet);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 500;
}

.example-explanation {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  font-style: italic;
}

經驗值和進度條

EXP 進度條設計

.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 使用規範

Logo 變體

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

Logo 使用規則

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

圖示系統

圖示風格

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

圖示分類

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

插圖風格

插圖設計原則

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

插圖應用場景

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

設計工具與資源

設計系統管理

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

原型和測試工具

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

效能最佳化

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

待完成任務

高優先級

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

中優先級

設計遊戲化元素的視覺效果和動畫
建立多語言介面的本地化設計規範
規劃無障礙設計的實施細節
設計響應式佈局的各個斷點版本

低優先級

研究最新的UI/UX設計趨勢和最佳實踐
探索VR/AR介面設計的可能性
建立設計系統的自動化更新機制
設計品牌延伸應用的視覺規範

實際應用案例

登入頁面組合

暗色背景 + 青綠色主按鈕
大圓角輸入框 + 垂直布局
強烈的品牌 Logo 與色彩一致性

關卡地圖頁面

遊戲化六角形關卡設計
立體陰影和激活動畫效果
經驗值和星級進度指示

對話練習頁面

沉浸式對話氣泡設計
角色頭像和身份區分
即時翻譯和語音播放功能
回覆卡關輔助面板 (新增):
- 三層式智慧分析展示
- 漸進式引導設計
- 互動式範例選擇
- 中翻英整合輔助

個人中心頁面

大型用戶頭像和個人資訊顯示
統計數據的卡片式呈現
清晰的資訊分層和視覺強化

最後更新: 2024年9月5日
基於實際設計: 05_views 目錄中的71個畫面設計
審查週期: 每兩週檢討一次，與實際設計保持同步

35 KiB Raw Blame History Unescape Escape

UI/UX 設計規範

概述

設計原則

核心設計理念

使用者體驗原則

視覺設計系統

色彩規範

主要色彩 (Primary Colors)

功能性色彩 (Functional Colors)

遊戲化色彩 (Gamification Colors)

字體系統

中文字體

英文字體

字體大小規範

間距系統

標準間距單位

佈局間距規範

圓角和陰影

圓角規範

陰影系統

元件設計規範

按鈕組件

按鈕文字標注原則 (新增重要原則)

主要按鈕 (Primary Button)

按鈕狀態設計

按鈕尺寸變體

回覆輔助按鈕 (新增功能)

輸入框組件

文字輸入框設計

輸入框狀態

卡片組件

基礎卡片設計

特殊卡片變體

導航組件

底部導航列

導航項目設計

互動設計規範

情境對話介面設計 (新增核心功能)

雙重任務顯示系統

劇情任務顯示區域

指定詞彙顯示區域

300秒倒數計時器設計

即時反饋通知系統

任務完成通知設計

詞彙使用成功反饋

回覆輔助介面整合

輔助功能選擇界面

動畫效果

頁面轉場動畫

互動回饋動畫

遊戲化動畫

觸控互動

手勢支援

觸控回饋

響應式設計

斷點設計

設備適配策略

手機版 (< 640px)

平板版 (640px-1024px)

桌面版 (> 1024px)

內容適配原則

可用性設計

無障礙設計 (Accessibility)

視覺無障礙

操作無障礙

認知無障礙

國際化考量

多語言支援

本地化介面

遊戲化設計系統

關卡設計

關卡地圖樣式

星級評分系統

角色和頭像設計

用戶頭像樣式

對話界面設計

對話氣泡樣式

回覆卡關輔助介面設計 (新增功能)

輔助面板樣式

35 KiB

Raw Blame History