设计比较表和定价页的综合指南

每个登陆你的页面的人都需要信息。他们想要快点。

比较价格表是最好的事情你可以增加销售,让人们行动起来。这个页面元素可以帮助您根据相对价值来推广产品,并帮助访问者快速比较不同的产品。

但是你应该如何设计你的价格表呢?你应该比较哪些特性,用户真正想要的是什么?

让我们深入研究比较价格表,看看它们是如何工作的,以及它们在web上的用途。无论你是要开一个电子商务商店还是在博客上比较产品,这些建议无疑会帮助你迈出正确的第一步。

比较表介绍

那么什么是比较表呢?它实际上只是一个HTML表,包含不同产品的列和比较这些产品特性的行。

这通常被称为“定价表”,因为许多SaaS工具都使用它,它们以不同的价格提供不同的计划。目标是共享信息很快这样用户可以检查他们想要的计划。

但你也可以使用实物产品或集体交易的定价表。可以把比较表看作是聪明的购物者的权宜之计。

顾客在决定买什么东西之前会先查看数据。如果你能在一个表中提供所有的数据,那么你就创造了一个无价的资源,一定会鼓励购物者购买。

你的目标应该是多方面的,但一个伟大的比较价格表至少应该:

  • 列出所有可能的选择(或最好的选择)
  • 包括每个选项的价格
  • 比较每个选项的主要特性和优点

让我们看看比较表的一些设计趋势,看看您希望自己的表具有哪些特性。

没有单一的“正确”答案,因为每个产品都略有不同。但是,最好的表易于使用,并且清楚地标明了对客户真正有价值的信息。

强调推荐计划

我在几乎所有的价格表上都看到了这一点。这是一种趋势,你突出一个栏目,向大多数买家推荐“最划算”或“最受欢迎的选择”。

通常这是最便宜的计划/项目,但它是最划算的。你可以用这个与买方心理销售客户的任何计划,你想要的。

石蕊定价表

以石蕊试纸定价页面为例。这将运行一个非常大的表,其中有许多行比较每个计划之间的特性。

强调的计划可能不是每个人都需要。但它比提供更多电子邮件测试功能的基本计划开放得多。另外,它的成本并不比默认值高很多,所以这是一个安全的选择。

你会在Slidedeck上找到一个类似的例子,尽管他们的表中只提供了三个具体的计划。

本文的定价比较

你会注意到中间的柱子是用完全不同的颜色和风格设计的。它还包括一个投影,以出现在其他元素的“顶部”。

这种错觉使它看起来像中间的一列是突出的页面对你。它感觉更接近用户,因此鼓励更多的交互。

当然,这也是最昂贵的计划,所以有很好的理由把它推给客户。

对于一些更微妙的Cloudways做得很好,他们的表高光效果。

cloudways定价页

实际上,您可以使用任何您想要的设计资产来帮助这个专栏脱颖而出。边框颜色,背景颜色,图标,丝带,更大的文本,更大的cta。

目标是设计一个表,其中一列的显示效果明显优于其他列。它可能不会迅速增加销售额,但很可能产生影响。

宽敞的数据比较

记住,用户真正关心的是信息。你的工作是清晰而简明地表达信息。

这意味着您的定价表应该在每一行和每一列的周围留出足够的空间。你应该在网上寻找其他的想法,但不要只是从一个来源复制。

相反,你应该根据你所分享的信息类型以及对访问者最有用的信息来规划你的表格。

wufoo定价

我真的很喜欢Wufoo的定价页面,因为它很时髦,很容易浏览。表本身有一个中性的配色方案,所以任何额外的颜色真的很流行(蓝色和绿色的亮点)。

另外,你会注意到表格中的某些单词被涂上了更黑和更粗的颜色以突出显示。这使得内容之间的额外空间更容易被浏览。

哪些文本是粗体的?当然是数字!

总价,统计,测量,订阅时间,这些都是买家的重要信息。展示他们关心的信息,并确保这些信息能够被接受。

semrush定价

另一个宽敞的价格表的例子是SEMrush。这再次使用带分隔符的行来帮助信息在略读时突出显示。

另外,您会注意到每一行的标签文本要小得多,也更难以阅读,但是数据非常清楚,而且非常暗。

