定價頁面
規則
- 最多 3 層方案：免費/入門版、專業版、企業版 — 在推薦方案上標示「最受歡迎」徽章
- 月/年切換：顯示兩種價格，並標示年繳節省金額（例如「省 20%」）— 預設為年繳
- 價格顯示：價格用大字體，週期用小字體（例如「/月」）— 年繳價格以每月等值呈現
- 功能比較表：勾號代表有該功能，破折號代表無該功能 — 按類別分組功能
- 每個方案的 CTA：「開始使用」（免費版）、「開始免費試用」（專業版）、「聯絡銷售」（企業版）— 每張卡片一個按鈕
- 功能門控：在設定物件中定義每個方案的功能 — 執行時檢查
user.plan 與功能設定
- 使用量計費：提供計算器/滑桿來選擇使用層級 — 價格隨使用者調整動態更新
- 社會證明：在定價附近顯示客戶數量或標誌 — 「超過 5,000 個團隊信賴」
- 定價下方常見問題區塊 — 解答常見異議（取消、退款、升級）
功能門控模式
const PLAN_FEATURES = {
free: { maxProjects: 3, analytics: false, api: false },
pro: { maxProjects: 50, analytics: true, api: true },
enterprise: { maxProjects: Infinity, analytics: true, api: true },
} as const;
function hasFeature(plan: string, feature: string): boolean {
return !!PLAN_FEATURES[plan]?.[feature];
}
定價卡片佈局
[徽章：「最受歡迎」]
方案名稱
$XX/月（年繳計價）
$YY/月（月繳計價）
- 功能 1 ✓
- 功能 2 ✓
- 功能 3 ✗
[CTA 按鈕]
避免事項
- 超過 4 層方案 — 導致選擇障礙
- 對所有方案隱藏價格，僅顯示「聯絡銷售」— 開發者會離開
- 沒有年繳折扣 — 年繳方案可降低流失率並改善現金流
- 功能比較未清楚分組 — 超過 10 個功能時會難以閱讀