7.5 KiB
7.5 KiB
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
🔍 參考資源
必讀文件
- 設計規範：
/docs/02_design/ui-ux-guidelines.md - 用戶流程：
/docs/04_technical/user-flow-specification.md - 系統架構：
/docs/01_requirement/system_structure_design.json - 產品需求：
/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/
意見回饋管道：[協作工具/群組]
預祝設計順利！ 🎨✨