# 4/29 招募說明會｜簡報設計邏輯

## 整體定位

這份簡報是一場招募說明會的現場投影，給坐在台下的潛在業務員看。設計目標不是「介紹公司」，而是「讓觀眾走過一段情緒旅程」——從懷疑到理解，從抗拒到認真考慮。

整體語氣：**成熟、有份量、不油膩**。視覺上用 Navy + Gold 建立高端感，文字上用散文語氣（不是條列式）讓人感受到溫度。

---

## 視覺設計系統

### 色彩

| 變數 | 色碼 | 用途 |
|------|------|------|
| `--navy` | `#1B2A4A` | 深色背景頁、左欄 |
| `--gold` | `#C9A84C` | 標籤文字、線條、強調色 |
| `--goldl` | `#E8C97A` | 標題強調字、Logo KC |
| `--white` | `#FFF` | 淺色頁主背景 |
| `--off` | `#F8F7F5` | 淺色頁次背景（右欄、新聞區塊）|
| `--dark` | `#181818` | 主文字色 |
| `--lite` | `#888` | 輔助說明文字 |

深色頁（`--navy` 背景）通常是情感性的頁面；淺色頁（`--white`）通常是資訊性的頁面。

### 字型

| 字型 | 用途 |
|------|------|
| `Playfair Display` (serif) | Logo "KC"、頁碼數字 |
| `Noto Serif TC` (serif) | 標題 `<h2>`、大字引言 |
| `Noto Sans TC` (sans-serif) | 標籤（tag）、內文、說明文字 |

### 尺寸

- 畫布：`1280 × 720px`（16:9）
- 所有投影片 `position:absolute` 疊在同一位置，用 `display:none/block` 切換

### 常用 UI 元件

- **`.tag`**：金色大字距標籤（如 "Your Journey"、"Training"），`font-size:12-13px`、`letter-spacing:5-6px`、`color:var(--gold)`
- **`.logo-light` / `.logo-dark`**：右上角 KC KAOCHING logo，根據背景切換亮/暗版
- **`.glow`**：深色頁用的放射漸層光暈（`position:absolute; inset:0`）
- **`.abar`**：頁面頂部或側邊的細金線裝飾條
- **`.pg`**：右下角頁碼，`Playfair Display`、`color:var(--lite)`

---

## 敘事結構與分段邏輯

### 第一段：情境建立（第01-11頁）

目的：讓台下感受到「我懂你的處境」。

| 頁碼 | 投影片ID | 核心功能 |
|------|---------|---------|
| 01 | s0 | 封面，建立第一印象（Navy 深色，展示照片）|
| 02 | s1 | 三則時事新聞，建立薪資/AI/女性的社會壓力感 |
| 03 | s2 | 核心問句：「你現在的工作，是你想要的生活嗎？」|
| 04 | s3 | 財富觀念：「兩個都有才叫選擇權」|
| 05 | s4 | 夢想清單，引發台下想起自己的夢想 |
| 06-09 | s31-s34 | 個人故事：起點、三故事、工廠、轉折 |
| 10 | s34 | 橋接句：「我只是早一點找到了一條對的路」|
| 11 | s35 | 轉場：宣告接下來要讓台下看到三件事 |

設計原則：這段不談招募，只談共鳴。觀眾必須先覺得「這個人懂我」才願意繼續聽。

---

### 第二段：加入後的旅程（第12-30頁）

目的：回答台下心裡最大的問題——「加入之後會怎樣？」

| 頁碼 | 投影片ID | 核心功能 |
|------|---------|---------|
| 12 | s41 | 承接恐懼：「我沒有經驗、我怕做不好」是正常的 |
| 13-17 | sn1-sn5 | 三階段旅程全貌（概覽→初階→中階→進階→總覽）|
| 18 | s42 | 訓練：19堂課、19位講師的完整學習路徑 |
| 19 | s43 | 線上學習平台：自己掌握學習節奏 |
| 20 | s44 | 早會：四種功能（外賓/演練/自媒體/AI）|
| 21 | s45 | 陪伴：主動的、具體的、每週固定的陪伴 |
| 22 | s46 | 工具系統概覽：三套工具解決三個不同階段的問題 |
| 23-26 | slide-0~3 | 工具細節：輪播平台、學員作品、銷售GPT、示範截圖 |
| 27 | s47 | 自媒體班：大班＋小班兩層架構 |
| 28 | s47b | 教練帶隊：Line群組每日陪伴 |
| 29 | s47c | Reels 學員作品成果展示 |
| 30 | s48 | 承諾頁：「只要你願意認真，我會比你更認真陪你走」|

