如何设计定价页面

想象一下，你需要设计一个定价页面，这个页面有四种不同定价的服务产品。所有的服务产品都是为不同的受众设计的，功能各不相同，包括一些自定义的选项、多种货币的选择。对于这样的需求，我们应该考虑使用适当的服务产品名称和描述来组合成不同的组。还应该显示出产品之间的差异，并提供一个完善的功能比较矩阵。

这些要求听起来不像是具有挑战性的任务？并不是每个定价页面都复杂的像汽车或者数码相机的比较页面一样，但是定价页面会有很多的细节，例如隐藏的提示、选项卡、收起的折叠面板等。定价页面有很多信息需要展示，只有很好的展示这些信息内容，才能推动用户选择最合适的产品。

Ableton Live，有很多功能可供比较，产品计划之间所有功能的大型列表，以及工具提示

如果想要设计一个更好的定价页面，你会怎么做呢？让我们先从一个基本的问题开始：首先，用户是如何比较定价页面上的商品属性？

定价页面的比较

当用户登陆到定价页面时，假设用户正在寻找最适合自己的服务产品。用户可能只是浏览探索我们提供的产品，或者用户可能正在拿我们的产品与竞争对手的产品进行比较。无论哪种方式，我们都需要为用户提供完整的功能清单和功能价格。

然而，对于一个产品，实际上可能有成百上千的特性。逐一查询每个功能来比较定价，比较繁琐和耗时。

1.浏览模式

可用性研究表明，用户在浏览功能比较表的时候，依赖割草机浏览模式。这意味着它们从左上角的单元格开始，向右移动直到行尾，然后下降到下一行的最后一个单元格并返回到左侧直到行尾。

割草机模式：用户在比较表中扫描数据的方式

在浏览的过程中，用户会时不时地随机查看其中一个属性，进行详细的研究。用户在这样做的同时，经常会去查看表格的标题，来验证它们仍在浏览正确的服务产品。

2.频繁校验表头

在复杂的定价页面中容易出现一个典型的问题是：失去方向性。一旦用户处于定价计划的中间，用户通常会返回改列的标题以验证它们正在探索正确的计划并查看计划的价格。

如果标题不可见，用户往往会反复上下滚动页面，在比较时经常会失去焦点。这种情况在移动设备上是特别糟糕的用户体验，因为属性和计划通常都看不到，这使得在表格中进行任何比较都很困难。

3.从左到右

如果用户需要找到免费计划或者企业计划，最希望它位于定价页面的哪个位置？通常情况下，免费计划可能位于左侧，而企业计划可能位于单独的选项卡中或者右侧。实际上在从左到右的界面中，我们直观地假设存在一种从简单的基本计划到昂贵企业计划。

典型定价页面设计。随着计划从左到右“增长”，上一个计划中的所有内容都包含在下一个计划中

“标准”和“最受欢迎”的计划预计会在中心的某个地方。对于垂直排列的可定制功能和附加组件，默认选择或推荐功能预计会首先出现，接下来会列出更多功能，价格从低到高。

4.用作参考的功能完整列表

我们假设用户知道哪些功能是他们需要的，但是当涉及到复杂的产品时，有些功能看起来很熟悉或者感觉很重要，但是这些功能的描述又点陌生。其他功能现在看来可能无关紧要，但是会在以后对一些任务有很多的帮助。

虽然一些功能预先知道很重要，而另一些功能可能是相关的，这就需要用户去发现它们。

我们面前的服务产品有数百个特性，如果不先浏览整个列表，很难找到相关的特征。这就是为什么需要对所有定价计划的所有功能进行详细比较的原因：至少需要了解服务产品。

5.多次比较

在可用性测试中，可以观察到用户在比较定价计划时需要至少进行2次比较。在第一次比较时，尝试了解整个功能范围并了解服务产品之间的差异。完成后，用户尝试寻找最适合自己的服务产品。

最后，用户再次回到功能比较表的顶部，专注于之前预先选择的那个服务产品，并认真的进行第2次的功能比较，有时甚至可以看到用户把鼠标指针放到计划列表中缓慢的移动，从上倒下，并在那里徘徊一段时间。

虽然第一次比较可以让用户找到一个合理的服务产品，但是第二次可以帮助用户验证服务产品是否适合自己，并且确保没有遗漏服务产品的重要信息。

6.产品功能区分主次

并非每个潜在客户都希望浏览所有的可用功能。在测试中，用户经常会在功能矩阵中的行或整个部分之间跳转，以跳过与他们无关的属性。需要一些重要的关键特性需要始终显示，但也会有一些次要的、不太重要的特性。其中许多功能与一些客户相关，但并非对所有人都适用。

