第 3 章：會員中心遊戲化機制 (Gamification)

當使用者成功被我們的 Lead Magnet (神級咒語庫) 或心理測驗吸引，並註冊成為會員後，最困難的挑戰才剛開始：「如何讓他們每天都想回來？」。

在傳統的線上課程平台中，使用者通常只會在買課的時候登入，看完就走，甚至買了從來不看。為了打破這個魔咒，我們使用了產品設計中最強大的心理學武器：「遊戲化 (Gamification)」。

1. 什麼是遊戲化？

遊戲化不是真的做一個遊戲，而是將遊戲的設計元素與心理機制，應用在非遊戲的領域中，藉此驅動使用者的行為、提升參與度與忠誠度。

在知名框架 Octalysis (八角框架) 中，提到了幾個核心驅動力：

發展與成就感：解鎖徽章、升級、獲得點數。
不可預測性與好奇心：隨機掉落的獎勵、不知道明天會抽到什麼。
所有權與佔有慾：收集虛擬貨幣、累積個人資產。

我們在 Vibe Tutor 的 Dashboard 完美地結合了這三個驅動力。

2. 實作一：動態等級與專屬稱號徽章系統

在 src/app/dashboard/page.tsx 中，我們不再只是冷冰冰地顯示「您擁有 2 堂課程」，而是根據使用者購買的課程數量與訂閱狀態，動態計算並賦予他們一個**「尊貴的稱號」**。

等級階梯設計：

觀望中的旅人 (Visitor)：剛註冊的無料會員。
見習工程師 (Apprentice)：購買過 1 堂課，踏出第一步。
全端開發者 (Full-Stack Dev)：購買過 3 堂課以上，展現實力。
全站訂閱會員 (Premium Subscriber)：擁有暢讀特權的訂閱者。
資深全端工程師 (Senior Dev)：購買過原始碼的進階玩家。
Vibe 首席架構師 (Chief Architect)：購買全站大禮包的頂級 VIP。

視覺差異化的威力

為了讓「升級」這件事更有感，我們使用了極致的視覺特效來區分階級。

// 判斷使用者的狀態
const hasBundle = purchasedItemIds.includes("vip-all-access");
const hasAnySourceCode = purchasedItemIds.some(id => id.endsWith("-source"));

// 動態套用背景與特效
<div className={`relative overflow-hidden border rounded-2xl p-6 ${
  hasBundle 
    ? "bg-yellow-500/10 border-yellow-500/30 shadow-[0_0_30px_rgba(234,179,8,0.15)]" 
    : hasAnySourceCode 
    ? "bg-purple-500/10 border-purple-500/30" 
    : "bg-white/5 border-white/10"
}`}>
  
  {/* 如果是大禮包 VIP，額外加上流動的金屬光澤 (Shimmer) 動畫 */}
  {hasBundle && (
    <div className="absolute inset-0 pointer-events-none rounded-2xl bg-gradient-to-r from-yellow-500/0 via-yellow-500/10 to-yellow-500/0 animate-[shimmer_2s_infinite]" />
  )}
  
  {/* 專屬 Emoji 頭像 */}
  <div className="w-24 h-24 rounded-full flex items-center justify-center text-5xl">
    {hasBundle ? "👑" : hasAnySourceCode ? "💎" : "👋"}
  </div>
</div>

這種視覺上的特權感，會強烈刺激那些還在「觀望中的旅人」，讓他們渴望晉升為「首席架構師」，享受那專屬的金色光暈。

3. 實作二：每日簽到與 Vibe 幣機制

除了長期的成就解鎖，我們還需要短期的、每日的誘因。這就是 DailyCheckin.tsx 誕生的原因。

隨機獎勵的驚喜感

