享學 Design System · v2.0
享學
享學
品牌視覺系統
以「享受學習」為核心的視覺語言,從色彩到元件,每個設計決策都指向同一個目標:讓課堂體驗令人愉悅。
12
設計章節
16
色彩 Token
5
字型層次
4
動效時長
01 · Brand Identity
Logo
01
純字標路線。「享」以品牌漸層為識別,「學」以深墨色錨定重量感。字型本身即記憶點——不需要額外符號。
享學
享受學習 · 學習享受
享學
享受學習 · 學習享受
Large · 36px
享學
Small · 20px
享學
With tagline
享學
享受學習 · 學習享受
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,兼顧投影可讀與手機舒適度。
課程標題範例
章節名稱與段落
小節標題,清楚標示層次
課程內文採用 17px,確保學員在投影與行動裝置上都能輕鬆閱讀。這個尺寸同時照顧中高齡視覺與課堂投影距離。
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
只動
transform 和 opacity,避免觸發 layout reflow
Hover/Active 回饋 100ms 以內完成,讓介面有即時感
頁面內容進場採用 Deliberate(600ms),讓學員有時間感知視覺層次
不做無目的的裝飾性動畫,每個動效都要有資訊或操作意義
不動
width、height、top、left,效能差
不使用超過 600ms 的動畫,課件需要保持流暢的課堂節奏