因此，找到一种将这些特征分解为组，并根据要求显示的好方法，有助于保持功能矩阵的简单。此外，还可以通过将每个服务产品与特定用户或公司相关联来提供快捷方式，以帮助客户快速找到最适合他们的计划。

考虑到这些行为模式，让我们探索一些在将所有这些细节整合到定价页面设计中用到的的设计模式和功能。

简单的价格

定价页面的设计首先很大程度上取决于定价的复杂程度。在一些情况下，如果定价非常简单，不需要制作定价页面。只需要让客户了解服务产品和产品价格。

除了大客户外，Stripe 为所有人提供简单的定价。所有功能都突出显示，在页面下方有推荐、现有客户、集成选项和常见问题解答。

简单的定价，精美的设计。除大客户外， 为所有人提供了一个简单的定价选项

Algolia 采用了类似的方法。不在顶部突出显示每个单独的功能，而是将功能矩阵放置在页面下方，企业选项仅在靠近页面页脚处可见。那里还有进一步的计划和常见问题解答。

Fathom Analytics 根据单个属性更改定价：每月页面浏览量。与显示每个计划的功能不同，所有功能都在右侧列中单独列出，而定价选项显示在左侧。此外，请注意标题性用语，以及通过切换到按年付款来免费获得2个月的选项。

没有复杂的产品定价计划：只有根据每月页面浏览量而变化的计划

Kissflow，没有包含特性比较矩阵，也没有关于可用功能或现有客户的冗长描述。只有3个简单选项，虽然对于大多数公司来说可能已经足够了，但对于其他公司来说可能还不够。

在复杂和简洁中找到平衡，这些定价选项对每个人来说都足够了吗？

有的定价计划会更加复杂。amCharts 为每个单独的产品提供4种不同类型的许可证。定价以矩阵形式显示，类似于我们在预订航班、火车或电影票时经常看到的模式。我们在这里看到了类似数量的选项，它们会立即显示，而在上面的示例中，扩展定价选项是隐藏的，只有在用户联系客户支持后才会显示。

有时定价计划很复杂

相比之下，HelloSign 的定价页面似乎相当复杂，主要是因为大量单元格都以独立块的形式出现。每个属性都重复多次，使得定价计划更难阅读。在每一列中分别显示属性并在每一列中显示复选标记可能是一个好方法。

定价计划并不复杂，但是看起来很复杂

但是，重要的是要显示足够多的详细信息，以便让客户清楚地了解产品的差异。

简单的定价肯定会有所帮助，但有时可能不是一种好的选择。对于这种情况，让我们探讨如何将上面的一些定价计划转变为更易于阅读的替代方案。

定价表

定价页面上的定价计划如何设计？将它们并列呈现为列，其中包含所有计划的主要功能以及中间的标题性用语。此外，在定价表的顶部，我们通常会发现月度和年度定价之间的切换，有时还有货币选择器。

Notion定价页面就是一个很好的例子，尽管有些不同。在默认情况下，所有定价计划均按年计费，注册时可选择切换为按月付款。每个计划都会解释为其创建的角色，该计划的功能。当我们从左到右移动时，我们会不断添加更多功能。

页面下方显示了一个全面的功能比较矩阵，用户可以与之交互，以了解有关每个单独功能的详细信息。

在Rows，定价计划在电子表格中呈现，让人感觉像是客户在进行计算时可以自己使用的常规表格。

定价页面像表格一样

有时，所有计划都不能合适的放在一排，对于 Dropbox 将它们全部包装在俩个单独的行中。这比在6列视图中显示产品计划会更好。

Zendesk 将它们的计划分组到选项卡中。并非所有计划都始终显示，鼓励用户首先制定他们所有追求的：个人计划或者企业计划。

显示计划的另一种方法是允许用户选择与她们最相关的计划。 N26 显示一个下拉菜单--允许用户选择他们想要并排学习的计划。根据用户的屏幕，客户一次最多可以比较3个计划。

如果有多个计划要显示，可以探索将它们分组到选项卡中，在下拉列表中显示一些选项，或者将它们放在在多行中。如果不能很好的将所有计划压缩到表格中，用户需要水平滚动表格，通常需要避免这种体验。

专注于关键特性

随着产品不断的迭代，发布了一些新的功能，想在定价计划中突出所有这些功能。这是定价计划显得过于复杂的原因。另一种方法是关注关键特性，在需要时显示所有的其它特性。

在 Contentful ，定价页面不会将重点放在冗长的功能比较表上；取而代之的是，三个主要产品计划突出显示在页面顶部，只有几个关键的产品特征。完整的功能列表也可以用，放置在页面的下方，不会影响到页面的重点。

每个产品计划突出显示4个关键功能

Chargebee，突出了每个计划的许多功能，只有在用户实际选择查看产品计划比较时，才会出现完整的比较表。用户单击的时候，将会打开一个窗口，所有的用户产品选项都显示在表格中。