如果每天簽到都固定給 5 塊錢，久了使用者會覺得像是在打卡上班，感到枯燥。但如果我們設定每天可以隨機獲得 5~10 枚 Vibe 幣，這就觸發了心理學上的「變動比率增強（Variable Ratio Schedule）」，也就是老虎機讓人上癮的原理。使用者每天登入都會期待：「今天運氣好不好？會不會抽到 10 幣？」。

視覺回饋與 Canvas Confetti

獲得硬幣的瞬間，如果只有數字跳一下，是非常空虛的。我們引進了 canvas-confetti 套件，在使用者按下簽到的那一刻，在螢幕上灑下華麗的紙片特效！

import confetti from 'canvas-confetti';

const triggerConfetti = () => {
  const duration = 2000;
  const end = Date.now() + duration;

  const frame = () => {
    // 從畫面左側發射紫、藍、黃色的紙片
    confetti({
      particleCount: 3,
      angle: 60,
      spread: 55,
      origin: { x: 0 },
      colors: ['#a855f7', '#3b82f6', '#eab308']
    });
    // 從畫面右側發射
    confetti({
      particleCount: 3,
      angle: 120,
      spread: 55,
      origin: { x: 1 },
      colors: ['#a855f7', '#3b82f6', '#eab308']
    });

    if (Date.now() < end) {
      requestAnimationFrame(frame);
    }
  };
  frame();
};

這場視覺饗宴給予了使用者極強的正向回饋，讓大腦分泌多巴胺，將「簽到」與「快樂」連結在一起。

賦予貨幣價值與長期目標

虛擬貨幣如果不能花，就只是無意義的數字。所以我們在畫面上明確提示：

🎉 當累積滿 500 枚時，可免費兌換一堂課程！

同時我們也開啟了綠界信用卡的 Vibe 幣儲值通道。這不僅賦予了 Vibe 幣真實的法幣價值（1 幣 = 近乎 1 台幣），也給了使用者一個明確的長期目標，讓他們願意連續數十天回來點擊，大幅提升平台的 Retention Rate (用戶留存率)。

4. 💡 Vibe Coding 實戰：讓 AI 幫你搞定特效與遊戲化邏輯

要在系統中加入虛擬貨幣與紙片特效，聽起來很難？其實用 Vibe Coding 只需要幾秒鐘。

如果你想在自己的平台加入每日簽到功能，可以使用這個咒語：

「請幫我寫一個 React 的『每日簽到』元件 (DailyCheckin.tsx)，風格要帶有電競與遊戲感。

視覺與特效要求：

左側顯示使用者目前的『Vibe 幣』餘額，使用黃色大字體並帶有 drop-shadow 發光效果。

右側是一個『點擊簽到領幣』的按鈕。

當使用者點擊簽到時，請呼叫 canvas-confetti 套件，在螢幕的左右兩側同時噴發紫色、藍色、黃色的慶祝紙片 (Confetti)。

hover 按鈕時，請讓旁邊的星芒 Icon 旋轉並放大。

邏輯要求：

接受 initialCoins 和 initialCheckedIn 作為 Props。

如果已經簽到過，按鈕變灰，顯示『今日已簽到』，並禁用點擊。

點擊後，請模擬一段非同步 API 呼叫，並隨機增加 5~10 枚硬幣到畫面上。

如果總硬幣大於等於 500 枚，在元件最下方顯示一行 animate-pulse 的綠色文字：『🎉 您已累積滿 500 枚，可免費兌換一堂課程！』」

有了這段精準的 prompt，AI 不僅會幫你刻好超帥的 UI，還會幫你把 canvas-confetti 的發射邏輯寫得漂漂亮亮！這就是 Vibe Coding 的神力！

5. 小結

透過稱號系統、隨機獎勵、視覺正向回饋與虛擬經濟模型，我們把原本枯燥的學習後台，變成了一個讓人想每天登入的遊樂場。

但是，要怎麼讓訪客在首頁就決定掏錢註冊呢？下一章，我們將進入最高階的行銷心理學實戰，加入社會認同與錯失恐懼！