试着设身处地为一个普通的购物者着想。你的表格是否方便查找信息?如果不是,为什么?

通常,空间和重点是两个解决方案。

只关注有价值的信息

我一直提到信息,因为信息真的有助于销售价格表。但是什么样的信息是最有价值的呢?

显然,每个项目/计划的价格应该突出。你的产品所提供的功能也是如此。托管,内容创建,横幅设计)。

以Shopify价格页面为例。

shopify定价表

他们一开始会列出一大堆价格细节,包括按月收费和按销售额计算的附加费。这给了每个客户清楚的信息,他们将支付多少取决于计划。

但是在表格的下面,你会发现产品的总数、员工登录和额外的功能(如礼品卡)的比较。

同样,我们的目标是像客户那样思考。哪些功能可能会促使他们购买?把它们放在你的桌子上,确保它们很容易浏览。

亚马逊kindle表

你会经常在亚马逊的产品页面上发现类似的例子。这些软件会将一种产品与同类产品进行比较,以便潜在客户知道该买哪种产品。

我发现这种方法最适用于物理产品的比较,因为您经常要比较大小、价格和额外的功能(或缺少这些功能)。

我不能确切地告诉你要比较什么,但只要你的桌子能鼓励别人买,那么你可能做得对。

为了清晰添加视觉效果

小图标和插图可以真正提高你的定价表游戏。但是它们应该与你的布局相关,并且易于使用。

DNS的工作人员通过为每个主要的DNS服务添加徽标,并对它们进行同等的比较,很容易做到这一点。

dns简化定价

如果你在评审中比较不同的产品或公司,那么一定要考虑这种方法。这是一种通过与其他产品比较来吸引注意力的好方法。

但您也可以使用插图定制您的计划与独特的品牌。

以Freshdesk价格页面为例,该页面为每个计划都提供了自定义图标。

freshdesk插图定价

这些图标与公司或产品没有直接关系。但是它们可以帮助你想象哪些计划比其他的“更大”,这样你就可以根据你的需求和预算告诉你可能会遇到的情况。

在某处添加清除cta

如果买家有兴趣从你的桌子上购买东西,他们应该知道点击的确切位置。这就是为什么您需要一个CTA按钮,而您希望为表中的每个产品或计划都有一个CTA按钮。

cta是一个备受争议的话题,因为这些是帮助用户采取行动的按钮。这些按钮是从比较表到结帐页面的门户。

每个网站的CTA都是不同的,但它们都应该是突出的,容易找到。

typekit cta定价表

TypeKit的定价页面使用绿色按钮来突出显示并吸引用户的注意力。文本“注册”也很重要,因为它告诉你当你点击时会发生什么。

这个页面上唯一的绿色元素是cta,所以它们非常清晰。这再次帮助买家扫一眼桌子。

你可以在Desk.com上找到类似的按钮,但它们的价格表使用不同的颜色方案。

desk.com定价表

这最终会影响按钮的颜色,使其与特征列混合。这是一个将两个趋势合并到一个表中的好例子。

此外,按钮文字“开始免费试用”是独特的,因为它意味着不收取新用户。这是否增加转化率我不能说,但它确实值得测试。

liverstream定价表

如果你想混合不同的风格,可以尝试一下ghost按钮技术,比如Livestream的定价页面。

对于空按钮颜色,您仍然可以通过添加边框来帮助它们脱颖而出。然而,具有完整背景的按钮绝对会比其他按钮更容易跳出页面。

在网上搜索CTA设计技术,尝试各种风格。你甚至可以在你的价格表上使用A/B测试,看看哪种按钮风格转换得最好。

前进

有了这些知识,你应该有足够的去做一个摇滚明星价格比较表。在网上学习一些其他的例子,看看你能否找到其他相关的趋势。

研究其他设计总是好的,只是为了看看其他人在做什么。但不要让这成为你的终极目标!在这些想法的基础上,使用来自流行案例研究的移情和用户体验技术。

随着时间的推移,你会找到一个完美的方式来构建一个可用的价格表,转换和帮助访问者找到他们需要的信息。

2020-01-06 17:55
相关热门