設計重點：這段的節奏是「情緒→工具→情感」循環。不是只介紹資源，每隔幾頁就要有一個情感錨點（陪伴、承諾）讓台下感覺「這不是制度介紹，是真實的人在說話」。

---

### 第三段：人物介紹（第31-39頁）

| 頁碼 | 投影片ID | 核心功能 |
|------|---------|---------|
| 31-39 | s61-s69 | 九位真實成員照片，無文字，讓照片說話 |

設計重點：**無演講腳本**。演講者沿著照片介紹每個人的故事，比任何文字都有說服力。

---

### 第四段：平台背書（第40-44頁）

目的：建立對「富邦」這個品牌的信任，解決「這家公司穩不穩」的疑慮。

| 頁碼 | 投影片ID | 核心功能 |
|------|---------|---------|
| 40 | s51 | 平台選擇框架：選工作 = 選平台 |
| 41 | s52 | 數字說話：總資產/獲利/RBC 434% |
| 42 | s53 | 品牌信任：富邦名字幫你做了第一步 |
| 43 | s54 | 傳統創業 vs 富邦通路對比 |
| 44 | s55 | 收攏：品牌＋系統＋你的努力三合一 |

---

### 第五段：女性專屬（第45-48頁）

目的：讓女性觀眾感受到這份工作「看見她們」，把懷孕/生育的職場劣勢轉為加分項。

| 頁碼 | 投影片ID | 核心功能 |
|------|---------|---------|
| 45 | s71 | 職場現實：勞資爭議文件，懷孕被資遣的真實案例 |
| 46 | s72 | 這份工作的不一樣：媽媽帶孩子上班/領獎照片牆 |
| 47 | s73 | 富邦保障：實際發放紀錄，第一年 435,380 元 |
| 48 | s74 | 給女生的一句話：情感收尾 |

設計重點：s71 刻意用「黑暗現實」開場，s72 才給出「對比的光亮」。這個對比是這段最重要的節奏。

---

### 第六段：行動呼籲（第49-51頁）

| 頁碼 | 投影片ID | 核心功能 |
|------|---------|---------|
| 49 | s81 | 三種感受：有興趣/還在想/想介紹朋友，三種都被接納 |
| 50 | s82 | 下一步：掃 QR Code → 問卷 → 預約一對一 |
| 51 | s83 | 感謝，溫暖收尾 |

---

## 技術架構

### 投影片切換機制

```javascript
const allSlideIds = [/* 51 個 ID，順序即播放順序 */];
function showSlide(n) {
  currentPage = n;
  slides.forEach((s, i) => s.classList.toggle('active', i === n));
  btns.forEach((b, i) => b.classList.toggle('active', i === n));
}
```

**重要：** 只需修改 `allSlideIds` 陣列即可改變播放順序。HTML 中 `<div id="sXX">` 的 DOM 位置無關。

### 投影片 ID 對照

| 頁碼 | ID | 說明 |
|------|----|------|
| 01 | s0 | 封面 |
| 02-05 | s1-s4 | 開場四頁 |
| 06-09 | s31-s34 | 個人故事 |
| 10 | s34 | 橋接 |
| 11 | s35 | 轉場 |
| 12 | s41 | 如果我加入 |
| 13-17 | sn1-sn5 | 三階段旅程 |
| 18-22 | s42-s46 | 訓練/學習/早會/陪伴/工具概覽 |
| 23-26 | slide-0~3 | 工具細節四頁 |
| 27-30 | s47,s47b,s47c,s48 | 自媒體/教練/Reels/承諾 |
| 31-39 | s61,s62,s64,s69,s63,s65,s66,s67,s68 | 人物介紹（無腳本）|
| 40-44 | s51-s55 | 富邦平台 |
| 45-48 | s71-s74 | 女性段落 |
| 49-51 | s81-s83 | 行動呼籲 |

### 圖片嵌入方式

所有圖片以 `data:image/jpeg;base64,...` 格式直接嵌入 HTML，單檔即可離線使用。大圖在嵌入前用 PIL 壓縮。

### 已知的特殊處理

- **s72 照片牆**：CSS Grid `3欄×2列`，第4格（row2 col2，中間下方）用 IMG_3181.jpg（採茶照）
- **s73 左右標籤對齊**：右欄 `justify-content:center`，左欄標籤需補 `margin-top:80px` 對齊
- **字型縮放**：`.wrapper` 上有 `transform:scale()` 做響應式縮放，截圖時需暫時移除

---

## 待完成事項（截至 2026-04-21）

- [ ] 補拍照片嵌入：上課現場、早會現場、主管陪伴畫面（原定週一補拍）
- [ ] 問卷 QR Code 加入第50頁（s82）