Airtable，在密集、紧凑的视图中显示了更多功能。通过不同的颜色来区分不同的产品计划。所有的价格、标题性用语和功能列表的设计版式都是一致的，因而浏览阅读这些产品计划比较容易。所有产品功能的列表和比较显示在页面的下方。

Codepen，上有使用更多的颜色。当用户在浏览产品特征矩阵时，用户不仅可以依靠列的位置，还可以依靠视觉中的色彩来了解他们正在浏览的产品计划。

颜色提供视觉索引，帮助用户更容易的在列之间浏览

一般来说，值得测试一个包含所有功能大型列表的必要性，以及定价页面设计是否会通过仅仅显示少数可区分的关键功能来更好的工作。可以从仅包含列表中几个项目的设计开始，如果潜在的客户对于计划之间的差异不够清楚，就可以添加更多的产品特征。

显示行内的差异

在上面的许多案例中，一个计划的功能完全包含在更高级别计划的功能列表中，但有时情况并非如此。根据选择的计划，你的收费可能会有所不同或限制有些许的不同。在这种情况下，你可以按照 Podia 的示例隐藏不可用的功能。虽然对比度可能会增加很多，但通过单独浏览每一行来比较每个计划就很容易。

N26，通过在同一行中突出显示可用和不可用选项。单击其中一个下拉箭头可以扩展每一行，并提供有关每个功能的更多详细信息。

Dovetailapp 通过强调功能可用性而不是缺乏功能来解释差异。它使产品计划矩阵更加容易浏览。

拥有的视觉元素越少，定价计划就越容易探索

当定价计划稍有细微差别时，各层级之间存在显著的差异，我们可以显示所有列中的所有关键功能，并突出显示它们在哪个计划中可用。关于每个功能的更多详细信息可以出现在折叠面板中，而不是工具提示中。我们也可以在这些想法的基础上，通过视觉解释差异。

直观的解释产品的差异

作为比较矩阵的替代方案，我们可以尝试在选项卡中可视化产品计划之间的差异，并使用一些动画来解释特定的产品计划。 Twilio Segment 就是这样做的。当用户在选显卡之间切换时，功能列表会更新。这不是一个并排的比较，只是让用户方便了解各产品计划的不同之处。

Basecamp 采用了类似的方法，强调主要的“商业”计划，但也解释了个人计划的不同之处：它只是没有主要计划的某些功能。我们可以通过从字面上划掉该计划中缺少的功能来说明这一点。

Ballpark 通过使用滑块构建一个捆绑包来可视化定价计划。它还解释了该计划附带的所有功能。

上述示例有一个共同点：它们都没有使用表格，而是选择了一种稍微不同、更简化的方式来突出定价计划的不同之处。正如我们稍后将看到，这通常是一种很好的方法。

允许用户看到差异和相似之处

我们可以通过突出这些差异来帮助客户理解产品之间的差异，而不是显示复杂计划的整个功能比较矩阵。

三星的比较页面当然不是定价页面，但作为功能比较矩阵的一部分，它允许用护选择他们感兴趣的功能，以及显示每个选项的差异和相似之处。此外，如果用户愿意，他们可以折叠整个功能组。

几年前，客户可以选择只看到三星的差异和相似之处

为什么我们想向客户展示计划之间的差异可能很明显，但为什么我们只想展示相似之处呢？事实证明，用户通常倾向于选择稍微贵一点的计划，尽管他们知道他们不需要该计划中的所有功能。他们接下来要虚招的最便宜的计划，它足够好，因为它涵盖了更昂贵计划中可用的大部分功能。出于这个原因，他们可能希望通过仅显示相似性来进行比较，以确保一个计划与另一个计划相比足够接近。

使用黏性标题

由于用户经常依赖表头来验证他们是否正在研究正确的产品计划，因此我们可以始终保持表头可见。用户通过向下滚动比较表中的页面时使标题浮动来做到这一点。Contentful 的定价页面就是这样做的。表头始终保持可见。

intercom 在模式窗口中突出显示所有功能，产品计划随着用户滚动表格并探索他们的选项而浮动。

此外，对于每个定价计划的标题性用语，Dropbox 会在页面顶部保留实际定价点和每年/每月付款切换。

Figma 也坚持浮动条。除了定价和号召性用语之外，顶部还有选项卡，允许用户在提供的工具之间切换。

浮动条在Figma的特征比较矩阵的顶部

正如我们所看到的，粘性标题总是为客户在给定时间探索的确切内容提供急需的参考。它们确实占用了一些空间，但是用户通过比较事物而无需反复上下滚动而获得的舒适感是非常值得的。

将属性分组为可折叠部分

