dramaling-app/docs/02_design/todo/ui-design-tasks.md

# UI設計任務清單與規格文件

## 📋 任務概述

**專案名稱**：Drama Ling 語言學習應用程式  
**設計任務**：完成剩餘17個UI介面設計  
**當前進度**：71/88 (81%)  
**目標**：達成100%完整UI設計覆蓋

## 🎯 設計目標與原則

### 核心設計目標
- **一致性**：與已完成的71個UI保持視覺一致性
- **易用性**：符合語言學習應用的用戶習慣
- **商業導向**：支持鑽石貨幣+訂閱雙軌營收模式
- **遊戲化**：體現學習的趣味性和成就感

### 設計原則
- 遵循 `/docs/02_design/ui-ux-guidelines.md` 的設計規範
- UI命名格式：`UI_[功能名].png`
- 支持iOS和Android雙平台
- 考慮不同螢幕尺寸的響應式設計

## 📊 優先級任務分配

### 🔥 **第一優先級 - 核心商業功能 (6個)**

#### 1. UI_SubscriptionPlans - 訂閱方案選擇頁面
**功能描述**：展示簡化訂閱系統的VIP方案
**關鍵元素**：
- 7天免費體驗醒目展示
- VIP特權清單（每日3次免費限時挑戰等）
- 清楚的價格標示和優惠資訊
- 「立即體驗」和「稍後決定」按鈕

**商業邏輯**：
- 次要營收來源，配合鑽石貨幣系統
- 強調價值而非價格
- 引導用戶先體驗再決定

**參考流程**：`user-flow-specification.md` 第12節

#### 2. UI_PaymentFlow - 付費流程頁面
**功能描述**：統一的付費確認和處理界面
**關鍵元素**：
- 購買項目明細（鑽石套餐/訂閱/道具）
- 支付方式選擇（Apple Pay/Google Pay/信用卡）
- 安全性提示和隱私說明
- 付費確認按鈕和取消選項

**商業邏輯**：
- 支援鑽石購買和訂閱付費
- 降低付費摩擦，提升轉換率
- 建立用戶付費信任感

#### 3. UI_TimedDialogue - 限時對話頁面
**功能描述**：300秒限時挑戰的對話界面
**關鍵元素**：
- 醒目的倒數計時器（300秒）
- 對話進度條
- 暫停和加時道具按鈕
- 緊急退出確認機制

**商業邏輯**：
- 創造付費需求（加時、暫停道具）
- 提升學習強度和參與度
- 每日首次免費，後續收費50鑽石

**參考流程**：`user-flow-specification.md` 第11節

#### 4. UI_RankingDetail - 排行榜詳情頁面  
**功能描述**：展示詳細排名資訊和競爭數據
**關鍵元素**：
- 排名趨勢圖表
- 個人vs好友對比數據
- 挑戰其他用戶按鈕
- 成就和徽章展示區

**商業邏輯**：
- 增強社群競爭動機
- 引導更多學習參與
- 間接促進道具購買

#### 5. UI_RewardClaim - 獎勵領取頁面
**功能描述**：統一的獎勵領取和確認界面
**關鍵元素**：
- 獎勵類型圖示（鑽石/經驗值/道具）
- 獎勵數量和來源說明
- 慶祝動效設計
- 「領取」確認按鈕

**商業邏輯**：
- 增強用戶成就感
- 鼓勵持續學習行為
- 廣告觀看獎勵25-50鑽石

#### 6. UI_BonusMission_Main - 額外任務主頁面
**功能描述**：每日任務和特殊活動的集中展示
**關鍵元素**：
- 今日任務列表和進度條
- 任務獎勵預覽
- 完成狀態指示器
- 任務重置時間倒數

**商業邏輯**：
- 提升日活躍度
- 引導用戶完成更多學習內容
- 獎勵機制促進留存

### 🟡 **第二優先級 - 學習體驗增強 (6個)**

#### 7. UI_ReviewCards - 複習卡片頁面
**功能描述**：間隔複習系統的卡片展示界面
**關鍵元素**：
- 詞彙卡片設計（正面/背面）
- 熟悉度評估按鈕（忘記/困難/簡單）
- 複習進度指示器
- 批次複習控制

**學習邏輯**：
- 間隔複習演算法：下次複習時間 = 當日 + (2^複習次數)
- 支持批量複習提升效率

#### 8. UI_ReviewProgress - 複習進度頁面
**功能描述**：展示個人複習系統的整體進度
**關鍵元素**：
- 複習統計圖表
- 掌握度分析
- 待複習詞彙數量
- 複習效果趨勢

