完整設計規範
第一版式樣草案 · Markdown 來源：DESIGN.mdGitHub 版本尚未推送；目前以本機手冊為準
2026-10-18，首版草案。依 QL APP 真實節點樣式及同版本截圖整理。 Figma 版本：
2410774734466577464；最後修改：2026-10-16。 取法 B：讀取節點上的實際值。未取得正式變數名稱、模式與別名；下列 token 名稱是本手冊的語意名稱，並非 Figma 變數原名。
1. 三端視覺方向
| 端 | 實際設計方向 | 本版處理 |
|---|---|---|
| 學生 App | 太空背景圖片、紫色操作按鈕、青色選中導航、圓角卡片與動物角色 | 保留 QL 視覺與五分頁結構，內容改英語；尚未改好的圖片標設計稿待更新 |
| 教師 Web | 深色背景、灰色面板、青綠色操作及導航、Quicksand 字體 | 以深色教師端作為產品視覺基準 |
| 管理員 Web | 深色背景、灰色面板、紫色分類與選中導航 | 以深色管理端作為產品視覺基準 |
| 本產品手冊 | 淺色閱讀介面配紫色連結 | 方便閱讀規格及長表格；產品本身的深色樣式以截圖和本文件定義為準 |
舊七月 Warm Explorer、Today／Train／Growth 三分頁及另行創作的 dark cosmos 探索，均為歷史方向；本版只依目前 QL 設計稿。QL 原有的太空場景仍保留。
2. 色彩與來源
| Token | HEX | 用途 | 來源節點 |
|---|---|---|---|
| Student Primary | #928ED7 | 歡迎頁主要按鈕 | 509:1189 |
| Student Panel | #1D1E75 | 學生深藍紫色面板 | 575:562 |
| Student Active | #2EDFDE | 學生首頁選中導航 | 4:4 中 I4301:7857;4307:8591 |
| Teacher Accent | #58EADB | 教師選中導航與主要操作 | 86:93、301:728 |
| Admin Accent | #A171FF | 管理員課程分類與選中導航 | 698:2843 中課程按鈕 |
| Web Background | #1E1E1E | 教師與管理頁面底色 | 58:3、698:2843 |
| Web Panel | #313131 | Web 側邊欄、一般按鈕底 | 117:175、714:6262 |
| Web Control | #565656 | 登出及非選中控制項 | 3037:1018 |
| Text Light | #FFFFFF | 學生主要按鈕文字 | 509:1190 |
| Text Muted | #8C8C8C | 教師排程提示文字 | 3506:1965 |
學生背景為圖片填色，不能用單一 HEX 值重建；需要沿用來源圖或等待設計提供正式背景資產。顏色出現次數不能直接決定品牌色，動物插圖也有大量色塊；上表以具體控制項為依據。
狀態色與口說回饋
正確、需再練、不可用、答案不符與服務失敗必須搭配文字或圖示。朗讀回饋、QA 語意／語法判定、錄音不清與服務失敗分開呈現，不能把答案不符或 ASR 轉寫差異一律稱為「發音不清」。沒有可靠的詞級評測結果就不標示個別詞發音錯誤；不宣稱已取得音素或重音診斷。候選英文回饋見 S-20；完整語意色及對比驗收待確認，不用舊 Nihao 色票冒充 QL 定義。
3. 字體與文字層級
| 使用 | 已讀到的值 | 來源與處理 |
|---|---|---|
| Web 常見正文 | Quicksand 14px／500，行高 17.5px | 多個教師／管理節點；一般正文 |
| Web 主要文字 | Quicksand 16px／500，行高 20px | 排程標題 3506:1797 等 |
| Web 輔助文字 | Quicksand 12px／500，行高 15px | 表格與提示樣本 |
| Web 強調文字 | Quicksand 14／16px，600 | 標題與欄位強調 |
| 學生按鈕 | Urbanist 24px／700 | 歡迎頁 509:1190；行高及尺寸依來源節點 |
| 學生標題樣本 | Urbanist 18px／600 或 900 | 不把不同用途合成唯一字重 |
| 繁中顯示 | 待設計確認，手冊採 Noto Sans TC／Microsoft JhengHei 備援 | 備援屬實作建議，不是已匯出的 Figma 字體 token |
英語學習內容使用 Word／Phrase／Sentence，必要中文釋義另列。學生介面以英文為首版方向；教師與管理員介面 EN／繁中。正式字體資產、授權與字型回退需在業務應用開發前確認，不從未知來源下載字體。
4. 尺寸、圓角與陰影
| 元件 | 實際值 | 來源 |
|---|---|---|
| 學生設計畫布 | 375 × 812；截圖使用 2x，即 750 × 1624 | S-01、S-10 等 |
| Web 設計畫布 | 基本寬 1024；高度依內容，可超過 768 | T-21 為 1024 × 2134，T-04 為 1024 × 1001 |
| 學生主要按鈕圓角 | 14px | 509:1189 |
| 學生面板圓角 | 20px | 575:562 |
| 教師排程浮層 | 342 × 363，圓角 16px | 3506:1796，獨立浮層，不是完整底頁 |
| Web 導航與膠囊按鈕圓角 | 90px，實際呈現受元件高度限制 | 117:175、86:93 等 |
| Web 側欄陰影 | offset 0／0，blur 10，黑色 25% | 117:175、714:6262 |
| 排程浮層陰影 | offset 0／0，blur 50，黑色 80% | 3506:1796 |
間距讀取以各個節點的 layout、padding、gap 為準；本次未證明有統一間距變數，不宣稱已取得完整 spacing scale。手冊的 4／8／16／24／32px 圖例是閱讀介面示例。
5. 導航與設定頁
學生五分頁：HOME／STUDY／MISSION／FRIENDS／SETTING。不再沿用 ZULU 標籤。STUDY 的 N 圖示仍待設計更新（F-10）。
| 畫面 | 節點 | 正確用途 |
|---|---|---|
| S-40／S-41 | 493:126 | SETTING 分頁的個人資料入口；右上齒輪進設定 |
| 設定解鎖態／S-43 設定子視圖 | 5957:954 | 設定項目的解鎖狀態；S-43 沒有獨立麥克風提示 Frame |
| 設定鎖定態 | 8194:6214 | 兒童鎖鎖定畫面，不是 Profile |
| S-45 兒童鎖輸入 | 5952:758 | 鎖定驗證彈窗；不與鎖定設定頁混用 |
S-05／S-44 條款與語音同意、教師／管理共用登入尚無對應 Frame，標「原型待補」。不自行寫入 Figma 或用生成圖替代。
6. 取圖、追溯與驗收
- 圖片全部來源於 QL APP 同一版本，以只讀 GET 匯出；學生 2x、Web 1x、長頁完整保留。
- 元件集先選定實際角色／狀態的子元件，不能把多個並排變體誤當單一完整畫面。
- 圖片與文字規格不同時，正文標「設計稿待更新（F-xx）」；內部 Action Items 追蹤設計及重取圖。
- 畫面語意、字體與色值可追溯到節點；完整變數名稱與模式留待設計導出或 MCP 讀取後校準。
- 產品開發前逐項驗證窄螢幕、長英文、繁中、文字縮放、鍵盤與焦點、對比及觸控目標。固定畫布截圖本身不代表響應式已完成。
7. 首版視覺驗收清單
| 檢查 | 首版狀態 |
|---|---|
| 取得真實 QL 三端節點與同版本截圖 | 已取，仍需逐畫面設計審閱 |
| 對齊學生紫／青、教師深色青綠、管理深色紫色 | 本文件已列來源 |
| 變數原名／alias／mode | 待補，不混稱完整變數表 |
| 英語內容、品牌及截圖一致 | 已記 F-01～F-40，待設計更新 |
| 正式可交付業務應用 | 未開發，本版是產品手冊與規格 |
8. 第二階段視覺（建議草案）
第二階段新增畫面尚無 QL APP 節點，以下不是從 Figma 讀到的值，是供設計參考的建議；設計師補畫後以節點實際值取代，並重新取圖。
| 端 | 建議方向 | 說明 |
|---|---|---|
| 家長端（LINE 手機網頁） | 淺色底、390 × 844 直式、品牌色以學生端 #928ED7 為基準 | 家長在日常環境使用，淺色底較易讀；與學生 App 的太空深色風格分開 |
| 虛擬銀行（學生） | 沿用學生 App 的深藍紫面板與紫、青色，畫面文字使用繁體中文 | 負債時主畫面轉紅色；紅色必須同時有文字與圖示，不只靠顏色 |
| 教師與管理員新畫面 | 沿用現有深色 Web 版面（#1E1E1E 底、#313131 面板） | 新頁面與既有教師、管理頁看起來一致 |
- 按鈕對比：
#928ED7配白字的對比不足以給小字使用；家長端主按鈕建議使用較深的#6555AA，並在設計稿中驗證對比。 - 觸控與字級： 家長端的按鈕與列表項目至少 44 × 44px，內文不小於 16px。
- 狀態： 緊急、未簽名、已簽名、已到校、未到校要同時使用文字、圖示與顏色。
- 待設計確認： 家長端字體與圖示集、虛擬銀行的貨幣與外匯圖示、全螢幕動畫（命運事件、獎學金、簽名獎勵）的風格。