第 2 章：首頁測驗互動設計與實作

在上一章中，我們實作了「神級咒語庫」作為被動提供資源的 Lead Magnet。但有時候，被動的資源還不夠，我們需要主動出擊！

本章我們將探討如何透過「主動式互動」來勾起訪客的強烈好奇心。這就是我們在首頁加入的「AI 開發實力測驗」。這不僅僅是一個好玩的遊戲，它更是一個精密的轉換率漏斗。

1. 心理測驗：轉換率極高的秘密武器

為什麼心理測驗（Quiz）在數位行銷中如此有效？

人類天生喜歡了解自己：當訪客看到「你是哪一型 Vibe Coder？」、「你的 AI 開發實力落在哪個區間？」時，出於自我探索的本能，通常會忍不住點進去測試。
微小的承諾 (Micro-Commitment)：比起一進站就要求使用者填寫複雜的註冊表單，回答幾個簡單的單選題門檻極低。當他們投入了時間回答問題後，就更容易答應下一步的要求（例如留下 Email 看結果）。這在心理學上稱為「沉沒成本效應」。
客製化的結果與推薦：測驗結果可以根據使用者的作答，提供專屬的「等級徽章」與「客製化建議」。然後順理成章地告訴他：「為了補強你的弱點，我們準備了專屬禮包，請登入領取」。這種量身打造的感覺，轉換率遠高於罐頭訊息。

2. React 狀態管理 (State Management) 解析

要實作一個測驗系統，我們需要精準地管理使用者的作答進度。在 React 中，我們只需要幾個簡單的 State 就能搞定：

import { useState } from 'react';

export function QuizComponent() {
  // 紀錄目前在第幾題 (0 代表第一題)
  const [currentStep, setCurrentStep] = useState(0);
  
  // 累積玩家的分數，用來判定最終結果
  const [score, setScore] = useState(0);
  
  // 判斷測驗是否已經結束
  const [isFinished, setIsFinished] = useState(false);

  // 處理回答的邏輯
  const handleAnswer = (points: number) => {
    setScore(prev => prev + points);
    
    if (currentStep < questions.length - 1) {
      setCurrentStep(prev => prev + 1);
    } else {
      setIsFinished(true); // 進入結果頁
    }
  };

  // ... 渲染邏輯
}

這個簡潔的狀態機（State Machine）確保了我們的元件邏輯清晰，易於維護與擴充。

3. Framer Motion 動畫實作：讓體驗像 App 一樣滑順

如果測驗題目的切換只是生硬地閃爍替換，那使用體驗會非常大打折扣。為了讓每道題目的切換像幻燈片一樣平滑，我們引進了動畫神器：Framer Motion。

AnimatePresence 的魔法

在 React 中，當一個元件從 DOM 樹中被移除時，它會立刻消失，我們無法為它的「離場」添加動畫。而 AnimatePresence 就是為了解決這個問題而生的。

我們使用了 <AnimatePresence mode="wait">。這裡的 mode="wait" 非常關鍵！它確保了「舊的題目完全淡出螢幕後，新的題目才會滑入」，這樣就不會產生兩個題目同時存在、導致版面嚴重擠壓破版的狀況。

實作程式碼剖析

import { motion, AnimatePresence } from 'framer-motion';

<AnimatePresence mode="wait">
  {!isFinished ? (
    <motion.div
      key={`question-${currentStep}`} // 這裡的 key 很重要！Framer Motion 靠它分辨元素是否改變
      initial={{ opacity: 0, x: 50 }}  // 初始狀態：在右側，透明度 0
      animate={{ opacity: 1, x: 0 }}   // 進入動畫：滑至原位，完全不透明
      exit={{ opacity: 0, x: -50 }}    // 離場動畫：向左滑出，逐漸變透明
      transition={{ duration: 0.3 }}   // 動畫持續時間
      className="w-full max-w-md mx-auto"
    >
      <h3 className="text-2xl font-bold mb-6">
        {questions[currentStep].title}
      </h3>
      
      <div className="space-y-4">
        {questions[currentStep].options.map((option, idx) => (
          <button
            key={idx}
            onClick={() => handleAnswer(option.points)}
            className="w-full p-4 text-left border rounded-xl hover:bg-primary/10 transition-colors"
          >
            {option.text}
          </button>
        ))}
      </div>
    </motion.div>
  ) : (
    <motion.div
      key="result"
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      className="text-center"
    >
      {/* 測驗結果與 CTA */}
      <ResultScreen score={score} />
    </motion.div>
  )}
</AnimatePresence>

實作細節說明：

key 屬性的重要性：Framer Motion 依賴 React 的 key 來判斷元件何時被替換。當 currentStep 改變時，key 跟著改變，Framer Motion 就知道要觸發 exit 動畫，然後為新的元素觸發 initial 和 animate 動畫。
方向感設計：我們設定 initial: { x: 50 } 和 exit: { x: -50 }，創造出一種「向左翻頁」的流暢方向感，這符合人類閱讀的直覺。

4. 💡 Vibe Coding 實戰：用嘴巴寫出複雜的測驗狀態機

要手寫 React 狀態與 Framer Motion 動畫很容易出錯。身為 Vibe Coder，我們要把這個複雜度丟給 AI 處理。

以下是實作心理測驗的完美咒語：

「請用 Next.js 14, Tailwind CSS, 以及 Framer Motion 幫我寫一個『互動式心理測驗』元件。

邏輯與資料結構：

請設計 3 個單選題，每題有 3 個選項，不同選項會獲得不同分數。

請使用 React useState 來管理 currentStep (第幾題) 與 score (總分)。

當題目答完後，顯示最終結果與分數，並推薦他們註冊領取專屬獎勵。

動畫與體驗：

題目的切換絕對不能閃爍。請使用 <AnimatePresence mode="wait">。

新題目進入時，要從右邊滑入 (x: 50, opacity: 0 -> x: 0, opacity: 1)。

舊題目離開時，要向左邊滑出 (x: -50, opacity: 0)。

選項按鈕 hover 時要有明顯的背景色變化。

確保元件的寬度固定，不會因為題目長度不同而忽大忽小。」

只要用這段話，AI 就會幫你把最容易寫錯的 AnimatePresence 與 key 屬性完美設定好，你只需要專心想好有趣的測驗題目即可！

5. 小結與威力展示

這兩招「Lead Magnet 神級咒語庫 + 主動式 Quiz 測驗」，是現代化行銷網站的黃金組合。它們互相搭配，通常可以把首頁的 Email 註冊轉換率提升至少 3~5 倍！

當訪客完成了測驗，帶著高度的期待註冊了帳號，接下來呢？我們必須在會員中心接住他們，給他們源源不絕的動力。

準備好進入下一階段了嗎？我們來玩點「遊戲化 (Gamification)」吧！