《兒時記趣》白板設計分析

分析日期：2026-06-27

素材來源：/res/classScreenShot/ — 共 41 張課堂截圖

課程：《兒時記趣》國中精選文言文（韓瑄老師授課）

目的：提取視覺設計規律，作為 AI 生成白板（board-template.ts）的優化依據

一、整體視覺語言

1.1 底板

關鍵結論：背景不需要 AI 繪圖，單純深綠色 CSS 即可完整還原。

二、標題牌匾設計（Section Banner）

每張投影片必有一個居中頂部的「大主題牌匾」，風格統一但色調依主題略異。

2.1 主牌匾樣式

[ 圖示emoji ] [ 標題文字 ] [ 裝飾點/底線 ]

CSS 建議：

.plaque {
  background: linear-gradient(90deg, #d63384, #fd7e14);
  color: #fff;
  border: 3px solid rgba(255,255,255,0.85);
  border-radius: 50px;
  padding: 10px 56px;
  font-weight: 900;
  letter-spacing: 4px;
  /* 加圖示用 ::before content */
}

三、子標籤設計（Sub-label）

用來標示子主題（如修辭名稱、段落標記），與主牌匾視覺差異明顯。

3.1 橘金色捲軸標籤（出現最多）

見於 class00050「誇飾」、class00060「譬喻」「類疊」

🌸 [ 誇  飾 ] 🌸

3.2 藍色標籤

見於 class00022「重點字音字形」

[ 重點字音字形 ]

CSS 建議：

.kv .k {
  background: linear-gradient(135deg, #5a2e08, #7d4e1a);
  border: 2px solid #f5c400;
  color: #f5d060;
  border-radius: 8px;
  padding: 4px 18px;
}

四、關鍵詞標示

4.1 黃框矩形（主要方式）

全部截圖中幾乎都有，非常一致

┌─────────┐
│  蚊子   │   ← 黃色實線邊框，無背景
└─────────┘

4.2 黃色底線劃記（手寫感）

見於 class00003（清，初），class00010（課文上方圈圈）

• 用底線 border-bottom: 3px solid #f5c400
• 偶爾有黃色手寫圓圈標記（老師現場手繪，不需模仿）

CSS 建議：

mark.hl {
  background: transparent;
  border: 2px solid #f5c400;
  border-radius: 4px;
  color: #fff;
  padding: 1px 6px;
}
mark.hl.active {
  background: rgba(245,196,0,0.22);
  box-shadow: 0 0 0 3px rgba(245,196,0,0.65);
  color: #ffff66;
}

五、條列符號（Bullet）

全部截圖一致使用 ➡ 符號

CSS 建議：

.notes li::before {
  content: '➡';
  color: #4dd0e1;
}

六、文字設計

6.1 字色

6.2 字型與間距

七、表格板型

見於 class00034、class00038（字詞/詞性/注釋分析）

┌──────┬──────┬──────────────────────────┐
│ 字詞 │ 詞性 │         注釋              │  ← 藍色表頭
├──────┼──────┼──────────────────────────┤
│  之  │ 代詞 │ 1. 昂首觀「之」：指蚊子  │
│      │      │ 2. 項為之「強」：指...   │
└──────┴──────┴──────────────────────────┘

八、多板型統計

九、對比：現有 AI 白板 vs 截圖標準

十、後續實作優先順序

高優先（視覺衝擊大）

1. 表格板型（boardType: 'table'）：詞性分析、字詞注釋類白板
2. 封面板改版：大字居中，老師名字，底部顯示課程名稱
3. 子標籤裝飾強化：橘金框加左右花飾 emoji

中優先（細節完善）

1. 注音 ruby 字色改金黃色（與截圖一致）
2. 全文賞析板行距加到 2.4，字級放大 10%
3. 選擇題板型（A/B/C/D 四選項格式）

低優先（品質提升）

1. 老師手寫標注層（教學互動過程，即時動態）
2. 動態出字效果（按句顯示，類似打字機）

附：色彩規格表

深森林綠（底板）    #1a5c1a → #2a7a2a
白色（主文字）      #ffffff
金黃（重點/圖示）   #ffd700
淺奶黃（次要文字）  #fffacd
關鍵詞框黃          #f5c400
青藍（箭頭bullet）  #4dd0e1
橘金（子標籤文字）  #f5d060
橘棕（子標籤底）    #5a2e08 → #7d4e1a
藍色（表頭/部分標籤）#1565c0
牌匾漸層            #d63384 → #fd7e14