产品对比页：让用户自己做决定

背景：SaaS 产品官网最核心的转化页面不是首页，是对比页。当用户在犹豫「我该选哪个方案」的时候，一张好的对比表比任何营销文案都有效。我用 huashu-design 做了一个 3 方案定价对比页，10 分钟。

对比页的本质：帮用户做决策

对比页设计的核心不是「展示你的产品多好」，而是**「帮用户找到最适合他的方案」**。

这意味两件事：
1. 用户需要同时看到所有选项（不要 tabs，不要轮播）
2. 每个选项的差异点必须一目了然（不需要逐行对比）

第一步：信息结构——三列对比

AI 开工前先确认了对比页的骨架：

┌──────────┬──────────┬──────────┬──────────┐
│          │  Starter  │  Pro     │  Enterprise │
├──────────┼──────────┼──────────┼──────────┤
│ 价格     │  ￥199/m  │  ￥499/m  │  定制     │
│ 用户数   │  5 人     │  20 人    │  不限     │
│ 功能 A   │  ✅       │  ✅       │  ✅       │
│ 功能 B   │  —        │  ✅       │  ✅       │
│ 功能 C   │  —        │  —        │  ✅       │
│ CTA      │  开始试用  │  开始试用  │  联系     │
└──────────┴──────────┴──────────┴──────────┘

关键决策： 把「推荐」标签放在 Pro 方案上，引导用户往中间看——这是定价心理学中最经典的「锚定效应」。

第二步：设计系统——不要用表格线

大多数人做对比页，第一反应是画表格——border、background、hover 高亮。但表格线的视觉噪音会干扰用户做决策。

huashu-design 的做法是：不要表格，用卡片。

三个方案是三张独立卡片并排，靠留白和间距来区分，而不是靠边框线。推荐的 Pro 方案卡片略宽（或者加一个极淡的阴影），暗示「这是大多数人的选择」。

第三步：价格区——心理锚定

价格展示是整个对比页最重要的信息层级：

• 数字最大：¥499 用 36px，加粗，一眼可见
• 单位最小：「/月」用 12px 灰字，和数字形成对比
• 年付提示：在月付下方一行小字「年付 8 折」

推荐的 Pro 方案价格写在中间，左右两边分别是更低和更高的价格——中间方案永远是转化率最高的。

第四步：功能列表——只列差异

大部分对比页的毛病：把每个方案的所有功能都列出来，结果就是一张 30 行的超长表格，用户根本看不完。

好的对比页只列差异点。 三个方案都有的功能（比如「邮件支持」）直接放在上方的「所有方案包含」区域，不要在对比表里重复。

对比表里只放这四类信息：
1. 只有高价位有的（Pro 比 Starter 多的）
2. 只有最高价位有的（Enterprise 独有的）
3. 定量差异（5 人 vs 20 人 vs 不限）
4. CTA（免费试用 vs 联系销售）

第五步：CTA——三种不同的行动号召

每个方案底部的按钮文案不都一样：

三层设计让用户自然地流向 Pro：免费版入口克制，企业版需要咨询，只有 Pro 是一键直接用的。

「推荐」标签怎么写？

不要在标签上写「最受欢迎」——太模板了。写具体理由更具说服力：

• ❌ 「最受欢迎」
• ✅ 「适合 5–20 人团队 · 14 天免费试用」

标签字数控制在 12 字以内，字重 500，背景色用品牌的 accent 色，不要用 emoji。

耗时复盘

核心心得

对比页设计的本质是：让用户在 10 秒内找到「我应该选哪个」的答案。

不是展示所有功能，不是证明 Pro 有多划算，而是尊重用户的决策过程——告诉他差异在哪里，然后让他自己选择。

下次你要做定价页的时候，先问自己：用户看完这张表，知道该点哪个按钮吗？如果答案是不确定，重做信息架构。

截图清单

1. ✅ 产品对比页（三方案卡片 + 价格锚定 + 差异列表）— 已插入上文