S-01 Welcome Page
內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限
歡迎與入口頁
🎨 Figma: start_page 🔗
🎯 功能定位
App 首次入口頁面。帳號由管理員端提前創建(無需自行註冊)。此頁僅提供登入入口與語言切換,不允許直接進入主系統。
🧱 畫面結構
- Header:
[ Nihao Academy ]← App Logo - Body:
(Logo)+[ Mascot Anim ]← 吉祥物 GIF (A-40 配置) - Tagline:
"Ready to learn Mandarin?" - CTA Area:
- Log In ← Primary CTA (Filled)
設計參考: 歡迎頁背景建議使用藍色漸層(Primary Gradient),按鈕使用 Primary Button / Secondary Button 樣式。
📦 區塊說明
| # | 區塊 | 元件 | 行為/交互 | 狀態 | 備註 |
|---|---|---|---|---|---|
| 1 | Identity | Mascot Area | 播放預設 Gif | Animated | 根據全局設定顯示不同階段吉祥物 |
| 2 | Action | Login Button | 點擊跳轉 S-02 | Normal / Pressed | 視覺權重最高 (Filled) |
🔁 交互流程圖
正在載入流程圖…
⚙️ 狀態管理
| 狀態 | 觸發條件 | 畫面表現 |
|---|---|---|
| Normal | 正常顯示 | 按鈕可用 |
| Disabled | 初始化未完成或異常 | 按鈕灰階禁用 |
| Error | 語言載入失敗 | 顯示提示訊息 |
🔎 邏輯自我檢查
- 不可直接進入 S-10 Home ✔
- 語言切換不影響登入流程 ✔
- 導航流向與後續頁面一致 ✔