S-03 Onboarding Comic

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

P1 版本

畫面用途

首次成功登入後的四幕故事引導，讓學生先理解學習島、動物朋友與下一步練習方向，再進入條款／語音授權或首頁。這個節點取代舊規格中登入後直接跳授權的斷裂流程。

5892:443 ↗5892:443 🔗 ↗5893:481 🔗 ↗5893:485 🔗 ↗5893:489 🔗 ↗5893:481 ↗5893:485 ↗5893:489 ↗在系統地圖中查看關係 ↗

閱讀完整規格 ↓

變化時間線

1. P1新增 +1移除 −0

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

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

首次登入故事引導

🎨 Figma: 5892:443 🔗 · 5893:481 🔗 · 5893:485 🔗 · 5893:489 🔗

🎯 功能定位

首次成功登入後的四幕故事引導，讓學生先理解學習島、動物朋友與下一步練習方向，再進入條款／語音授權或首頁。這個節點取代舊規格中登入後直接跳授權的斷裂流程。

🧱 畫面結構

• Header: A little story + Welcome to Learning Island
• Comic Stage: 單幕插畫、角色對話與進度點
• Progress: 1 / 4、2 / 4、3 / 4、4 / 4
• Actions: NEXT、最後一幕 CONTINUE，另提供 Skip 並記錄跳過狀態
• 完成後：首次且尚未同意條款 → S-05；已完成授權 → S-10

📦 區塊說明

#	區塊	元件	行為/交互	狀態	備註
1	Story Stage	Comic frame	依序展示四幕	Loading / Ready	圖片可由內容配置替換
2	Progress	Progress dots	顯示目前幕次	1/4…4/4	不可跳到未讀幕
3	Action	Next / Continue	前進或完成引導	Enabled / Disabled	完成後寫入 onboarding_completed
4	Assist	Skip	跳過故事並記錄	Optional	下一次登入不再重播

🔁 交互流程圖

流程圖

正在載入流程圖…

⚙️ 狀態管理

狀態	觸發條件	畫面表現
First Visit	onboarding_completed = false	從第 1 幕開始
Reading	點擊 Next	進度點前進並預載下一幕
Skipped	點擊 Skip	寫入完成狀態，依授權狀態導向 S-05 或 S-10
Completed	最後一幕 Continue	寫入完成狀態並進入下一個必要節點

🔎 邏輯自我檢查

• S-02 首次登入不再直接跳過故事引導 ✔
• 四幕順序可恢復，離線時不丟失已讀狀態 ✔
• 回訪學生不重播，仍可從設定中的「重新觀看」入口觸發（後續候選） ✔

---

圖片來源：5893:481 ，同版本只讀取圖。

圖片來源：5893:485 ，同版本只讀取圖。

圖片來源：5893:489 ，同版本只讀取圖。