2570 lines
58 KiB
Markdown
2570 lines
58 KiB
Markdown
# UI/UX 設計規範
|
||
|
||
## 概述
|
||
定義 Drama Ling 應用的完整使用者介面和使用者體驗設計標準，確保整體設計的一致性和使用性。
|
||
|
||
## 設計原則
|
||
|
||
### 核心設計理念
|
||
- [ ] **沉浸式學習**: 創造身歷其境的語言學習環境
|
||
- [ ] **簡潔直觀**: 界面設計簡潔明瞭，操作直觀易懂
|
||
- [ ] **鼓勵互動**: 透過視覺設計鼓勵用戶積極參與學習
|
||
- [ ] **成就感驅動**: 設計元素突出學習進步和成就感
|
||
- [ ] **文化包容**: 設計考量多元文化背景用戶需求
|
||
|
||
### 使用者體驗原則
|
||
- [ ] **學習導向**: 所有設計決策以提升學習效果為優先
|
||
- [ ] **減少阻力**: 消除學習過程中不必要的操作阻力
|
||
- [ ] **即時回饋**: 提供即時的視覺和互動回饋
|
||
- [ ] **個人化體驗**: 基於用戶偏好和程度調整介面
|
||
- [ ] **無障礙設計**: 確保不同能力用戶都能順利使用
|
||
- [ ] **智慧輔助** : 在適當時機提供非侵入性的學習輔助
|
||
- [ ] **漸進引導** : 從輔助學習逐步過渡到獨立表達
|
||
- [ ] **雙重任務可視化** : 清晰展示劇情任務和詞彙要求的完成狀態
|
||
- [ ] **時間壓力管理** : 300秒對話挑戰的直觀計時和警告系統
|
||
- [ ] **即時成就反饋** : 任務完成和詞彙使用的立即慶祝動畫
|
||
- [ ] **開場對話體驗** : 4-8句開場對話的漸進顯示效果
|
||
- [ ] **語音優先設計** : 以語音輸入為主、文字輸入為輔的交互設計
|
||
- [ ] **即時語法反饋** : 每句話的語法正確性即時顯示於對話功能欄
|
||
- [ ] **詞彙學習流程** : 詞彙展示→選擇題→例句重組→配對練習的漸進式學習
|
||
- [ ] **命條生命系統** : 直觀的生命值顯示和消耗反饋
|
||
- [ ] **間隔複習提醒** : 智慧提醒用戶進行詞彙複習的時機
|
||
|
||
## 視覺設計系統
|
||
|
||
### 色彩規範
|
||
|
||
#### 主要色彩 (Primary Colors)
|
||
```css
|
||
: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)
|
||
```css
|
||
:root {
|
||
/* 錯誤和警告 */
|
||
--error-red: #E74C3C;
|
||
--warning-yellow: #F39C12;
|
||
|
||
/* 成功和確認 */
|
||
--success-green: #4CAF50;
|
||
|
||
/* 資訊提示 */
|
||
--info-cyan: #3498DB;
|
||
|
||
/* 暗色主題色調 */
|
||
--text-primary: #FFFFFF;
|
||
--text-secondary: #B8BCC8;
|
||
--text-tertiary: #718096;
|
||
--background-primary: #2C3E50;
|
||
--background-secondary: #34495E;
|
||
--background-dark: #1A252F;
|
||
--background-light: #F8F9FA;
|
||
--divider: #4A5568;
|
||
--border-light: #E2E8F0;
|
||
--card-background: #3A4A5C;
|
||
}
|
||
```
|
||
|
||
#### 遊戲化色彩 (Gamification Colors)
|
||
```css
|
||
: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 (程式碼、發音標記)
|
||
|
||
#### 字體大小規範
|
||
```css
|
||
: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; /* 遊戲標題 */
|
||
}
|
||
```
|
||
|
||
### 間距系統
|
||
|
||
#### 標準間距單位
|
||
```css
|
||
: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)
|
||
|
||
### 圓角和陰影
|
||
|
||
#### 圓角規範
|
||
```css
|
||
:root {
|
||
--radius-sm: 8px; /* 小元件 */
|
||
--radius-md: 12px; /* 標準元件 */
|
||
--radius-lg: 16px; /* 卡片元件 */
|
||
--radius-xl: 24px; /* 大型卡片 */
|
||
--radius-2xl: 32px; /* 遊戲化元素 */
|
||
--radius-full: 50%; /* 圓形元素 */
|
||
}
|
||
```
|
||
|
||
#### 陰影系統
|
||
```css
|
||
: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);
|
||
}
|
||
```
|
||
|
||
## 元件設計規範
|
||
|
||
### 按鈕組件
|
||
|
||
#### 按鈕文字標注原則 *(新增重要原則)*
|
||
- [ ] **功能性按鈕**: 對於功能性操作按鈕（如播放、暫停、刪除等），如果按鈕本身功能明確且不會造成負面後果，應避免添加文字標注以減少畫面混亂
|
||
- [ ] **高風險按鈕**: 對於可能造成負面影響的按鈕（如刪除、支付、退出等），必須包含清楚的文字標注以確保用戶理解操作後果
|
||
- [ ] **圖示優先**: 當圖示本身足以表達功能且操作是可逆的或無風險的，優先使用純圖示按鈕
|
||
- [ ] **一致性考量**: 同類型功能的按鈕在整個應用中保持一致的標注策略
|
||
|
||
**範例應用**:
|
||
```css
|
||
/* ✅ 正確：音頻播放按鈕 - 純圖示，功能明確且無風險 */
|
||
.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)
|
||
```css
|
||
.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高度，標籤或圖示按鈕
|
||
|
||
#### 回覆輔助按鈕 *(新增功能)*
|
||
```css
|
||
.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;
|
||
}
|
||
```
|
||
|
||
### 輸入框組件
|
||
|
||
#### 文字輸入框設計
|
||
```css
|
||
.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);
|
||
}
|
||
|
||
/* 密碼輸入框 */
|
||
.password-input-container {
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
.password-toggle-btn {
|
||
position: absolute;
|
||
right: 16px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
padding: 4px;
|
||
}
|
||
|
||
/* 輸入框標籤 */
|
||
.input-label {
|
||
display: block;
|
||
margin-bottom: var(--space-2);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.input-label.required::after {
|
||
content: ' *';
|
||
color: var(--error-red);
|
||
}
|
||
```
|
||
|
||
#### 表單驗證組件
|
||
```css
|
||
.form-validation-message {
|
||
margin-top: var(--space-1);
|
||
font-size: var(--text-xs);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.form-validation-message.error {
|
||
color: var(--error-red);
|
||
}
|
||
|
||
.form-validation-message.success {
|
||
color: var(--success-green);
|
||
}
|
||
|
||
.form-validation-message.warning {
|
||
color: var(--warning-yellow);
|
||
}
|
||
|
||
.form-validation-message::before {
|
||
font-size: 1em;
|
||
}
|
||
|
||
.form-validation-message.error::before {
|
||
content: '⚠️';
|
||
}
|
||
|
||
.form-validation-message.success::before {
|
||
content: '✅';
|
||
}
|
||
|
||
.form-validation-message.warning::before {
|
||
content: '⚡';
|
||
}
|
||
|
||
/* 即時驗證指示器 */
|
||
.input-validation-indicator {
|
||
position: absolute;
|
||
right: 16px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.input-validation-indicator.checking {
|
||
background: var(--warning-yellow);
|
||
animation: pulse 1s infinite;
|
||
}
|
||
|
||
.input-validation-indicator.valid {
|
||
background: var(--success-green);
|
||
color: white;
|
||
}
|
||
|
||
.input-validation-indicator.invalid {
|
||
background: var(--error-red);
|
||
color: white;
|
||
}
|
||
```
|
||
|
||
#### 輸入框狀態
|
||
- [ ] **正常狀態**: 灰色邊框，清楚標示輸入區域
|
||
- [ ] **聚焦狀態**: 藍色邊框，外圍藍色光暈
|
||
- [ ] **錯誤狀態**: 紅色邊框，搭配錯誤訊息
|
||
- [ ] **成功狀態**: 綠色邊框，表示輸入正確
|
||
- [ ] **禁用狀態**: 灰色背景，無法互動
|
||
- [ ] **載入狀態**: 顯示驗證進度指示器
|
||
- [ ] **必填狀態**: 標籤顯示紅色星號標記
|
||
|
||
#### 社交登入按鈕組件 *(新增用戶認證功能)*
|
||
```css
|
||
.social-login-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-3);
|
||
margin: var(--space-6) 0;
|
||
}
|
||
|
||
.social-login-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-3);
|
||
width: 100%;
|
||
padding: 16px 24px;
|
||
border-radius: var(--radius-lg);
|
||
font-weight: 600;
|
||
font-size: var(--text-base);
|
||
border: 2px solid transparent;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.social-login-button::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||
transition: left 0.6s ease;
|
||
}
|
||
|
||
.social-login-button:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.social-login-button.google {
|
||
background: #ffffff;
|
||
color: #1f1f1f;
|
||
border-color: #dadce0;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.social-login-button.google:hover {
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.social-login-button.facebook {
|
||
background: #1877f2;
|
||
color: white;
|
||
border-color: #1877f2;
|
||
}
|
||
|
||
.social-login-button.facebook:hover {
|
||
background: #166fe5;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
|
||
}
|
||
|
||
.social-login-button.apple {
|
||
background: #000000;
|
||
color: white;
|
||
border-color: #000000;
|
||
}
|
||
|
||
.social-login-button.apple:hover {
|
||
background: #1a1a1a;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.social-login-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 分隔線設計 */
|
||
.login-divider {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: var(--space-6) 0;
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.login-divider::before,
|
||
.login-divider::after {
|
||
content: '';
|
||
flex: 1;
|
||
height: 1px;
|
||
background: var(--divider);
|
||
margin: 0 var(--space-4);
|
||
}
|
||
```
|
||
|
||
### 模態視窗和彈窗組件 *(新增核心互動元素)*
|
||
|
||
#### 基礎模態視窗設計
|
||
```css
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
backdrop-filter: blur(4px);
|
||
z-index: 2000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: var(--space-4);
|
||
animation: modalOverlayFadeIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes modalOverlayFadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.modal-content {
|
||
background: var(--card-background);
|
||
border-radius: var(--radius-2xl);
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||
max-width: 90vw;
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
position: relative;
|
||
animation: modalContentSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
}
|
||
|
||
@keyframes modalContentSlideIn {
|
||
from {
|
||
transform: scale(0.8) translateY(40px);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: scale(1) translateY(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: var(--space-6) var(--space-6) var(--space-4) var(--space-6);
|
||
border-bottom: 1px solid var(--divider);
|
||
}
|
||
|
||
.modal-title {
|
||
font-size: var(--text-xl);
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin: 0;
|
||
}
|
||
|
||
.modal-close-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: var(--background-secondary);
|
||
border: none;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.modal-close-btn:hover {
|
||
background: var(--error-red);
|
||
color: white;
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.modal-body {
|
||
padding: var(--space-6);
|
||
}
|
||
|
||
.modal-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: var(--space-3);
|
||
padding: var(--space-4) var(--space-6) var(--space-6) var(--space-6);
|
||
border-top: 1px solid var(--divider);
|
||
}
|
||
```
|
||
|
||
#### 確認對話框設計
|
||
```css
|
||
.confirmation-dialog {
|
||
text-align: center;
|
||
padding: var(--space-8);
|
||
max-width: 400px;
|
||
}
|
||
|
||
.confirmation-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
margin: 0 auto var(--space-4) auto;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.confirmation-icon.warning {
|
||
background: linear-gradient(135deg, #ff9800, #ff5722);
|
||
color: white;
|
||
}
|
||
|
||
.confirmation-icon.danger {
|
||
background: linear-gradient(135deg, #f44336, #d32f2f);
|
||
color: white;
|
||
}
|
||
|
||
.confirmation-icon.info {
|
||
background: linear-gradient(135deg, #2196f3, #1976d2);
|
||
color: white;
|
||
}
|
||
|
||
.confirmation-title {
|
||
font-size: var(--text-xl);
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
.confirmation-message {
|
||
font-size: var(--text-base);
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--space-6);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.confirmation-actions {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
justify-content: center;
|
||
}
|
||
```
|
||
|
||
#### 購買確認彈窗設計 *(基於商店功能規格)*
|
||
```css
|
||
.purchase-confirmation-modal {
|
||
max-width: 480px;
|
||
width: 100%;
|
||
}
|
||
|
||
.purchase-item-preview {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
padding: var(--space-4);
|
||
background: var(--background-secondary);
|
||
border-radius: var(--radius-lg);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.purchase-item-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: var(--radius-lg);
|
||
background: linear-gradient(135deg, var(--primary-teal), var(--primary-teal-light));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.purchase-item-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.purchase-item-name {
|
||
font-size: var(--text-lg);
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
|
||
.purchase-item-description {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.purchase-price-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: var(--space-4);
|
||
background: rgba(0, 229, 204, 0.1);
|
||
border-radius: var(--radius-lg);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.purchase-quantity-selector {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.quantity-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--primary-teal);
|
||
background: transparent;
|
||
color: var(--primary-teal);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.quantity-btn:hover {
|
||
background: var(--primary-teal);
|
||
color: white;
|
||
}
|
||
|
||
.quantity-display {
|
||
min-width: 40px;
|
||
text-align: center;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.purchase-total {
|
||
font-size: var(--text-xl);
|
||
font-weight: 700;
|
||
color: var(--primary-teal);
|
||
}
|
||
|
||
.purchase-balance-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: var(--text-sm);
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.balance-insufficient {
|
||
color: var(--error-red);
|
||
font-weight: 600;
|
||
}
|
||
```
|
||
|
||
### 卡片組件
|
||
|
||
#### 基礎卡片設計
|
||
```css
|
||
.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);
|
||
}
|
||
```
|
||
|
||
#### 特殊卡片變體
|
||
- [ ] **關卡卡片**: 六角形設計、關卡圖標、星級評分、進度指示
|
||
- [ ] **角色對話卡片**: 角色頭像、對話氣泡、翻譯功能、音頻播放
|
||
- [ ] **統計卡片**: 深色背景、彩色圖標、大數字顯示、箭頭指示器
|
||
- [ ] **詞彙卡片**: 翻轉式設計、學習進度、收藏功能
|
||
- [ ] **成就徽章**: 圓形設計、發光效果、等級色彩區分
|
||
|
||
#### 商店道具卡片設計 *(基於道具商店規格)*
|
||
```css
|
||
.shop-item-card {
|
||
background: var(--card-background);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-6);
|
||
border: 2px solid var(--divider);
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.shop-item-card:hover {
|
||
transform: translateY(-8px);
|
||
border-color: var(--primary-teal);
|
||
box-shadow: 0 12px 40px rgba(0, 229, 204, 0.3);
|
||
}
|
||
|
||
.shop-item-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, var(--primary-teal), var(--accent-violet));
|
||
transform: translateX(-100%);
|
||
transition: transform 0.4s ease;
|
||
}
|
||
|
||
.shop-item-card:hover::before {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.shop-item-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.shop-item-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: var(--radius-lg);
|
||
background: linear-gradient(135deg, var(--primary-teal), var(--primary-teal-light));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.8rem;
|
||
box-shadow: 0 4px 12px rgba(0, 229, 204, 0.3);
|
||
}
|
||
|
||
.shop-item-badge {
|
||
background: var(--accent-violet);
|
||
color: white;
|
||
padding: var(--space-1) var(--space-2);
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.shop-item-badge.hot {
|
||
background: linear-gradient(135deg, #ff6b35, #f7931e);
|
||
animation: hotBadgePulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
.shop-item-badge.new {
|
||
background: linear-gradient(135deg, #4caf50, #2e7d32);
|
||
}
|
||
|
||
.shop-item-badge.limited {
|
||
background: linear-gradient(135deg, #e91e63, #ad1457);
|
||
}
|
||
|
||
@keyframes hotBadgePulse {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.1); }
|
||
}
|
||
|
||
.shop-item-title {
|
||
font-size: var(--text-lg);
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.shop-item-description {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--space-4);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.shop-item-price-section {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.shop-item-price {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.shop-item-price-current {
|
||
font-size: var(--text-xl);
|
||
font-weight: 700;
|
||
color: var(--primary-teal);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.shop-item-price-original {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-secondary);
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.shop-item-discount {
|
||
background: var(--error-red);
|
||
color: white;
|
||
padding: var(--space-1) var(--space-2);
|
||
border-radius: var(--radius-sm);
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.diamond-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
color: var(--primary-teal);
|
||
}
|
||
|
||
.shop-item-bundle-info {
|
||
background: rgba(0, 229, 204, 0.1);
|
||
border: 1px solid rgba(0, 229, 204, 0.3);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-2) var(--space-3);
|
||
font-size: var(--text-xs);
|
||
color: var(--primary-teal);
|
||
font-weight: 600;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.shop-item-actions {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.shop-item-btn-primary {
|
||
flex: 1;
|
||
background: var(--primary-teal);
|
||
color: var(--background-dark);
|
||
border: none;
|
||
padding: var(--space-3) var(--space-4);
|
||
border-radius: var(--radius-lg);
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.shop-item-btn-primary:hover {
|
||
background: var(--primary-teal-light);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.shop-item-btn-secondary {
|
||
background: transparent;
|
||
color: var(--text-secondary);
|
||
border: 1px solid var(--divider);
|
||
padding: var(--space-2);
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.shop-item-btn-secondary:hover {
|
||
color: var(--primary-teal);
|
||
border-color: var(--primary-teal);
|
||
}
|
||
```
|
||
|
||
#### 學習進度組件設計 *(基於學習系統規格)*
|
||
```css
|
||
.progress-card {
|
||
background: var(--card-background);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-6);
|
||
border: 1px solid var(--divider);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.progress-title {
|
||
font-size: var(--text-lg);
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.progress-percentage {
|
||
font-size: var(--text-2xl);
|
||
font-weight: 900;
|
||
color: var(--primary-teal);
|
||
position: relative;
|
||
}
|
||
|
||
.progress-percentage::after {
|
||
content: '%';
|
||
font-size: 0.6em;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.progress-bar-container {
|
||
background: var(--background-secondary);
|
||
border-radius: var(--radius-full);
|
||
height: 12px;
|
||
overflow: hidden;
|
||
margin-bottom: var(--space-4);
|
||
position: relative;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, var(--primary-teal), var(--primary-teal-light));
|
||
border-radius: var(--radius-full);
|
||
position: relative;
|
||
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.progress-bar::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||
animation: progressShimmer 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes progressShimmer {
|
||
0% { transform: translateX(-100%); }
|
||
100% { transform: translateX(100%); }
|
||
}
|
||
|
||
.progress-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||
gap: var(--space-4);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.progress-stat {
|
||
text-align: center;
|
||
}
|
||
|
||
.progress-stat-value {
|
||
font-size: var(--text-xl);
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
|
||
.progress-stat-label {
|
||
font-size: var(--text-xs);
|
||
color: var(--text-secondary);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.progress-milestones {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: var(--space-4);
|
||
padding-top: var(--space-4);
|
||
border-top: 1px solid var(--divider);
|
||
}
|
||
|
||
.milestone {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
opacity: 0.5;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.milestone.achieved {
|
||
opacity: 1;
|
||
}
|
||
|
||
.milestone.current {
|
||
opacity: 1;
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.milestone-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: var(--divider);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1rem;
|
||
color: var(--text-secondary);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.milestone.achieved .milestone-icon {
|
||
background: var(--primary-teal);
|
||
color: white;
|
||
}
|
||
|
||
.milestone.current .milestone-icon {
|
||
background: var(--accent-violet);
|
||
color: white;
|
||
box-shadow: 0 0 20px rgba(155, 89, 182, 0.5);
|
||
}
|
||
|
||
.milestone-label {
|
||
font-size: var(--text-xs);
|
||
color: var(--text-secondary);
|
||
font-weight: 600;
|
||
text-align: center;
|
||
max-width: 60px;
|
||
}
|
||
```
|
||
|
||
### 導航組件
|
||
|
||
#### 底部導航列
|
||
```css
|
||
.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);
|
||
}
|
||
```
|
||
|
||
#### 導航項目設計
|
||
- [ ] **學習地圖**: 地圖圖示，關卡選擇和進度查看
|
||
- [ ] **對話練習**: 對話氣泡圖示，情境對話訓練
|
||
- [ ] **詞彙複習**: 卡片圖示，詞彙學習和複習
|
||
- [ ] **排行榜**: 獎盃圖示，社交競爭和好友
|
||
- [ ] **個人中心**: 用戶頭像，統計和設定
|
||
|
||
### 通知和反饋組件 *(新增系統反饋機制)*
|
||
|
||
#### Toast 通知設計
|
||
```css
|
||
.toast-container {
|
||
position: fixed;
|
||
top: var(--space-4);
|
||
right: var(--space-4);
|
||
z-index: 3000;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.toast {
|
||
background: var(--card-background);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||
padding: var(--space-4);
|
||
min-width: 300px;
|
||
max-width: 400px;
|
||
pointer-events: auto;
|
||
animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-left: 4px solid var(--info-cyan);
|
||
}
|
||
|
||
.toast.success {
|
||
border-left-color: var(--success-green);
|
||
}
|
||
|
||
.toast.warning {
|
||
border-left-color: var(--warning-yellow);
|
||
}
|
||
|
||
.toast.error {
|
||
border-left-color: var(--error-red);
|
||
}
|
||
|
||
@keyframes toastSlideIn {
|
||
from {
|
||
transform: translateX(100%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.toast-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.toast-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.9rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.toast.success .toast-icon {
|
||
background: var(--success-green);
|
||
color: white;
|
||
}
|
||
|
||
.toast.warning .toast-icon {
|
||
background: var(--warning-yellow);
|
||
color: var(--background-dark);
|
||
}
|
||
|
||
.toast.error .toast-icon {
|
||
background: var(--error-red);
|
||
color: white;
|
||
}
|
||
|
||
.toast.info .toast-icon {
|
||
background: var(--info-cyan);
|
||
color: white;
|
||
}
|
||
|
||
.toast-title {
|
||
font-size: var(--text-base);
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
flex: 1;
|
||
}
|
||
|
||
.toast-close {
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
padding: var(--space-1);
|
||
border-radius: var(--radius-sm);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.toast-close:hover {
|
||
background: var(--background-secondary);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.toast-message {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-secondary);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.toast-progress {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 3px;
|
||
background: var(--primary-teal);
|
||
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
||
animation: toastProgress 5s linear forwards;
|
||
}
|
||
|
||
@keyframes toastProgress {
|
||
from {
|
||
width: 100%;
|
||
}
|
||
to {
|
||
width: 0%;
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 命條顯示組件 *(基於命條系統規格)*
|
||
```css
|
||
.life-points-display {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
background: rgba(0, 0, 0, 0.6);
|
||
backdrop-filter: blur(8px);
|
||
border-radius: var(--radius-full);
|
||
padding: var(--space-2) var(--space-4);
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.life-points-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
color: var(--error-red);
|
||
animation: heartbeat 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes heartbeat {
|
||
0%, 100% {
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
|
||
.life-points-count {
|
||
display: flex;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.life-point {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
transition: all 0.3s ease;
|
||
border: 2px solid var(--error-red);
|
||
}
|
||
|
||
.life-point.active {
|
||
background: var(--error-red);
|
||
box-shadow: 0 0 8px rgba(231, 76, 60, 0.5);
|
||
}
|
||
|
||
.life-point.lost {
|
||
background: transparent;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.life-points-text {
|
||
font-size: var(--text-sm);
|
||
font-weight: 700;
|
||
color: white;
|
||
margin-left: var(--space-2);
|
||
}
|
||
|
||
/* 命條不足警告 */
|
||
.life-points-warning {
|
||
background: linear-gradient(135deg, var(--error-red), #c62828);
|
||
color: white;
|
||
padding: var(--space-3) var(--space-4);
|
||
border-radius: var(--radius-lg);
|
||
margin: var(--space-4) 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
animation: warningPulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes warningPulse {
|
||
0%, 100% {
|
||
box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
|
||
}
|
||
50% {
|
||
box-shadow: 0 0 20px 5px rgba(231, 76, 60, 0);
|
||
}
|
||
}
|
||
|
||
.life-points-warning-icon {
|
||
font-size: 1.5rem;
|
||
animation: shake 0.8s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes shake {
|
||
0%, 100% { transform: translateX(0); }
|
||
25% { transform: translateX(-5px); }
|
||
75% { transform: translateX(5px); }
|
||
}
|
||
|
||
.life-points-warning-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.life-points-warning-title {
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
|
||
.life-points-warning-message {
|
||
font-size: var(--text-sm);
|
||
opacity: 0.9;
|
||
}
|
||
```
|
||
|
||
#### 資源不足提示組件
|
||
```css
|
||
.resource-insufficient-card {
|
||
background: linear-gradient(135deg, #ff5722 0%, #d32f2f 100%);
|
||
color: white;
|
||
border-radius: var(--radius-2xl);
|
||
padding: var(--space-8);
|
||
text-align: center;
|
||
max-width: 400px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.resource-insufficient-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
||
animation: resourceWarningGlow 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes resourceWarningGlow {
|
||
0%, 100% {
|
||
opacity: 0.3;
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
opacity: 0.6;
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
|
||
.resource-insufficient-icon {
|
||
width: 80px;
|
||
height: 80px;
|
||
margin: 0 auto var(--space-4) auto;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 2.5rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.resource-insufficient-title {
|
||
font-size: var(--text-2xl);
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-3);
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.resource-insufficient-message {
|
||
font-size: var(--text-base);
|
||
margin-bottom: var(--space-6);
|
||
opacity: 0.9;
|
||
line-height: 1.6;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.resource-insufficient-stats {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-4);
|
||
margin-bottom: var(--space-6);
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.resource-stat {
|
||
text-align: center;
|
||
}
|
||
|
||
.resource-stat-label {
|
||
font-size: var(--text-xs);
|
||
opacity: 0.8;
|
||
margin-bottom: var(--space-1);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.resource-stat-value {
|
||
font-size: var(--text-xl);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.resource-solutions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-3);
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.resource-solution-btn {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
color: white;
|
||
padding: var(--space-3) var(--space-4);
|
||
border-radius: var(--radius-lg);
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.resource-solution-btn:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
border-color: rgba(255, 255, 255, 0.5);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.resource-solution-btn.primary {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
color: var(--error-red);
|
||
border-color: white;
|
||
}
|
||
|
||
.resource-solution-btn.primary:hover {
|
||
background: white;
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
||
}
|
||
```
|
||
|
||
## 互動設計規範
|
||
|
||
### 情境對話介面設計 *(新增核心功能)*
|
||
|
||
#### 雙重任務顯示系統
|
||
基於最新規格的任務狀態可視化設計：
|
||
|
||
##### 劇情任務顯示區域
|
||
```css
|
||
.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;
|
||
}
|
||
```
|
||
|
||
##### 指定詞彙顯示區域
|
||
```css
|
||
.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秒倒數計時器設計
|
||
```css
|
||
.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); }
|
||
}
|
||
```
|
||
|
||
#### 即時反饋通知系統
|
||
基於最新規格的成功通知和獎勵顯示：
|
||
|
||
##### 任務完成通知設計
|
||
```css
|
||
.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); }
|
||
}
|
||
```
|
||
|
||
##### 詞彙使用成功反饋
|
||
```css
|
||
.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);
|
||
}
|
||
```
|
||
|
||
#### 回覆輔助介面整合
|
||
基於三層輔助架構的介面設計規範：
|
||
|
||
##### 輔助功能選擇界面
|
||
```css
|
||
.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;
|
||
}
|
||
```
|
||
|
||
### 動畫效果
|
||
|
||
#### 頁面轉場動畫
|
||
```css
|
||
/* 頁面進入動畫 */
|
||
.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)**: 縮放內容 (如文字大小)
|
||
|
||
#### 觸控回饋
|
||
- [ ] **視覺回饋**: 觸控時的顏色變化或陰影
|
||
- [ ] **觸覺回饋**: 重要操作提供震動回饋
|
||
- [ ] **音效回饋**: 成功、錯誤、點擊的音效
|
||
- [ ] **狀態回饋**: 清楚顯示操作結果和狀態變化
|
||
|
||
## 響應式設計
|
||
|
||
### 斷點設計
|
||
```css
|
||
: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等
|
||
- [ ] **操作時間**: 提供充足的操作反應時間
|
||
|
||
#### 認知無障礙
|
||
- [ ] **簡潔介面**: 避免認知負擔過重的複雜介面
|
||
- [ ] **一致性**: 保持操作和佈局的一致性
|
||
- [ ] **錯誤預防**: 設計防止用戶犯錯的機制
|
||
- [ ] **幫助資訊**: 提供易懂的使用說明和幫助
|
||
- [ ] **進度提示**: 清楚顯示當前位置和進度
|
||
|
||
### 國際化考量
|
||
|
||
#### 多語言支援
|
||
- [ ] **文字長度**: 考量不同語言文字長度差異
|
||
- [ ] **文字方向**: 支援從右到左的語言 (如阿拉伯文)
|
||
- [ ] **字體支援**: 確保各語言字體正確顯示
|
||
- [ ] **文化色彩**: 考量不同文化對色彩的認知差異
|
||
- [ ] **符號理解**: 使用全球通用的圖示和符號
|
||
|
||
#### 本地化介面
|
||
- [ ] **日期格式**: 依據地區顯示適當的日期格式
|
||
- [ ] **數字格式**: 支援不同的數字和貨幣格式
|
||
- [ ] **時區處理**: 正確處理不同時區的時間顯示
|
||
- [ ] **節日活動**: 配合當地節日調整介面元素
|
||
- [ ] **法規遵循**: 遵循各地區的法規和標準
|
||
|
||
## 遊戲化設計系統
|
||
|
||
### 關卡設計
|
||
|
||
#### 關卡地圖樣式
|
||
```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);
|
||
}
|
||
```
|
||
|
||
### 回覆卡關輔助介面設計 *(新增功能)*
|
||
|
||
#### 輔助面板樣式
|
||
```css
|
||
.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);
|
||
}
|
||
```
|
||
|
||
#### 互動式回覆範例
|
||
```css
|
||
.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 進度條設計
|
||
```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 使用規範
|
||
|
||
#### Logo 變體
|
||
- [ ] **完整Logo**: 包含圖示和文字的完整版本
|
||
- [ ] **圖示版**: 僅包含圖示的簡化版本
|
||
- [ ] **文字版**: 僅包含文字的橫式版本
|
||
- [ ] **單色版**: 單色版本適用於特殊情況
|
||
- [ ] **反白版**: 深色背景使用的反白版本
|
||
|
||
#### Logo 使用規則
|
||
- [ ] **最小尺寸**: Logo最小顯示尺寸24x24px
|
||
- [ ] **安全空間**: Logo周圍保持至少等於Logo高度的空白
|
||
- [ ] **背景限制**: 避免在複雜背景上使用Logo
|
||
- [ ] **變形禁止**: 不得任意拉伸、旋轉或變形Logo
|
||
- [ ] **色彩規範**: 僅使用官方指定的Logo色彩
|
||
|
||
### 圖示系統
|
||
|
||
#### 圖示風格
|
||
- [ ] **線性風格**: 使用2px線寬的線性圖示
|
||
- [ ] **圓角設計**: 圖示轉角使用2px圓角
|
||
- [ ] **一致比例**: 所有圖示使用24x24px網格設計
|
||
- [ ] **視覺重量**: 保持圖示視覺重量的一致性
|
||
- [ ] **識別性**: 確保圖示意義清楚易懂
|
||
|
||
#### 圖示分類
|
||
- [ ] **導航圖示**: 首頁、練習、進度、排行榜、個人
|
||
- [ ] **功能圖示**: 播放、暫停、設定、搜尋、分享
|
||
- [ ] **狀態圖示**: 正確、錯誤、警告、資訊、載入
|
||
- [ ] **遊戲圖示**: 積分、成就、等級、排名、獎勵
|
||
- [ ] **學習圖示**: 詞彙、對話、複習、分析、進度
|
||
|
||
### 插圖風格
|
||
|
||
#### 插圖設計原則
|
||
- [ ] **友善風格**: 使用溫和、友善的插圖風格
|
||
- [ ] **多元包容**: 插圖人物體現多元文化和包容性
|
||
- [ ] **情境相關**: 插圖內容與學習情境密切相關
|
||
- [ ] **色彩和諧**: 插圖色彩與整體設計系統和諧統一
|
||
- [ ] **簡潔明瞭**: 避免過於複雜的插圖設計
|
||
|
||
#### 插圖應用場景
|
||
- [ ] **空狀態**: 無內容時的友善提示插圖
|
||
- [ ] **載入畫面**: 載入過程中的趣味插圖
|
||
- [ ] **成功慶祝**: 完成學習任務的慶祝插圖
|
||
- [ ] **引導教學**: 功能介紹和使用教學插圖
|
||
- [ ] **情境場景**: 對話練習場景的背景插圖
|
||
|
||
---
|
||
|
||
## 設計工具與資源
|
||
|
||
### 設計系統管理
|
||
- [ ] **設計令牌**: 使用設計令牌統一管理設計變數
|
||
- [ ] **組件庫**: 建立可重複使用的UI組件庫
|
||
- [ ] **圖示庫**: 統一管理和更新所有圖示資源
|
||
- [ ] **色彩面板**: 提供設計師和開發者共用的色彩規範
|
||
- [ ] **間距指南**: 視覺化的間距和佈局指南
|
||
|
||
### 原型和測試工具
|
||
- [ ] **原型工具**: 使用Figma或Sketch製作高保真原型
|
||
- [ ] **互動原型**: 製作可點擊的互動原型進行用戶測試
|
||
- [ ] **設計規範**: 自動生成開發者所需的設計規範
|
||
- [ ] **版本控制**: 設計檔案的版本管理和協作機制
|
||
- [ ] **回饋收集**: 設計評審和用戶回饋的收集機制
|
||
|
||
### 效能最佳化
|
||
- [ ] **圖片最佳化**: 使用WebP格式和適當壓縮比例
|
||
- [ ] **字體載入**: 最佳化字體載入策略和fallback機制
|
||
- [ ] **動畫效能**: 使用CSS transform和opacity製作高效動畫
|
||
- [ ] **懶載入**: 圖片和非關鍵內容的懶載入機制
|
||
- [ ] **快取策略**: 靜態資源的快取和更新策略
|
||
|
||
---
|
||
|
||
## 待完成任務
|
||
|
||
### 高優先級
|
||
1. [ ] 完成主要UI組件的詳細設計規範
|
||
2. [ ] 建立完整的設計系統和組件庫
|
||
3. [ ] 製作各個核心頁面的高保真原型
|
||
4. [ ] 進行用戶體驗測試和最佳化
|
||
|
||
### 中優先級
|
||
1. [ ] 設計遊戲化元素的視覺效果和動畫
|
||
2. [ ] 建立多語言介面的本地化設計規範
|
||
3. [ ] 規劃無障礙設計的實施細節
|
||
4. [ ] 設計響應式佈局的各個斷點版本
|
||
|
||
### 低優先級
|
||
1. [ ] 研究最新的UI/UX設計趨勢和最佳實踐
|
||
2. [ ] 探索VR/AR介面設計的可能性
|
||
3. [ ] 建立設計系統的自動化更新機制
|
||
4. [ ] 設計品牌延伸應用的視覺規範
|
||
|
||
---
|
||
|
||
## 實際應用案例
|
||
|
||
### 登入頁面組合
|
||
- 暗色背景 + 青綠色主按鈕
|
||
- 大圓角輸入框 + 垂直布局
|
||
- 強烈的品牌 Logo 與色彩一致性
|
||
|
||
### 關卡地圖頁面
|
||
- 遊戲化六角形關卡設計
|
||
- 立體陰影和激活動畫效果
|
||
- 經驗值和星級進度指示
|
||
|
||
### 對話練習頁面
|
||
- 沉浸式對話氣泡設計
|
||
- 角色頭像和身份區分
|
||
- 即時翻譯和語音播放功能
|
||
- **回覆卡關輔助面板** *(新增)*:
|
||
- 三層式智慧分析展示
|
||
- 漸進式引導設計
|
||
- 互動式範例選擇
|
||
- 中翻英整合輔助
|
||
|
||
### 個人中心頁面
|
||
- 大型用戶頭像和個人資訊顯示
|
||
- 統計數據的卡片式呈現
|
||
- 清晰的資訊分層和視覺強化
|
||
|
||
---
|
||
|
||
**最後更新**: 2025年9月12日
|
||
**基於實際設計**: 完整整合function-specs規格，包含用戶認證、商店系統、學習流程等95個UI視圖
|
||
**新增組件系統**:
|
||
- 用戶認證組件（登入表單、社交登入、密碼驗證）
|
||
- 商店道具組件（商品卡片、購買確認、價格顯示）
|
||
- 學習進度組件（進度條、里程碑、統計儀表板）
|
||
- 模態視窗系統（基礎模態、確認對話框、購買彈窗）
|
||
- 系統通知組件（Toast通知、命條顯示、資源警告）
|
||
- 完整表單驗證系統（即時驗證、錯誤提示、成功反饋）
|
||
|
||
**審查週期**: 每兩週檢討一次，與實際設計保持同步
|
||
**整合狀態**: ✅ 已與所有function-specs規格完整整合 |