15 KiB

Raw Blame History

UI/UX 設計規範

概述

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

設計原則

核心設計理念

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

使用者體驗原則

學習導向: 所有設計決策以提升學習效果為優先
減少阻力: 消除學習過程中不必要的操作阻力
即時回饋: 提供即時的視覺和互動回饋
個人化體驗: 基於用戶偏好和程度調整介面
無障礙設計: 確保不同能力用戶都能順利使用

視覺設計系統

色彩規範

主要色彩 (Primary Colors)

:root {
  /* 主要品牌色 - 學習藍 */
  --primary-blue: #2196F3;
  --primary-blue-light: #64B5F6; 
  --primary-blue-dark: #1976D2;
  
  /* 輔助色 - 成功綠 */
  --success-green: #4CAF50;
  --success-green-light: #81C784;
  --success-green-dark: #388E3C;
  
  /* 強調色 - 活力橙 */
  --accent-orange: #FF9800;
  --accent-orange-light: #FFB74D;
  --accent-orange-dark: #F57C00;
}

功能性色彩 (Functional Colors)

:root {
  /* 錯誤和警告 */
  --error-red: #F44336;
  --warning-yellow: #FFC107;
  
  /* 資訊提示 */
  --info-cyan: #00BCD4;
  
  /* 中性色調 */
  --text-primary: #212121;
  --text-secondary: #757575;
  --background-primary: #FFFFFF;
  --background-secondary: #FAFAFA;
  --divider: #E0E0E0;
}

遊戲化色彩 (Gamification Colors)

:root {
  /* 等級和成就 */
  --bronze: #CD7F32;
  --silver: #C0C0C0;
  --gold: #FFD700;
  --platinum: #E5E4E2;
  
  /* 排行榜 */
  --rank-1st: #FFD700;
  --rank-2nd: #C0C0C0;
  --rank-3rd: #CD7F32;
  --rank-other: #90A4AE;
}

字體系統

中文字體

主要字體: Noto Sans TC (Google Fonts)
備用字體: PingFang TC, Microsoft JhengHei, sans-serif
特殊用途: 標題可使用 Noto Serif TC 增加正式感

英文字體

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

字體大小規範

:root {
  /* 移動設備字體大小 */
  --text-xs: 12px;    /* 提示文字 */
  --text-sm: 14px;    /* 輔助資訊 */
  --text-base: 16px;  /* 正文內容 */
  --text-lg: 18px;    /* 重要文字 */
  --text-xl: 20px;    /* 小標題 */
  --text-2xl: 24px;   /* 標題 */
  --text-3xl: 30px;   /* 大標題 */
  
  /* 桌面設備字體大小 */
  --text-desktop-base: 18px;
  --text-desktop-lg: 20px;
  --text-desktop-xl: 22px;
}

間距系統

標準間距單位

: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; /* 頁面間距 */
}

佈局間距規範

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

圓角和陰影

圓角規範

:root {
  --radius-sm: 4px;   /* 小元件 */
  --radius-md: 8px;   /* 標準元件 */
  --radius-lg: 12px;  /* 卡片元件 */
  --radius-xl: 16px;  /* 模態視窗 */
  --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);
}

元件設計規範

按鈕組件

主要按鈕 (Primary Button)

.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;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: var(--primary-blue-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

按鈕狀態設計

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

按鈕尺寸變體

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

輸入框組件

文字輸入框設計

.input-field {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--divider);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: border-color 0.2s ease;
}

.input-field:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

輸入框狀態

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

卡片組件

基礎卡片設計

.card {
  background: var(--background-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--divider);
  transition: all 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

特殊卡片變體

場景卡片: 包含圖片、標題、難度標籤
成就卡片: 徽章圖示、成就名稱、進度條
排行榜卡片: 排名、用戶頭像、分數
學習記錄卡片: 日期、學習時長、完成項目

導航組件

底部導航列

.bottom-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--background-primary);
  border-top: 1px solid var(--divider);
  display: flex;
  justify-content: space-around;
  padding: var(--space-2) 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.nav-item.active {
  color: var(--primary-blue);
}

導航項目設計

首頁: 家圖示，學習概覽
練習: 對話氣泡圖示，對話練習
進度: 圖表圖示，學習進度
排行榜: 獎盃圖示，競爭排名
個人: 用戶圖示，個人資料

互動設計規範

動畫效果

頁面轉場動畫

/* 頁面進入動畫 */
.page-enter {
  animation: slideInRight 0.3s ease-out forwards;
}

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

互動回饋動畫

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

遊戲化動畫

獲得積分: 積分數字向上飛出效果
解鎖成就: 徽章閃爍和彈出動畫
等級提升: 光芒四射的升級特效
連擊效果: 連續成功時的視覺強化
排名變化: 排名上升或下降的動態效果

觸控互動

手勢支援

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

認知無障礙

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

國際化考量

多語言支援

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

本地化介面

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

品牌視覺規範

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介面設計的可能性
建立設計系統的自動化更新機制
設計品牌延伸應用的視覺規範

最後更新: 2024年9月5日
負責人: 待分配
審查週期: 每兩週檢討一次

15 KiB Raw Blame History Unescape Escape

UI/UX 設計規範

概述

設計原則

核心設計理念

使用者體驗原則

視覺設計系統

色彩規範

主要色彩 (Primary Colors)

功能性色彩 (Functional Colors)

遊戲化色彩 (Gamification Colors)

字體系統

中文字體

英文字體

字體大小規範

間距系統

標準間距單位

佈局間距規範

圓角和陰影

圓角規範

陰影系統

元件設計規範

按鈕組件

主要按鈕 (Primary Button)

按鈕狀態設計

按鈕尺寸變體

輸入框組件

文字輸入框設計

輸入框狀態

卡片組件

基礎卡片設計

特殊卡片變體

導航組件

底部導航列

導航項目設計

互動設計規範

動畫效果

頁面轉場動畫

互動回饋動畫

遊戲化動畫

觸控互動

手勢支援

觸控回饋

響應式設計

斷點設計

設備適配策略

手機版 (< 640px)

平板版 (640px-1024px)

桌面版 (> 1024px)

內容適配原則

可用性設計

無障礙設計 (Accessibility)

視覺無障礙

操作無障礙

認知無障礙

國際化考量

多語言支援

本地化介面

品牌視覺規範

Logo 使用規範

Logo 變體

Logo 使用規則

圖示系統

圖示風格

圖示分類

插圖風格

插圖設計原則

插圖應用場景

設計工具與資源

設計系統管理

原型和測試工具

效能最佳化

待完成任務

高優先級

中優先級

低優先級

15 KiB

Raw Blame History