S-02 Login Page

學生端登入與設定設計規格P1 起

P1 版本

畫面用途

為已建立帳號的學生提供進入系統的唯一入口。首版建議管理員發送初始憑據，首次登入後強制修改密碼；憑據與密碼安全策略待確認，不以生日生成或公開可推算的密碼。帳號驗證與忘記密碼流程依既有交互圖處理，實際驗證方式待確認。

509:1176 ↗login 🔗 ↗在系統地圖中查看關係 ↗

原型與規格有待確認事項，請一併閱讀正文中的差異說明。

閱讀完整規格 ↓

變化時間線

1. P1新增 +1移除 −0

第一版式樣草案 · Markdown 來源：02-App畫面-學生.mdGitHub 版本尚未推送；目前以本機手冊為準

取圖紀錄： QL APP，2026-10-18，版本 2410774734466577464；節點 509:1176 。學生 2x／Web 1x。圖片是目前設計稿，文字為 APlus 首版目標規格。 設計稿待更新（F-11）： 圖中舊品牌、華語內容或待核對項目照實保留；請以本節英語文字規格為目標。設計修改後重新取圖。

帳號登入

🎨 Figma: login 🔗

⚠️ Figma 缺失: S-02-A Update Password（首次強制改密）、S-02-B Email Verification（6 位驗證碼）在 Figma 中無獨立 Frame。

🎯 功能定位

為已建立帳號的學生提供進入系統的唯一入口。首版建議管理員發送初始憑據，首次登入後強制修改密碼；憑據與密碼安全策略待確認，不以生日生成或公開可推算的密碼。帳號驗證與忘記密碼流程依既有交互圖處理，實際驗證方式待確認。

🧱 畫面結構

S-02 主畫面：

• Header: < Back Login
• Body:
  • Welcome Back!
  • Please enter your details.
  • Email → [ student@example.com ]
  • Password → [ ******** (eye) ] ← 密碼遮罩切換
• Links:
  • Forgot Password? ← 跳轉 S-04
• CTA:
  • Log In ← Primary CTA

S-02-A Update Password（修改密碼）：

• Title: Secure Your Account
• Body:
  • To keep your account safe, please set a new password.
  • [ New Password ] [👁️]
  • [ Confirm New Password ] [👁️]
  • * Must be at least 8 characters
  • * Include a symbol (@, #, !, etc.)
• CTA: [ Update & Continue > ]

S-02-B Email Verification（身分驗證）：

• Title: Verify Your Email
• Body:
  • We've sent a 6-digit code to:
  • emma****@gmail.com
  • [ _ ] [ _ ] [ _ ] [ _ ] [ _ ] [ _ ] ← 6-digit code input
  • Didn't receive it? [ Resend in 54s ]
• CTA: [ Verify & Finish ]

📦 區塊說明

#	區塊	元件	行為/交互	狀態	備註
1	Header	Back Button	點擊返回 S-01	Normal	導航引導
2	Input	Email Field	輸入文本	Focus / Error	需進行 @ 格式檢查
3	Input	Password	隱藏輸入內容	Masked / Plain	點擊眼睛圖標切換明文
4	Assist	Forgot Password Link	點擊跳轉 S-04	Normal	降低登入焦慮
5	Action	Login Button	驗證成功進入首次流程或 S-10	Loading / Error	首次登入依序進入 S-02-A、S-02-B、S-03
6	Input	New Password (S-02-A)	輸入新密碼	Focus / Error	需包含長度與字符檢查
7	Input	Confirm Password (S-02-A)	比對兩次輸入	Match / Mismatch	若不一致禁用按鈕
8	Action	Update Button (S-02-A)	提交新密碼至伺服器	Loading / Disabled	成功後跳轉 S-02-B
9	Input	Code Input (S-02-B)	輸入6位驗證碼	Focus / Error	自動前進到下一格
10	Action	Resend Link (S-02-B)	重新發送驗證碼	Cooldown	54s 冷卻
11	Action	Verify Button (S-02-B)	驗證碼校驗	Loading / Error	成功後跳轉 S-05 進行條款同意

🔁 交互流程圖

流程圖

正在載入流程圖…

⚙️ 狀態管理

狀態	觸發條件	畫面表現
Normal	正常顯示	按鈕可用，輸入框正常
Loading	點擊登入/驗證按鈕	按鈕顯示旋轉圖示，禁止重複點擊
Error	格式錯誤或驗證失敗	輸入框變紅，紅字提示錯誤訊息
Success	驗證通過	跳轉至下一頁面
Cooldown	重新發送驗證碼	按鈕顯示倒數秒數，禁用

🔎 邏輯自我檢查

• 首次登入必須強制修改密碼；是否要求郵箱驗證待確認，後續依交互流程進入 S-05 條款同意 ✔
• Email 格式需檢查 @ 符號 ✔
• 密碼長度至少 8 字符，需包含特殊符號 ✔

---