# 用戶流程規格文件 (User Flow Specification) ## 文件概述 本文件詳細定義了戲劇化英語學習應用程式的完整用戶流程，涵蓋從新用戶註冊到深度學習的所有互動路徑。基於83個UI定義和完整的功能模組架構，提供開發團隊實作用戶體驗的藍圖。 ## 主要用戶角色 - **訪客用戶 (Guest)**: 未註冊/登入的用戶 - **註冊用戶 (Registered)**: 已註冊但使用免費功能的用戶 - **付費用戶 (Premium)**: 已購買訂閱或付費內容的用戶 ## 核心用戶流程 ### 1. 新用戶引導流程 (Onboarding Flow) ```mermaid graph TD A[應用啟動] --> B{用戶狀態} B -->|未登入| C[UI_Login_Main] B -->|已登入| D[UI_ChallengeLevel_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 --> D C -->|忘記密碼| O[UI_PasswordReset_Form] O --> P[UI_PasswordReset_Popup] ``` #### 流程說明 1. **應用啟動檢查** - 檢查用戶登入狀態 - 已登入用戶直接進入主學習地圖 - 未登入用戶進入登入頁面 2. **登入/註冊階段** - `UI_Login_Main`: 支援帳密登入、Apple ID、Google登入 - `UI_SignUp_Main`: 新用戶註冊表單 - `UI_PasswordReset_Form/Popup`: 密碼重設流程 3. **個人化設定階段** - `UI_GuestIntro_FormPurpose`: 學習目的選擇 - `UI_GuestIntro_FormLevel`: 當前語言程度 - `UI_GuestIntro_FormTimeSlot`: 偏好學習時段 - `UI_GuestIntro_FormFrequency`: 學習頻率設定 - `UI_GuestIntro_Notice`: 使用須知提醒 - `UI_GuestIntro_Result`: 個人化建議結果 4. **語言程度測試** - `UI_LanguageLevel_Main`: 進行程度評估測試 - `UI_LanguageLevel_Result`: 顯示測試結果和建議 ### 2. 學習核心流程 (Learning Core Flow) ```mermaid graph TD A[UI_ChallengeLevel_Map] --> B{關卡狀態} B -->|可用關卡| C[UI_ChallengeLevel_ChoosePopup] B -->|鎖定關卡| D[UI_ChallengeLevel_ChoosePopupLock] C --> E[UI_ScenarioDialog_GoalDetail] E --> F[UI_ScenarioDialog_Scene] F --> G{對話互動} G -->|文字輸入| H[UI_ScenarioDialog_ReplyInput] G -->|需要幫助| I[UI_ScenarioDialog_ReplyGuide] G -->|查看關鍵詞| J[UI_ScenarioDialog_KeywordDetail] G -->|查看角色| K[UI_ScenarioDialog_RoleDetail] G -->|成本確認| L[UI_ScenarioDialog_CostConfirmPopup] H --> M[UI_ScenarioDialog_ReplyResult] M --> N{評估結果} N -->|需要訂正| O[語法訂正流程] N -->|通過| P[結果統計流程] N -->|繼續對話| F O --> Q[UI_DialogCorrection_SyntaxExplanation_Play] Q --> R[UI_DialogCorrection_SyntaxRetry_Play] R --> S[UI_DialogCorrection_SyntaxPass_Result] P --> T[UI_LevelResult_ScoreSummary] T --> U[UI_LevelResult_RewardConfirm] U --> V[UI_LevelResult_SuccessResult] V --> A ``` #### 流程說明 1. **關卡選擇階段** - `UI_ChallengeLevel_Map`: 顯示學習地圖和進度 - `UI_ChallengeLevel_ChoosePopup`: 選擇關卡難度和模式 - `UI_ChallengeLevel_ChoosePopupLock`: 鎖定關卡的解鎖提示 2. **場景對話階段** - `UI_ScenarioDialog_GoalDetail`: 顯示對話任務目標 - `UI_ScenarioDialog_Scene`: 主要對話界面 - 支援文字/語音輸入、提示請求、關鍵詞查詢 3. **AI評估與回饋** - `UI_ScenarioDialog_ReplyResult`: 即時評分和建議 - 三維度評分：語法、語意、流暢度 - 根據表現決定後續流程 4. **訂正學習流程** - 語法訂正：解釋 → 重試 → 通過確認 - 流暢度訂正：類似語法訂正流程 - 提供音頻解釋和實作練習 5. **成就與獎勵** - 分數統計、獎勵確認、成功慶祝 - 返回地圖繼續下一關卡 ### 3. 詞彙學習流程 (Vocabulary Learning Flow) ```mermaid graph TD A[詞彙學習入口] --> B{學習模式} B -->|新詞介紹| C[UI_VocabIntro_CardIntro] B -->|複習模式| D[UI_VocabReview_Main] B -->|流暢度練習| E[UI_VocabFluency_MatchImageToWord] C --> F[UI_VocabIntro_Choice] F --> G[UI_VocabIntro_ChoiceResult] G --> H{繼續學習?} H -->|是| C H -->|完成| I[返回主流程] D --> J{複習完成?} J -->|繼續| D J -->|完成| K[UI_ReviewProgress] E --> L[UI_VocabFluency_MatchImageResult] L --> M[UI_VocabFluency_SentenceReorder] M --> N[UI_VocabFluency_SentenceResult] N --> I ``` ### 4. 社交與競爭流程 (Social & Competition Flow) ```mermaid graph TD A[社交功能入口] --> B{用戶狀態} B -->|訪客| C[UI_SocialRanking_GuestPrompt] B -->|註冊用戶| D[UI_SocialRanking_Main] D --> E[UI_RankingDetail] E --> F{競爭選項} F -->|挑戰用戶| G[UI_TimedDialogue] F -->|查看好友| H[UI_PersonalCenter_FriendMain] H --> I[UI_PersonalCenter_FriendList] I --> J[UI_PersonalCenter_OtherUserMain] H --> K[UI_PersonalCenter_FriendSearch] G --> L[對話挑戰結果] L --> M[UI_LevelResult_SuccessResult] ``` ### 5. 商業化流程 (Monetization Flow) ```mermaid graph TD A[商業功能觸發] --> B{觸發情境} B -->|資源不足| C[UI_ScenarioDialog_InsufficientPopup] B -->|主動購買| D[UI_ItemStore_Main] B -->|訂閱服務| E[UI_SubscriptionPlans] B -->|廣告獎勵| F[UI_AdOffer] C --> D D --> G[UI_ItemStore_ConfirmPopup] G --> H{購買確認} H -->|確認| I[處理購買] H -->|取消| J[返回商店] E --> K[UI_PaymentFlow] K --> L[UI_Subscription_Result] F --> M[UI_AdViewing] M --> N[UI_RewardClaim] I --> O[UI_PurchasedContent] L --> P[返回主功能] N --> P ``` ### 6. 個人中心流程 (Personal Center Flow) ```mermaid graph TD A[UI_PersonalCenter_SelfMain] --> B{功能選擇} B -->|詳細統計| C[UI_PresonalCenter_dd_Detail] B -->|個人設定| D[UI_PersonalCenter_Settings] B -->|好友管理| E[UI_PersonalCenter_FriendMain] B -->|訪客狀態| F[UI_PersonalCenter_GuestPrompt] B -->|功能鎖定| G[UI_PersonalCenter_Locked] E --> H[UI_PersonalCenter_FriendList] E --> I[UI_PersonalCenter_FriendSearch] H --> J[UI_PersonalCenter_OtherUserMain] F --> K[UI_Login_Main] ``` ## 特殊流程處理 ### 時間門票系統 ```mermaid graph TD A[需要門票功能] --> B[UI_TimeGate_ConfirmUseTicket] B --> C{確認使用} C -->|確認| D[消耗門票繼續] C -->|取消| E[返回上一頁] ``` ### 額外任務系統 ```mermaid graph TD A[UI_BonusMission_Main] --> B{任務狀態} B -->|可完成| C[執行任務] B -->|檢視獎勵| D[獎勵預覽] C --> E[任務完成獎勵] ``` ### 生活模擬系統 ```mermaid graph TD A[UI_PlayLife_Main] --> B{角色狀態} B -->|正常| C[選擇活動] B -->|需要維護| D[角色維護] C --> E[執行活動] E --> F[狀態更新] ``` ## 導航規則 ### 全局導航 - 主學習地圖：`UI_ChallengeLevel_Map` - 個人中心：`UI_PersonalCenter_SelfMain` - 排行榜：`UI_SocialRanking_Main` - 商店：`UI_ItemStore_Main` ### 返回機制 - 每個子流程都有明確的返回路徑 - 支援中途退出確認：`UI_ChallengeLevel_ExitComfirmPopup` - 保存進度機制防止資料丟失 ### 狀態保持 - 用戶登入狀態持久化 - 學習進度即時保存 - 設定偏好本地存儲 ## 異常處理流程 ### 網路異常 - 顯示連線錯誤提示 - 提供重試機制 - 離線模式支援（部分功能） ### 資源不足 - `UI_ScenarioDialog_InsufficientPopup` - 引導至商店或廣告獎勵 - 提供免費獲取方式 ### 權限不足 - 訪客提示：`UI_PersonalCenter_GuestPrompt`、`UI_SocialRanking_GuestPrompt` - 功能鎖定：`UI_PersonalCenter_Locked`、`UI_ChallengeLevel_ChoosePopupLock` - 升級引導流程 ## 關鍵轉換點 (Conversion Points) 1. **註冊轉換**: 訪客 → 註冊用戶 2. **首次付費**: 免費用戶 → 付費用戶 3. **留存關鍵**: 完成首個完整學習循環 4. **社交激活**: 添加首個好友並進行競爭 5. **習慣養成**: 連續7天使用應用 ## 效能考量 - 關鍵路徑頁面載入時間 < 2秒 - 對話評估回應時間 < 3秒 - 離線快取常用內容 - 漸進式載入非關鍵資源 ## 無障礙支援 - 支援螢幕閱讀器 - 鍵盤導航支援 - 高對比度模式 - 文字大小調整 ## 多語言支援 - 介面語言切換 - 學習內容本地化 - RTL語言支援 - 語音辨識多語言 --- 本文件將隨著產品迭代持續更新，確保開發團隊始終有最新的用戶流程指引。