定价界面优化的三层方法

定价界面很容易设计得糟糕。

用户看到四个方案，不知道哪个最划算。功能列表都是绿勾，看不出差异在哪里。承诺的功能在付费后发现无法使用。这些问题很常见。

Purikura 定价系统也遇到了这些问题。这篇文章记录了三层优化：第一层移除虚假功能，第二层帮助用户决策，第三层修复视觉细节。

定价界面的三个常见问题

问题一：轻的信息先到

用户看到 $9 和 $29，会觉得 $9 更便宜。但 $9 对应 360 积分，$29 对应 1500 积分。单位价格差异很大，用户却看不到。

价格数字是轻的信息，它先抵达用户的认知。积分额度和单位价值是重的信息，需要计算才能获得。结果就是用户只看到价格差异，看不到价值差异。

问题二：表层掩盖了深层

所有方案都显示绿勾，功能看起来都一样。用户需要仔细阅读每一行文字，才能发现 Pro 方案是 1080p，Basic 只有 720p。

明显的视觉符号（绿勾）掩盖了真正的差异（分辨率、模型档次）。用户被表层信息俘获，看不到深层的功能差异。

问题三：承诺与现实不符

前端展示了优先队列、水印控制、API 访问这些功能。用户付费后发现，后端根本没实现这些功能。

功能列表膨胀，看起来很丰富。但实际可用的功能只有一半。承诺与现实的差距，破坏了用户信任。

这三个问题不是孤立的。它们有共同的根源：信息的展示方式，没有考虑用户的真实需求。

第一层：移除虚假功能

发现问题

审计定价配置时，发现前端声明了 12 个功能，但后端只实现了 7 个。5 个功能完全不存在：

• priority_queue - 优先队列
• watermark - 水印控制
• api_access - API 访问
• preview_features - 预览新功能
• dedicated_support - 24/7 专属支持

这些功能在所有 11 个定价方案中都有展示。

清理方法

以认真查询为荣，以瞎猜接口为耻。

清理过程很直接：

1. 逐一验证每个功能字段
2. 在后端代码库中搜索实现
3. 删除所有未实现的功能
4. 保留真实存在的功能

// ✅ 保留的真实功能
features: {
  credits: string;           // 积分额度（数据库验证）
  videos: string;            // 估算视频数（基于积分计算）
  storage: string;           // 云存储（Supabase + R2）
  resolution: string;        // 最大分辨率（模型限制）
  available_models: string[];  // 可用模型列表
  model_tier_access: string[]; // 模型档次权限
  expiry: string;            // 过期时间（仅积分包）
}

规划中的功能（max_concurrent_tasks、generation_speed）保留，但明确标注 "Coming Soon"，并降低视觉权重（透明度 50%，灰色徽章）。

从 12 个功能减少到 9 个（7 个已实现 + 2 个规划中）。每个方案的功能列表缩短了 30%。

为什么这很重要

数据诚实不是道德口号。它是技术原则。

前端配置文件应该是后端能力的镜像。如果配置文件里有未实现的功能，那它就是一个错误的镜像。用户看到的承诺，后端无法兑现。

信任一旦破坏，很难修复。清理虚假功能，是重建信任的第一步。

第二层：帮助用户决策

数据诚实是基础，但仅仅诚实不够。四个方案摆在面前，用户仍然不知道选哪个。

思考框架：want → have → need

want：用户想知道"哪个最划算"。

have：四个方案，价格从 $9 到 $249，积分从 360 到 12500。用户需要心算单位价格才能比较。

need：直接展示单位价格，让答案自然浮现。

单位价格标签

解决方法很简单：计算每 1000 积分的单价，直接显示在价格下方。

// 计算每 1000 积分的单价
export function calculateUnitPrice(plan: PricingTier): number {
  return (plan.price / plan.credits) * 1000;
}

// Basic: $25.00 / 1k
// Pro: $19.33 / 1k    ← 最低单价，黄绿色高亮
// Ultimate: $19.60 / 1k
// Creator: $19.92 / 1k

