docs: create comprehensive user flow specification and unify UI naming
- Create detailed user flow specification with 6 major flow patterns - Add Mermaid diagrams for visual flow representation - Unify all UI naming to follow UI_[pattern] convention - Add 71 view definitions to system structure design - Update navigation references across all features - Include complete onboarding, learning, social, and monetization flows 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
|
|
@ -0,0 +1,316 @@
|
|||
# 用戶流程規格文件 (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語言支援
|
||||
- 語音辨識多語言
|
||||
|
||||
---
|
||||
|
||||
本文件將隨著產品迭代持續更新,確保開發團隊始終有最新的用戶流程指引。
|
||||
|
After Width: | Height: | Size: 55 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 55 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 47 KiB |