定价页面 是做什么的？
规则
- 最多3个层级：免费/入门版、专业版、企业版 — 用“最受欢迎”徽章突出推荐层级
- 月/年切换：显示两种价格，展示年度节省（“节省 20%”） — 默认年度
- 价格显示：大字体显示价格，小字体显示周期（“/月”） — 年度价格显示为月均价格
- 功能对比表：已包含功能用对勾，未包含功能用叉号 — 按类别分组功能
- 每个层级一个行动号召按钮：“开始使用”（免费版），“开始免费试用”（专业版），“联系销售”（企业版） — 每个卡片只有一个按钮
- 功能门控：在配置对象中定义每个计划的功能 — 运行时根据
user.plan 检查功能配置
- 基于使用量的定价：显示一个用量层级计算器/滑块 — 用户调整时动态更新价格
- 社会证明：在定价附近显示客户数量或徽标 — “受 5,000+ 团队信赖”
- 定价下方提供常见问题解答（FAQ）部分 — 解决常见疑虑（取消、退款、升级）
功能门控模式
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 ✗
[行动号召按钮]
避免
- 超过 4 个层级 — 会导致决策瘫痪
- 对所有层级都隐藏定价在“联系销售”后面 — 开发者会离开
- 没有年度折扣 — 年度计划可减少流失并改善现金流
- 功能对比没有明确分组 — 当功能超过 10 个时变得难以阅读