學習地圖功能規格文檔
📋 功能概述
功能名稱: 學習地圖導航系統
建立日期: 2025-09-08
最後更新: 2025-09-08
負責團隊: 產品/設計/開發
主要功能
- 階段化學習路徑：13階段×20劇本×3關卡的完整學習架構
- 順序解鎖機制：必須按順序完成前置關卡才能解鎖後續內容
- 關卡選擇系統：支援詞彙認識、詞彙熟悉、對話訓練三種關卡類型
- 進度可視化：清楚顯示當前學習進度和成就狀態
- 星級評價系統：基於三維度表現給予1-3星評價
適用場景
- 新用戶學習路徑規劃和引導
- 日常學習內容的選擇和導航
- 學習進度的查看和管理
- 關卡成就的展示和炫耀
與其他功能的關聯
- 情境對話系統: 地圖關卡跳轉到具體對話場景
- 詞彙學習系統: 地圖關卡跳轉到詞彙練習模組
- 命條系統: 關卡挑戰前檢查命條資源狀態
- 成就系統: 關卡完成觸發成就和徽章解鎖
- 訂閱系統: VIP用戶可解鎖專屬關卡內容
📱 涉及的UI畫面
主要畫面
- UI_Level_Map - 學習地圖主畫面
- UI_Level_Selection_Modal - 關卡選擇彈窗
- UI_Level_Selection_Modal_A - 基礎關卡選擇界面
- UI_Level_Selection_Modal_B - 進階關卡選擇界面
- UI_Level_Locked_Modal - 關卡鎖定提示彈窗
輔助畫面
- UI_Cost_Confirm_Popup - 關卡成本確認彈窗
- UI_Insufficient_Resources - 資源不足提示頁面
- UI_Task_Display - 任務進度顯示組件
🎯 詳細畫面規格
UI_Level_Map - 學習地圖主畫面
功能說明
- 畫面目的: 為用戶提供完整的學習路徑導航，清楚展示13階段學習進度和關卡狀態
- 進入條件: 完成用戶註冊和等級評估，或從底部導航進入
- 退出條件: 選擇具體關卡進入學習，或切換到其他功能模組
畫面欄位細節
| 欄位名稱 |
資料類型 |
必填 |
預設值 |
驗證規則 |
顯示條件 |
| 當前階段編號 |
Number |
是 |
1 |
1-13 |
始終顯示 |
| 階段名稱 |
String |
是 |
- |
5-50字 |
始終顯示 |
| 階段背景圖 |
Image URL |
是 |
- |
有效圖片格式 |
始終顯示 |
| 階段完成度 |
Number |
是 |
0 |
0-100% |
始終顯示 |
| 可用劇本數量 |
Number |
是 |
0 |
0-20+ |
始終顯示 |
| 已完成關卡數 |
Number |
是 |
0 |
≥0 |
始終顯示 |
| 總關卡數 |
Number |
是 |
60 |
≥60 |
始終顯示 |
| 累積星數 |
Number |
是 |
0 |
≥0 |
始終顯示 |
| 連續學習天數 |
Number |
是 |
0 |
≥0 |
始終顯示 |
| 用戶命條數量 |
Number |
是 |
5 |
0-5 |
始終顯示 |
| 用戶鑽石數量 |
Number |
是 |
0 |
≥0 |
始終顯示 |
| 今日推薦關卡 |
Object |
否 |
null |
關卡物件 |
有推薦時顯示 |
| 特殊活動關卡 |
Array |
否 |
[] |
活動陣列 |
有活動時顯示 |
互動元素
| 元素名稱 |
元素類型 |
點擊行為 |
狀態變化 |
備註 |
| 關卡節點 |
六角形按鈕 |
開啟關卡選擇彈窗 |
正常->選中 |
不同狀態有不同顏色 |
| 上一階段按鈕 |
按鈕 |
切換到上一學習階段 |
- |
第1階段時禁用 |
| 下一階段按鈕 |
按鈕 |
切換到下一學習階段 |
- |
未解鎖時禁用 |
| 階段選擇下拉 |
下拉選單 |
快速跳轉到指定階段 |
- |
只顯示已解鎖階段 |
| 進度總覽按鈕 |
按鈕 |
查看整體學習統計 |
- |
跳轉到個人中心 |
| 每日任務按鈕 |
按鈕 |
查看今日學習任務 |
- |
跳轉到任務系統 |
| 好友排行按鈕 |
按鈕 |
查看好友學習排名 |
- |
跳轉到排行榜 |
| 設定按鈕 |
按鈕 |
開啟學習設定選項 |
- |
個人化學習參數 |
使用者操作流程
- 地圖瀏覽: 進入地圖 → 查看當前階段 → 瀏覽可用關卡 → 查看學習進度
- 關卡選擇: 點擊關卡節點 → 確認關卡類型 → 檢查資源需求 → 確認進入
- 階段切換: 使用階段按鈕 → 或下拉選單 → 快速跳轉到目標階段 → 查看新階段內容
- 進度查看: 檢查完成度 → 查看星級評價 → 確認下一個目標 → 規劃學習計劃
異常狀況處理
- 資源不足: 顯示資源不足提示 → 引導到商店購買 → 或提供免費獲得方式
- 網路中斷: 顯示離線模式 → 載入快取內容 → 恢復連線時同步進度
- 關卡載入失敗: 顯示載入錯誤 → 提供重試選項 → 或跳到其他可用關卡
UI_Level_Selection_Modal - 關卡選擇彈窗
功能說明
- 畫面目的: 當用戶點擊地圖關卡時，顯示該關卡的詳細資訊和不同類型的學習選項
- 進入條件: 從學習地圖點擊任意關卡節點
- 退出條件: 選擇具體關卡類型進入學習，或取消關閉彈窗
畫面欄位細節
| 欄位名稱 |
資料類型 |
必填 |
預設值 |
驗證規則 |
顯示條件 |
| 劇本名稱 |
String |
是 |
- |
5-100字 |
始終顯示 |
| 劇本描述 |
String |
是 |
- |
20-300字 |
始終顯示 |
| 劇本預覽圖 |
Image URL |
是 |
- |
有效圖片格式 |
始終顯示 |
| 難度等級 |
Number |
是 |
1 |
1-5星 |
始終顯示 |
| 預估學習時間 |
Number |
是 |
10 |
5-60分鐘 |
始終顯示 |
| 核心詞彙數量 |
Number |
是 |
5 |
3-15個 |
始終顯示 |
| 關卡完成狀態 |
Object |
是 |
- |
狀態物件 |
始終顯示 |
| 獲得星數 |
Number |
是 |
0 |
0-3星 |
已完成關卡顯示 |
| 關卡獎勵預覽 |
Object |
是 |
- |
獎勵物件 |
始終顯示 |
互動元素
| 元素名稱 |
元素類型 |
點擊行為 |
狀態變化 |
備註 |
| 詞彙認識關卡按鈕 |
按鈕 |
進入詞彙介紹和練習 |
- |
第一個必須完成的關卡 |
| 詞彙熟悉關卡按鈕 |
按鈕 |
進入詞彙應用練習 |
- |
需要先完成詞彙認識 |
| 對話訓練關卡按鈕 |
按鈕 |
進入情境對話練習 |
- |
需要先完成前兩個關卡 |
| 限時挑戰按鈕 |
按鈕 |
進入300秒限時模式 |
- |
需要額外鑽石消費 |
| 預覽核心詞彙按鈕 |
按鈕 |
查看本劇本重點詞彙 |
- |
方便預習準備 |
| 查看劇本背景按鈕 |
按鈕 |
了解劇本情境設定 |
- |
增加學習代入感 |
| 關閉彈窗按鈕 |
按鈕 |
關閉選擇彈窗 |
顯示->隱藏 |
返回地圖界面 |
UI_Level_Locked_Modal - 關卡鎖定提示彈窗
功能說明
- 畫面目的: 當用戶嘗試進入未解鎖關卡時，說明解鎖條件和提供解決方案
- 進入條件: 點擊尚未解鎖的關卡節點
- 退出條件: 了解解鎖條件後關閉，或前往完成前置關卡
畫面欄位細節
| 欄位名稱 |
資料類型 |
必填 |
預設值 |
驗證規則 |
顯示條件 |
| 鎖定原因 |
String |
是 |
- |
20-100字 |
始終顯示 |
| 前置關卡名稱 |
String |
是 |
- |
5-100字 |
始終顯示 |
| 前置關卡進度 |
Number |
是 |
0 |
0-100% |
始終顯示 |
| 建議完成時間 |
Number |
是 |
30 |
10-180分鐘 |
始終顯示 |
| 解鎖獎勵預覽 |
Object |
是 |
- |
獎勵物件 |
始終顯示 |
互動元素
| 元素名稱 |
元素類型 |
點擊行為 |
狀態變化 |
備註 |
| 前往前置關卡按鈕 |
按鈕 |
跳轉到需要完成的關卡 |
- |
主要行動按鈕 |
| 查看解鎖條件按鈕 |
按鈕 |
顯示詳細解鎖要求 |
- |
提供更多資訊 |
| 了解獎勵按鈕 |
按鈕 |
展示解鎖後的獎勵 |
- |
增加動機 |
| 關閉按鈕 |
按鈕 |
關閉提示彈窗 |
顯示->隱藏 |
返回地圖界面 |
🔄 完整使用者流程
主要流程圖
[底部導航/首頁進入]
↓
[UI_Level_Map 學習地圖] → [瀏覽當前階段關卡]
↓
[點擊關卡節點] → [UI_Level_Selection_Modal 關卡選擇]
↓
[選擇關卡類型] → [UI_Cost_Confirm_Popup 成本確認]
↓
[確認進入] → [跳轉到對應學習功能]
分支流程
- 關卡鎖定: 點擊鎖定關卡 → UI_Level_Locked_Modal → 了解解鎖條件 → 前往前置關卡
- 資源不足: 確認關卡消費 → UI_Insufficient_Resources → 前往商店購買 → 或等待資源恢復
- 階段切換: 使用導航按鈕 → 快速跳轉到其他階段 → 查看不同階段內容
- 進度查看: 點擊統計按鈕 → 跳轉個人中心 → 查看詳細學習分析
錯誤流程
- 網路載入失敗: 顯示載入錯誤 → 提供重試選項 → 或啟用離線模式
- 關卡數據錯誤: 顯示數據異常 → 自動修復或重新載入 → 記錄錯誤日誌
📊 商業邏輯規則
關卡解鎖機制
- 順序闖關: 必須按照 詞彙認識 → 詞彙熟悉 → 對話訓練 的順序完成
- 階段解鎖: 完成當前階段80%以上關卡才能解鎖下一階段
- 星級獎勵: 詞彙認識和詞彙熟悉關卡通關自動給予3星，對話訓練根據表現給1-3星
學習進度算法
- 完成度計算: (已完成關卡數 / 當前可用關卡總數) × 100%
- 學習天數判定: 當日完成至少一個關卡即計為學習一天
- 連續獎勵: 7天連續、14天連續、30天連續分別給予不同獎勵
資源消耗規則
- 詞彙關卡: 免費進入，答錯扣命條
- 對話訓練: 免費進入，失敗扣命條
- 限時挑戰: 首次免費，後續50鑽石/次
- 命條不足: 無法開始新關卡，需要購買或等待恢復
🧪 測試要點
功能測試
介面測試
整合測試
📝 開發注意事項
前端開發
- 地圖需要支援平滑滾動和縮放功能
- 六角形關卡節點需要CSS動畫效果
- 進度條需要平滑的填充動畫
- 彈窗需要優雅的彈出和關閉過渡
後端開發
- 關卡解鎖邏輯需要嚴格的權限檢查
- 學習進度數據需要即時同步
- 連續學習天數需要準確的時區處理
- 關卡推薦算法需要個人化考量
整合注意事項
- 關卡跳轉需要保持用戶狀態
- 進度數據需要跨平台同步
- 離線模式需要支援基本瀏覽功能
- 資源檢查需要防止競態條件
📚 參考資源
- UI截圖:
docs/02_design/views/UI_Level_Map.pngdocs/02_design/views/UI_Level_Selection_Modal.pngdocs/02_design/views/UI_Level_Locked_Modal.png
- User Flow:
docs/04_technical/user-flow-specification.md - 學習地圖導航章節
- API文檔:
docs/04_technical/api/learning-content.md
- 商業規則:
docs/02_design/business-logic-rules.md - 關卡結構系統章節
- 設計規範:
docs/02_design/ui-ux-guidelines.md
📅 版本歷史
| 版本 |
日期 |
修改內容 |
修改者 |
| v1.0 |
2025-09-08 |
初始版本建立，基於13階段學習架構設計 |
Claude AI |
文檔狀態: 🟢 已完成
最後檢查: 2025-09-08
下次檢查: 2025-09-15