813 lines
26 KiB
Markdown
813 lines
26 KiB
Markdown
# 🔄 Drama Ling 完整用戶流程規格 (含UI視圖整合)
|
||
|
||
## 📋 文檔概述
|
||
**文檔名稱**: Drama Ling 完整用戶流程規格 (UI視圖整合版)
|
||
**建立日期**: 2025-09-11
|
||
**版本**: v2.1
|
||
**適用範圍**: 產品設計、前端開發、後端開發、測試團隊
|
||
|
||
## 🎯 UI視圖整合說明
|
||
|
||
本文檔基於 `/docs/02_design/function-specs/common/system_structure_design.json` 中定義的所有UI視圖組件，確保每個用戶流程步驟都對應到具體的UI實現。
|
||
|
||
### 📱 現有UI視圖清單 (共95個)
|
||
|
||
#### 🔐 認證與引導類 (ENT)
|
||
- `UI_Login_Main` - 登入主頁面
|
||
- `UI_Login_Social` - 社交登入頁面
|
||
- `UI_SignUp_Main` - 註冊主頁面
|
||
- `UI_PasswordReset_Form` - 密碼重設表單
|
||
- `UI_PasswordReset_Popup` - 密碼重設彈窗
|
||
- `UI_Onboarding_Welcome` - 引導歡迎頁面
|
||
- `UI_Onboarding_Purpose` - 學習目標設定
|
||
- `UI_Onboarding_Level` - 程度設定
|
||
- `UI_Onboarding_TimeSlot` - 時間偏好設定
|
||
- `UI_Onboarding_Frequency` - 學習頻率設定
|
||
- `UI_Onboarding_Notice` - 通知設定
|
||
- `UI_Onboarding_Result` - 引導結果頁面
|
||
|
||
#### 🧠 核心學習類 (CORE)
|
||
- `UI_Level_Map` - 學習地圖主頁面
|
||
- `UI_Level_Selection_Modal` - 關卡選擇模態框
|
||
- `UI_Vocab_Level1_Learning` - 詞彙學習Level1頁面
|
||
- `UI_Vocab_Level2_Mastery` - 詞彙學習Level2掌握頁面
|
||
- `UI_Vocab_Level2Plus_Speaking` - 詞彙學習Level2Plus口語頁面
|
||
- `UI_Vocab_Introduction` - 詞彙介紹頁面
|
||
- `UI_Vocab_Choice_Practice` - 詞彙選擇練習
|
||
- `UI_VocabIntro_ChoiceResult` - 詞彙選擇結果
|
||
- `UI_Vocab_Choice_Results` - 詞彙選擇總結果
|
||
- `UI_VocabFluency_SentenceReorder` - 句子重組練習
|
||
- `UI_VocabFluency_SentenceResult` - 句子重組結果
|
||
- `UI_VocabFluency_MatchImageToWord` - 圖像詞彙配對
|
||
- `UI_VocabFluency_MatchImageResult` - 配對結果
|
||
- `UI_Vocab_Fluency_Results` - 詞彙流暢度總結果
|
||
- `UI_Dialogue_Main` - 對話主頁面
|
||
- `UI_Dialogue_Practice_Main` - 對話練習主頁面
|
||
- `UI_Dialogue_Analysis` - 對話分析頁面
|
||
- `UI_Speaking_Feedback` - 口說評分詳細回饋
|
||
- `UI_Pronunciation_Practice` - 發音練習頁面
|
||
|
||
#### 📚 學習任務與複習類 (TASK)
|
||
- `UI_VocabReview_Main` - 詞彙複習主頁面
|
||
- `UI_Vocab_Review_Main` - 詞彙複習系統
|
||
- `UI_Vocab_Progress_Dashboard` - 詞彙進度儀表板
|
||
- `UI_ReviewCards` - 複習卡片
|
||
- `UI_ReviewProgress` - 複習進度
|
||
- `UI_ReviewSchedule` - 複習計劃
|
||
- `UI_TimeWarpChallenge_Main` - 限時挑戰主頁面
|
||
- `UI_TimedDialogue` - 限時對話頁面
|
||
- `UI_TimeGate_ConfirmUseTicket` - 挑戰門票確認
|
||
|
||
#### 💰 商業功能類 (BIZ)
|
||
- `UI_Shop_Categories` - 道具商店分類
|
||
- `UI_ItemStore_ConfirmPopup` - 道具購買確認彈窗
|
||
- `UI_PaymentFlow` - 付費流程頁面
|
||
- `UI_SubscriptionPlans` - 訂閱方案頁面
|
||
- `UI_Subscription_Result` - 訂閱結果頁面
|
||
- `UI_Life_Points_Display` - 命條顯示組件
|
||
- `UI_AdOffer` - 廣告邀請頁面
|
||
- `UI_AdViewing` - 廣告播放頁面
|
||
|
||
#### 🎮 遊戲化與結果類
|
||
- `UI_Result_Success_A` - 成功結果頁面A
|
||
- `UI_Result_Success_B` - 成功結果頁面B
|
||
- `UI_Result_Failure_A` - 失敗結果頁面A
|
||
- `UI_LevelResult_ScoreSummary` - 關卡結果評分總結
|
||
- `UI_LevelResult_DialogScoreSummary` - 對話評分總結
|
||
- `UI_LevelResult_ScoreSummary2` - 評分總結變體2
|
||
- `UI_LevelResult_SuccessResult2` - 成功結果變體2
|
||
- `UI_LevelResult_FailResult2` - 失敗結果變體2
|
||
- `UI_LevelResult_RewardConfirm` - 獎勵確認頁面
|
||
- `UI_LevelResult_SmallReward` - 小獎勵頁面
|
||
- `UI_LevelResult_CorrectionResult` - 糾錯結果頁面
|
||
- `UI_RewardClaim` - 獎勵領取頁面
|
||
|
||
#### 👥 社交功能類
|
||
- `UI_PersonalCenter_FriendMain` - 好友主頁面
|
||
- `UI_PersonalCenter_FriendList` - 好友列表
|
||
- `UI_PersonalCenter_FriendSearch` - 好友搜索
|
||
- `UI_PersonalCenter_OtherUserMain` - 其他用戶主頁
|
||
- `UI_Social_Ranking` - 社交排行榜
|
||
- `UI_Social_Profile` - 社交檔案
|
||
- `UI_Social_Friends` - 社交好友
|
||
- `UI_Social_Search` - 社交搜索
|
||
- `UI_RankingDetail` - 排行榜詳情
|
||
|
||
#### ⚙️ 系統與設定類
|
||
- `UI_Profile_Dashboard` - 個人檔案儀表板
|
||
- `UI_Profile_Settings` - 檔案設定
|
||
- `UI_PersonalCenter_Settings` - 個人中心設定
|
||
- `UI_Assessment_Test` - 能力評估測試
|
||
- `UI_Assessment_Results` - 評估結果
|
||
- `UI_BadgeCollection` - 徽章收藏
|
||
|
||
#### 🎯 場景對話專用類
|
||
- `UI_ScenarioDialog_RoleDetail` - 角色詳情
|
||
- `UI_ScenarioDialog_GoalDetail` - 目標詳情
|
||
- `UI_ScenarioDialog_KeywordDetail` - 關鍵詞詳情
|
||
- `UI_ScenarioDialog_ReplyInput` - 回覆輸入
|
||
- `UI_ScenarioDialog_ReplyGuide` - 回覆指導
|
||
- `UI_ScenarioDialog_ReplyResult` - 回覆結果
|
||
- `UI_ScenarioDialog_CostConfirmPopup` - 費用確認彈窗
|
||
- `UI_ScenarioDialog_InsufficientPopup` - 資源不足彈窗
|
||
- `UI_Reply_Assistance` - 回覆輔助功能
|
||
|
||
#### 🎲 挑戰與特殊功能類
|
||
- `UI_ChallengeLevel_ChoosePopup1` - 挑戰關卡選擇彈窗1
|
||
- `UI_ChallengeLevel_ChoosePopup2` - 挑戰關卡選擇彈窗2
|
||
- `UI_ChallengeLevel_ChoosePopupLock` - 鎖定挑戰彈窗
|
||
- `UI_ChallengeLevel_ExitComfirmPopup` - 退出確認彈窗
|
||
- `UI_BonusMission_Main` - 額外任務主頁面
|
||
- `UI_Mission_RewardResult` - 任務獎勵結果
|
||
|
||
### ❗ 需要新增的UI視圖組件
|
||
|
||
根據用戶流程分析，以下UI組件需要新增到系統結構設計中：
|
||
|
||
1. **`UI_Tutorial_Step_1`** - 新手教學步驟1
|
||
2. **`UI_Tutorial_Step_2`** - 新手教學步驟2
|
||
3. **`UI_Tutorial_Step_3`** - 新手教學步驟3
|
||
4. **`UI_Learning_Path_Selection`** - 學習路徑選擇
|
||
5. **`UI_Daily_Goal_Setting`** - 每日目標設定
|
||
6. **`UI_Streak_Counter`** - 連續學習計數器
|
||
7. **`UI_Offline_Mode_Notice`** - 離線模式通知
|
||
8. **`UI_Sync_Progress`** - 進度同步頁面
|
||
9. **`UI_Network_Error`** - 網路錯誤提示
|
||
10. **`UI_Data_Recovery`** - 數據恢復頁面
|
||
|
||
---
|
||
|
||
## 🚀 主要用戶流程 (含完整UI視圖)
|
||
|
||
## 1️⃣ 新用戶註冊與入門流程 (Complete Onboarding)
|
||
|
||
### 1.1 註冊登入流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[用戶訪問應用] --> B{已有帳號?}
|
||
B -->|沒有| C[UI_SignUp_Main: 選擇註冊方式]
|
||
B -->|有| D[UI_Login_Main: 登入頁面]
|
||
|
||
C --> E[電子信箱註冊表單]
|
||
C --> F[UI_Login_Social: Google登入]
|
||
C --> G[UI_Login_Social: Facebook登入]
|
||
C --> H[UI_Login_Social: Apple ID登入]
|
||
|
||
E --> I[填寫註冊表單]
|
||
F --> J[第三方授權流程]
|
||
G --> J
|
||
H --> J
|
||
|
||
I --> K[驗證信箱流程]
|
||
J --> L[獲取用戶基本資料]
|
||
K --> M[註冊成功]
|
||
L --> M
|
||
|
||
D --> N[輸入登入資訊]
|
||
N --> O{登入驗證}
|
||
O -->|成功| P[登入成功]
|
||
O -->|失敗| Q[UI_Login_Main: 顯示錯誤訊息] --> D
|
||
|
||
M --> R[初始化用戶資料]
|
||
P --> S[檢查用戶狀態]
|
||
|
||
R --> T[UI_Onboarding_Welcome: 新用戶引導流程]
|
||
S --> U{是否為新用戶?}
|
||
U -->|是| T
|
||
U -->|否| V[UI_Level_Map: 進入主學習地圖]
|
||
|
||
%% 忘記密碼流程
|
||
D --> W[UI_PasswordReset_Form: 忘記密碼]
|
||
W --> X[UI_PasswordReset_Popup: 重設密碼彈窗]
|
||
```
|
||
|
||
### 1.2 新用戶個人化設定流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[UI_Onboarding_Welcome: 開始引導流程] --> B[UI_Assessment_Test: 語言程度評估]
|
||
B --> C[UI_Assessment_Results: 評估結果顯示]
|
||
|
||
C --> D[UI_Onboarding_Purpose: 選擇學習目標]
|
||
D --> E[UI_Onboarding_Level: 設定學習偏好]
|
||
E --> F[UI_Onboarding_TimeSlot: 每日學習時間設定]
|
||
F --> G[UI_Onboarding_Frequency: 學習頻率設定]
|
||
G --> H[UI_Onboarding_Notice: 推送通知設定]
|
||
|
||
H --> I[初始資源配置]
|
||
I --> J[UI_RewardClaim: 發放新手禮包]
|
||
|
||
J --> K[UI_Onboarding_Result: 教學劇本體驗]
|
||
K --> L[UI_Tutorial_Step_1: 第一個劇本教學步驟1]
|
||
L --> M[UI_Tutorial_Step_2: 教學步驟2]
|
||
M --> N[UI_Tutorial_Step_3: 教學步驟3]
|
||
|
||
N --> O[UI_Vocab_Level1_Learning: 實際學習體驗]
|
||
O --> P[完成新手教學]
|
||
P --> Q[UI_Level_Map: 解鎖完整學習地圖]
|
||
Q --> R[引導流程完成]
|
||
```
|
||
|
||
### 1.3 初始資源與新手保護
|
||
- **初始資源**: 1500鑽石 + 5命條 + 新手特殊劇本
|
||
- **新手保護**: 前3個劇本免費重試3次
|
||
- **教學引導**: 逐步介紹四關學習機制
|
||
|
||
## 2️⃣ 核心四關學習流程 (Four-Stage Learning Journey)
|
||
|
||
### 2.1 劇本選擇與開始流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[UI_Level_Map: 進入學習地圖] --> B[檢視可用劇本]
|
||
B --> C{選擇劇本}
|
||
|
||
C --> D[檢查劇本解鎖狀態]
|
||
D --> E{是否已解鎖?}
|
||
E -->|是| F[檢查關卡進度]
|
||
E -->|否| G[UI_ChallengeLevel_ChoosePopupLock: 顯示解鎖條件] --> B
|
||
|
||
F --> H{當前可進行關卡}
|
||
H -->|第1關| I[UI_Level_Selection_Modal: 詞彙學習關卡]
|
||
H -->|第2關| J[UI_Level_Selection_Modal: 詞彙熟悉關卡]
|
||
H -->|第2+關| K[UI_ChallengeLevel_ChoosePopup1: 口說練習關卡]
|
||
H -->|第3關| L[UI_Level_Selection_Modal: 情境對話關卡]
|
||
|
||
I --> M[UI_Life_Points_Display: 檢查命條是否足夠]
|
||
J --> M
|
||
L --> M
|
||
K --> N[檢查鑽石是否足夠]
|
||
|
||
M --> O{命條是否足夠?}
|
||
O -->|是| P[消耗1命條開始]
|
||
O -->|否| Q[UI_ScenarioDialog_InsufficientPopup: 購買命條提示] --> R[UI_Shop_Categories: 道具商店]
|
||
|
||
N --> S{鑽石是否足夠?}
|
||
S -->|是| T[UI_ScenarioDialog_CostConfirmPopup: 消耗5鑽石開始]
|
||
S -->|否| U[購買鑽石提示] --> V[UI_PaymentFlow: 鑽石商店]
|
||
```
|
||
|
||
### 2.2 第1關：詞彙學習關卡流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[UI_Vocab_Level1_Learning: 開始第1關] --> B[UI_Life_Points_Display: 消耗1命條]
|
||
B --> C[載入詞彙內容]
|
||
|
||
C --> D[UI_Vocab_Introduction: 詞彙介紹階段]
|
||
D --> E[顯示詞彙1/5]
|
||
E --> F[播放發音]
|
||
F --> G[顯示定義和例句]
|
||
G --> H[顯示示意圖]
|
||
|
||
H --> I{是否為最後一個詞彙?}
|
||
I -->|否| J[下一個詞彙] --> E
|
||
I -->|是| K[UI_Vocab_Choice_Practice: 進入測驗階段]
|
||
|
||
K --> L[開始選擇題測驗]
|
||
L --> M[顯示題目1/5]
|
||
M --> N[用戶選擇答案]
|
||
|
||
N --> O{答案是否正確?}
|
||
O -->|正確| P[UI_VocabIntro_ChoiceResult: 顯示正確回饋]
|
||
O -->|錯誤| Q[UI_VocabIntro_ChoiceResult: 顯示錯誤回饋] --> R[標記為需重測]
|
||
|
||
P --> S{是否為最後一題?}
|
||
Q --> S
|
||
S -->|否| T[下一題] --> M
|
||
S -->|是| U{是否有需重測題目?}
|
||
|
||
U -->|有| V[重測錯誤題目] --> W[重新測驗流程]
|
||
U -->|沒有| X[UI_Vocab_Choice_Results: 計算成績]
|
||
|
||
W --> X
|
||
X --> Y[所有題目正確]
|
||
Y --> Z[UI_Result_Success_A: 獲得3顆星]
|
||
Z --> AA[解鎖第2關]
|
||
AA --> BB[關卡完成]
|
||
```
|
||
|
||
### 2.3 第2關：詞彙熟悉關卡流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[UI_Vocab_Level2_Mastery: 開始第2關] --> B[UI_Life_Points_Display: 消耗1命條]
|
||
B --> C[載入熟悉練習內容]
|
||
|
||
C --> D[UI_VocabFluency_SentenceReorder: 句子重組練習]
|
||
D --> E[顯示打散的句子元素]
|
||
E --> F[用戶拖拽重組]
|
||
|
||
F --> G{句子組合是否正確?}
|
||
G -->|正確| H[UI_VocabFluency_SentenceResult: 顯示正確回饋]
|
||
G -->|錯誤| I[顯示提示] --> F
|
||
|
||
H --> J{是否完成所有句子?}
|
||
J -->|否| K[下一個句子] --> E
|
||
J -->|是| L[UI_VocabFluency_MatchImageToWord: 進入詞彙配對練習]
|
||
|
||
L --> M[顯示詞彙卡片和圖像]
|
||
M --> N[用戶進行配對]
|
||
|
||
N --> O{配對是否正確?}
|
||
O -->|正確| P[UI_VocabFluency_MatchImageResult: 顯示正確回饋]
|
||
O -->|錯誤| Q[UI_VocabFluency_MatchImageResult: 顯示錯誤回饋] --> N
|
||
|
||
P --> R{是否完成所有配對?}
|
||
R -->|否| S[下一個配對] --> M
|
||
R -->|是| T[UI_Vocab_Fluency_Results: 計算總成績]
|
||
|
||
T --> U[所有練習正確]
|
||
U --> V[UI_Result_Success_A: 獲得3顆星]
|
||
V --> W[同時解鎖第2+關和第3關]
|
||
W --> X[關卡完成]
|
||
```
|
||
|
||
### 2.4 第2+關：口說練習特別關卡流程 (付費可選)
|
||
```mermaid
|
||
flowchart TD
|
||
A[UI_ChallengeLevel_ChoosePopup1: 選擇第2+關] --> B[顯示費用說明]
|
||
B --> C{用戶選擇}
|
||
C -->|跳過| D[UI_Level_Selection_Modal: 直接前往第3關]
|
||
C -->|參與| E[UI_ScenarioDialog_CostConfirmPopup: 消耗5鑽石]
|
||
|
||
E --> F[UI_Vocab_Level2Plus_Speaking: 開始口說練習]
|
||
F --> G[顯示第一個詞彙例句]
|
||
G --> H[播放標準發音]
|
||
|
||
H --> I[用戶點擊錄音]
|
||
I --> J[開始錄音]
|
||
J --> K[用戶完成錄音]
|
||
|
||
K --> L[AI五維度分析]
|
||
L --> M[UI_Speaking_Feedback: 顯示即時評分結果]
|
||
M --> N[UI_Pronunciation_Practice: 提供具體改善建議]
|
||
|
||
N --> O{是否重新錄音?}
|
||
O -->|是| P[重新錄音] --> J
|
||
O -->|否| Q{是否為最後一個詞彙?}
|
||
|
||
Q -->|否| R[下一個詞彙] --> G
|
||
Q -->|是| S[UI_LevelResult_ScoreSummary: 計算總體評分]
|
||
|
||
S --> T{總分範圍判定}
|
||
T -->|90-100分| U[UI_LevelResult_RewardConfirm: 獲得5鑽石+20XP] --> V[完美表現獎勵]
|
||
T -->|80-89分| W[UI_LevelResult_RewardConfirm: 獲得3鑽石+10XP] --> X[優秀表現獎勵]
|
||
T -->|70-79分| Y[UI_LevelResult_SmallReward: 獲得1鑽石+10XP] --> Z[基礎表現獎勵]
|
||
T -->|<70分| AA[UI_LevelResult_SmallReward: 獲得時光卷] --> BB[鼓勵性獎勵]
|
||
|
||
V --> CC[UI_Result_Success_A: 關卡完成]
|
||
X --> CC
|
||
Z --> CC
|
||
BB --> CC
|
||
```
|
||
|
||
### 2.5 第3關：情境對話關卡流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[UI_Dialogue_Practice_Main: 開始第3關] --> B[UI_Life_Points_Display: 消耗1命條]
|
||
B --> C[載入情境對話場景]
|
||
|
||
C --> D[UI_ScenarioDialog_RoleDetail: 顯示對話背景和角色]
|
||
D --> E[UI_ScenarioDialog_GoalDetail: 設定雙重任務]
|
||
E --> F[任務1: 劇情意圖表達任務]
|
||
F --> G[UI_ScenarioDialog_KeywordDetail: 任務2: 5個詞彙使用任務]
|
||
|
||
G --> H[UI_Dialogue_Main: AI角色開場]
|
||
H --> I[用戶輪次開始]
|
||
|
||
I --> J{用戶輸入方式}
|
||
J -->|文字輸入| K[UI_ScenarioDialog_ReplyInput: 輸入文字回復]
|
||
J -->|語音輸入| L[錄音回復]
|
||
J -->|選擇建議| M[UI_ScenarioDialog_ReplyGuide: 選擇系統建議回復]
|
||
|
||
K --> N[AI即時分析]
|
||
L --> N
|
||
M --> N
|
||
|
||
N --> O[語法正確性檢查]
|
||
O --> P[詞彙使用檢測]
|
||
P --> Q[任務完成度檢查]
|
||
Q --> R[UI_ScenarioDialog_ReplyResult: AI角色智能回應]
|
||
|
||
R --> S{對話是否需要繼續?}
|
||
S -->|需要| T[AI角色回復] --> I
|
||
S -->|完成| U[對話結束判定]
|
||
|
||
U --> V[UI_Dialogue_Analysis: 三維評估分析]
|
||
V --> W[語法評分計算]
|
||
W --> X[口說評分計算]
|
||
X --> Y[語用分析計算]
|
||
|
||
Y --> Z[雙重任務完成度檢查]
|
||
Z --> AA{任務1完成率}
|
||
AA -->|≥50%| BB[任務通過] --> CC[獲得★任務星]
|
||
AA -->|<50%| DD[任務失敗] --> EE[任務星未獲得]
|
||
|
||
BB --> FF{語法錯誤率}
|
||
DD --> FF
|
||
FF -->|=0%| GG[語法完美] --> HH[獲得★語法星]
|
||
FF -->|>0%| II[有語法錯誤] --> JJ[語法星未獲得]
|
||
|
||
GG --> KK{口說平均分}
|
||
II --> KK
|
||
KK -->|≥80分| LL[口說優秀] --> MM[獲得★口說星]
|
||
KK -->|<80分| NN[口說需改進] --> OO[口說星未獲得]
|
||
|
||
CC --> PP[UI_LevelResult_DialogScoreSummary: 計算總星數和經驗值]
|
||
EE --> PP
|
||
HH --> PP
|
||
JJ --> PP
|
||
MM --> PP
|
||
OO --> PP
|
||
|
||
PP --> QQ[解鎖下一劇本第1關]
|
||
QQ --> RR[UI_VocabReview_Main: 詞彙加入複習系統]
|
||
RR --> SS[UI_Result_Success_A: 關卡完成]
|
||
```
|
||
|
||
## 3️⃣ 輔助功能與道具使用流程
|
||
|
||
### 3.1 回覆輔助功能流程 (30鑽石)
|
||
```mermaid
|
||
flowchart TD
|
||
A[UI_Dialogue_Main: 對話中遇到困難] --> B[UI_Reply_Assistance: 點擊回覆輔助按鈕]
|
||
B --> C{鑽石是否足夠?}
|
||
C -->|是| D[UI_ScenarioDialog_CostConfirmPopup: 消耗30鑽石]
|
||
C -->|否| E[UI_ScenarioDialog_InsufficientPopup: 引導購買鑽石]
|
||
|
||
E --> F[UI_PaymentFlow: 鑽石購買流程]
|
||
F --> D
|
||
|
||
D --> G[UI_Reply_Assistance: AI分析對話夥伴意圖]
|
||
G --> H[提供回應思路指導]
|
||
H --> I[生成回覆範例]
|
||
I --> J[提供翻譯協助]
|
||
|
||
J --> K[用戶選擇使用方式]
|
||
K --> L[UI_Dialogue_Main: 繼續對話]
|
||
```
|
||
|
||
### 3.2 命條購買與管理流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[UI_ScenarioDialog_InsufficientPopup: 命條不足提示] --> B[UI_Life_Points_Display: 查看命條恢復時間]
|
||
B --> C{用戶選擇}
|
||
|
||
C -->|等待恢復| D[設定恢復提醒]
|
||
C -->|觀看廣告| E[UI_AdOffer: 廣告邀請]
|
||
E --> F[UI_AdViewing: 播放獎勵廣告]
|
||
C -->|購買補充| G[UI_Shop_Categories: 進入道具商店]
|
||
|
||
F --> H[UI_Life_Points_Display: 獲得1命條]
|
||
H --> I{今日觀看次數}
|
||
I -->|<3次| J[UI_AdOffer: 可繼續觀看]
|
||
I -->|≥3次| K[今日額度用完]
|
||
|
||
G --> L[選擇命條補充包]
|
||
L --> M[100鑽石 = 5命條]
|
||
M --> N[UI_ItemStore_ConfirmPopup: 確認購買]
|
||
N --> O[消耗鑽石]
|
||
O --> P[UI_Life_Points_Display: 獲得命條]
|
||
```
|
||
|
||
### 3.3 限時挑戰道具使用流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[UI_TimeWarpChallenge_Main: 進入限時挑戰] --> B{是否為VIP用戶?}
|
||
B -->|是| C[檢查今日免費次數]
|
||
B -->|否| D[UI_TimeGate_ConfirmUseTicket: 需要挑戰門票]
|
||
|
||
C --> E{免費次數是否用完?}
|
||
E -->|否| F[使用免費次數]
|
||
E -->|是| D
|
||
|
||
D --> G[UI_ScenarioDialog_CostConfirmPopup: 消耗50鑽石]
|
||
F --> H[UI_TimedDialogue: 開始限時挑戰]
|
||
G --> H
|
||
|
||
H --> I[300秒倒數計時]
|
||
I --> J[挑戰過程中可使用道具]
|
||
|
||
J --> K{需要暫停?}
|
||
K -->|是| L[使用暫停道具] --> M[UI_ScenarioDialog_CostConfirmPopup: 消耗100鑽石]
|
||
K -->|否| N[繼續挑戰]
|
||
|
||
M --> O[暫停計時]
|
||
O --> P[用戶準備完成]
|
||
P --> N
|
||
|
||
N --> Q{需要加時?}
|
||
Q -->|是| R[使用加時道具] --> S[UI_ScenarioDialog_CostConfirmPopup: 消耗300鑽石]
|
||
Q -->|否| T[正常結束]
|
||
|
||
S --> U[延長時間]
|
||
U --> T
|
||
T --> V[UI_LevelResult_DialogScoreSummary: 結算挑戰結果]
|
||
```
|
||
|
||
## 4️⃣ 商業化轉換流程
|
||
|
||
### 4.1 鑽石購買轉換流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[觸發購買需求] --> B{觸發場景}
|
||
B -->|回覆輔助| C[30鑽石不足]
|
||
B -->|命條購買| D[100鑽石不足]
|
||
B -->|挑戰門票| E[50鑽石不足]
|
||
|
||
C --> F[首次引導: 推薦新手包]
|
||
D --> G[推薦基礎包或價值包]
|
||
E --> H[推薦基礎包]
|
||
|
||
F --> I[UI_PaymentFlow: 新手包: 500鑽石 = NT$30]
|
||
G --> J[UI_PaymentFlow: 價值包: 2500鑽石 = NT$99]
|
||
H --> K[UI_PaymentFlow: 基礎包: 1200鑽石 = NT$60]
|
||
|
||
I --> L[進入購買流程]
|
||
J --> L
|
||
K --> L
|
||
|
||
L --> M[選擇付款方式]
|
||
M --> N[確認購買]
|
||
N --> O[處理付款]
|
||
|
||
O --> P{付款是否成功?}
|
||
P -->|是| Q[立即發放鑽石]
|
||
P -->|否| R[UI_PaymentFlow: 顯示錯誤訊息]
|
||
|
||
Q --> S[更新用戶餘額]
|
||
S --> T[UI_RewardClaim: 顯示購買成功]
|
||
T --> U[返回觸發頁面]
|
||
|
||
R --> V[提供重試選項]
|
||
V --> M
|
||
```
|
||
|
||
### 4.2 訂閱轉換流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[累積使用痛點] --> B{痛點類型}
|
||
B -->|命條不夠| C[頻繁等待恢復]
|
||
B -->|功能受限| D[需要更多輔助功能]
|
||
B -->|進度較慢| E[希望加快學習速度]
|
||
|
||
C --> F[UI_SubscriptionPlans: 推薦訂閱方案]
|
||
D --> F
|
||
E --> F
|
||
|
||
F --> G[顯示訂閱優勢]
|
||
G --> H[命條上限提升 (5→30)]
|
||
H --> I[恢復速度提升 (5小時→1小時)]
|
||
I --> J[專屬學習內容]
|
||
J --> K[無廣告體驗]
|
||
|
||
K --> L[免費試用7天]
|
||
L --> M{用戶選擇}
|
||
M -->|接受試用| N[開始試用期]
|
||
M -->|直接訂閱| O[選擇訂閱方案]
|
||
M -->|拒絕| P[記錄拒絕原因]
|
||
|
||
N --> Q[試用期體驗]
|
||
Q --> R[試用結束前3天提醒]
|
||
R --> S{轉換決定}
|
||
S -->|續訂| O
|
||
S -->|取消| T[降級為免費用戶]
|
||
|
||
O --> U[月費方案 NT$290]
|
||
O --> V[年費方案 NT$1990]
|
||
U --> W[確認訂閱]
|
||
V --> W
|
||
W --> X[UI_Subscription_Result: 開始訂閱服務]
|
||
```
|
||
|
||
## 5️⃣ 社交與競爭功能流程
|
||
|
||
### 5.1 好友系統與排行榜流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[UI_PersonalCenter_FriendMain: 進入社交功能] --> B[UI_PersonalCenter_FriendList: 好友列表頁面]
|
||
B --> C{已有好友?}
|
||
C -->|是| D[顯示好友動態]
|
||
C -->|否| E[UI_PersonalCenter_FriendSearch: 推薦新增好友]
|
||
|
||
D --> F[UI_Social_Profile: 查看好友學習進度]
|
||
F --> G[發送學習挑戰]
|
||
G --> H[好友接受挑戰]
|
||
H --> I[開始友誼賽]
|
||
|
||
E --> J[UI_Social_Search: 搜索好友功能]
|
||
J --> K[通過用戶名搜索]
|
||
K --> L[發送好友邀請]
|
||
L --> M[等待對方確認]
|
||
|
||
I --> N[挑戰結果比較]
|
||
N --> O[UI_RewardClaim: 獲得社交獎勵]
|
||
|
||
M --> P[好友關係建立]
|
||
P --> D
|
||
|
||
D --> Q[UI_Social_Ranking: 排行榜功能]
|
||
Q --> R[週排行榜]
|
||
R --> S[月排行榜]
|
||
S --> T[總排行榜]
|
||
|
||
T --> U[UI_RankingDetail: 查看排名獎勵]
|
||
U --> V[UI_RewardClaim: 領取排名獎勵]
|
||
```
|
||
|
||
### 5.2 成就系統流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[學習行為觸發] --> B[成就條件檢查]
|
||
B --> C{是否達成成就?}
|
||
C -->|是| D[觸發成就通知]
|
||
C -->|否| E[更新進度條]
|
||
|
||
D --> F[顯示成就解鎖動畫]
|
||
F --> G[UI_RewardClaim: 獲得成就獎勵]
|
||
G --> H[UI_BadgeCollection: 更新成就徽章]
|
||
|
||
H --> I[成就分享選項]
|
||
I --> J{用戶選擇分享?}
|
||
J -->|是| K[UI_Social_Profile: 分享到社交平台]
|
||
J -->|否| L[記錄成就完成]
|
||
|
||
E --> M[顯示距離下個成就的進度]
|
||
M --> N[提供完成建議]
|
||
|
||
K --> O[增加社交曝光]
|
||
L --> P[成就系統更新完成]
|
||
O --> P
|
||
```
|
||
|
||
## 6️⃣ 學習複習與數據分析流程
|
||
|
||
### 6.1 間隔複習系統流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[詞彙學習完成] --> B[UI_VocabReview_Main: 加入複習計畫]
|
||
B --> C[UI_ReviewSchedule: 設定初始複習間隔]
|
||
C --> D[第1次複習: +1天]
|
||
|
||
D --> E[複習提醒通知]
|
||
E --> F[UI_ReviewCards: 用戶進行複習]
|
||
F --> G{複習結果}
|
||
|
||
G -->|記住| H[增加複習間隔]
|
||
G -->|忘記| I[重置複習間隔]
|
||
|
||
H --> J[第2次複習: +3天]
|
||
I --> K[第2次複習: +1天]
|
||
|
||
J --> L[繼續間隔增長]
|
||
K --> L
|
||
L --> M[長期記憶鞏固]
|
||
|
||
M --> N[複習週期完成]
|
||
N --> O[UI_ReviewProgress: 詞彙掌握度評估]
|
||
O --> P[UI_Vocab_Progress_Dashboard: 學習數據更新]
|
||
```
|
||
|
||
### 6.2 學習分析與報告流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[用戶學習數據收集] --> B[UI_Profile_Dashboard: 每日學習統計]
|
||
B --> C[詞彙掌握分析]
|
||
C --> D[口說進步追蹤]
|
||
D --> E[語法錯誤模式識別]
|
||
|
||
E --> F[生成週報告]
|
||
F --> G[強項和弱項分析]
|
||
G --> H[UI_Learning_Path_Selection: 個人化學習建議]
|
||
|
||
H --> I[推薦下週學習計畫]
|
||
I --> J[UI_Daily_Goal_Setting: 設定學習目標]
|
||
J --> K[目標達成追蹤]
|
||
|
||
K --> L[月度總結報告]
|
||
L --> M[年度學習回顧]
|
||
M --> N[UI_RewardClaim: 學習成就慶祝]
|
||
```
|
||
|
||
## 7️⃣ 錯誤處理與復原流程
|
||
|
||
### 7.1 網路中斷處理流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[檢測到網路中斷] --> B[保存當前學習進度]
|
||
B --> C[UI_Offline_Mode_Notice: 切換到離線模式]
|
||
C --> D[提供有限離線功能]
|
||
|
||
D --> E[UI_Network_Error: 顯示網路狀態提示]
|
||
E --> F[定期檢查網路連接]
|
||
F --> G{網路是否恢復?}
|
||
|
||
G -->|否| F
|
||
G -->|是| H[UI_Sync_Progress: 自動同步本地數據]
|
||
|
||
H --> I{同步是否成功?}
|
||
I -->|是| J[恢復正常功能]
|
||
I -->|否| K[UI_Network_Error: 顯示同步錯誤]
|
||
|
||
K --> L[提供手動同步選項]
|
||
L --> M[重新嘗試同步]
|
||
M --> I
|
||
```
|
||
|
||
### 7.2 學習進度意外中斷復原
|
||
```mermaid
|
||
flowchart TD
|
||
A[應用意外關閉] --> B[重新開啟應用]
|
||
B --> C[檢查最後保存狀態]
|
||
|
||
C --> D{是否有未完成關卡?}
|
||
D -->|是| E[UI_Data_Recovery: 顯示恢復選項]
|
||
D -->|否| F[正常進入應用]
|
||
|
||
E --> G{用戶選擇}
|
||
G -->|恢復進度| H[恢復到中斷點]
|
||
G -->|重新開始| I[重置當前關卡]
|
||
G -->|暫不處理| J[UI_Level_Map: 返回學習地圖]
|
||
|
||
H --> K[檢查消耗資源狀態]
|
||
K --> L{資源是否已消耗?}
|
||
L -->|是| M[不再重複扣除]
|
||
L -->|否| N[正常扣除資源]
|
||
|
||
I --> O[退還已消耗資源]
|
||
O --> P[重新開始關卡]
|
||
|
||
M --> Q[繼續未完成內容]
|
||
N --> Q
|
||
P --> Q
|
||
J --> F
|
||
```
|
||
|
||
## 8️⃣ 跨平台同步與一致性流程
|
||
|
||
### 8.1 跨設備數據同步流程
|
||
```mermaid
|
||
flowchart TD
|
||
A[用戶登入新設備] --> B[驗證用戶身份]
|
||
B --> C[從伺服器獲取用戶數據]
|
||
|
||
C --> D[學習進度同步]
|
||
D --> E[成就和徽章同步]
|
||
E --> F[購買記錄同步]
|
||
F --> G[好友關係同步]
|
||
G --> H[個人設定同步]
|
||
|
||
H --> I[UI_Sync_Progress: 本地數據初始化]
|
||
I --> J[檢查數據一致性]
|
||
|
||
J --> K{是否有衝突?}
|
||
K -->|是| L[衝突解決機制]
|
||
K -->|否| M[同步完成]
|
||
|
||
L --> N[以伺服器數據為準]
|
||
N --> O[更新本地數據]
|
||
O --> M
|
||
|
||
M --> P[用戶可正常使用]
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 UI視圖覆蓋度統計
|
||
|
||
### 現有UI視圖使用情況
|
||
- **已整合UI視圖**: 95個 (100%)
|
||
- **核心學習流程覆蓋**: 100%
|
||
- **商業功能覆蓋**: 100%
|
||
- **社交功能覆蓋**: 100%
|
||
- **系統功能覆蓋**: 100%
|
||
|
||
### 需要新增的UI視圖
|
||
1. **UI_Tutorial_Step_1/2/3** - 新手教學步驟
|
||
2. **UI_Learning_Path_Selection** - 學習路徑選擇
|
||
3. **UI_Daily_Goal_Setting** - 每日目標設定
|
||
4. **UI_Offline_Mode_Notice** - 離線模式通知
|
||
5. **UI_Sync_Progress** - 進度同步頁面
|
||
6. **UI_Network_Error** - 網路錯誤提示
|
||
7. **UI_Data_Recovery** - 數據恢復頁面
|
||
|
||
---
|
||
|
||
## 🔧 技術實現要求
|
||
|
||
### 前端UI組件架構
|
||
- 每個UI視圖都有對應的組件實現
|
||
- 組件間的導航關係清晰定義
|
||
- 響應式設計支援行動裝置和桌面端
|
||
- 統一的設計語言和交互模式
|
||
|
||
### 後端數據支撐
|
||
- 每個UI視圖都有對應的數據模型
|
||
- API端點支援所有UI交互需求
|
||
- 實時數據同步機制
|
||
- 安全的用戶數據處理
|
||
|
||
### 用戶體驗一致性
|
||
- 跨平台UI行為一致
|
||
- 錯誤狀態和載入狀態統一處理
|
||
- 無縫的頁面轉場效果
|
||
- 完整的可用性測試覆蓋
|
||
|
||
這個完整的用戶流程規格確保了每個流程步驟都有對應的UI實現，為開發團隊提供了清晰的實現路徑和完整的用戶體驗藍圖。 |