Design System
v2.0
享學 Design System · v2.0


品牌視覺系統

以「享受學習」為核心的視覺語言,從色彩到元件,每個設計決策都指向同一個目標:讓課堂體驗令人愉悅。

12
設計章節
16
色彩 Token
5
字型層次
4
動效時長
02 · Foundations

Color System

02

漸層只打在關鍵元素:Logo、CTA 按鈕、Active 狀態、步驟數字。大面積保持白底,所有中性色帶藍紫色溫。

Brand Gradient
--brand-grad
linear-gradient(135deg, #6442A1, #A5B4FC)
Logo · CTA · Active
Brand Solids
--brand
#6442A1
--brand-end
#A5B4FC
--brand-mid
#9B87D0
--brand-dark
#1A1440
Backgrounds
--brand-light
#EEF0FF
--brand-xlight
#FAFBFF
--bg-2
#F8F8FC
--bg
#FFFFFF
Ink · Text
--ink
#1A1440
--ink-2
#5A5A7A
--ink-3
#9090B8
--border
#E0E4FF
Semantic
--green
#28C76F
--green-light
#E2F8ED
--amber
#FF9F43
--amber-light
#FFF3E0
03 · Foundations

Typography

03

字體堆疊:Outfit(西文)+ Noto Sans TC(中文)。課件最小內文 17px,兼顧投影可讀與手機舒適度。

H1 32px
weight 800
−0.5px
課程標題範例
H2 24px
weight 700
−0.2px
章節名稱與段落
H3 18px
weight 600
0px
小節標題,清楚標示層次
Body 17px
weight 400
1.75 lh
課程內文採用 17px,確保學員在投影與行動裝置上都能輕鬆閱讀。這個尺寸同時照顧中高齡視覺與課堂投影距離。
Meta 13px
weight 500
+0.1px
標籤 · 說明文字 · 版本資訊 · 輔助提示 · 時間戳記
04 · Foundations

Spacing

04

以 4px 為基礎單位,8px 為主要模組格。所有間距從此尺規取值,不使用任意數字。

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
space-16
64px
space-24
96px
05 · Foundations

Radius & Shadow

05

圓角有層次但保持克制。陰影帶品牌色溫,避免冷灰黑陰影破壞整體氛圍。

4pxxs · 行內元素
8pxsm · 按鈕
12pxmd · 卡片
16pxlg · 面板
pill標籤 · 徽章
--shadow-sm
--shadow
--shadow-md
06 · Components

Buttons

06
Light Background
Dark Background
07 · Components

Toggle

07

同一概念的「基礎/進階」深度切換。讓學員自選理解深度,不強迫所有人同步。

NotebookLM 就像一個「會問問題的筆記本」。你放進去什麼資料,它就幫你整理重點、找出關聯,讓你更快找到想要的資訊。
08 · Components

Prompt Box

08

學員一鍵複製 AI Prompt,降低輸入錯誤、讓操作步驟可以跟上課堂節奏。

今日 Prompt
請幫我規劃一個為期五天的日本京都旅遊行程,我是第一次去,喜歡文化與美食,不喜歡太趕的行程。每天安排 2–3 個地點,並說明交通方式。
09 · Components

Steps

09

引導學員依序完成操作。三種狀態:已完成、進行中、尚未開始。視覺清楚區分,不需要閱讀文字才能判斷進度。

打開 NotebookLM
前往 notebooklm.google.com 並登入 Google 帳號
2
建立新 Notebook
點擊右上角「+ New Notebook」,命名為「旅遊計劃」
3
上傳資料來源
將旅遊相關的 PDF、網址或文字貼入
10 · Components

Quiz

10

即時驗證理解。選錯時不揭露正確答案——保留給老師帶動課堂討論。

NotebookLM 最適合用來做什麼?
A. 寫程式碼
B. 分析與整合多份文件的知識
C. 製作簡報投影片
D. 即時翻譯語言
11 · Components

Callout

11

課件中用於重要提示、小技巧、注意事項。三種語意層次:資訊、建議、警示。

提示
第一次使用 NotebookLM 建議先用簡短的文件測試,確認 AI 回應品質後再上傳大量資料。
小技巧
在問題裡加上「請用條列方式整理」,NotebookLM 的回覆會更容易閱讀與複製。
注意
上傳的文件不要包含個人隱私資訊,NotebookLM 的資料可能用於模型訓練。
12 · Motion

Motion

12

動效服務於理解,不追求炫耀。所有動畫採用同一條緩動曲線,讓整體介面有一致的「彈性」手感。點擊各項目可預覽動效。

Duration Scale
Instant
100ms
Fast
200ms
Normal
350ms
Deliberate
600ms
Easing Curves
Ease Out Expo
cubic-bezier(0.16, 1, 0.3, 1)
主要緩動 — 所有 UI 進場、hover、modal 展開
Ease In
cubic-bezier(0.4, 0, 1, 1)
退場 — 元素離開畫面、modal 關閉
Linear
linear
進度條、載入狀態等持續性動畫
Spring Bounce
cubic-bezier(0.34, 1.56, 0.64, 1)
Quiz 正解、通知出現等正向回饋
Motion Rules
DO 只動 transformopacity,避免觸發 layout reflow
DO Hover/Active 回饋 100ms 以內完成,讓介面有即時感
DO 頁面內容進場採用 Deliberate(600ms),讓學員有時間感知視覺層次
NO 不做無目的的裝飾性動畫,每個動效都要有資訊或操作意義
NO 不動 widthheighttopleft,效能差
NO 不使用超過 600ms 的動畫,課件需要保持流暢的課堂節奏