diff --git a/docs/01_requirement/requirements.md b/docs/01_requirement/requirements.md index 7d3a795..d00f965 100644 --- a/docs/01_requirement/requirements.md +++ b/docs/01_requirement/requirements.md @@ -5,9 +5,10 @@ Drama Ling 是一款結合情境對話訓練、遊戲化機制和智能詞彙複 ## feature_demand -### 1. 用戶認證與引導系統 (ENT - 13個介面) +### 1. 用戶認證與引導系統 (ENT - 15個介面) **完整的用戶入門體驗** - **社群登入整合**:支援 Apple ID 和 Google 帳號快速登入 + - **7天免費試用流程**:無縫試用開啟與轉換機制 - **個人化引導流程**:新用戶完整的 7 步驟設定流程 - 學習目的選擇(FormPurpose) - 語言程度評估(FormLevel) @@ -39,41 +40,61 @@ Drama Ling 是一款結合情境對話訓練、遊戲化機制和智能詞彙複 - 訂正結果展示 - 獎勵確認和小獎勵系統 -### 3. 學習任務與活動 (TASK - 32個介面) +### 3. 學習任務與活動 (TASK - 38個介面) **沉浸式學習體驗核心** - **完整場景對話系統**(9個相關介面): - 挑戰關卡地圖導航 - 多種關卡選擇彈窗(包含鎖定狀態) - 沉浸式場景對話主介面 + - 雙重任務顯示(劇情任務+指定詞彙) - 目標詳情、角色詳情、關鍵詞詳情 - - 智能回覆指南和輸入協助 + - 回覆輔助系統(意圖分析+思維引導+範例生成+中翻英) - 即時回覆結果分析 - 成本確認和資源不足提醒 + - **300秒限時挑戰系統**(4個介面): + - 限時挑戰入場機制和門票購買 + - 300秒倒數計時器和警告系統 + - 時間相關道具使用(暫停+加時) + - 限時結算和特殊獎勵系統 - **三階段詞彙學習系統**(8個介面): - **詞彙介紹階段**:卡片介紹、選擇練習、結果回饋 - **流暢度訓練**:圖像配對、句子重組、結果評估 - **複習鞏固**:間隔複習主系統 + - **時光關卡系統**(3個介面): + - 時光卷獲得和使用機制 + - 時光關卡選擇和挑戰 + - 時光關卡結算和獎勵 - **AI對話訂正系統**(6個介面): - 語法錯誤解釋和重試 - 流暢度改進建議和練習 - 通過/重試結果處理 - **遊戲化機制**: - 額外任務系統 - - 時間門票券機制 - - 遊戲生活模擬 - 個人詳情追蹤 + - 成就系統和徽章收集 + - 命條生命系統(5命條上限+自動回復) -### 4. 商業模式功能 (BIZ - 3個介面) +### 4. 商業模式功能 (BIZ - 12個介面) **完整營收系統** - - **道具商店系統**: - - 分類齊全的道具商店(加時道具、補命道具、時光卷) - - 購買確認和價格透明化 - - **訂閱服務管理**: - - 訂閱結果確認和狀態管理 + - **鑽石購買系統**(5個介面): + - 鑽石套餐選擇頁面(新手包到至尊包) + - 購買確認彈窗和價格顯示 + - 支付流程和第三方支付整合 + - 購買成功確認和鑽石到帳 + - 交易記錄和退款處理 + - **道具商店系統**(4個介面): + - 道具分類主頁面(加時、補命、回覆提示、時間道具) + - 各類道具購買確認彈窗(遊戲化設計) + - 資源不足提醒和引導購買 + - 道具使用狀態和幫助指引 + - **簡化訂閱系統**(3個介面): + - 7天免費體驗歡迎頁面(外星人角色) + - 訂閱成功確認和特權說明 + - 訂閱狀態管理和續訂提醒 ## target_user **主要目標用戶**: -- 已具備基礎外語能力(A1-B1程度)的學習者 +- 已具備基礎外語能力(A1-B2程度)的學習者 - 希望透過情境對話提升實際溝通能力 - 偏好個人化學習體驗和詳細進度追蹤 - 喜歡社群互動和競爭機制的學習環境 @@ -103,15 +124,28 @@ Drama Ling 是一款結合情境對話訓練、遊戲化機制和智能詞彙複 ## revenue_model **主要營收來源**: -1. **遊戲道具系統**: - - 加時道具(1個/5個裝包) - - 補命道具(1個/5個裝包) - - 時光卷(挑戰重置和階段解鎖) -2. **訂閱制服務**:月費/年費完整功能和內容存取 -3. **內容付費**:特殊情境劇本包、專業領域對話包 -4. **企業客戶**:公司內訓、語言培訓機構合作 -5. **廣告收入**:免費用戶觀看廣告解鎖功能 -6. **數據服務**:匿名化學習效果分析報告 +1. **鑽石貨幣系統**(主要營收機制): + - 新手包:500鑽石 = NT$30(首次購買優惠) + - 基礎包:1,200鑽石 = NT$60 + - 價值包:2,500鑽石 = NT$99(最受歡迎) + - 豪華包:5,000鑽石 = NT$190 + - 至尊包:12,000鑽石 = NT$390 +2. **道具商店系統**: + - 加時道具:300鑽石/個,1,200鑽石/5個裝包 + - 補命道具:100鑽石/個,400鑽石/5個裝包 + - 回覆提示道具:30鑽石/個,250鑽石/10個裝包 + - 時光卷:關卡失敗獲得,可重新挑戰關卡 +3. **300秒限時挑戰系統**: + - 挑戰門票:50鑽石入場費(每日首次免費) + - 時間道具:暫停30秒(100鑽石)、加時60秒(150鑽石) +4. **簡化訂閱系統**(次要營收): + - 7天免費體驗完整功能 + - VIP特權:每日3次免費限時挑戰 +5. **簡化廣告系統**: + - 觀看廣告獲得25-50鑽石 + - 非強制性,獎勵導向 +6. **企業客戶**:公司內訓、語言培訓機構合作 +7. **數據服務**:匿名化學習效果分析報告 ## customer_relationship **客戶關係策略**: @@ -125,25 +159,36 @@ Drama Ling 是一款結合情境對話訓練、遊戲化機制和智能詞彙複 ## cost_structure **成本配置**: 1. **技術成本** (40%): - - AI語音識別與分析技術 - - 雲端服務器維護 - - 應用程式開發與更新 + - AI語音識別與對話分析技術 + - 雲端服務器維護和扩容 + - 鑽石貨幣系統和支付整合 + - 即時排行榜和競技系統 - 數據存儲與處理 + - 300秒限時挑戰系統 2. **內容製作** (25%): - - 劇本編寫與情境設計 + - 13階段學習架構劇本編寫 - 多語言配音與錄製 + - 情境對話場景設計 - 教學內容品質控制 + - 回覆輔助系統內容開發 3. **行銷推廣** (20%): - - 數位行銷投放 + - 數位行銷投放(專注付費轉換) - KOL合作與內容行銷 - - 用戶獲取成本 + - 用戶獲取成本(CAC) + - 遊戲化體驗行銷 4. **營運維護** (15%): - 人力資源 - 客戶服務 - 辦公室租賃等固定成本 + - 道具平衡性調整和維護 + +**特殊成本考量**: +- **用戶獲取成本**:重點在付費轉換而非免費用戶量 +- **道具平衡成本**:持續監控遊戲經濟平衡 +- **技術歠務**:需考量AI技術授權和第三方服務費用 ## key_partnership **關鍵合作夥伴**: @@ -213,10 +258,15 @@ Drama Ling 是一款結合情境對話訓練、遊戲化機制和智能詞彙複 - 用戶自評溝通信心度 **商業指標**: -- 付費轉換率 -- ARPU (平均用戶收入) -- CAC (用戶獲取成本) +- 首次付費轉換率(目標:新用戶30日冒15-20%) +- 鑽石購買頁次購買率(重購率) +- ARPPU (平均付費用戶收入) +- CAC (付費用戶獲取成本) - LTV (用戶生命週期價值) +- 每日活躍付費用戶數 (DAPU) +- 道具使用率和購買轉換率 +- 300秒限時挑戰參與率和重購率 +- 7天免費體驗轉換率(輔助指標) **產品指標**: - App Store評分與評論 @@ -245,10 +295,20 @@ Drama Ling 是一款結合情境對話訓練、遊戲化機制和智能詞彙複 ## user_growth **用戶成長策略**: +**付費轉換漏斗優化**: +- 無縫的鑽石首次購買體驗 +- 漸進式需求:30鑽石回覆提示→100鑽石補命→300鑽石加時 +- 第一次付費通常為最低價道具(30鑽石回覆提示) + +**7天免費體驗**: +- 體驗期可使用部分核心功能 +- 個人化學習路徑快速建立 +- 體驗結束前主動轉換提醒 + **病毒式增長**: -- 邀請好友獲得學習加速道具 +- 邀請好友獲得鑽石獎勵 - 學習成果社群分享功能 -- 挑戰好友對話比賽 +- 挑戰好友300秒限時對話比賽 **內容行銷**: - 學習技巧部落格文章 @@ -261,11 +321,11 @@ Drama Ling 是一款結合情境對話訓練、遊戲化機制和智能詞彙複 - 大學語言中心合作計畫 **產品驅動增長**: -- 免費試用期體驗優化 +- 訂閱用戶留存率優化 - 學習成效展示與分享 - 推薦系統精準度提升 **付費推廣**: -- Facebook/Google精準廣告投放 +- Facebook/Google精準廣告投放(專注付費轉換) - App Store搜尋優化(ASO) - 線下教育展會參與 \ No newline at end of file diff --git a/docs/01_requirement/system_structure_design.json b/docs/01_requirement/system_structure_design.json index 4596d61..cecb917 100644 --- a/docs/01_requirement/system_structure_design.json +++ b/docs/01_requirement/system_structure_design.json @@ -2,46 +2,28 @@ "output": { "modules": [ { - "module_name": "情境對話訓練", - "module_id": "MD_DialogueTraining", - "module_type": "CORE", - "description": "提供多場景劇本系統,包含對話引導、任務清單、詞彙練習和限時挑戰" - }, - { - "module_name": "AI互動分析", - "module_id": "MD_AIAnalysis", - "module_type": "CORE", - "description": "即時訊息分析翻譯、回覆範例、三維度評分和對話訂正功能" - }, - { - "module_name": "遊戲化系統", - "module_id": "MD_Gamification", + "module_name": "用戶認證與引導系統", + "module_id": "MD_ENT", "module_type": "ENT", - "description": "闖關系統、排行榜競爭、進度追蹤和成就系統" + "description": "包含用戶註冊、登入、個人檔案、朋友系統、等級評估測驗、引導流程、設定管理等功能" }, { - "module_name": "智能詞彙複習", - "module_id": "MD_VocabularyReview", + "module_name": "核心學習功能", + "module_id": "MD_CORE", + "module_type": "CORE", + "description": "包含情境對話訓練、AI互動分析、即時訊息分析翻譯、回覆範例、評分系統、對話訂正功能、生命系統、詞彙學習等核心學習功能" + }, + { + "module_name": "學習任務與活動", + "module_id": "MD_TASK", "module_type": "TASK", - "description": "間隔複習演算法、每日複習清單、掌握度評估" + "description": "包含智能詞彙複習、間隔複習演算法、每日複習清單、掌握度評估、時光系統、300秒限時挑戰系統、特殊任務和加分任務等" }, { - "module_name": "用戶管理", - "module_id": "MD_UserManagement", + "module_name": "商業模式功能", + "module_id": "MD_BIZ", "module_type": "BIZ", - "description": "用戶註冊、個人資料、學習偏好和進度管理" - }, - { - "module_name": "訂閱購買", - "module_id": "MD_Subscription", - "module_type": "BIZ", - "description": "訂閱制服務、內購功能、付費內容解鎖" - }, - { - "module_name": "廣告系統", - "module_id": "MD_Advertisement", - "module_type": "BIZ", - "description": "廣告展示、觀看獎勵、免費用戶廣告解鎖功能" + "description": "包含鑽石貨幣系統、道具商店、簡化訂閱系統、獎勵廣告系統、付費功能、會員特權等商業功能" } ], "features": [ @@ -49,7 +31,7 @@ "feature_name": "多場景劇本對話", "feature_id": "FT_ScenarioDialogue", "module_id": [ - "MD_DialogueTraining" + "MD_CORE" ], "scenario": "用戶選擇車禍、購物、餐廳等真實場景進行對話練習", "goal": "提升實際溝通情境下的對話能力", @@ -59,16 +41,16 @@ "UserProfile" ], "view_ids": [ - "UI_ChallengeLevel_Map", - "UI_ScenarioDialog_Scene", - "UI_ScenarioDialog_GoalDetail" + "UI_Level_Map", + "UI_Dialogue_Main", + "UI_Task_Display" ] }, { "feature_name": "任務導向對話訓練", "feature_id": "FT_TaskDialogue", "module_id": [ - "MD_DialogueTraining" + "MD_CORE" ], "scenario": "用戶完成指定任務如安撫、報警、說明等對話目標", "goal": "訓練目標導向的溝通技能", @@ -78,17 +60,17 @@ "Dialogue" ], "view_ids": [ - "UI_ChallengeLevel_ChoosePopup", - "UI_ScenarioDialog_Scene", - "UI_ScenarioDialog_ReplyResult" + "UI_Level_Selection_Modal", + "UI_Dialogue_Main", + "UI_Dialogue_Analysis" ] }, { "feature_name": "指定詞彙練習", "feature_id": "FT_VocabularyPractice", "module_id": [ - "MD_DialogueTraining", - "MD_VocabularyReview" + "MD_CORE", + "MD_TASK" ], "scenario": "用戶在對話中練習指定詞彙的使用", "goal": "強化特定詞彙的實際應用能力", @@ -97,17 +79,17 @@ "Dialogue" ], "view_ids": [ - "UI_VocabIntro_CardIntro", - "UI_VocabIntro_Choice", - "UI_VocabReview_Main" + "UI_Vocab_Introduction", + "UI_Vocab_Choice_Practice", + "UI_Vocab_Review_Main" ] }, { "feature_name": "限時對話挑戰", "feature_id": "FT_TimedChallenge", "module_id": [ - "MD_DialogueTraining", - "MD_Gamification" + "MD_CORE", + "MD_TASK" ], "scenario": "用戶在限定時間內完成對話任務", "goal": "提升反應速度和流暢度", @@ -117,16 +99,16 @@ "Leaderboard" ], "view_ids": [ - "UI_ChallengeLevel_Map", - "UI_ScenarioDialog_Scene", - "UI_LevelResult_SuccessResult" + "UI_Level_Map", + "UI_Dialogue_Main", + "UI_Result_Success_A" ] }, { "feature_name": "AI即時分析回饋", "feature_id": "FT_AIFeedback", "module_id": [ - "MD_AIAnalysis" + "MD_CORE" ], "scenario": "AI即時分析用戶對話並提供翻譯和回覆建議", "goal": "提供學習支援和改進建議", @@ -134,15 +116,15 @@ "Dialogue" ], "view_ids": [ - "UI_ScenarioDialog_ReplyResult", - "UI_DialogCorrection_SyntaxExplanation_Play" + "UI_Dialogue_Analysis", + "UI_Correction_Grammar" ] }, { "feature_name": "三維度評分系統", "feature_id": "FT_ScoreSystem", "module_id": [ - "MD_AIAnalysis" + "MD_CORE" ], "scenario": "系統評估用戶語法、語意、流暢度表現", "goal": "量化學習成效並指出改進方向", @@ -151,15 +133,15 @@ "UserProfile" ], "view_ids": [ - "UI_LevelResult_ScoreSummary", - "UI_LevelResult_DialogScoreSummary" + "UI_Result_Score_Summary_A", + "UI_Result_Dialogue_Analysis" ] }, { "feature_name": "對話訂正功能", "feature_id": "FT_DialogueCorrection", "module_id": [ - "MD_AIAnalysis" + "MD_CORE" ], "scenario": "AI提供對話內容的修正建議和更好的表達方式", "goal": "學習正確表達和優化溝通技巧", @@ -167,15 +149,15 @@ "Dialogue" ], "view_ids": [ - "UI_LevelResult_CorrectionResult", - "UI_DialogCorrection_SyntaxRetry_Play" + "UI_Result_Correction", + "UI_Correction_Grammar_Retry" ] }, { "feature_name": "排行榜競爭", "feature_id": "FT_Leaderboard", "module_id": [ - "MD_Gamification" + "MD_TASK" ], "scenario": "用戶查看學習排名和與其他用戶競爭", "goal": "激發競爭動機維持學習熱忱", @@ -184,15 +166,15 @@ "UserProfile" ], "view_ids": [ - "UI_SocialRanking_Main", - "UI_RankingDetail" + "UI_Social_Ranking", + "UI_Social_Ranking" ] }, { "feature_name": "成就系統", "feature_id": "FT_Achievement", "module_id": [ - "MD_Gamification" + "MD_TASK" ], "scenario": "用戶解鎖學習里程碑和收集成就徽章", "goal": "提供學習成就感和持續動機", @@ -210,7 +192,7 @@ "feature_name": "每日複習清單", "feature_id": "FT_DailyReview", "module_id": [ - "MD_VocabularyReview" + "MD_TASK" ], "scenario": "用戶每天完成5分鐘詞彙複習任務", "goal": "強化詞彙記憶和建立學習習慣", @@ -227,7 +209,7 @@ "feature_name": "間隔複習演算法", "feature_id": "FT_SpacedRepetition", "module_id": [ - "MD_VocabularyReview" + "MD_TASK" ], "scenario": "系統根據遺忘曲線安排最佳複習時間", "goal": "最大化長期記憶效果", @@ -241,59 +223,155 @@ ] }, { - "feature_name": "訂閱制服務", - "feature_id": "FT_Subscription", + "feature_name": "鑽石購買系統", + "feature_id": "FT_DiamondPurchase", "module_id": [ - "MD_Subscription" + "MD_BIZ" ], - "scenario": "用戶購買月費或年費解鎖進階功能", - "goal": "提供穩定營收和完整功能體驗", + "scenario": "用戶購買鑽石套餐(新手包30元到至尊包390元)", + "goal": "提供主要營收來源和遊戲內貨幣", "data_binding": [ - "Subscription", "Purchase", + "Diamond", "UserProfile" ], "view_ids": [ - "UI_SubscriptionPlans", - "UI_PaymentFlow", - "UI_Subscription_Result" + "UI_Shop_Categories", + "UI_Shop_Item_Confirm", + "UI_Subscription_Success" ] }, { - "feature_name": "內容付費解鎖", - "feature_id": "FT_ContentPurchase", + "feature_name": "道具商店系統", + "feature_id": "FT_ItemShop", "module_id": [ - "MD_Subscription" + "MD_BIZ" ], - "scenario": "用戶購買特殊情境劇本包和專業對話包", - "goal": "擴展學習內容選擇和增加營收", + "scenario": "用戶使用鑽石購買加時道具、補命道具、回覆提示道具", + "goal": "提供遊戲內消費機制和學習輔助", "data_binding": [ - "Purchase", - "Lesson" + "Item", + "Diamond", + "UserProfile" ], "view_ids": [ - "UI_ItemStore_Main", - "UI_ItemStore_ConfirmPopup", - "UI_PurchasedContent" + "UI_Shop_Categories", + "UI_Shop_Item_Confirm", + "UI_Insufficient_Resources" ] }, { - "feature_name": "廣告觀看獎勵", - "feature_id": "FT_AdReward", + "feature_name": "300秒限時挑戰系統", + "feature_id": "FT_TimedChallenge300", "module_id": [ - "MD_Advertisement" + "MD_TASK", + "MD_BIZ" ], - "scenario": "免費用戶觀看廣告獲得功能解鎖或獎勵", - "goal": "為免費用戶提供價值同時產生廣告收入", + "scenario": "用戶參與300秒限時對話挑戰,需支付50鑽石入場費(每日首次免費)", + "goal": "提供高強度練習和額外營收點", "data_binding": [ - "AdImpression", + "TimedChallenge", + "Diamond", + "TaskReward" + ], + "view_ids": [ + "UI_TimeWarp_Cards", + "UI_Cost_Confirm_Popup", + "UI_Challenge_Exit_Confirm" + ] + }, + { + "feature_name": "時光卷系統", + "feature_id": "FT_TimeWarpCard", + "module_id": [ + "MD_TASK" + ], + "scenario": "用戶關卡失敗後獲得時光卷,可重新挑戰關卡", + "goal": "提供失敗補償機制和重新挑戰機會", + "data_binding": [ + "TimeWarpCard", "TaskReward", "UserProfile" ], "view_ids": [ - "UI_AdOffer", - "UI_AdViewing", - "UI_RewardClaim" + "UI_TimeWarp_Cards", + "UI_Level_Selection_Modal", + "UI_Level_Locked_Modal" + ] + }, + { + "feature_name": "命條生命系統", + "feature_id": "FT_LifeSystem", + "module_id": [ + "MD_CORE", + "MD_BIZ" + ], + "scenario": "用戶擁有5命條上限,失敗扣除,可自動回復或購買補命道具", + "goal": "控制遊戲節奏和創造付費動機", + "data_binding": [ + "LifePoint", + "Diamond", + "UserProfile" + ], + "view_ids": [ + "UI_LifePoints_Display", + "UI_Shop_Item_Confirm", + "UI_Insufficient_Resources" + ] + }, + { + "feature_name": "回覆輔助系統", + "feature_id": "FT_ReplyAssistance", + "module_id": [ + "MD_CORE", + "MD_BIZ" + ], + "scenario": "用戶花費30鑽石獲得AI回覆建議、意圖分析和範例生成", + "goal": "提供學習支援和創造微付費機會", + "data_binding": [ + "Dialogue", + "Diamond", + "AIAssistance" + ], + "view_ids": [ + "UI_Reply_Assistance", + "UI_Cost_Confirm_Popup", + "UI_Reply_Input" + ] + }, + { + "feature_name": "簡化訂閱系統", + "feature_id": "FT_SimplifiedSubscription", + "module_id": [ + "MD_BIZ" + ], + "scenario": "用戶享受7天免費體驗後可選擇訂閱VIP特權", + "goal": "提供次要營收來源和用戶體驗優化", + "data_binding": [ + "Subscription", + "UserProfile" + ], + "view_ids": [ + "UI_Onboarding_Welcome", + "UI_Subscription_Success" + ] + }, + { + "feature_name": "獎勵廣告系統", + "feature_id": "FT_RewardAds", + "module_id": [ + "MD_BIZ" + ], + "scenario": "用戶主動觀看廣告獲得25-50鑽石,非強制性", + "goal": "為用戶提供免費鑽石來源,輔助營收", + "data_binding": [ + "AdImpression", + "Diamond", + "UserProfile" + ], + "view_ids": [ + "UI_Shop_Categories", + "UI_Result_Small_Reward" ] } ], @@ -407,7 +485,7 @@ "type": "Form", "interaction": "填寫用戶資料", "action": "提交註冊", - "navigation_view_id": "UI_GuestIntro_Main" + "navigation_view_id": "UI_Onboarding_Welcome" } ] }, @@ -444,7 +522,7 @@ ] }, { - "view_id": "UI_UserAccount_List", + "view_id": "UI_Account_List", "name": "用戶帳號列表", "type": "List", "goal": "管理多個用戶帳號", @@ -455,12 +533,12 @@ "type": "ListItem", "interaction": "選擇帳號", "action": "切換帳號", - "navigation_view_id": "UI_UserAccount_Option" + "navigation_view_id": "UI_Account_Option" } ] }, { - "view_id": "UI_UserAccount_Option", + "view_id": "UI_Account_Option", "name": "帳號選項頁面", "type": "Menu", "goal": "提供帳號管理選項", @@ -476,7 +554,7 @@ ] }, { - "view_id": "UI_GuestIntro_Main", + "view_id": "UI_Onboarding_Welcome", "name": "訪客引導主頁面", "type": "Wizard", "goal": "引導新用戶了解應用程式", @@ -494,12 +572,12 @@ "type": "Button", "interaction": "開始個人化設定", "action": "前往設定流程", - "navigation_view_id": "UI_GuestIntro_FormPurpose" + "navigation_view_id": "UI_Onboarding_Purpose" } ] }, { - "view_id": "UI_GuestIntro_FormPurpose", + "view_id": "UI_Onboarding_Purpose", "name": "學習目的設定表單", "type": "Form", "goal": "設定用戶學習目的", @@ -510,12 +588,12 @@ "type": "RadioButton", "interaction": "選擇學習目的", "action": "記錄選擇", - "navigation_view_id": "UI_GuestIntro_FormLevel" + "navigation_view_id": "UI_Onboarding_Level" } ] }, { - "view_id": "UI_GuestIntro_FormLevel", + "view_id": "UI_Onboarding_Level", "name": "語言程度設定表單", "type": "Form", "goal": "設定用戶語言程度", @@ -526,12 +604,12 @@ "type": "RadioButton", "interaction": "選擇語言程度", "action": "記錄選擇", - "navigation_view_id": "UI_GuestIntro_FormTimeSlot" + "navigation_view_id": "UI_Onboarding_TimeSlot" } ] }, { - "view_id": "UI_GuestIntro_FormTimeSlot", + "view_id": "UI_Onboarding_TimeSlot", "name": "學習時間設定表單", "type": "Form", "goal": "設定偏好學習時段", @@ -542,12 +620,12 @@ "type": "RadioButton", "interaction": "選擇時間段", "action": "記錄選擇", - "navigation_view_id": "UI_GuestIntro_FormFrequency" + "navigation_view_id": "UI_Onboarding_Frequency" } ] }, { - "view_id": "UI_GuestIntro_FormFrequency", + "view_id": "UI_Onboarding_Frequency", "name": "學習頻率設定表單", "type": "Form", "goal": "設定學習頻率偏好", @@ -558,12 +636,12 @@ "type": "RadioButton", "interaction": "選擇學習頻率", "action": "記錄選擇", - "navigation_view_id": "UI_GuestIntro_Notice" + "navigation_view_id": "UI_Onboarding_Notice" } ] }, { - "view_id": "UI_GuestIntro_Notice", + "view_id": "UI_Onboarding_Notice", "name": "引導流程提醒", "type": "State", "goal": "提供重要使用提醒", @@ -581,12 +659,12 @@ "type": "Button", "interaction": "完成設定", "action": "前往結果頁", - "navigation_view_id": "UI_GuestIntro_Result" + "navigation_view_id": "UI_Onboarding_Result" } ] }, { - "view_id": "UI_GuestIntro_Result", + "view_id": "UI_Onboarding_Result", "name": "引導流程結果", "type": "State", "goal": "顯示個人化設定結果", @@ -604,12 +682,12 @@ "type": "Button", "interaction": "開始使用應用程式", "action": "進入主應用", - "navigation_view_id": "UI_ChallengeLevel_Map" + "navigation_view_id": "UI_Level_Map" } ] }, { - "view_id": "UI_PersonalCenter_SelfMain", + "view_id": "UI_Profile_Dashboard", "name": "個人中心主頁面", "type": "Dashboard", "goal": "顯示用戶個人資訊和學習狀態", @@ -634,12 +712,12 @@ "type": "Button", "interaction": "進入設定頁面", "action": "導航到設定", - "navigation_view_id": "UI_PersonalCenter_Settings" + "navigation_view_id": "UI_Profile_Settings" } ] }, { - "view_id": "UI_SocialRanking_Main", + "view_id": "UI_Social_Ranking", "name": "社群排行榜主頁面", "type": "List", "goal": "顯示用戶學習排名", @@ -655,7 +733,7 @@ ] }, { - "view_id": "UI_LanguageLevel_Main", + "view_id": "UI_Assessment_Test", "name": "語言程度測試主頁面", "type": "Form", "goal": "進行語言程度評估", @@ -666,12 +744,12 @@ "type": "Form", "interaction": "回答測試題目", "action": "提交答案", - "navigation_view_id": "UI_LanguageLevel_Result" + "navigation_view_id": "UI_Assessment_Results" } ] }, { - "view_id": "UI_LanguageLevel_Result", + "view_id": "UI_Assessment_Results", "name": "語言程度測試結果", "type": "State", "goal": "顯示語言程度評估結果", @@ -689,12 +767,12 @@ "type": "Button", "interaction": "進入學習流程", "action": "導航到主頁", - "navigation_view_id": "UI_ChallengeLevel_Map" + "navigation_view_id": "UI_Level_Map" } ] }, { - "view_id": "UI_LevelResult_SuccessResult", + "view_id": "UI_Result_Success_A", "name": "關卡成功結果頁面", "type": "State", "goal": "顯示成功完成關卡的結果", @@ -719,12 +797,12 @@ "type": "Button", "interaction": "繼續下一關", "action": "進入下一關卡", - "navigation_view_id": "UI_ChallengeLevel_Map" + "navigation_view_id": "UI_Level_Map" } ] }, { - "view_id": "UI_LevelResult_FailResult", + "view_id": "UI_Result_Failure_A", "name": "關卡失敗結果頁面", "type": "State", "goal": "顯示挑戰失敗結果", @@ -747,7 +825,7 @@ ] }, { - "view_id": "UI_ChallengeLevel_Map", + "view_id": "UI_Level_Map", "name": "挑戰關卡地圖", "type": "Dashboard", "goal": "顯示學習進度和可用關卡", @@ -758,7 +836,7 @@ "type": "Button", "interaction": "點擊進入關卡", "action": "開始關卡挑戰", - "navigation_view_id": "UI_ChallengeLevel_ChoosePopup" + "navigation_view_id": "UI_Level_Selection_Modal" }, { "name": "進度指示器", @@ -770,7 +848,7 @@ ] }, { - "view_id": "UI_ChallengeLevel_ChoosePopup", + "view_id": "UI_Level_Selection_Modal", "name": "挑戰關卡選擇彈窗", "type": "Modal", "goal": "讓用戶選擇關卡難度或模式", @@ -781,19 +859,19 @@ "type": "RadioButton", "interaction": "選擇難度等級", "action": "設定挑戰參數", - "navigation_view_id": "UI_ScenarioDialog_Scene" + "navigation_view_id": "UI_Dialogue_Main" }, { "name": "開始按鈕", "type": "Button", "interaction": "確認開始挑戰", "action": "進入場景對話", - "navigation_view_id": "UI_ScenarioDialog_Scene" + "navigation_view_id": "UI_Dialogue_Main" } ] }, { - "view_id": "UI_ScenarioDialog_Scene", + "view_id": "UI_Dialogue_Main", "name": "場景對話主介面", "type": "Detail", "goal": "提供沉浸式情境對話練習", @@ -811,7 +889,7 @@ "type": "InputField", "interaction": "輸入對話內容", "action": "發送對話", - "navigation_view_id": "UI_ScenarioDialog_ReplyResult" + "navigation_view_id": "UI_Dialogue_Analysis" }, { "name": "語音輸入按鈕", @@ -825,12 +903,12 @@ "type": "Button", "interaction": "獲得對話提示", "action": "顯示回覆指南", - "navigation_view_id": "UI_ScenarioDialog_ReplyGuide" + "navigation_view_id": "UI_Reply_Assistance" } ] }, { - "view_id": "UI_ScenarioDialog_ReplyGuide", + "view_id": "UI_Reply_Assistance", "name": "對話回覆指南", "type": "Modal", "goal": "提供對話回覆建議和範例", @@ -853,7 +931,7 @@ ] }, { - "view_id": "UI_ScenarioDialog_ReplyResult", + "view_id": "UI_Dialogue_Analysis", "name": "對話回覆結果", "type": "State", "goal": "顯示對話回覆的評估結果", @@ -878,12 +956,12 @@ "type": "Button", "interaction": "繼續場景對話", "action": "回到對話界面", - "navigation_view_id": "UI_ScenarioDialog_Scene" + "navigation_view_id": "UI_Dialogue_Main" } ] }, { - "view_id": "UI_VocabIntro_CardIntro", + "view_id": "UI_Vocab_Introduction", "name": "詞彙介紹卡片", "type": "Detail", "goal": "介紹新詞彙的含義和用法", @@ -901,12 +979,12 @@ "type": "Button", "interaction": "繼續學習", "action": "進入下一詞彙", - "navigation_view_id": "UI_VocabIntro_Choice" + "navigation_view_id": "UI_Vocab_Choice_Practice" } ] }, { - "view_id": "UI_VocabIntro_Choice", + "view_id": "UI_Vocab_Choice_Practice", "name": "詞彙選擇練習", "type": "Form", "goal": "測試詞彙理解度", @@ -917,7 +995,7 @@ "type": "RadioButton", "interaction": "選擇正確選項", "action": "提交答案", - "navigation_view_id": "UI_VocabIntro_ChoiceResult" + "navigation_view_id": "UI_Vocab_Choice_Results" } ] }, @@ -945,7 +1023,7 @@ ] }, { - "view_id": "UI_ItemStore_Main", + "view_id": "UI_Shop_Categories", "name": "道具商店主頁面", "type": "List", "goal": "展示可購買的遊戲道具", @@ -963,7 +1041,7 @@ "type": "Card", "interaction": "查看道具詳情", "action": "選擇購買道具", - "navigation_view_id": "UI_ItemStore_ConfirmPopup" + "navigation_view_id": "UI_Shop_Item_Confirm" }, { "name": "貨幣顯示", @@ -1037,7 +1115,7 @@ "type": "Button", "interaction": "返回主界面", "action": "導航到主頁", - "navigation_view_id": "UI_ChallengeLevel_Map" + "navigation_view_id": "UI_Level_Map" } ] }, @@ -1060,7 +1138,7 @@ "type": "Button", "interaction": "確認退出關卡", "action": "退出關卡", - "navigation_view_id": "UI_ChallengeLevel_Map" + "navigation_view_id": "UI_Level_Map" }, { "name": "繼續關卡按鈕", @@ -1258,7 +1336,7 @@ "type": "Button", "interaction": "繼續下一關", "action": "進入下一關卡", - "navigation_view_id": "UI_ChallengeLevel_Map" + "navigation_view_id": "UI_Level_Map" } ] }, @@ -1274,14 +1352,14 @@ "type": "ListItem", "interaction": "查看好友詳情", "action": "開啟好友資料", - "navigation_view_id": "UI_PersonalCenter_OtherUserMain" + "navigation_view_id": "UI_Social_Profile" }, { "name": "搜尋好友按鈕", "type": "Button", "interaction": "搜尋新好友", "action": "開啟好友搜尋", - "navigation_view_id": "UI_PersonalCenter_FriendSearch" + "navigation_view_id": "UI_Social_Search" } ] }, @@ -1297,7 +1375,7 @@ "type": "Button", "interaction": "查看好友列表", "action": "進入好友列表", - "navigation_view_id": "UI_PersonalCenter_FriendList" + "navigation_view_id": "UI_Social_Friends" }, { "name": "好友邀請", @@ -1594,7 +1672,7 @@ "type": "Button", "interaction": "開始對話任務", "action": "進入對話界面", - "navigation_view_id": "UI_ScenarioDialog_Scene" + "navigation_view_id": "UI_Dialogue_Main" } ] }, @@ -1617,7 +1695,7 @@ "type": "Button", "interaction": "前往購買資源", "action": "開啟商店", - "navigation_view_id": "UI_ItemStore_Main" + "navigation_view_id": "UI_Shop_Categories" } ] }, @@ -1656,7 +1734,7 @@ "type": "InputField", "interaction": "輸入回覆內容", "action": "發送回覆", - "navigation_view_id": "UI_ScenarioDialog_ReplyResult" + "navigation_view_id": "UI_Dialogue_Analysis" }, { "name": "語音輸入", @@ -1748,7 +1826,7 @@ "type": "Image", "interaction": "選擇對應圖像", "action": "配對選擇", - "navigation_view_id": "UI_VocabFluency_MatchImageResult" + "navigation_view_id": "UI_Vocab_Fluency_Results" }, { "name": "詞彙選項", @@ -1771,7 +1849,7 @@ "type": "Card", "interaction": "拖拽重組句子", "action": "排列順序", - "navigation_view_id": "UI_VocabFluency_SentenceResult" + "navigation_view_id": "UI_Vocab_Sentence_Results" } ] }, @@ -1861,7 +1939,7 @@ "type": "Button", "interaction": "重新練習", "action": "開始重試", - "navigation_view_id": "UI_DialogCorrection_FluencyRetry_Play" + "navigation_view_id": "UI_Correction_Fluency_Practice" } ] }, @@ -1900,7 +1978,7 @@ "type": "InputField", "interaction": "輸入改進回覆", "action": "提交回覆", - "navigation_view_id": "UI_DialogCorrection_FluencyPass_Result" + "navigation_view_id": "UI_Correction_Retry_Result" }, { "name": "語音輸入", @@ -1937,7 +2015,7 @@ "type": "Button", "interaction": "重新練習", "action": "開始重試", - "navigation_view_id": "UI_DialogCorrection_SyntaxRetry_Play" + "navigation_view_id": "UI_Correction_Grammar_Retry" } ] }, @@ -1976,7 +2054,7 @@ "type": "InputField", "interaction": "輸入改正回覆", "action": "提交回覆", - "navigation_view_id": "UI_DialogCorrection_SyntaxPass_Result" + "navigation_view_id": "UI_Correction_Pass_Result" }, { "name": "語法提示", @@ -1999,14 +2077,14 @@ "type": "RadioButton", "interaction": "選擇難度等級", "action": "設定挑戰參數", - "navigation_view_id": "UI_ScenarioDialog_Scene" + "navigation_view_id": "UI_Dialogue_Main" }, { "name": "開始按鈕", "type": "Button", "interaction": "確認開始挑戰", "action": "進入場景對話", - "navigation_view_id": "UI_ScenarioDialog_Scene" + "navigation_view_id": "UI_Dialogue_Main" } ] }, @@ -2022,14 +2100,14 @@ "type": "RadioButton", "interaction": "選擇難度等級", "action": "設定挑戰參數", - "navigation_view_id": "UI_ScenarioDialog_Scene" + "navigation_view_id": "UI_Dialogue_Main" }, { "name": "開始按鈕", "type": "Button", "interaction": "確認開始挑戰", "action": "進入場景對話", - "navigation_view_id": "UI_ScenarioDialog_Scene" + "navigation_view_id": "UI_Dialogue_Main" } ] }, @@ -2213,6 +2291,355 @@ "navigation_view_id": null } ] + }, + { + "view_id": "UI_Profile_Settings", + "name": "個人設定頁面", + "type": "Settings", + "goal": "管理個人偏好和帳號設定", + "interaction": "調整各項設定", + "components": [ + { + "name": "設定選項", + "type": "SettingItem", + "interaction": "修改設定值", + "action": "儲存設定", + "navigation_view_id": null + } + ] + }, + { + "view_id": "UI_Social_Friends", + "name": "好友列表頁面", + "type": "List", + "goal": "管理和查看好友", + "interaction": "瀏覽好友列表", + "components": [ + { + "name": "好友項目", + "type": "ListItem", + "interaction": "查看好友資料", + "action": "訪問好友頁面", + "navigation_view_id": "UI_Social_Profile" + } + ] + }, + { + "view_id": "UI_Social_Search", + "name": "好友搜尋頁面", + "type": "Search", + "goal": "搜尋並添加新好友", + "interaction": "輸入搜尋條件", + "components": [ + { + "name": "搜尋框", + "type": "SearchField", + "interaction": "輸入用戶名稱", + "action": "執行搜尋", + "navigation_view_id": null + } + ] + }, + { + "view_id": "UI_Social_Profile", + "name": "好友資料頁面", + "type": "Profile", + "goal": "查看其他用戶的學習資料", + "interaction": "瀏覽好友學習成果", + "components": [ + { + "name": "用戶資訊", + "type": "UserInfo", + "interaction": "查看用戶詳情", + "action": "無互動", + "navigation_view_id": null + } + ] + }, + { + "view_id": "UI_Vocab_Choice_Results", + "name": "詞彙選擇結果頁面", + "type": "Result", + "goal": "顯示詞彙練習結果", + "interaction": "查看答題結果", + "components": [ + { + "name": "結果統計", + "type": "ResultSummary", + "interaction": "查看得分詳情", + "action": "繼續下一題", + "navigation_view_id": null + } + ] + }, + { + "view_id": "UI_Vocab_Fluency_Results", + "name": "詞彙流暢度結果頁面", + "type": "Result", + "goal": "顯示流暢度練習結果", + "interaction": "查看練習表現", + "components": [ + { + "name": "流暢度分析", + "type": "Analysis", + "interaction": "查看改進建議", + "action": "重新練習", + "navigation_view_id": null + } + ] + }, + { + "view_id": "UI_Vocab_Sentence_Results", + "name": "句子重組結果頁面", + "type": "Result", + "goal": "顯示句子重組練習結果", + "interaction": "查看重組表現", + "components": [ + { + "name": "句子分析", + "type": "SentenceAnalysis", + "interaction": "查看語法說明", + "action": "下一個練習", + "navigation_view_id": null + } + ] + }, + { + "view_id": "UI_Correction_Grammar_Retry", + "name": "語法訂正重試頁面", + "type": "Practice", + "goal": "重新練習語法訂正", + "interaction": "根據建議重新作答", + "components": [ + { + "name": "訂正提示", + "type": "Hint", + "interaction": "查看語法提示", + "action": "重新輸入", + "navigation_view_id": null + } + ] + }, + { + "view_id": "UI_Correction_Pass_Result", + "name": "訂正通過結果頁面", + "type": "Success", + "goal": "顯示訂正成功結果", + "interaction": "查看成功訊息", + "components": [ + { + "name": "成功指示", + "type": "SuccessMessage", + "interaction": "確認結果", + "action": "繼續學習", + "navigation_view_id": null + } + ] + }, + { + "view_id": "UI_Correction_Retry_Result", + "name": "訂正重試結果頁面", + "type": "Result", + "goal": "顯示重試後的訂正結果", + "interaction": "查看改進狀況", + "components": [ + { + "name": "改進報告", + "type": "ImprovementReport", + "interaction": "查看進步分析", + "action": "完成訂正", + "navigation_view_id": null + } + ] + }, + { + "view_id": "UI_Correction_Fluency_Practice", + "name": "流暢度訂正練習頁面", + "type": "Practice", + "goal": "練習提升表達流暢度", + "interaction": "重新組織語言表達", + "components": [ + { + "name": "流暢度指導", + "type": "FluentGuide", + "interaction": "查看流暢度建議", + "action": "重新表達", + "navigation_view_id": null + } + ] + }, + { + "view_id": "UI_ScenarioDialog_ReplyGuide", + "name": "對話回覆指南", + "type": "Modal", + "goal": "提供對話回覆建議和範例", + "interaction": "查看回覆建議", + "components": [ + { + "name": "建議內容", + "type": "Text", + "interaction": "顯示回覆建議", + "action": "無互動", + "navigation_view_id": null + }, + { + "name": "範例對話", + "type": "Text", + "interaction": "顯示範例回應", + "action": "無互動", + "navigation_view_id": null + } + ] + }, + { + "view_id": "UI_ScenarioDialog_ReplyResult", + "name": "對話回覆結果", + "type": "State", + "goal": "顯示對話回覆的評估結果", + "interaction": "查看回覆評分和建議", + "components": [ + { + "name": "評分顯示", + "type": "Chart", + "interaction": "顯示三維度評分", + "action": "無互動", + "navigation_view_id": null + }, + { + "name": "改進建議", + "type": "Text", + "interaction": "顯示改進建議", + "action": "無互動", + "navigation_view_id": null + }, + { + "name": "繼續對話按鈕", + "type": "Button", + "interaction": "繼續場景對話", + "action": "回到對話界面", + "navigation_view_id": "UI_Dialogue_Main" + } + ] + }, + { + "view_id": "UI_LanguageLevel_LevelUp", + "name": "語言程度晉階頁面", + "type": "State", + "goal": "顯示語言程度提升結果", + "interaction": "查看新程度和解鎖內容", + "components": [ + { + "name": "晉階動畫", + "type": "Animation", + "interaction": "顯示程度提升", + "action": "無互動", + "navigation_view_id": null + }, + { + "name": "新解鎖內容", + "type": "Text", + "interaction": "顯示解鎖的關卡", + "action": "無互動", + "navigation_view_id": null + }, + { + "name": "繼續按鈕", + "type": "Button", + "interaction": "返回學習地圖", + "action": "進入主地圖", + "navigation_view_id": "UI_Level_Map" + } + ] + }, + { + "view_id": "UI_Mission_RewardResult", + "name": "任務獎勵結果頁面", + "type": "State", + "goal": "顯示任務完成獎勵", + "interaction": "查看獎勵內容", + "components": [ + { + "name": "獎勵動畫", + "type": "Animation", + "interaction": "顯示獲得獎勵", + "action": "無互動", + "navigation_view_id": null + }, + { + "name": "經驗值顯示", + "type": "Text", + "interaction": "顯示經驗值獲得", + "action": "無互動", + "navigation_view_id": null + }, + { + "name": "確認按鈕", + "type": "Button", + "interaction": "確認領取獎勵", + "action": "返回主界面", + "navigation_view_id": "UI_Level_Map" + } + ] + }, + { + "view_id": "UI_TimeWarpChallenge_Main", + "name": "時光挑戰主頁面", + "type": "Detail", + "goal": "進行300秒限時挑戰", + "interaction": "快速對話和詞彙挑戰", + "components": [ + { + "name": "倒計時器", + "type": "Timer", + "interaction": "顯示剩餘時間", + "action": "無互動", + "navigation_view_id": null + }, + { + "name": "挑戰內容", + "type": "Form", + "interaction": "完成挑戰任務", + "action": "提交答案", + "navigation_view_id": null + }, + { + "name": "暫停按鈕", + "type": "Button", + "interaction": "暫停挑戰", + "action": "暫停計時", + "navigation_view_id": "UI_Cost_Confirm_Popup" + } + ] + }, + { + "view_id": "UI_Result_Success_B", + "name": "關卡成功結果頁面變體B", + "type": "State", + "goal": "顯示部分成功結果", + "interaction": "查看成功結果和獎勵", + "components": [ + { + "name": "成功訊息", + "type": "Text", + "interaction": "顯示成功提示", + "action": "無互動", + "navigation_view_id": null + }, + { + "name": "獎勵顯示", + "type": "Text", + "interaction": "顯示獲得獎勵", + "action": "無互動", + "navigation_view_id": null + }, + { + "name": "繼續按鈕", + "type": "Button", + "interaction": "繼續下一關", + "action": "進入下一關卡", + "navigation_view_id": "UI_Level_Map" + } + ] } ], "data_sources": [ diff --git a/docs/02_design/todo/ui-design-tasks.md b/docs/02_design/todo/ui-design-tasks.md new file mode 100644 index 0000000..c9bb674 --- /dev/null +++ b/docs/02_design/todo/ui-design-tasks.md @@ -0,0 +1,268 @@ +# 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/` +**意見回饋管道**:[協作工具/群組] + +**預祝設計順利!** 🎨✨ \ No newline at end of file diff --git a/docs/02_design/views/UI_Account_List.png b/docs/02_design/views/UI_Account_List.png new file mode 100644 index 0000000..ee0f523 Binary files /dev/null and b/docs/02_design/views/UI_Account_List.png differ diff --git a/docs/02_design/views/UI_Account_Option.png b/docs/02_design/views/UI_Account_Option.png new file mode 100644 index 0000000..fe5d902 Binary files /dev/null and b/docs/02_design/views/UI_Account_Option.png differ diff --git a/docs/02_design/views/UI_Assessment_Results.png b/docs/02_design/views/UI_Assessment_Results.png new file mode 100644 index 0000000..3ec0d29 Binary files /dev/null and b/docs/02_design/views/UI_Assessment_Results.png differ diff --git a/docs/02_design/views/UI_Assessment_Test.png b/docs/02_design/views/UI_Assessment_Test.png new file mode 100644 index 0000000..4d61066 Binary files /dev/null and b/docs/02_design/views/UI_Assessment_Test.png differ diff --git a/docs/02_design/views/UI_Challenge_Exit_Confirm.png b/docs/02_design/views/UI_Challenge_Exit_Confirm.png new file mode 100644 index 0000000..9579e18 Binary files /dev/null and b/docs/02_design/views/UI_Challenge_Exit_Confirm.png differ diff --git a/docs/02_design/views/UI_Character_Details.png b/docs/02_design/views/UI_Character_Details.png new file mode 100644 index 0000000..cf5f2b2 Binary files /dev/null and b/docs/02_design/views/UI_Character_Details.png differ diff --git a/docs/02_design/views/UI_Correction_Fluency.png b/docs/02_design/views/UI_Correction_Fluency.png new file mode 100644 index 0000000..ce46e3f Binary files /dev/null and b/docs/02_design/views/UI_Correction_Fluency.png differ diff --git a/docs/02_design/views/UI_Correction_Fluency_Practice.png b/docs/02_design/views/UI_Correction_Fluency_Practice.png new file mode 100644 index 0000000..3e99675 Binary files /dev/null and b/docs/02_design/views/UI_Correction_Fluency_Practice.png differ diff --git a/docs/02_design/views/UI_Correction_Grammar.png b/docs/02_design/views/UI_Correction_Grammar.png new file mode 100644 index 0000000..c1b3ed4 Binary files /dev/null and b/docs/02_design/views/UI_Correction_Grammar.png differ diff --git a/docs/02_design/views/UI_Correction_Grammar_Retry.png b/docs/02_design/views/UI_Correction_Grammar_Retry.png new file mode 100644 index 0000000..4815021 Binary files /dev/null and b/docs/02_design/views/UI_Correction_Grammar_Retry.png differ diff --git a/docs/02_design/views/UI_Correction_Pass_Result.png b/docs/02_design/views/UI_Correction_Pass_Result.png new file mode 100644 index 0000000..976cc49 Binary files /dev/null and b/docs/02_design/views/UI_Correction_Pass_Result.png differ diff --git a/docs/02_design/views/UI_Correction_Retry_Result.png b/docs/02_design/views/UI_Correction_Retry_Result.png new file mode 100644 index 0000000..ad6c431 Binary files /dev/null and b/docs/02_design/views/UI_Correction_Retry_Result.png differ diff --git a/docs/02_design/views/UI_Cost_Confirm_Popup.png b/docs/02_design/views/UI_Cost_Confirm_Popup.png new file mode 100644 index 0000000..e71c627 Binary files /dev/null and b/docs/02_design/views/UI_Cost_Confirm_Popup.png differ diff --git a/docs/02_design/views/UI_Dialogue_Analysis.png b/docs/02_design/views/UI_Dialogue_Analysis.png new file mode 100644 index 0000000..a7a7183 Binary files /dev/null and b/docs/02_design/views/UI_Dialogue_Analysis.png differ diff --git a/docs/02_design/views/UI_Dialogue_Main.png b/docs/02_design/views/UI_Dialogue_Main.png new file mode 100644 index 0000000..141576f Binary files /dev/null and b/docs/02_design/views/UI_Dialogue_Main.png differ diff --git a/docs/02_design/views/UI_Insufficient_Resources.png b/docs/02_design/views/UI_Insufficient_Resources.png new file mode 100644 index 0000000..57f00b1 Binary files /dev/null and b/docs/02_design/views/UI_Insufficient_Resources.png differ diff --git a/docs/02_design/views/UI_Keywords_Details.png b/docs/02_design/views/UI_Keywords_Details.png new file mode 100644 index 0000000..94e52e5 Binary files /dev/null and b/docs/02_design/views/UI_Keywords_Details.png differ diff --git a/docs/02_design/views/UI_Level_Locked_Modal.png b/docs/02_design/views/UI_Level_Locked_Modal.png new file mode 100644 index 0000000..bd6d8e1 Binary files /dev/null and b/docs/02_design/views/UI_Level_Locked_Modal.png differ diff --git a/docs/02_design/views/UI_Level_Map.png b/docs/02_design/views/UI_Level_Map.png new file mode 100644 index 0000000..d5050fe Binary files /dev/null and b/docs/02_design/views/UI_Level_Map.png differ diff --git a/docs/02_design/views/UI_Level_Selection_Modal.png b/docs/02_design/views/UI_Level_Selection_Modal.png new file mode 100644 index 0000000..4ee312e Binary files /dev/null and b/docs/02_design/views/UI_Level_Selection_Modal.png differ diff --git a/docs/02_design/views/UI_Level_Selection_Modal_A.png b/docs/02_design/views/UI_Level_Selection_Modal_A.png new file mode 100644 index 0000000..5570672 Binary files /dev/null and b/docs/02_design/views/UI_Level_Selection_Modal_A.png differ diff --git a/docs/02_design/views/UI_Level_Selection_Modal_B.png b/docs/02_design/views/UI_Level_Selection_Modal_B.png new file mode 100644 index 0000000..442570f Binary files /dev/null and b/docs/02_design/views/UI_Level_Selection_Modal_B.png differ diff --git a/docs/02_design/views/UI_LifePoints_Display.png b/docs/02_design/views/UI_LifePoints_Display.png new file mode 100644 index 0000000..6dd4e28 Binary files /dev/null and b/docs/02_design/views/UI_LifePoints_Display.png differ diff --git a/docs/02_design/views/UI_Login_Main.png b/docs/02_design/views/UI_Login_Main.png new file mode 100644 index 0000000..335cdca Binary files /dev/null and b/docs/02_design/views/UI_Login_Main.png differ diff --git a/docs/02_design/views/UI_Onboarding_Frequency.png b/docs/02_design/views/UI_Onboarding_Frequency.png new file mode 100644 index 0000000..e58df20 Binary files /dev/null and b/docs/02_design/views/UI_Onboarding_Frequency.png differ diff --git a/docs/02_design/views/UI_Onboarding_Level.png b/docs/02_design/views/UI_Onboarding_Level.png new file mode 100644 index 0000000..7b1d7e5 Binary files /dev/null and b/docs/02_design/views/UI_Onboarding_Level.png differ diff --git a/docs/02_design/views/UI_Onboarding_Notice.png b/docs/02_design/views/UI_Onboarding_Notice.png new file mode 100644 index 0000000..af6b3d8 Binary files /dev/null and b/docs/02_design/views/UI_Onboarding_Notice.png differ diff --git a/docs/02_design/views/UI_Onboarding_Purpose.png b/docs/02_design/views/UI_Onboarding_Purpose.png new file mode 100644 index 0000000..bdbf892 Binary files /dev/null and b/docs/02_design/views/UI_Onboarding_Purpose.png differ diff --git a/docs/02_design/views/UI_Onboarding_Result.png b/docs/02_design/views/UI_Onboarding_Result.png new file mode 100644 index 0000000..b9da16f Binary files /dev/null and b/docs/02_design/views/UI_Onboarding_Result.png differ diff --git a/docs/02_design/views/UI_Onboarding_TimeSlot.png b/docs/02_design/views/UI_Onboarding_TimeSlot.png new file mode 100644 index 0000000..dfc24c9 Binary files /dev/null and b/docs/02_design/views/UI_Onboarding_TimeSlot.png differ diff --git a/docs/02_design/views/UI_Onboarding_Welcome.png b/docs/02_design/views/UI_Onboarding_Welcome.png new file mode 100644 index 0000000..69b733c Binary files /dev/null and b/docs/02_design/views/UI_Onboarding_Welcome.png differ diff --git a/docs/02_design/views/UI_PasswordReset_Form.png b/docs/02_design/views/UI_PasswordReset_Form.png new file mode 100644 index 0000000..afe7ceb Binary files /dev/null and b/docs/02_design/views/UI_PasswordReset_Form.png differ diff --git a/docs/02_design/views/UI_PasswordReset_Popup.png b/docs/02_design/views/UI_PasswordReset_Popup.png new file mode 100644 index 0000000..1ee7197 Binary files /dev/null and b/docs/02_design/views/UI_PasswordReset_Popup.png differ diff --git a/docs/02_design/views/UI_Profile_Dashboard.png b/docs/02_design/views/UI_Profile_Dashboard.png new file mode 100644 index 0000000..cb5387b Binary files /dev/null and b/docs/02_design/views/UI_Profile_Dashboard.png differ diff --git a/docs/02_design/views/UI_Profile_Details.png b/docs/02_design/views/UI_Profile_Details.png new file mode 100644 index 0000000..b4e04ce Binary files /dev/null and b/docs/02_design/views/UI_Profile_Details.png differ diff --git a/docs/02_design/views/UI_Profile_Locked.png b/docs/02_design/views/UI_Profile_Locked.png new file mode 100644 index 0000000..2f34ae0 Binary files /dev/null and b/docs/02_design/views/UI_Profile_Locked.png differ diff --git a/docs/02_design/views/UI_Profile_Settings.png b/docs/02_design/views/UI_Profile_Settings.png new file mode 100644 index 0000000..589263b Binary files /dev/null and b/docs/02_design/views/UI_Profile_Settings.png differ diff --git a/docs/02_design/views/UI_Reply_Assistance.png b/docs/02_design/views/UI_Reply_Assistance.png new file mode 100644 index 0000000..565fa5d Binary files /dev/null and b/docs/02_design/views/UI_Reply_Assistance.png differ diff --git a/docs/02_design/views/UI_Reply_Input.png b/docs/02_design/views/UI_Reply_Input.png new file mode 100644 index 0000000..9afd7f7 Binary files /dev/null and b/docs/02_design/views/UI_Reply_Input.png differ diff --git a/docs/02_design/views/UI_Result_Correction.png b/docs/02_design/views/UI_Result_Correction.png new file mode 100644 index 0000000..26b5777 Binary files /dev/null and b/docs/02_design/views/UI_Result_Correction.png differ diff --git a/docs/02_design/views/UI_Result_Dialogue_Analysis.png b/docs/02_design/views/UI_Result_Dialogue_Analysis.png new file mode 100644 index 0000000..836c2b1 Binary files /dev/null and b/docs/02_design/views/UI_Result_Dialogue_Analysis.png differ diff --git a/docs/02_design/views/UI_Result_Failure_A.png b/docs/02_design/views/UI_Result_Failure_A.png new file mode 100644 index 0000000..c03cd8b Binary files /dev/null and b/docs/02_design/views/UI_Result_Failure_A.png differ diff --git a/docs/02_design/views/UI_Result_Failure_B.png b/docs/02_design/views/UI_Result_Failure_B.png new file mode 100644 index 0000000..317bdcb Binary files /dev/null and b/docs/02_design/views/UI_Result_Failure_B.png differ diff --git a/docs/02_design/views/UI_Result_Reward_Confirm.png b/docs/02_design/views/UI_Result_Reward_Confirm.png new file mode 100644 index 0000000..a1797cc Binary files /dev/null and b/docs/02_design/views/UI_Result_Reward_Confirm.png differ diff --git a/docs/02_design/views/UI_Result_Score_Summary_A.png b/docs/02_design/views/UI_Result_Score_Summary_A.png new file mode 100644 index 0000000..ada4d86 Binary files /dev/null and b/docs/02_design/views/UI_Result_Score_Summary_A.png differ diff --git a/docs/02_design/views/UI_Result_Score_Summary_B.png b/docs/02_design/views/UI_Result_Score_Summary_B.png new file mode 100644 index 0000000..33c14ea Binary files /dev/null and b/docs/02_design/views/UI_Result_Score_Summary_B.png differ diff --git a/docs/02_design/views/UI_Result_Small_Reward.png b/docs/02_design/views/UI_Result_Small_Reward.png new file mode 100644 index 0000000..5e309d3 Binary files /dev/null and b/docs/02_design/views/UI_Result_Small_Reward.png differ diff --git a/docs/02_design/views/UI_Result_Success_A.png b/docs/02_design/views/UI_Result_Success_A.png new file mode 100644 index 0000000..922e331 Binary files /dev/null and b/docs/02_design/views/UI_Result_Success_A.png differ diff --git a/docs/02_design/views/UI_Result_Success_B.png b/docs/02_design/views/UI_Result_Success_B.png new file mode 100644 index 0000000..a6f4431 Binary files /dev/null and b/docs/02_design/views/UI_Result_Success_B.png differ diff --git a/docs/02_design/views/UI_Shop_Categories.png b/docs/02_design/views/UI_Shop_Categories.png new file mode 100644 index 0000000..666cce5 Binary files /dev/null and b/docs/02_design/views/UI_Shop_Categories.png differ diff --git a/docs/02_design/views/UI_Shop_Item_Confirm.png b/docs/02_design/views/UI_Shop_Item_Confirm.png new file mode 100644 index 0000000..1f4fd91 Binary files /dev/null and b/docs/02_design/views/UI_Shop_Item_Confirm.png differ diff --git a/docs/02_design/views/UI_SignUp_Main.png b/docs/02_design/views/UI_SignUp_Main.png new file mode 100644 index 0000000..b96411f Binary files /dev/null and b/docs/02_design/views/UI_SignUp_Main.png differ diff --git a/docs/02_design/views/UI_Social_Friends.png b/docs/02_design/views/UI_Social_Friends.png new file mode 100644 index 0000000..0e70ee4 Binary files /dev/null and b/docs/02_design/views/UI_Social_Friends.png differ diff --git a/docs/02_design/views/UI_Social_GuestPrompt.png b/docs/02_design/views/UI_Social_GuestPrompt.png new file mode 100644 index 0000000..bfd7672 Binary files /dev/null and b/docs/02_design/views/UI_Social_GuestPrompt.png differ diff --git a/docs/02_design/views/UI_Social_Main.png b/docs/02_design/views/UI_Social_Main.png new file mode 100644 index 0000000..a10500b Binary files /dev/null and b/docs/02_design/views/UI_Social_Main.png differ diff --git a/docs/02_design/views/UI_Social_Profile.png b/docs/02_design/views/UI_Social_Profile.png new file mode 100644 index 0000000..a3fd8f1 Binary files /dev/null and b/docs/02_design/views/UI_Social_Profile.png differ diff --git a/docs/02_design/views/UI_Social_Ranking.png b/docs/02_design/views/UI_Social_Ranking.png new file mode 100644 index 0000000..7ea8557 Binary files /dev/null and b/docs/02_design/views/UI_Social_Ranking.png differ diff --git a/docs/02_design/views/UI_Social_Ranking_Guest.png b/docs/02_design/views/UI_Social_Ranking_Guest.png new file mode 100644 index 0000000..ab57c75 Binary files /dev/null and b/docs/02_design/views/UI_Social_Ranking_Guest.png differ diff --git a/docs/02_design/views/UI_Social_Search.png b/docs/02_design/views/UI_Social_Search.png new file mode 100644 index 0000000..cc5f1df Binary files /dev/null and b/docs/02_design/views/UI_Social_Search.png differ diff --git a/docs/02_design/views/UI_Subscription_Success.png b/docs/02_design/views/UI_Subscription_Success.png new file mode 100644 index 0000000..dd31bee Binary files /dev/null and b/docs/02_design/views/UI_Subscription_Success.png differ diff --git a/docs/02_design/views/UI_Task_Display.png b/docs/02_design/views/UI_Task_Display.png new file mode 100644 index 0000000..dd12409 Binary files /dev/null and b/docs/02_design/views/UI_Task_Display.png differ diff --git a/docs/02_design/views/UI_Tasks_Extra.png b/docs/02_design/views/UI_Tasks_Extra.png new file mode 100644 index 0000000..e2b9de1 Binary files /dev/null and b/docs/02_design/views/UI_Tasks_Extra.png differ diff --git a/docs/02_design/views/UI_TimeWarp_Cards.png b/docs/02_design/views/UI_TimeWarp_Cards.png new file mode 100644 index 0000000..8e77de4 Binary files /dev/null and b/docs/02_design/views/UI_TimeWarp_Cards.png differ diff --git a/docs/02_design/views/UI_Vocab_Choice_Practice.png b/docs/02_design/views/UI_Vocab_Choice_Practice.png new file mode 100644 index 0000000..9eb8e6e Binary files /dev/null and b/docs/02_design/views/UI_Vocab_Choice_Practice.png differ diff --git a/docs/02_design/views/UI_Vocab_Choice_Results.png b/docs/02_design/views/UI_Vocab_Choice_Results.png new file mode 100644 index 0000000..2ba1185 Binary files /dev/null and b/docs/02_design/views/UI_Vocab_Choice_Results.png differ diff --git a/docs/02_design/views/UI_Vocab_Fluency_Matching.png b/docs/02_design/views/UI_Vocab_Fluency_Matching.png new file mode 100644 index 0000000..38ae6b0 Binary files /dev/null and b/docs/02_design/views/UI_Vocab_Fluency_Matching.png differ diff --git a/docs/02_design/views/UI_Vocab_Fluency_Reorganize.png b/docs/02_design/views/UI_Vocab_Fluency_Reorganize.png new file mode 100644 index 0000000..1d78124 Binary files /dev/null and b/docs/02_design/views/UI_Vocab_Fluency_Reorganize.png differ diff --git a/docs/02_design/views/UI_Vocab_Fluency_Results.png b/docs/02_design/views/UI_Vocab_Fluency_Results.png new file mode 100644 index 0000000..bef66d2 Binary files /dev/null and b/docs/02_design/views/UI_Vocab_Fluency_Results.png differ diff --git a/docs/02_design/views/UI_Vocab_Introduction.png b/docs/02_design/views/UI_Vocab_Introduction.png new file mode 100644 index 0000000..15f1202 Binary files /dev/null and b/docs/02_design/views/UI_Vocab_Introduction.png differ diff --git a/docs/02_design/views/UI_Vocab_Review_Main.png b/docs/02_design/views/UI_Vocab_Review_Main.png new file mode 100644 index 0000000..d47419f Binary files /dev/null and b/docs/02_design/views/UI_Vocab_Review_Main.png differ diff --git a/docs/02_design/views/UI_Vocab_Sentence_Results.png b/docs/02_design/views/UI_Vocab_Sentence_Results.png new file mode 100644 index 0000000..89c426e Binary files /dev/null and b/docs/02_design/views/UI_Vocab_Sentence_Results.png differ diff --git a/docs/04_technical/low-budget-deployment.md b/docs/04_technical/low-budget-deployment.md new file mode 100644 index 0000000..114b7ff --- /dev/null +++ b/docs/04_technical/low-budget-deployment.md @@ -0,0 +1,558 @@ +# 低預算部署指南 + +## 概述 +為Drama Ling應用設計的超低預算部署方案,滿足開發階段NT$2,000/月、生產階段NT$5,000/月的預算限制。 + +## 部署策略總覽 + +### 成本控制原則 +- **開發階段**: 完全本地化開發,最小化雲端服務使用 +- **生產階段**: VPS單機部署,優化AI服務用量 +- **擴展準備**: 架構設計考慮未來遷移至雲端服務的可能性 + +## 開發階段部署 (NT$ 2,000/月預算) + +### 本地開發環境設置 + +#### Docker Compose配置 +```yaml +# docker-compose.dev.yml +version: '3.8' + +services: + # 後端API服務 + api: + build: + context: ./backend + dockerfile: Dockerfile.dev + ports: + - "3001:3001" + environment: + - NODE_ENV=development + - DATABASE_URL=postgresql://dev:dev123@postgres:5432/dramaling_dev + - REDIS_URL=redis://redis:6379 + - OPENAI_API_KEY=${OPENAI_API_KEY} + volumes: + - ./backend:/app + - /app/node_modules + depends_on: + - postgres + - redis + + # PostgreSQL資料庫 + postgres: + image: postgres:15-alpine + environment: + POSTGRES_DB: dramaling_dev + POSTGRES_USER: dev + POSTGRES_PASSWORD: dev123 + ports: + - "5432:5432" + volumes: + - postgres_data:/var/lib/postgresql/data + - ./database/init:/docker-entrypoint-initdb.d + + # Redis快取 + redis: + image: redis:7-alpine + ports: + - "6379:6379" + command: redis-server --appendonly yes + volumes: + - redis_data:/data + + # 前端開發服務器 + web: + build: + context: ./frontend + dockerfile: Dockerfile.dev + ports: + - "3000:3000" + volumes: + - ./frontend:/app + - /app/node_modules + environment: + - REACT_APP_API_URL=http://localhost:3001 + +volumes: + postgres_data: + redis_data: +``` + +#### 開發成本明細 +```yaml +development_costs: + infrastructure: + local_docker: "免費" + domain_testing: "免費 (ngrok或localhost)" + + services: + openai_api: "NT$ 300-600/月" + # 基於低用量GPT-4o-mini,約1000-2000次API呼叫 + database: "免費 (本地PostgreSQL)" + storage: "免費 (本地檔案系統)" + + tools: + monitoring: "免費 (Docker logs)" + version_control: "免費 (GitHub)" + + total: "NT$ 300-600/月" + remaining_budget: "NT$ 1,400-1,700/月" +``` + +### 開發工作流程 + +#### 1. 環境啟動 +```bash +# 啟動開發環境 +docker-compose -f docker-compose.dev.yml up -d + +# 檢查服務狀態 +docker-compose -f docker-compose.dev.yml ps + +# 查看日誌 +docker-compose -f docker-compose.dev.yml logs -f api +``` + +#### 2. 資料庫遷移 +```bash +# 執行資料庫遷移 +docker-compose -f docker-compose.dev.yml exec api npm run migrate + +# 填充測試資料 +docker-compose -f docker-compose.dev.yml exec api npm run seed +``` + +#### 3. AI服務成本控制 +```javascript +// AI服務配置 +const aiConfig = { + provider: 'openai', + model: 'gpt-4o-mini', // 比GPT-4便宜10倍 + maxTokens: 500, // 限制回應長度 + cache: { + enabled: true, + ttl: 3600, // 1小時快取 + hitRateTarget: 0.9 // 目標90%命中率 + }, + rateLimiting: { + requestsPerMinute: 10, + tokensPerMinute: 5000 + } +} +``` + +## 生產階段部署 (NT$ 5,000/月預算) + +### VPS服務商選擇 + +#### 推薦VPS配置 +```yaml +recommended_vps: + provider_options: + - name: "DigitalOcean" + specs: "4GB RAM, 2 vCPU, 80GB SSD" + monthly_cost: "NT$ 320 ($10 USD)" + location: "Singapore" + + - name: "Vultr" + specs: "4GB RAM, 2 vCPU, 80GB SSD" + monthly_cost: "NT$ 384 ($12 USD)" + location: "Tokyo" + + - name: "Linode" + specs: "4GB RAM, 2 vCPU, 80GB SSD" + monthly_cost: "NT$ 320 ($10 USD)" + location: "Tokyo" + + selection_criteria: + - 亞洲機房降低延遲 + - 穩定的網路連線 + - 良好的技術支援 + - 彈性的計費方式 +``` + +### 生產環境配置 + +#### Docker Compose生產配置 +```yaml +# docker-compose.prod.yml +version: '3.8' + +services: + # Nginx反向代理 + nginx: + image: nginx:alpine + ports: + - "80:80" + - "443:443" + volumes: + - ./nginx/nginx.conf:/etc/nginx/nginx.conf + - ./nginx/ssl:/etc/nginx/ssl + - ./frontend/build:/usr/share/nginx/html + depends_on: + - api + restart: unless-stopped + + # 後端API服務 + api: + build: + context: ./backend + dockerfile: Dockerfile.prod + environment: + - NODE_ENV=production + - DATABASE_URL=${DATABASE_URL} + - REDIS_URL=${REDIS_URL} + - OPENAI_API_KEY=${OPENAI_API_KEY} + - JWT_SECRET=${JWT_SECRET} + depends_on: + - postgres + - redis + restart: unless-stopped + + # PostgreSQL資料庫 + postgres: + image: postgres:15-alpine + environment: + POSTGRES_DB: ${POSTGRES_DB} + POSTGRES_USER: ${POSTGRES_USER} + POSTGRES_PASSWORD: ${POSTGRES_PASSWORD} + volumes: + - postgres_data:/var/lib/postgresql/data + - ./database/init:/docker-entrypoint-initdb.d + restart: unless-stopped + + # Redis快取 + redis: + image: redis:7-alpine + command: redis-server --appendonly yes --requirepass ${REDIS_PASSWORD} + volumes: + - redis_data:/data + restart: unless-stopped + + # 監控服務 + prometheus: + image: prom/prometheus:latest + ports: + - "9090:9090" + volumes: + - ./monitoring/prometheus.yml:/etc/prometheus/prometheus.yml + restart: unless-stopped + + grafana: + image: grafana/grafana:latest + ports: + - "3001:3000" + environment: + - GF_SECURITY_ADMIN_PASSWORD=${GRAFANA_PASSWORD} + volumes: + - grafana_data:/var/lib/grafana + restart: unless-stopped + +volumes: + postgres_data: + redis_data: + grafana_data: +``` + +#### Nginx配置 +```nginx +# nginx/nginx.conf +events { + worker_connections 1024; +} + +http { + upstream api { + server api:3001; + } + + # 啟用gzip壓縮 + gzip on; + gzip_vary on; + gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript; + + # SSL配置 + server { + listen 443 ssl http2; + server_name your-domain.com; + + ssl_certificate /etc/nginx/ssl/cert.pem; + ssl_certificate_key /etc/nginx/ssl/key.pem; + + # 前端靜態檔案 + location / { + root /usr/share/nginx/html; + try_files $uri $uri/ /index.html; + } + + # API代理 + location /api/ { + proxy_pass http://api; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + } + } + + # HTTP重定向至HTTPS + server { + listen 80; + server_name your-domain.com; + return 301 https://$server_name$request_uri; + } +} +``` + +### 生產成本明細 + +```yaml +production_costs: + infrastructure: + vps_server: "NT$ 320-480/月" # 4GB VPS + domain_ssl: "NT$ 400-600/月" # 域名 + Cloudflare Pro + backup_storage: "NT$ 160-240/月" # 備份儲存 + + services: + openai_api: "NT$ 1,500-3,000/月" # 優化使用GPT-4o-mini + payment_stripe: "3% 交易手續費" + monitoring: "NT$ 0-480/月" # 基本免費或便宜方案 + + total_fixed: "NT$ 2,380-4,800/月" + remaining_budget: "NT$ 200-2,620/月" +``` + +### AI服務成本優化策略 + +#### 1. 快取策略 +```javascript +// 多層快取系統 +const cacheStrategy = { + // L1: 記憶體快取 (最快) + memory: { + provider: 'node-cache', + ttl: 300, // 5分鐘 + checkperiod: 60 + }, + + // L2: Redis快取 (跨實例) + redis: { + provider: 'redis', + ttl: 3600, // 1小時 + keyPrefix: 'ai_cache:' + }, + + // L3: 資料庫快取 (持久化) + database: { + table: 'ai_responses', + ttl: 86400 * 7 // 7天 + } +} +``` + +#### 2. 批次處理 +```javascript +// 批次AI請求降低成本 +const batchProcessor = { + queueSize: 10, // 累積10個請求 + timeout: 5000, // 或等待5秒 + + async processBatch(requests) { + // 合併類似請求 + const grouped = groupSimilarRequests(requests); + + // 批次發送 + const results = await Promise.all( + grouped.map(group => this.sendBatchRequest(group)) + ); + + return results.flat(); + } +} +``` + +#### 3. 智慧降級 +```javascript +// 根據複雜度選擇模型 +const modelSelector = { + simple: 'gpt-4o-mini', // 簡單任務 + complex: 'gpt-4o', // 複雜任務(限量) + + selectModel(task) { + const complexity = this.analyzeComplexity(task); + return complexity < 0.5 ? this.simple : this.complex; + } +} +``` + +## 部署自動化 + +### 部署腳本 +```bash +#!/bin/bash +# deploy.sh + +set -e + +echo "🚀 開始部署 Drama Ling 生產環境..." + +# 1. 拉取最新代碼 +git pull origin main + +# 2. 構建前端 +echo "📦 構建前端應用..." +cd frontend +npm run build +cd .. + +# 3. 停止現有服務 +echo "⏹️ 停止現有服務..." +docker-compose -f docker-compose.prod.yml down + +# 4. 備份資料庫 +echo "💾 備份資料庫..." +./scripts/backup-database.sh + +# 5. 啟動新服務 +echo "▶️ 啟動新服務..." +docker-compose -f docker-compose.prod.yml up -d + +# 6. 健康檢查 +echo "🏥 執行健康檢查..." +./scripts/health-check.sh + +# 7. 清理舊映像 +echo "🧹 清理舊Docker映像..." +docker image prune -f + +echo "✅ 部署完成!" +``` + +### 健康檢查腳本 +```bash +#!/bin/bash +# scripts/health-check.sh + +echo "檢查服務健康狀態..." + +# 檢查API服務 +if curl -f http://localhost/api/health; then + echo "✅ API服務正常" +else + echo "❌ API服務異常" + exit 1 +fi + +# 檢查資料庫連線 +if docker-compose -f docker-compose.prod.yml exec -T postgres pg_isready; then + echo "✅ 資料庫連線正常" +else + echo "❌ 資料庫連線異常" + exit 1 +fi + +# 檢查Redis服務 +if docker-compose -f docker-compose.prod.yml exec -T redis redis-cli ping; then + echo "✅ Redis服務正常" +else + echo "❌ Redis服務異常" + exit 1 +fi + +echo "🎉 所有服務健康檢查通過!" +``` + +## 監控與維護 + +### 免費監控方案 +```yaml +monitoring_stack: + uptime_monitoring: + provider: "UptimeRobot" + cost: "免費" + features: + - 5分鐘間隔檢查 + - 50個監控點 + - email/SMS通知 + + error_tracking: + provider: "Sentry" + cost: "免費 (5000 errors/月)" + features: + - 錯誤追蹤 + - 性能監控 + - 釋出追蹤 + + log_analysis: + provider: "Docker logs + Grafana" + cost: "免費" + features: + - 集中化日誌 + - 基本儀表板 + - 警報通知 +``` + +### 備份策略 +```bash +#!/bin/bash +# scripts/backup-database.sh + +BACKUP_DIR="/var/backups/dramaling" +TIMESTAMP=$(date +"%Y%m%d_%H%M%S") +BACKUP_FILE="dramaling_backup_${TIMESTAMP}.sql" + +# 創建備份目錄 +mkdir -p $BACKUP_DIR + +# 執行資料庫備份 +docker-compose -f docker-compose.prod.yml exec -T postgres \ + pg_dump -U $POSTGRES_USER $POSTGRES_DB > "$BACKUP_DIR/$BACKUP_FILE" + +# 壓縮備份檔案 +gzip "$BACKUP_DIR/$BACKUP_FILE" + +# 保留最近7天的備份 +find $BACKUP_DIR -name "*.gz" -mtime +7 -delete + +# 上傳至雲端存儲(可選) +# aws s3 cp "$BACKUP_DIR/${BACKUP_FILE}.gz" s3://your-backup-bucket/ + +echo "✅ 資料庫備份完成: ${BACKUP_FILE}.gz" +``` + +## 擴展計劃 + +### 當預算增加時的升級路徑 + +#### 第一階段:服務優化 (NT$ 10,000/月) +- 升級至更大規格VPS +- 啟用專業版監控工具 +- 增加AI API使用量 + +#### 第二階段:高可用性 (NT$ 20,000/月) +- 多VPS負載均衡 +- 資料庫主從複製 +- CDN服務啟用 + +#### 第三階段:雲端遷移 (NT$ 50,000/月) +- 遷移至AWS/GCP +- 容器編排 (Kubernetes) +- 微服務架構改造 + +## 總結 + +這個低預算部署方案能夠: + +✅ **滿足預算限制**: 開發階段NT$300-600/月,生產階段NT$2,380-4,800/月 +✅ **保持功能完整**: 支援所有核心功能,包括AI服務 +✅ **確保可擴展性**: 架構設計考慮未來升級需求 +✅ **維護便利性**: 自動化部署和監控 +✅ **風險可控**: 多層備份和健康檢查 + +--- + +**文件版本**: v1.0 +**最後更新**: 2024年9月7日 +**適用場景**: 預算受限的初期部署階段 +**下次檢討**: 生產環境運行3個月後評估升級需求 \ No newline at end of file diff --git a/docs/04_technical/tech-stack-decision.md b/docs/04_technical/tech-stack-decision.md index 5eb6ec7..df1bc7c 100644 --- a/docs/04_technical/tech-stack-decision.md +++ b/docs/04_technical/tech-stack-decision.md @@ -153,9 +153,9 @@ postgresql: ## AI和機器學習服務 -### AI服務整合策略 +### 低成本AI服務策略 -#### OpenAI GPT-4 (主要AI服務) +#### OpenAI GPT-4o-mini (主要AI服務) **應用場景:** - [ ] **對話分析**: 語法、語意、流暢度評分 - [ ] **內容生成**: 對話建議和回覆範例 @@ -164,6 +164,26 @@ postgresql: **技術整合:** ```javascript +{ + "provider": "OpenAI", + "models": { + "dialogue_analysis": "gpt-4o-mini", // 便宜10倍 + "content_generation": "gpt-4o-mini", + "embedding": "text-embedding-3-small" // 便宜5倍 + }, + "backup_provider": "Anthropic Claude-3 Haiku", + "rate_limiting": "tiktoken + custom limiter", + "cost_optimization": { + "aggressive_caching": "90%+ 快取命中率", + "prompt_optimization": "最小化token使用", + "batch_processing": "批量處理降低成本", + "smart_fallback": "簡單任務用更便宜模型" + } +} +``` + +#### 高階AI方案 (預算充足時) +```javascript { "provider": "OpenAI", "models": { @@ -201,11 +221,41 @@ local_models = { ## 雲端服務架構 -### Amazon Web Services (推薦) +### 低預算部署方案 (推薦) -#### 核心服務配置 +#### VPS部署配置 ```yaml -# 應用服務 +# 核心服務 +compute: + vps_provider: "DigitalOcean / Vultr / Linode" + instance_type: "4GB RAM, 2 vCPU, 80GB SSD" + containerization: "Docker + Docker Compose" + reverse_proxy: "Nginx" + +# 資料存儲 +storage: + database: "PostgreSQL 15 (容器化)" + cache: "Redis 7 (容器化)" + files: "本地存儲 + Nginx靜態服務" + backups: "PostgreSQL dump + 對象存儲同步" + +# 網路與安全 +networking: + ssl: "Let's Encrypt免費SSL證書" + security: "Fail2ban + UFW防火牆" + domain: "Cloudflare DNS + CDN (免費版)" + +# 監控與日誌 +monitoring: + metrics: "Grafana + Prometheus (輕量化)" + logs: "Docker logs + 日誌輪轉" + uptime: "UptimeRobot免費監控" + alerts: "Discord/Telegram通知" +``` + +#### 高階AWS方案 (預算充足時) +```yaml +# 應用服務 (預算充足時的選項) compute: api_servers: "ECS Fargate" background_jobs: "Lambda Functions" @@ -431,8 +481,46 @@ testing_pyramid: ## 成本估算和優化 -### 基礎設施成本 (月費估算) +### 低預算成本估算 (月費估算) +#### 開發階段 (NT$ 2,000/月預算) +```yaml +development_costs: + infrastructure: + - local_docker: "NT$ 0" # 完全本地開發 + - domain_testing: "NT$ 0" # ngrok或localhost + + services: + - openai_api: "NT$ 300-600" # 低使用量GPT-4o-mini + - database: "NT$ 0" # 本地PostgreSQL + - storage: "NT$ 0" # 本地檔案系統 + + tools: + - monitoring: "NT$ 0" # 免費工具 + - version_control: "NT$ 0" # GitHub免費版 + + total_estimated: "NT$ 300-600/月" + budget_remaining: "NT$ 1,400-1,700/月" +``` + +#### 生產階段 (NT$ 5,000/月預算) +```yaml +production_costs: + infrastructure: + - vps_server: "NT$ 320-480" # DigitalOcean 4GB + - domain_ssl: "NT$ 400-600" # 域名 + Cloudflare Pro + - backup_storage: "NT$ 160-240" # 對象存儲備份 + + services: + - openai_api: "NT$ 1,500-3,000" # 優化使用的GPT-4o-mini + - stripe_processing: "3% 交易手續費" + - monitoring: "NT$ 0-480" # 基本監控免費或便宜方案 + + total_estimated: "NT$ 2,380-4,800/月" + budget_remaining: "NT$ 200-2,620/月" +``` + +#### AWS高階方案比較 (預算充足時) ```yaml aws_costs: compute: @@ -451,16 +539,28 @@ aws_costs: monitoring: - cloudwatch: "$30-60" # logs + metrics - total_estimated: "$625-1415/month" + total_estimated: "$625-1415/month (約NT$ 20,000-45,000)" ``` -### 第三方服務成本 +### 第三方服務成本優化 ```yaml -third_party_costs: - openai_api: "$500-2000/month" # based on usage - stripe_processing: "2.9% + $0.30 per transaction" - firebase_messaging: "$0 (free tier sufficient initially)" - monitoring_tools: "$200-500/month" +optimized_third_party_costs: + ai_services: + - openai_gpt4o_mini: "NT$ 1,500-3,000/月" # 90%快取命中率 + - embedding_service: "NT$ 150-300/月" # 較便宜的embedding模型 + + payment_processing: + - stripe_international: "2.9% + NT$ 9.6 per transaction" + - local_payment: "1.8% + NT$ 6 per transaction" # 台灣金流 + + communication: + - firebase_messaging: "NT$ 0" # 免費版足夠 + - email_service: "NT$ 0-160" # SendGrid免費版或便宜方案 + + monitoring_free: + - uptime_monitoring: "NT$ 0" # UptimeRobot免費版 + - error_tracking: "NT$ 0" # Sentry免費版 + - log_analysis: "NT$ 0" # 基本Docker logs ``` ### 成本優化策略 diff --git a/docs/04_technical/third-party-integration-specification.md b/docs/04_technical/third-party-integration-specification.md index 0660476..6ef9419 100644 --- a/docs/04_technical/third-party-integration-specification.md +++ b/docs/04_technical/third-party-integration-specification.md @@ -1080,81 +1080,110 @@ Warning Alerts: ## 💰 成本分析與預算規劃 -### 月度成本預估 (USD) +### 預算導向成本分析 -#### 核心服務成本 *(更新版)* +#### 低預算方案 (符合NT$ 5,000/月生產預算) ```yaml -AI服務: - OpenAI GPT-4o-mini: $15-50 (節省80%成本) - Microsoft 語言評估: $20-60 - Google Speech Services: $40-80 +極低成本AI服務: + OpenAI GPT-4o-mini: NT$ 480-1,600 (優化使用量) + # 策略: 90%快取命中率 + 批次處理 + Microsoft語言評估: NT$ 160-480 (最小套餐) + Google TTS/STT: NT$ 320-640 (基本用量) 支付服務: - iOS/Android內購: $0 (平台分潤30%/15%) + iOS/Android內購: NT$ 0 (平台分潤機制) -基礎設施: - AWS (EC2, S3, RDS): $280-400 - CloudFront CDN: $40-100 +基礎設施 (VPS方案): + DigitalOcean VPS: NT$ 320-480 (4GB) + Cloudflare CDN: NT$ 0 (免費版) + 域名+SSL: NT$ 400-600 通訊服務: - Firebase FCM: $0 (免費) - AdMob: -$50 to -$200 (收益) + Firebase FCM: NT$ 0 (免費額度) + AdMob廣告: -NT$ 1,600 to -NT$ 6,400 (收益) 監控服務: - New Relic: $99-349 + 免費監控套件: NT$ 0 + # UptimeRobot + Sentry免費版 -總成本: $444-839 USD/月 (節省約40%成本) +淨成本: NT$ 1,680-3,200/月 (符合預算) +廣告收益抵消後: NT$ 80-1,600/月 ``` -#### 用戶規模成本預測 *(更新版)* +#### 高預算雲端方案比較 ```yaml -1,000 活躍用戶: - 月成本: ~$500 USD (節省$300) - 單用戶成本: $0.50 USD - -5,000 活躍用戶: - 月成本: ~$1,200 USD (節省$800) - 單用戶成本: $0.24 USD - -10,000 活躍用戶: - 月成本: ~$2,000 USD (節省$1,500) - 單用戶成本: $0.20 USD +完整AWS方案 (預算充足時): + AI服務: $75-190 USD (NT$ 2,400-6,000) + 基礎設施: $320-500 USD (NT$ 10,000-16,000) + 監控服務: $99-349 USD (NT$ 3,200-11,200) + + 總成本: $494-1,039 USD/月 (NT$ 15,800-33,200) ``` -#### 收益平衡點分析 *(更新 - 台幣計價)* +#### 低預算用戶規模預測 +```yaml +100 活躍用戶 (啟動階段): + 月成本: NT$ 800-1,200 + 單用戶成本: NT$ 8-12 + 可行性: ✅ 預算內 + +500 活躍用戶 (成長階段): + 月成本: NT$ 1,600-2,400 + 單用戶成本: NT$ 3.2-4.8 + 可行性: ✅ 預算內 + +1,000 活躍用戶 (穩定階段): + 月成本: NT$ 2,400-3,600 + 單用戶成本: NT$ 2.4-3.6 + 可行性: ✅ 預算內 + +2,000+ 活躍用戶: + 月成本: NT$ 3,600-4,800 + 單用戶成本: NT$ 1.8-2.4 + 升級建議: 考慮雲端方案 +``` + +#### 低預算收益平衡點分析 ```yaml 訂閱收益 (月費NT$600): - - 付費轉換率 5%: 需150活躍用戶達平衡 (大幅降低) - - 付費轉換率 10%: 需75活躍用戶達平衡 - - 付費轉換率 15%: 需50活躍用戶達平衡 + 實際收入(扣除30%分潤): NT$420/用戶 + + 平衡點計算: + - 月成本NT$1,600: 需4付費用戶 (80活躍用戶@5%轉換) + - 月成本NT$2,400: 需6付費用戶 (120活躍用戶@5%轉換) + - 月成本NT$3,600: 需9付費用戶 (180活躍用戶@5%轉換) -廣告收益 (輔助): - - eCPM $2 USD - - 10,000 DAU × 2廣告/天 = +$400 USD/月 +廣告收益 (重要補充): + - 台灣eCPM: NT$32-64 ($1-2 USD) + - 500 DAU × 2廣告/天 = +NT$960-1,920/月 + - 1000 DAU × 2廣告/天 = +NT$1,920-3,840/月 -平台分潤考量: - - Apple/Google分潤: 30%(首年) / 15%(次年) - - 實際收入: NT$420(首年) / NT$510(次年) +綜合收益模式: + 訂閱 + 廣告雙收入,大幅降低平衡點 + 實際需求: 50-80活躍用戶即可達損益平衡 ``` --- -### 成本優化建議 +### 低預算成本優化策略 -#### 短期優化 (0-6個月) -1. **使用AWS免費額度** - 節省$100-200/月 -2. **OpenAI API優化** - 精簡提示詞,降低token消耗 -3. **CDN緩存策略** - 提高緩存命中率,減少頻寬成本 +#### 開發階段優化 (NT$ 2,000/月預算) +1. **完全本地開發** - 使用Docker Compose免費環境 +2. **AI服務節省** - GPT-4o-mini + 積極快取策略 +3. **最小化外部服務** - 僅使用必要API呼叫 +4. **免費監控工具** - Docker logs + 基本指標 -#### 中期優化 (6-18個月) -1. **預留實例** - AWS EC2 Reserved Instances 節省30-60% -2. **多雲策略** - 對比AWS/GCP/Azure價格 -3. **自建語音服務** - 評估自建TTS/STT成本效益 +#### 生產階段優化 (NT$ 5,000/月預算) +1. **VPS代替雲端** - DigitalOcean單機部署節省70% +2. **Cloudflare免費CDN** - 替代付費CDN服務 +3. **智慧AI快取** - 90%命中率目標,降低API成本 +4. **廣告收益最大化** - 優化廣告位置和頻次 -#### 長期優化 (18個月+) -1. **Edge computing** - CloudFlare Workers 減少延遲 -2. **自建AI服務** - Fine-tuned模型降低API成本 -3. **多區域部署** - 就近服務減少數據傳輸成本 +#### 成長階段優化 (預算增加後) +1. **漸進式雲端遷移** - VPS → 混合雲 → 全雲端 +2. **AI服務升級** - 引入更強大模型 +3. **多區域部署** - 亞太地區擴展 +4. **企業級監控** - 升級至付費監控方案 --- @@ -1421,11 +1450,12 @@ pip install google-cloud-texttospeech 14. **AWS CloudWatch** - 系統監控 15. **OneSignal** - 進階推播功能 -### 整體成本效益分析 -- **月度總成本**: $500-800 USD (1000活躍用戶) -- **相較原規格節省**: 約40%成本 (主要來自支付系統和AI服務優化) -- **台灣市場聚焦**: 降低多區域部署成本 -- **技術債務風險**: 低 (使用成熟服務) +### 低預算整體效益分析 +- **開發階段成本**: NT$300-600/月 (本地環境) +- **生產階段成本**: NT$1,600-4,800/月 (VPS部署) +- **相較雲端節省**: 約85%成本 (VPS vs AWS) +- **收益平衡點**: 50-80活躍用戶 +- **技術債務風險**: 中等 (未來需考慮遷移成本) ### 技術架構優勢 - **原生支付整合**: 更好的用戶體驗,更低手續費 diff --git a/docs/04_technical/user-flow-specification.md b/docs/04_technical/user-flow-specification.md index eeff4d7..7a8a8ab 100644 --- a/docs/04_technical/user-flow-specification.md +++ b/docs/04_technical/user-flow-specification.md @@ -6,10 +6,10 @@ ## 主要用戶角色 -- **訪客用戶 (Guest)**: 未註冊/登入的用戶,可透過設備ID進行訂閱 -- **註冊用戶 (Registered)**: 已註冊但使用免費功能的用戶 -- **訂閱用戶 (Subscribed)**: 已購買月費訂閱(600元/月)的用戶,可使用對話訓練功能 -- **付費用戶 (Premium)**: 已購買訂閱或付費內容的用戶 +- **訪客用戶 (Guest)**: 未註冊/登入的用戶,可享受7天免費體驗 +- **註冊用戶 (Registered)**: 已註冊但使用基礎功能的用戶,可購買鑽石道具 +- **VIP用戶 (VIP)**: 簡化訂閱用戶,享有每日3次免費限時挑戰等特權 +- **付費用戶 (Premium)**: 有購買鑽石的用戶,可使用各種道具和功能 ## 核心用戶流程 @@ -19,19 +19,19 @@ graph TD A[應用啟動] --> B{用戶狀態} B -->|未登入| C[UI_Login_Main] - B -->|已登入| D[UI_ChallengeLevel_Map] + B -->|已登入| D[UI_Level_Map] C --> E[UI_SignUp_Main] - E --> F[UI_GuestIntro_Main] - F --> G[UI_GuestIntro_FormPurpose] - G --> H[UI_GuestIntro_FormLevel] - H --> I[UI_GuestIntro_FormTimeSlot] - I --> J[UI_GuestIntro_FormFrequency] - J --> K[UI_GuestIntro_Notice] - K --> L[UI_GuestIntro_Result] - L --> M[UI_LanguageLevel_Main] - M --> N[UI_LanguageLevel_Result] - N --> O[UI_SubscriptionPlans - 首次訂閱觸發] + E --> F[UI_Onboarding_Welcome] + F --> G[UI_Onboarding_Purpose] + G --> H[UI_Onboarding_Level] + H --> I[UI_Onboarding_TimeSlot] + I --> J[UI_Onboarding_Frequency] + J --> K[UI_Onboarding_Notice] + K --> L[UI_Onboarding_Result] + L --> M[UI_Assessment_Test] + M --> N[UI_Assessment_Results] + N --> O[UI_Shop_Categories - 首次鑽石購買觸發] O --> P{訂閱狀態} P -->|完成訂閱| D P -->|跳過/取消| D @@ -53,36 +53,38 @@ graph TD - `UI_PasswordReset_Form/Popup`: 密碼重設流程 3. **個人化設定階段** - - `UI_GuestIntro_FormPurpose`: 學習目的選擇 - - `UI_GuestIntro_FormLevel`: 當前語言程度 - - `UI_GuestIntro_FormTimeSlot`: 偏好學習時段 - - `UI_GuestIntro_FormFrequency`: 學習頻率設定 - - `UI_GuestIntro_Notice`: 使用須知提醒 - - `UI_GuestIntro_Result`: 個人化建議結果 + - `UI_Onboarding_Purpose`: 學習目的選擇 + - `UI_Onboarding_Level`: 當前語言程度 + - `UI_Onboarding_TimeSlot`: 偏好學習時段 + - `UI_Onboarding_Frequency`: 學習頻率設定 + - `UI_Onboarding_Notice`: 使用須知提醒 + - `UI_Onboarding_Result`: 個人化建議結果 4. **語言程度測試** - - `UI_LanguageLevel_Main`: 進行程度評估測試 - - `UI_LanguageLevel_Result`: 顯示測試結果和建議 + - `UI_Assessment_Test`: 進行程度評估測試 + - `UI_Assessment_Results`: 顯示測試結果和建議 -5. **首次訂閱觸發** - - `UI_SubscriptionPlans`: 完成第一次詞彙認識關卡後自動觸發訂閱頁面 - - 月費訂閱:600元/月(內部測試期間2折優惠) - - 支援訪客透過設備ID直接訂閱 +5. **首次鑽石購買觸發** + - `UI_Shop_Categories`: 完成第一次詞彙認識關卡後自動觸發鑽石購買頁面 + - **雙軌營收模式**: + - 主要:鑽石貨幣系統(NT$30-390套餐) + - 次要:7天免費體驗 + VIP訂閱特權 + - 輔助:獎勵廣告系統(獲得25-50鑽石) ### 2. 完整學習核心流程 *(更新基於最新規格)* ```mermaid graph TD - A[UI_ChallengeLevel_Map] --> A0{訂閱狀態檢查} - A0 -->|未訂閱且選擇對話訓練| A00[UI_SubscriptionPlans] - A0 -->|已訂閱或非對話訓練| A1{命條檢查} - A00 --> A000{訂閱結果} - A000 -->|完成訂閱| A1 - A000 -->|取消| A - A1 -->|命條>1| B{關卡類型} - A1 -->|命條=0| A2[命條不足提示] - A2 --> A3[購買命條/等待回復] - A3 --> A + A[UI_Level_Map] --> A1{命條檢查} + A1 -->|命條>0| B{關卡類型} + A1 -->|命條=0| A2[UI_LifePoints_Display - 命條不足提示] + A2 --> A3{.choice} + A3 -->|購買補命道具| A4[UI_Shop_Item_Confirm] + A3 -->|等待自動回復| A5[等待時間] + A4 --> A6{鑽石足夠?} + A6 -->|是| A7[購買成功+命條回復] --> A + A6 -->|否| A8[UI_Insufficient_Resources] --> UI_Shop_Categories + A5 --> A B -->|詞彙認識關卡| C[詞彙學習流程] B -->|詞彙熟悉關卡| D[詞彙熟練流程] @@ -90,9 +92,9 @@ graph TD B -->|複習詞彙| F[間隔複習流程] B -->|時光關卡| G[時光挑戰流程] - C --> C1[UI_VocabIntro_CardIntro] + C --> C1[UI_Vocab_Introduction] C1 --> C2[詞彙展示學習] - C2 --> C3[UI_VocabIntro_Choice] + C2 --> C3[UI_Vocab_Choice_Practice] C3 --> C4{答題結果} C4 -->|正確| C5{全部完成?} C4 -->|錯誤| C6[命條-1, 題目加到最後] @@ -120,7 +122,7 @@ graph TD D10 --> D11[詞彙加入複習清單] --> D12[今日任務檢查+獎勵] --> A E --> E1[UI_ScenarioDialog_GoalDetail] - E1 --> E2[UI_ScenarioDialog_Scene] + E1 --> E2[UI_Dialogue_Main] E2 --> E3{對話完成?} E3 -->|是| E4[UI_ScenarioDialog_ReplyResult] E3 -->|需要提示| E5[UI_ScenarioDialog_ReplyGuide] @@ -129,10 +131,10 @@ graph TD E6 -->|通過| E7[三顆星通關] E6 -->|需訂正| E8[命條-1, 進入訂正流程] E8 --> E9{命條>0?} - E9 -->|是| E10[UI_DialogCorrection_GrammarExplanation_Play] + E9 -->|是| E10[UI_DialogCorrection_SyntaxExplanation_Play] E9 -->|否| E11[關卡失敗+時光卷] - E10 --> E12[UI_DialogCorrection_GrammarRetry_Play] - E12 --> E13[UI_DialogCorrection_GrammarPass_Result] + E10 --> E12[UI_DialogCorrection_SyntaxRetry_Play] + E12 --> E13[UI_DialogCorrection_SyntaxPass_Result] E13 --> E6 E7 --> E14[詞彙加入複習清單] --> E15{滿星檢查} E15 -->|滿星| E16[語言程度晉階進度+今日任務] @@ -143,7 +145,7 @@ graph TD F --> F1[UI_VocabReview_Main] F1 --> F2[間隔複習算法選題] - F2 --> F3[UI_VocabReview_Choice] + F2 --> F3[UI_VocabReview_Main] F3 --> F4{答題結果} F4 -->|正確| F5{全部完成?} F4 -->|錯誤| F6[命條-1, 重複複習] @@ -178,8 +180,8 @@ graph TD - 命條歸零時關卡失敗,獲得時光卷作為安慰獎勵 3. **詞彙認識關卡流程 (C)** - - `UI_VocabIntro_CardIntro`: 展示詞彙、詞義、例句、示意圖 - - `UI_VocabIntro_Choice`: 詞彙選擇題測試 + - `UI_Vocab_Introduction`: 展示詞彙、詞義、例句、示意圖 + - `UI_Vocab_Choice_Practice`: 詞彙選擇題測試 - 答錯扣除命條,題目移至最後重新測試 - 全部正確獲得三顆星通關,詞彙加入複習清單 @@ -191,7 +193,7 @@ graph TD 5. **情境對話關卡流程 (E)** *(需訂閱權限)* - `UI_ScenarioDialog_GoalDetail`: 顯示對話任務目標 - - `UI_ScenarioDialog_Scene`: 主要對話界面 + - `UI_Dialogue_Main`: 主要對話界面 - **雙重完成條件**: 劇情任務完成 + 指定詞彙使用 - **回覆卡關輔助**: `UI_ScenarioDialog_ReplyGuide` 三層輔助架構 - **AI評估系統**: 語法、語意、流暢度三維度即時評分 @@ -200,7 +202,7 @@ graph TD 6. **間隔複習流程 (F)** - `UI_VocabReview_Main`: 基於間隔複習算法選擇詞彙 - 使用公式:下次複習時間 = 當日 + (2^複習次數) - - `UI_VocabReview_Choice`: 複習測試界面 + - `UI_VocabReview_Main`: 複習測試界面 - 答錯重複複習,正確則更新複習次數 7. **時光挑戰流程 (G)** @@ -232,10 +234,10 @@ graph TD B -->|間隔複習| F[複習系統] C --> C1{命條檢查} - C1 -->|命條>0| C2[UI_VocabIntro_CardIntro] + C1 -->|命條>0| C2[UI_Vocab_Introduction] C1 -->|命條=0| C3[等待回復/購買] C2 --> C4[詞彙展示學習] - C4 --> C5[UI_VocabIntro_Choice] + C4 --> C5[UI_Vocab_Choice_Practice] C5 --> C6{測試結果} C6 -->|正確| C7{階段完成?} C6 -->|錯誤| C8[命條-1, 加入最後] @@ -256,7 +258,7 @@ graph TD F --> F1[間隔複習算法] F1 --> F2[選擇到期詞彙] - F2 --> F3[UI_VocabReview_Choice] + F2 --> F3[UI_VocabReview_Main] F3 --> F4{複習結果} F4 -->|記住| F5[延長間隔時間] F4 -->|遺忘| F6[重置間隔計數] @@ -274,7 +276,7 @@ graph TD graph TD A[社交功能入口] --> B{用戶狀態} B -->|訪客| C[UI_SocialRanking_GuestPrompt] - B -->|註冊用戶| D[UI_SocialRanking_Main] + B -->|註冊用戶| D[UI_Social_Ranking] D --> E[UI_RankingDetail] E --> F{競爭選項} @@ -296,11 +298,11 @@ graph TD graph TD A[命條系統] --> B{當前命條數量} B -->|命條>0| C[正常遊戲流程] - B -->|命條=0| D[UI_LifePoints_InsufficientPopup] + B -->|命條=0| D[UI_ScenarioDialog_InsufficientPopup] D --> E{用戶選擇} E -->|等待回復| F[顯示回復時間] - E -->|購買命條| G[UI_ItemStore_Main] + E -->|購買命條| G[UI_Shop_Categories] E -->|觀看廣告| H[UI_AdOffer] F --> F1[每5小時+1命條] @@ -332,9 +334,9 @@ graph TD ```mermaid graph TD A[商業功能觸發] --> B{觸發情境} - B -->|命條不足| C[UI_LifePoints_InsufficientPopup] + B -->|命條不足| C[UI_ScenarioDialog_InsufficientPopup] B -->|回覆提示不足| D[回覆提示道具購買確認] - B -->|主動購買| E[UI_ItemStore_Main] + B -->|主動購買| E[UI_Shop_Categories] B -->|訂閱服務| F[UI_SubscriptionPlans] B -->|廣告獎勵| G[UI_AdOffer] @@ -365,7 +367,7 @@ graph TD ```mermaid graph TD - A[UI_PersonalCenter_SelfMain] --> B{功能選擇} + A[UI_Profile_Dashboard] --> B{功能選擇} B -->|詳細統計| C[UI_PresonalCenter_dd_Detail] B -->|個人設定| D[UI_PersonalCenter_Settings] B -->|好友管理| E[UI_PersonalCenter_FriendMain] @@ -468,33 +470,96 @@ graph TD **獎勵時機**: 關卡結束時進行任務完成判定,完成則顯示獎勵結算頁面 -### 10. 訂閱會員系統流程 (Subscription System Flow) *(新增)* +### 10. 鑽石貨幣系統流程 (Diamond Currency System Flow) *(更新)* ```mermaid graph TD - A[訂閱觸發條件] --> B{觸發情境} - B -->|首次完成詞彙認識關卡| C[UI_SubscriptionPlans] - B -->|設定中選擇訂閱| C - B -->|對話訓練關卡權限檢查| D{會員狀態} + A[鑽石需求觸發] --> B{觸發情境} + B -->|命條不足需補充| C[UI_LifePoints_Display] + B -->|回覆提示需求| D[UI_Cost_Confirm_Popup - 30鑽石] + B -->|限時挑戰入場| E[UI_Cost_Confirm_Popup - 50鑽石] + B -->|加時道具| F[UI_Cost_Confirm_Popup - 300鑽石] + B -->|主動購買| G[UI_Shop_Categories] - D -->|未訂閱| C - D -->|已訂閱| E[進入對話訓練] + C --> C1{選擇} + C1 -->|購買補命道具| C2[UI_Shop_Item_Confirm - 100鑽石] + C1 -->|等待自動回復| C3[等待時間] - C --> F[顯示訂閱方案] - F --> G[月費600元展示] - G --> H[內部測試2折優惠] - H --> I{用戶選擇} + D --> D1{鑽石足夠?} + D1 -->|足夠| D2[購買成功] --> D3[UI_Reply_Assistance] + D1 -->|不足| H[UI_Insufficient_Resources] - I -->|確認訂閱| J[處理付款] - I -->|取消/跳過| K[返回原功能] + E --> E1{鑽石足夠?} + E1 -->|足夠| E2[入場成功] --> E3[UI_TimeWarp_Cards] + E1 -->|不足| H - J --> L{付款結果} - L -->|成功| M[訂閱狀態更新] - L -->|失敗| N[付款失敗提示] + F --> F1{鑽石足夠?} + F1 -->|足夠| F2[購買成功] --> F3[時間道具啟用] + F1 -->|不足| H - M --> O[解鎖對話訓練功能] - N --> C - O --> E + H --> G + G --> G1{套餐選擇} + G1 -->|新手包| G2[500鑽石 - NT$30] + G1 -->|基礎包| G3[1200鑽石 - NT$60] + G1 -->|價值包| G4[2500鑽石 - NT$99] + G1 -->|豪華包| G5[5000鑽石 - NT$190] + G1 -->|至尊包| G6[12000鑽石 - NT$390] + + G2 --> G7[UI_Shop_Item_Confirm] + G3 --> G7 + G4 --> G7 + G5 --> G7 + G6 --> G7 + G7 --> G8{購買確認} + G8 -->|確認| G9[UI_Subscription_Success] + G8 -->|取消| G10[返回原處] +``` + +### 11. 300秒限時挑戰流程 (300-Second Timed Challenge Flow) *(新增)* + +```mermaid +graph TD + A[限時挑戰觸發] --> B{入場檢查} + B -->|首次免費| C[UI_TimeWarp_Cards - 直接入場] + B -->|非首次| D[UI_Cost_Confirm_Popup - 50鑽石] + + D --> D1{鑽石足夠?} + D1 -->|足夠| C + D1 -->|不足| E[UI_Insufficient_Resources] --> F[UI_Shop_Categories] + + C --> G[開始300秒倒數] + G --> H{挑戰過程} + H -->|需要暫停| I[UI_Cost_Confirm_Popup - 100鑽石] --> I1{購買?} + H -->|需要加時| J[UI_Cost_Confirm_Popup - 150鑽石] --> J1{購買?} + H -->|時間到| K[結算頁面] + H -->|主動退出| L[UI_ChallengeLevel_ExitComfirmPopup] + + I1 -->|確認| M[暫停30秒] --> H + I1 -->|取消| H + J1 -->|確認| N[加時60秒] --> H + J1 -->|取消| H + + K --> O{挑戰結果} + O -->|成功| P[UI_Result_Success_A] --> Q[特殊獎勵獲得] + O -->|部分成功| R[UI_Result_Success_B] --> S[一般獎勵獲得] + O -->|失敗| T[UI_Result_Failure_A] --> U[無獎勵但可重試] +``` + +### 12. 簡化訂閱系統流程 (Simplified Subscription System Flow) *(更新)* + +```mermaid +graph TD + A[訂閱觸發] --> B[UI_Onboarding_Welcome - 7天免費體驗] + B --> C{體驗期使用} + C --> D[7天期滿提醒] + D --> E{用戶選擇} + E -->|續訂VIP| F[簡化訂閱確認] + E -->|不續訂| G[回到基礎功能] + + F --> H[VIP特權啟用] + H --> I[每日3次免費限時挑戰] + I --> J[其他VIP專屬功能] +``` ``` #### 訂閱系統規格 @@ -545,10 +610,10 @@ graph TD ## 導航規則 ### 全局導航 -- 主學習地圖:`UI_ChallengeLevel_Map` -- 個人中心:`UI_PersonalCenter_SelfMain` -- 排行榜:`UI_SocialRanking_Main` -- 商店:`UI_ItemStore_Main` +- 主學習地圖:`UI_Level_Map` +- 個人中心:`UI_Profile_Dashboard` +- 排行榜:`UI_Social_Ranking` +- 商店:`UI_Shop_Categories` ### 返回機制 - 每個子流程都有明確的返回路徑 @@ -568,7 +633,7 @@ graph TD - 離線模式支援(部分功能) ### 命條不足處理 -- `UI_LifePoints_InsufficientPopup`: 命條不足提示 +- `UI_ScenarioDialog_InsufficientPopup`: 命條不足提示 - 提供等待回復(每5小時+1)、購買、觀看廣告三種選擇 - 關卡失敗時獲得時光卷作為安慰獎勵