個人資料#
頁面位置#
/profile 或 /users/me/profile
功能說明#
個人資料頁面是用戶管理自己帳號資訊、查看學習成就的中心。
頁面結構#
個人資訊區#
顯示資訊:
- 頭像 - Google 帳號頭像或預設頭像
- 用戶名稱 - 顯示名稱
- Email - 註冊 Email(僅自己可見)
- 當前等級 - Lv.1 到 Lv.36
- 當前經驗值 - 累積的總 XP
- 稱號 - 根據等級顯示的稱號
- 全站排名 - 在排行榜上的名次
編輯功能:
- 點擊「編輯個人資料」按鈕
- 可以修改:
- 顯示名稱
- 個人簡介
- 頭像(上傳自訂頭像)
- 點擊「儲存」完成修改
等級進度條#
視覺化顯示:
Lv.15 ▓▓▓▓▓▓▓▓▓▓░░░░░░ 65% ► Lv.16
15,000 XP / 23,000 XP顯示內容:
- 當前等級
- 到下一級還需要多少經驗值
- 進度百分比
- 進度條視覺效果
範例:
- 小美目前 Lv.15,有 15,000 XP
- 升到 Lv.16 需要 23,000 XP
- 還需要:23,000 - 15,000 = 8,000 XP
- 進度:15,000 / 23,000 = 65%
學習統計#
課程統計:
- 已購買課程數量
- 進行中的課程
- 已完成的課程
- 總學習時數
任務統計:
- 已完成影片數量
- 已領取獎勵數量
- 總完成率
挑戰統計:
- 已完成道館數量
- 通過的挑戰數
- 挑戰通過率
- 獲得的挑戰經驗值
已購買課程列表#
顯示內容: 每個課程顯示:
- 課程封面
- 課程名稱
- 購買日期
- 學習進度(百分比)
- 「繼續學習」按鈕
操作:
- 點擊課程卡片或「繼續學習」進入學習旅程
- 顯示最近一次觀看的位置
- 自動從上次停止的地方繼續
成就徽章(未來功能)#
預留區域:
- 完成特定目標可獲得徽章
- 例如:
- 完成第一門課程
- 連續學習 7 天
- 通過所有道館
- 達到 Lv.20
- 進入排行榜前 10 名
隱私設定#
公開資訊#
其他用戶可以看到:
- 用戶名稱
- 頭像
- 等級
- 經驗值
- 稱號
- 排行榜排名
私密資訊#
只有自己可以看到:
- 購買課程清單
- 學習進度詳情
- 影片觀看記錄
- 挑戰提交內容
隱私控制(未來功能)#
計劃新增的隱私設定:
- 是否顯示在排行榜
- 是否公開個人資料頁面
- 是否允許其他用戶查看成就
帳號管理#
修改密碼#
針對 Email 帳號:
- 點擊「修改密碼」
- 輸入當前密碼
- 輸入新密碼
- 確認新密碼
- 點擊「儲存」
針對 Google 帳號:
- Google OAuth 用戶無需設定密碼
- 密碼由 Google 管理
- 顯示「透過 Google 登入」標記
刪除帳號(未來功能)#
計劃新增的帳號刪除功能:
- 點擊「刪除帳號」
- 確認刪除(需要輸入密碼)
- 所有資料將被永久刪除
- 包含:學習記錄、購買記錄、挑戰提交
登出#
- 點擊右上角頭像選單
- 選擇「登出」
- 清除本地登入狀態
- 返回首頁
範例:小美的個人資料頁面#
╔═══════════════════════════════════════════════════════════╗
║ 👤 小美的個人資料 ║
╠═══════════════════════════════════════════════════════════╣
║ ║
║ [頭像] 小美 (Mary Wang) ║
║ mary@example.com ║
║ Lv.15 - 中級冒險者 ║
║ 15,000 XP ║
║ 全站排名:#6 ║
║ ║
║ [編輯個人資料] ║
║ ║
╠═══════════════════════════════════════════════════════════╣
║ 📊 等級進度 ║
║ ║
║ Lv.15 ▓▓▓▓▓▓▓▓▓▓░░░░░░ 65% ► Lv.16 ║
║ 15,000 XP / 23,000 XP ║
║ 還需要 8,000 XP 即可升級! ║
║ ║
╠═══════════════════════════════════════════════════════════╣
║ 📚 學習統計 ║
║ ║
║ 課程: ║
║ • 已購買:2 門課程 ║
║ • 進行中:1 門 ║
║ • 已完成:1 門 ║
║ • 總學習時數:25 小時 ║
║ ║
║ 任務: ║
║ • 已完成影片:30 支 ║
║ • 已領取獎勵:28 次 ║
║ • 完成率:93% ║
║ ║
║ 挑戰: ║
║ • 已完成道館:3 個 ║
║ • 通過挑戰:6 題 ║
║ • 通過率:100% ║
║ ║
╠═══════════════════════════════════════════════════════════╣
║ 🎓 已購買課程 ║
║ ║
║ ┌─────────────────────────────────────────┐ ║
║ │ 軟體設計模式精通之旅 │ ║
║ │ 講師:水球 │ ║
║ │ 購買日期:2024-10-15 │ ║
║ │ 進度:▓▓▓▓▓▓▓▓░░ 80% │ ║
║ │ [繼續學習] │ ║
║ └─────────────────────────────────────────┘ ║
║ ║
║ ┌─────────────────────────────────────────┐ ║
║ │ AI x BDD 測試驅動開發 │ ║
║ │ 講師:水球 │ ║
║ │ 購買日期:2024-11-01 │ ║
║ │ 進度:▓░░░░░░░░░ 10% │ ║
║ │ [繼續學習] │ ║
║ └─────────────────────────────────────────┘ ║
║ ║
╚═══════════════════════════════════════════════════════════╝用戶旅程範例#
新手用戶(小明)#
第一次登入:
- 使用 Google 帳號登入
- 系統自動創建帳號
- 進入個人資料頁面
- 顯示:
- Lv.1
- 0 XP
- 無已購買課程
- 全站排名:#50
一週後:
- 購買了第一門課程
- 完成 5 支影片
- 領取 500 XP
- 升級到 Lv.3
- 個人資料更新:
- 顯示 1 門已購買課程
- 進度 20%
- 排名上升到 #30
進階用戶(小華)#
持續學習三個月:
- 購買 3 門課程
- 完成 2 門課程(100% 進度)
- 完成 8 個道館挑戰
- 累積 25,000 XP
- 達到 Lv.16
- 個人資料顯示:
- 3 門已購買課程
- 2 門已完成
- 總學習時數 80 小時
- 全站排名:#5
查看成就:
- 完成度:67%(2/3 門課程)
- 挑戰通過率:95%
- 獲得稱號:「高級冒險者」
- 接近「技術專家」稱號(需要 Lv.18)
激勵設計#
進度視覺化#
- 等級進度條讓用戶清楚看到離升級還有多遠
- 課程完成度百分比激勵繼續學習
- 統計數字展示學習成果
目標設定#
個人資料頁面幫助用戶設定目標:
- 「再 8,000 XP 就能升級了!」
- 「這門課程只剩 20% 就能完成!」
- 「再完成 2 個道館就能達成目標!」
成就感#
看到自己的進步:
- 等級提升
- 排名上升
- 課程完成數增加
- 學習時數累積