S-10 Home
內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限
學習首頁
🎨 Figma: Home 🔗
🎯 功能定位
學習入口與動力中心。以遊戲化浮空島場景展示學習進度、積分與快捷入口。學生在此可一覽 EXP 累積值與 Elalitte 餘額，並透過 Bottom Nav 訪問 STUDY / MISSION / ZULU / SETTINGS。
🧱 畫面結構
- Greeting:
"Hello! Alex"+"Super Star"← 個人化鼓勵 - Mascot:
[ Mascot GIF ]← 吉祥物動態（表情隨機輪播） - EXP Display:
⭐ 4327← 累積經驗值（Figma 採用遊戲化浮空島場景展示） - Elalitte 礦區（右上角）:
- Elalitte 數量顯示
- 任務達成時變為稀有礦物圖樣，可點選採集
- Zuzu Collection Bag（右上角）: 進入 Zuzu 收集畫面
- 信箱圖標（右上角）:
[📬]— 接收管理員 / 教師發送的通知 - Bottom Nav:
[HOME] [STUDY] [MISSION] [ZULU] [SETTINGS]
設計參考: 積分展示參考 Figma 遊戲化島嶼場景。吉祥物使用綠色系，按鈕樣式參考 Primary Button。
📦 區塊說明
| # | 區塊 | 元件 | 行為/交互 | 狀態 | 備註 |
|---|---|---|---|---|---|
| 1 | Greeting | 個人化文字 | 顯示學生暱稱 + 鼓勵語 | 靜態 | Figma: "Hello! Alex" + "Super Star" |
| 2 | Mascot | GIF Area | 播放隨機動畫/台詞 | 動態 | 情感陪伴與鼓勵 |
| 3 | Points | EXP 數值 | 累積顯示（答對 1 題 = 10 EXP） | 即時更新 | 不消耗，用於等級展示 |
| 4 | Points | Elalitte 礦區 | 顯示當前 Elalitte 數量 | 即時更新 | 完成 Mission 獲得，用於 ZULU 抽卡 |
| 5 | Collection | Bag Icon | 點擊進入 Zuzu 收集畫面 (S-08) | Normal | 右上角入口 |
| 6 | Inbox | 📬 信箱圖標 | 點擊查看管理員 / 教師發送的通知 | Normal + Badge | 有新通知時顯示未讀數量 |
| 7 | Entry | STUDY Tab | 點擊切換至練習選擇 (S-06) | Primary | 內含 DH / SS / Trophy Room 入口 |
📬 信箱功能
⚠️ Figma 缺失：信箱功能在 Figma 中無對應設計。
學生可在此接收來自管理員（透過 A-91 Broadcast）和教師（透過 T-03 Broadcast）發送的通知。
| 功能 | 說明 |
|---|---|
| 通知列表 | 按發送時間倒序顯示通知 |
| 未讀標記 | 有新通知時信箱圖標顯示 Badge 未讀數量 |
| 通知來源 | 管理員公告 (System) / 教師通知 (Notice) |
🎨 吉祥物表情規則
- A-1 Happy (快樂的) — 權重 3
- A-2 Satisfied (滿足的) — 權重 2
- A-3 Excited (興奮的) — 權重 2
- A-4 Curious (好奇的) — 權重 2
- A-5 Hungry (餓的) — 權重 1
- A-6 Tired (累的) — 權重 1
- A-7 Cold (冷的) — 權重 1
🎨 視覺層級建議
- 積分區塊設計：EXP 為畫面核心數值。Elalitte 礦區在有任務可採集時轉為稀有礦物圖樣，提供視覺提示。
- 里程碑激勵：當 EXP 突破關鍵數值時，吉祥物觸發特殊賀卡彈窗。這直接聯動到 S-30 Trophy Room 勳章標註。
- 數據流動：完成練習回到首頁時，動畫效果應為練習獲得的 EXP（例如 +100）飛入 EXP 數值區。
🔎 邏輯自我檢查
- 同步性：EXP 必須與後端資料庫嚴格同步，防止學生更換裝置後數據丟失。
- 不設排行：首頁僅顯示個人積分，不顯示他人排行，以減少低齡學生的挫敗感。
- Elalitte 礦區：任務達成時觸發視覺變化（稀有礦物圖樣），提供明確的採集提示。