#### 9. UI_ReviewSchedule - 複習排程頁面
**功能描述**：個人化複習計劃和時間安排
**關鍵元素**：
- 每日複習計劃
- 複習提醒設定
- 自定義複習時段
- 複習目標設定

#### 10. UI_BadgeCollection - 徽章收藏頁面
**功能描述**：展示用戶獲得的學習成就徽章
**關鍵元素**：
- 徽章展示網格
- 獲得條件說明
- 未解鎖徽章預覽
- 成就進度條

#### 11. UI_PurchasedContent - 已購買內容頁面
**功能描述**：管理用戶已購買的付費內容
**關鍵元素**：
- 購買記錄列表
- 內容使用狀況
- 下載和更新狀態
- 退款申請入口

#### 12. UI_AdOffer - 廣告提供頁面
**功能描述**：邀請用戶觀看廣告獲得獎勵
**關鍵元素**：
- 獎勵預覽（25-50鑽石）
- 廣告時長說明
- 「觀看廣告」大按鈕
- 「稍後再說」選項

### 🟢 **第三優先級 - 輔助功能完善 (5個)**

#### 13. UI_AdViewing - 廣告觀看頁面
**功能描述**：廣告播放過程中的界面
**關鍵元素**：
- 廣告進度條
- 剩餘時間顯示
- 不可跳過提示
- 播放控制（如需要）

#### 14-17. **其他輔助UI**
- 錯誤處理頁面
- 載入狀態頁面  
- 網路連接異常頁面
- 維護公告頁面

## 📐 設計規格要求

### 通用規格
- **解析度**：支援1x, 2x, 3x多種解析度
- **格式**：PNG格式，透明背景（如需要）
- **色彩**：遵循品牌色彩規範
- **字體**：支援中文和英文字體規範

### 響應式設計
- **手機版**：375px - 414px 寬度
- **平板版**：768px - 1024px 寬度
- **考慮**：橫豎屏切換適配

### 無障礙設計
- **色彩對比**：符合WCAG 2.1 AA標準
- **字體大小**：最小12pt，重要資訊14pt以上
- **觸控區域**：最小44x44pt

## 🔍 參考資源

### 必讀文件
1. **設計規範**：`/docs/02_design/ui-ux-guidelines.md`
2. **用戶流程**：`/docs/04_technical/user-flow-specification.md`  
3. **系統架構**：`/docs/01_requirement/system_structure_design.json`
4. **產品需求**：`/docs/01_requirement/requirements.md`

### 現有設計參考
- **已完成UI**：`/docs/02_design/views/` (71個檔案)
- **風格一致性**：參考現有登入、學習、結果頁面設計

## 💎 關鍵商業邏輯提醒

### 鑽石貨幣系統
- **新手包**：500鑽石 = NT$30
- **價值包**：2,500鑽石 = NT$99 (最受歡迎)
- **至尊包**：12,000鑽石 = NT$390

### 道具定價
- **回覆提示**：30鑽石/次 (最常用微付費)
- **補命道具**：100鑽石/個
- **加時道具**：300鑽石/個 (限時挑戰用)

### 生命系統
- **上限**：5條命
- **自動回復**：定時回復機制
- **付費補充**：100鑽石購買補命道具

## ⏰ 交付計劃

### 第一週：高優先級設計 (6個)
- 完成核心商業功能UI設計
- 重點：訂閱、付費、限時挑戰界面

### 第二週：中優先級設計 (6個)  
- 完成學習體驗增強UI設計
- 重點：複習系統、徽章收藏界面

### 第三週：低優先級與優化 (5個)
- 完成輔助功能UI設計  
- 整體設計一致性檢查和優化

## 📝 交付標準

### 設計檔案
- **主檔案**：Sketch/Figma源檔案
- **切圖檔**：PNG格式，分1x/2x/3x解析度
- **命名規則**：UI_[功能名].png

### 說明文件
- 每個UI的設計說明和互動邏輯
- 特殊狀態和動效需求說明  
- 與開發團隊的交接文件

### 品質檢查
- [ ] 視覺一致性檢查
- [ ] 用戶流程完整性驗證
- [ ] 商業邏輯正確性確認
- [ ] 無障礙設計合規性檢查

---

## 🤝 設計團隊協作

**專案聯絡人**：[產品經理姓名]  
**設計評審週期**：每週二、四  
**檔案交付位置**：`/docs/02_design/views/`  
**意見回饋管道**：[協作工具/群組]

**預祝設計順利！** 🎨✨