在上面的 Contentful 示例中，我们已经看到不仅所有功能都被分组，而且整组功能都可以通过折叠面板展开。由于可用功能的数量庞大，跳过一些不太重要的选项可以简化帮助导航。就像使用普通卡片一样，我们将整个栏作为折叠面板，因此客户可以轻松跳过整组功能。

在 Zendesk 上，所有功能都被分组并打包成可以一次打开的折叠面板。可以更快的浏览，这样完整的功能列表更友好。

在 Ableton 上，所有属性也被分组到折叠面板中。通过“+”号图标单击，任何项目都会打开整个卡片。

因此，对于PC端上的定价页面，将功能分组为折叠面板，并在用户浏览表格时保持产品计划浮动。我们还需要有货币选择、每月/每年的定价以及在表格顶部显示差异或相似性等功能。

工具提示和功能预览

用户并不一定了解比较矩阵中列出的所有功能。有时功能看起来有点不清楚，所以我们需要解释这些功能代表什么以及它们如何对客户有价值。解释的一种常见模式是使用提示信息。这通常通过悬停/点击专用工具提示图标或功能本身来实现。

在 Notion 上，当用户选择将鼠标悬停在问号图标上时，会显示解释每个功能的提示。

将鼠标悬停在工具提示上时出现的提示

在 Airtable 上，悬停时不仅会出现文本提示，还会出现视觉预览，包括突出显示和解释功能的简短动画。

Mailchimp 通过点击/单击功能来打开非模态来解决可访问性问题。焦点样式正在使用中，键盘用户可以使用 Tab 从一个功能移动到另一个功能。

在 Cloudflare 上，工具提示涵盖了列表下方列出的功能，很难在功能之间快速移动。

一个常见的问题：工具提示涵盖了即将推出的功能，并且难以快速从一个功能导航到下一个功能。

在上面的示例中看到了一个问题：提示的卡片样式遮盖其他信息；如果可以使用折叠面板代替它们。

在 Podia 和 Netlify 上，每个功能都有单独的折叠面板进行解释和描述。实际上，并不是每个功能都需要解释，有可能一些客户可能会认为这+代表了在当前价格中添加附加组件的选项。

N26 每行使用下拉箭头，点击/单击其中任何一个会展开整个行并解释该功能在计划中的差异。

Confrere 没有任何工具提示或折叠面板。每个功能都有很长的描述，这些描述显示在单独的页面，详细解释了每个功能。

在考虑显示每个功能的详细信息时，我们可以探索不仅依赖文本描述而且显示实际功能预览甚至可能有用的用例的选项。细节可以在点击/点击时出现，或者在折叠面板中更好，当用户与之交互时扩展一行。

自定义选项的灵活性

正常情况下，我们希望将一个非常适合用户的产品计划推荐给用户。如果想创建一个适合所有人的通用计划，这有点难。Slack 对活跃用户的定价是很好地满足团队需求的灵活计划的一个很好的例子。

在定价计划的背景下，我们可以通过指定所需座位和带宽的确切数量，甚至根据可能需要的套餐和附加组件定制计划，让客户对定价更加精细。最终目标是快速提供最终价格——而不是随机计划；最适合用户的相关计划。

Speedcurve 允许用户通过指定每月的页面浏览量和每月的检查次数来制定自己的计划。

Hotjar 根据是否正在使用软件包以及预计每天使用的会话数来更改其定价。

intercom 专注于可以添加到基本计划中的附加组件和附加组件。这使用户可以尽早了解最终价格。

我们的最终设计 KPI 是减少寻找完美定价计划的相关时间。我们可以通过更加关注客户的确切需求并提供最适合他们的定制选项来实现这一目标。

显示明确的的价格

一些定价计划可能很复杂，有时具体包含哪些内容和不包含哪些内容并不是很明显。我们可以通过明确价格的计算方式、价格包含的内容以及是否包含任何隐藏成本来消除用户的疑虑和担忧。声明有助于消除担忧。

intercom 解释了价格的计算方式以及选择计划时要记住的任何限制和重要事实。

Gumroad 在定价页面上，一大片区域解释了服务的工作原理以及定价计划的内容，旁边还有一个定价示例。

总结

定价计划一开始似乎很简单，一旦我们仔细观察，在进入设计阶段之前需要考虑许多重要的因素。以下是设计时要考虑的一些重要事项的快速概述：

简单的定价

对于复杂的计划，考虑换行、表格，还有下拉菜单

无需一次显示所有功能：首先关注的是重要功能，然后根据要求显示其余功能。

直观的显示差异性

允许用户只显示差异和相同

考虑将每个部分变成独立部分，使用标签、倾斜标题，避免使用下拉菜单

避免悬停工具提示，并在单击时显示预览功能

信息的收纳考虑折叠面板

提供定制选项，实现灵活的产品定制计划

向用户提供清晰的定价