Skip to content

S-01 Welcome Page

學生端登入與設定設計規格
畫面用途

App 首次入口頁面。帳號由管理員端提前創建(無需自行註冊)。此頁僅提供登入入口與語言切換,不允許直接進入主系統。

閱讀完整規格 ↓

內容依原始規格呈現 · 查看 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 樣式。

📦 區塊說明

#區塊元件行為/交互狀態備註
1IdentityMascot Area播放預設 GifAnimated根據全局設定顯示不同階段吉祥物
2ActionLogin Button點擊跳轉 S-02Normal / Pressed視覺權重最高 (Filled)

🔁 交互流程圖

流程圖

正在載入流程圖…

⚙️ 狀態管理

狀態觸發條件畫面表現
Normal正常顯示按鈕可用
Disabled初始化未完成或異常按鈕灰階禁用
Error語言載入失敗顯示提示訊息

🔎 邏輯自我檢查

  • 不可直接進入 S-10 Home ✔
  • 語言切換不影響登入流程 ✔
  • 導航流向與後續頁面一致 ✔

提交版本內容版本 29c89979提交 5ca7557規格文件,功能實現狀態另行確認