Pro 方案的单价用黄绿色 (#CCFF00) 高亮。这不是装饰，而是视觉引导。用户的注意力会被自然吸引到这个方案。

一行字，解决了用户的核心疑问。这是"四两拨千斤"的第一个体现：找到准确的支点。

高亮核心差异

所有方案都显示绿勾，用户看不出差异。解决方法是让关键差异"跳出"页面。

export const HIGHLIGHT_FEATURES = [
  {
    planName: 'Pro',
    features: {
      resolution: {
        color: 'text-[#CCFF00]',
        label: '⚡ High-res'
      }
    }
  },
  {
    planName: 'Creator',
    features: {
      videos: {
        color: 'text-[#D6156C]',
        label: '♾️ Unlimited'
      },
      resolution: {
        color: 'text-[#D6156C]',
        label: '👑 4K Ultra'
      }
    }
  }
]

Pro 的 1080p 分辨率用黄绿色高亮，配 "⚡ High-res" 徽章。Creator 的 Unlimited 和 4K 用品红色高亮。

用户 3 秒内识别每个套餐的核心卖点。差异不再被掩盖。

降低次要信息的权重

规划中的功能需要标注，但不能太醒目。原本的琥珀色徽章太显眼，分散了用户对已实现功能的注意力。

// 整行降低透明度
<div className={`flex items-start gap-3 ${
  feature.comingSoon ? 'opacity-50' : ''
}`}>

// 徽章灰色化 + 缩小
{feature.comingSoon && (
  <Badge className="bg-gray-500/10 text-gray-500 text-[10px]">
    Soon
  </Badge>
)}

Coming Soon 功能明确标注，但视觉权重降到最低。用户的注意力自然流向已实现的功能。

第三层：视觉精调

数据诚实和决策引导建立后，剩下的是视觉细节。这些细节看似微小，但会破坏整个体验。

用户反馈的问题

用户发来截图，指出三个视觉问题：

1. 标签被裁剪 - TOP CHOICE 和 SPECIAL OFFER 徽章被父容器切掉一半
2. 文本溢出 - "High-res" 徽章和 "1080p Max Resolution" 超出卡片边界
3. 文本重叠 - 高亮徽章和长文本挤在同一行，横向空间不足

这些问题不是一次性暴露的。它们是在真实使用中，随着用户的视线扫描，逐个浮现。

三轮迭代修复

第一轮：修复标签裁剪

问题在于 CSS 层叠。父容器的 overflow-hidden 裁剪了徽章。

修复方法是分离效果层和内容层：

<motion.div className="relative overflow-visible">
  {/* 效果层 - 独立容器 */}
  <motion.div className="absolute inset-0 overflow-hidden">
    {/* Spotlight 效果 */}
  </motion.div>

  {/* 内容层 - z-10 确保在上方 */}
  <div className="relative z-10">{children}</div>
</motion.div>

徽章定位调整为 -top-6 和 z-50，确保完全可见。

第二轮：修复文本溢出

缩小字体（12px → 11px → 10px），减少间距（gap-3 → gap-2 → gap-1.5），限制模型列表宽度（max-w-[160px]）。

字体总共缩小了 17%，间距减少了 50%。

第三轮：修复文本重叠

前两轮修复带来了副作用。缩小字体和间距后，高亮徽章和文本挤在一起。

Max Resolution  ⚡ High-res1080p Max Resolution  ← 重叠!

最终解决方案：根据是否有高亮徽章，选择不同布局。

{isHighlighted && highlight.label ? (
  <div className="flex flex-col gap-1">
    {/* 第一行: 标签 + 徽章 */}
    <div className="flex items-center gap-1">
      <span className="text-[10px]">{feature.label}</span>
      <Badge className="text-[8px]">⚡ High-res</Badge>
    </div>
    {/* 第二行: 完整数值 */}
    <span className="text-[10px]">1080p Max Resolution</span>
  </div>
) : (
  {/* 无高亮徽章 → 横向布局 */}
  <div className="flex items-start justify-between gap-1.5">
    ...
  </div>
)}

高亮功能垂直排列（flex-col），徽章和数值分两行。普通功能保持横向布局（flex-row）。

修复后的效果

所有标签完全可见，文本不再溢出，高亮功能清晰展示。

工业设计的启示

定价界面的优化，和工业设计中的空间规划有相同的本质。

博物馆的动线设计

博物馆不会在入口竖一块牌子："请先看 A 展厅，再看 B 展厅。"他们会让 A 展厅的光线更亮，入口更宽，自然吸引游客先进入。

重要展品放在视线高度，次要信息放在边缘。游客的移动轨迹，是空间布局的自然结果。

定价界面的信息布局

我们也不应该在定价页面写："Pro 方案最划算。"而是让 Pro 的单位价格高亮，让 1080p 分辨率"跳出"页面，让用户的视线自然停留。

工业设计和 UI 设计的共通性：不是告诉用户"应该怎么做"，而是让空间或界面引导用户"自然地做"。

这是"四两拨千斤"的本质。不是用蛮力推动用户，而是调整环境，让用户自然流向最优解。

方法论的核心

回顾三层优化，每层都在解决一个问题：

1. 数据诚实：承诺的功能真的存在吗？
2. 决策引导：用户如何找到最适合的选择？
3. 视觉精调：细节是否完美传达了信息？

这三层不是孤立的。数据诚实是基础，没有它，后面的优化都是在虚假承诺上建立。决策引导是策略，它减少了用户的认知负担。视觉精调是执行，它确保策略不被技术细节破坏。

四两拨千斤的三个条件

四两拨千斤不是魔法。它需要三个前提：

1. 准确的支点：单位价格标签之所以有效，因为它精确回答了用户的核心疑问。
2. 最小的摩擦：差异化高亮之所以有效，因为它把识别差异的成本降到最低。
3. 持续的迭代：三轮视觉修复之所以必要，因为设计问题只有在真实使用中才会暴露。

如果支点偏离用户真实需求，再精巧的设计也是徒劳。如果决策路径充满摩擦，用户会放弃选择。如果不持续迭代，初版设计的缺陷会一直存在。

可以复制的原则

这套方法不限于定价界面。任何需要用户做决策的界面，都可以应用：

• 产品对比页：高亮核心差异，降低次要信息的视觉权重
• 表单填写：减少字段数量，只展示真正需要的信息
• 功能引导：用颜色和位置创造视觉引导

原则永远是：数据诚实 → 决策引导 → 视觉精调。

不要试图一次设计完美。从清除虚假信息开始，建立决策引导，然后在真实使用中精调细节。这是优化的正确路径。

案例来源