設計哲學
在任何元件決策之前，先確認這三個設計前提。
🌱
探索而非測試
問題是邀請，選項是視角，結果是鏡子。設計語言要傳遞「沒有對錯」，讓人放鬆地說出真實感受。
🎯
單焦點感知
每次只問一件事。頁面不出現下一題內容，不顯示題目清單，讓人完全活在當下這一題。
✨
情緒高峰在結尾
結果揭曉是整個測驗最強的品牌接觸點。那一刻的設計要有驚喜感，像是被看見的感覺。
問題元件
問題區由三層組成：Eyebrow（定位感）、問題文字（核心）、Context（減焦慮）。
第 3 題 ／ 共 6 題 — 自然感知
走進一片森林，你第一個注意到的是？
跟著第一直覺走，不用想太多——直覺才是最誠實的答案。
↑ 選項區從這裡開始
| 層級 | Token Key | 值 | 設計說明 |
|---|---|---|---|
| Eyebrow | quiz.question.eyebrowColor |
#34C759 / 11px Mono |
Bee Green，輕量存在，給人定位感不搶主角 |
| 問題文字 | quiz.question.textSizeDesktop |
Inter Display 700 / 24px |
大字讓問題有重量感，讓人認真對待 |
| Context | quiz.question.contextColor |
#868E96 / 14px / 1.65lh |
灰色次要文字，補充說明，降低焦慮 |
選項卡片
四種狀態定義了完整的互動旅程。點擊下方 Idle 狀態的選項，可以看到 Chosen / Unchosen 的實際效果。
Idle — 初始狀態
Chosen + Unchosen — 選擇後狀態
| 狀態 | Token Key | 視覺規格 | 設計意圖 |
|---|---|---|---|
| Idle | quiz.option.idle |
白底 / #E9ECEF 1.5px border / 14px radius | 四個選項平等，等待被選擇 |
| Hover | quiz.option.hover |
Bee Green border / 綠色光暈 / translateY(-2px) | 「這個選項在等我」的暗示 |
| Chosen | quiz.option.chosen |
Deep Forest 底 / 白字 / Bee Green check | 確認感與歸屬感，像是「這個是我」 |
| Unchosen | quiz.option.unchosen |
opacity: 0.32 / pointer-events: none | 退場但不消失，讓人知道自己選了什麼 |
為什麼不用消失（display:none）？ 消失會讓用戶懷疑「我剛才選了什麼？」退場但保留視覺，讓人有安全感，也是對其他視角的尊重。
進度指示器
目標是讓人「知道快到了」，而不是讓數字成為壓力。Pills 適合 ≤8 題，Bar 適合長測驗。
Pills — 膠囊點（推薦）
第 1 題（當前）
第 3 題（進行中）
完成
Active：膠囊形 20×7px，Bee Green
Done：圓點 7px，Deep Forest
Idle：圓點 7px，#DEE2E6
Done：圓點 7px，Deep Forest
Idle：圓點 7px，#DEE2E6
Bar — 進度條
20%
60%
100%
高度：2px
Fill：Bee Green
Transition：500ms cubic-bezier(0.23,1,0.32,1)
Fill：Bee Green
Transition：500ms cubic-bezier(0.23,1,0.32,1)
導航按鈕
Back 是輔助，Next 是主角。Next 在未選擇時視覺降調但不隱藏——讓人知道它在哪裡。
未選擇時（Next 降調）
已選擇後（Next 解鎖）
最後一題（文案替換）
| 元件 | 規格 | Token Key |
|---|---|---|
| Back | 透明底 / 灰色文字 / 第一題隱藏（opacity:0） | quiz.navigation.backStyle |
| Next (disabled) | Bee Green / opacity: 0.35 / pointer-events: none | quiz.navigation.nextStyleDisabled |
| Next (active) | Bee Green / opacity: 1 / hover 上浮 + 光暈 | quiz.navigation.nextStyleActive |
| Last Next | 文案改為「查看結果 →」，語氣轉為揭曉 | quiz.navigation.lastQuestionNext |
結果頁
測驗的情緒高峰。深色背景讓人靜下來準備接收，大字 + 語錄 + 特質標籤 = 被看見的感覺。
你的永續人格
探索者型
「對世界保持好奇，是理解它最誠實的方式。」
🔬 感官敏銳
🌿 自然連結
📚 持續學習
💡 系統思維
| 元素 | 規格 | 設計說明 |
|---|---|---|
| 背景 | #0D1A0E + 輻射光暈 |
Deep Forest 讓人沉靜，Bee Green 光暈帶入溫度 |
| Eyebrow | 「你的永續人格」/ Mono 11px / Bee Green |
固定文案，語氣是揭示不是評分 |
| 人格類型 | Inter Display 800 / 50px / 白色 |
大字讓人第一眼就看到自己的類型 |
| 語錄 | 15px / 斜體 / rgba(255,255,255,0.58) |
用「」包裹，中文語氣更強，觸動共鳴 |
| 特質標籤 | rgba(255,255,255,0.08) 底 / 圓角 pill |
3–5 個，讓人具體感受到自己的特質 |
| 入場動畫 | quizReveal / 700ms / scale 0.97→1 |
浮現感，像答案從深處升起來 |
四種人格類型（quiz-tokens.json → personalities）
EXPLORER
探索者型
感官敏銳 · 自然連結 · 持續學習
GUARDIAN
守護者型
環境意識 · 社群連結 · 永續行動
CREATOR
創作者型
感官創造 · 飲食美學 · 在地食材
CONNECTOR
傳播者型
善於表達 · 影響力 · 倡議推廣
互動示範
點擊體驗完整的選項選擇、換題過場與結果揭曉流程。這就是測驗的實際感受。
1 / 2
過場動畫說明：換題時，問題區上移 + 淡出（220ms ease-in），新題從下方滑入 + 淡入（360ms cubic-bezier），選項依序 Stagger 出現（每張間隔 60ms）。
Token 對照表
完整數值對照。AI Agent 可直接引用 quiz-tokens.json 或下方的 CSS class。
| 分組 | Token Key | 值 | 對應 CSS Class / 說明 |
|---|---|---|---|
| 佈局 | quiz.layout.pageBg |
#FAFAF8 | 測驗頁底色，微暖白 |
quiz.layout.cardRadius |
24px | .quiz-card border-radius |
|
quiz.layout.maxWidth |
560px | .quiz-card max-width |
|
| 問題 | quiz.question.textSizeDesktop |
24px | .quiz-question-text |
quiz.question.eyebrowColor |
#34C759 | .quiz-eyebrow |
|
quiz.question.contextColor |
#868E96 | .quiz-context-text |
|
| 選項 | quiz.option.idle.borderColor |
#E9ECEF / 1.5px | .quiz-option 預設狀態 |
quiz.option.hover.borderColor |
#34C759 + 光暈 | .quiz-option:hover |
|
quiz.option.chosen.bg |
#0D1A0E | .quiz-option.chosen |
|
quiz.option.unchosen.opacity |
0.32 | .quiz-option.unchosen |
|
| 進度 | quiz.progress.pills.dotActiveColor |
#34C759 / 20×7px | .quiz-progress-dot.active |
quiz.progress.pills.dotDoneColor |
#0D1A0E / 7px | .quiz-progress-dot.done |
|
quiz.progress.bar.transition |
500ms cubic-bezier(0.23,1,0.32,1) | .quiz-progress-bar-fill |
|
| 過場動畫 | quiz.transition.questionOut.duration |
220ms ease-in | 離場：opacity→0 + translateY(-16px) |
quiz.transition.questionIn.duration |
360ms cubic-bezier(0.23,1,0.32,1) | 進場：opacity→1 + translateY(24px→0) | |
quiz.transition.optionStagger.delay |
60ms / 基底 80ms | 選項依序出現間隔 | |
| 結果頁 | quiz.result.bg |
#0D1A0E | .quiz-result-card |
quiz.result.typeNameSizeDesktop |
50px / Inter Display 800 | .quiz-result-type-name |
|
quiz.result.quoteColor |
rgba(255,255,255,0.58) | .quiz-result-quote |
|
quiz.result.revealAnimation |
quizReveal 700ms | .quiz-result-card.animating |
AI 使用說明
四種建構情境的直接操作指引。完整 Token 說明見 quiz-tokens.json → aiUsageGuide。