定价表设计:10 个带有示例的提示(元素)

主要外卖

• 良好的定价表设计并排显示三到四个计划,其中一个计划在视觉上高于其余计划,因此读者可以默认选择。
• 当每张卡都遵循相同的顺序时,定价表可以更好地转换:计划名称、名称、价格、计费周期、简短的功能列表和一个按钮。
• 特征行应为每行三到六个单词;一行包裹在第二行上会减慢阅读速度并使卡片不均匀。
• 销售价格旁边的划掉原始价格为读者提供了一个锚点,而主插件定价表小部件有一个销售开关。
• 每月和每年的切换需要两组卡片;在主插件中,切换内容小部件 (Pro) 在两个保存的部分模板之间切换。
• 在手机上,定价卡堆叠在一列中,因此突出显示的计划应位于第一或第二,而不是第三。

Pricing table设计决定一个已经想要你产品的访客是否能在几秒钟内找到合适的计划,布局简单:一排卡片,每个价格,每个按钮,重要的决策比这个要小:有多少计划,哪个被提高,价格是什么样子,每个功能行运行多长时间,按钮说什么。

本帖子浏览了十个定价表设计提示,每个提示都显示在使用 Master Addons for Elementor 的定价表小部件构建的真实表格上。示例使用编造的计划(Starter、Growth、Agency),因此您无需复制价格即可复制结构。如果小费需要第二个小部件,例如每月和每年的切换,该帖子会显示哪一个以及是否在 Pro 计划中。

1、出示三个方案,最多四个

3个方案是定价表设计大多数读者可以一目了然,2个方案强制是或否决定,5个或更多方案将表格变成电子表格,读者开始在笔记本电脑上横向滚动,放弃手机。

将你希望大多数人购买的计划放在中间,人们从左到右读一行,但他们定居在中心,这也是卡堆叠时眼睛首先落在手机上的地方。如果您出售具有自定义定价的代理或企业计划,请将其保留为第四张卡,并带有“联系我们”按钮,而不是单独的桌子。

Elementor 中,每张卡片都是一个定价表小部件掉入自己的列或容器中,一个三列容器中的三个小部件,每个小部件设置为相同的布局,为您提供上面的表 定价表小部件页面 拥有完整的控制列表和五个实时布局。

2。把一个计划举到其余的上面

突出显示的计划给读者一个默认值,大多数人会接受它。突出显示一次性做三件事:卡片稍高或抬起,按钮使用重音颜色而不是轮廓样式,丝带命名原因(“最受欢迎”, “最佳价值”, “推荐”)。

Highlight恰好是一张卡片 两张高亮卡片相互抵消 选择最适合你、最适合大多数读者的保证金最佳方案,而不是最昂贵的方案。

在定价表小部件中,打开 突出显示表 在"内容"选项卡中,然后打开" 丝带 section 来设置文本、对齐、位置和旋转。在 Style 选项卡中给突出显示的卡片不同的按钮颜色,这样它就不会单独依赖色带。

3、让价格成为卡片上最大的东西

价应该是卡片上最大的文字,比计划名称大,读者先扫描一个数字的定价表,再读计划名称,所以一个设计让名字大于价格,就减慢了速度。

Currency符号和计费周期保持小于数字,“49”读数快于“49.00美元/月”, 若打折方案, 显示原价划掉在售价旁,划掉的数字是锚:49坐旁比单坐便宜。

小部件有一个 出售 pricing下切换。打开它, 填写 原价且"通关自动出现"从列表中选择货币或键入自己的符号。

4。以买方为计划命名,而不是以层为单位

当计划名称告诉读者该计划是为谁而设计的时,计划名称效果最好。 “Starter、Growth、Agency”说的不仅仅是“基本、标准、高级”,每个名称下都有一个单行字幕(“对于一个站点”, “对于小团队”, “对于客户端工作”)去除了猜测。

避免需要功能列表才能有意义的名称。如果读者必须比较行才能找出哪个计划是“标准”,则该名称已失败。避免出于同样的原因而使用笑话和内部代号。

定价表小部件有一个 标题 和一个 副标题 header 部分的字段,再加上一个可选的图标和标签,字幕是 “对于小团队”的正确位置。

5。保持特征行短,顺序相同

每个特征行应该适合一行,三到六个单词。长行包裹,卡片变得不均匀,读者停止跨计划进行比较,因为行不再排队。

1张卡片中以相同的方式排序,在顶部计划之间变化的行(“1站”vs“5站”vs“无限站”),每张卡片五到七行就足够了,如果你有二十个功能,定价表对他们来说是错误的地方:把前五名放在这里,其余的链接到一个对照表。

小部件的 特点 repeater每行取一个文本、一个图标和一个可选的工具提示,每个包含的功能使用相同的图标,而计划不包含的功能则使用不同的(或没有)图标,因此视觉模式在卡片之间匹配。

6。把细节放在工具提示中,而不是放在行中

工具提示可让您保持行短,并仍然回答"“其中包括什么?”的问题。行上写着"所有小部件";工具提示上写着"每个小部件和扩展"。

2行或3行生成支持题使用工具提示,而不是每行。每种功能都有一个虚线下划线的卡片看起来像是在隐藏什么东西。将工具提示文本保留为一句话。

在"定价表"小部件中,"功能中继器"中的每一行都有一个 工具提示 switch,一个文本字段和一个放置选项(顶部,底部,左侧,右侧)。

7、每卡一个按钮,上面有一个动词

King钮是卡片上唯一做任何事情的元素,所以给它一个作业,并用动词标记它 “开始”, “开始免费试”, “选择成长”都起作用 “提交”和“点击这里”不要。

钮(button)下,一根短信任线移除最后一个反对意见:“取消任何时间”, “14天退钱”, “不需要卡”, 保持五个字, 不要堆叠其中三个字。

小部件的 脚踏车 部分有按钮文本、链接和 附加信息 field for trust line。如果你用轻松数字下载进行销售,同一部分有一个EDD购买按钮,直接链接到产品。对于WooCommerce产品,将按钮链接到产品或结账页面。

8。只有在储蓄值得展示的情况下才添加每月和每年的切换

1年计费为读者节省一个明确的金额时,每月和每年的切换是有道理的,通常为两个月或更长时间。如果每年的折扣很小,则切换会增加一个步骤而不改变决定,并且单个“每年计费”行做同样的工作。

月(“39美元/月,按年计费”)显示年度价格,而不是全年总价,因此两个拨动状态比较喜欢喜欢。将保存放在拨动旁边(“保存20%”),这样读者在点击它之前就知道为什么开关存在。

Pricing Table 小部件每卡持有一个价格,因此切换来自第二个小部件,构建一组具有月价格的卡片和一组具有年价格的卡片,将每张卡片保存为一个部分模板,并将两者都放入 切换内容小部件的, 这是在主插件Pro计划中。Toggle内容页面有设置步骤和一个实时示例。

9、选择一个与页面匹配的布局,然后保留它

定价表的布局应与其周围的部分相匹配:干净的 SaaS 页面上的一张普通卡片、较软品牌上的圆形标头、页面其余部分使用摄影时的背景图像。选择一张并用于表中的每张卡片。

1张桌子内部混合布局是常见的错误,读者将形状的差异读作方案上的差异,颜色也要保持有限:高亮卡片为1种重音颜色,其余为1种中性。

定价表小部件有五种布局 布局 下拉(默认、左对齐内容、圆形表、带有 BG 图像和倾斜 BG 图案的表),当您在它们之间切换时,内容会保持在原位。 模板库 如果您愿意从完成的设计开始,请在这些布局上构建定价部分。

10、发布前先在电话中查看表格

在手机上,卡片堆叠在一列中,因此读者一次看到一个计划并滚动经过其他计划。这会改变两个决定:哪张卡片排在第一位,以及每张卡片有多高。

Mobile 上把高亮的计划放在第一或第二位,如果它在桌面上位于第三位,则使用 Elementor 在容器上的响应式排序将其向上移动。将功能列表保留为五行,以便一张卡片大致适合一个屏幕,并使按钮足够宽以轻点。

Elementor响应模式(面板底部的手机图标)打开,在移动断点处查看表格,定价表小部件的Style选项卡控件有响应开关,因此无需更改桌面版本即可缩小价格字体和手机上的填充。

常见问题

最后的想法

定价表设计归结为一个简短的列表:三个计划,一个提高,价格作为最大的文本,计划名称说明计划是为谁服务的,功能行适合一行,工具提示细节,一个带有动词的按钮,只有当年度保存是真实的时才切换,每个表一个布局,以及手机上的支票。上面的十个示例中的每一个都是使用定价表小部件和一些面板设置构建的。

如果你是从头开始,请打开 定价表小部件页面 要实时查看五个布局,或从中选择一个完成的定价部分 模板库 并更改计划。小部件就是其中之一 小部件和扩展 在主插件中,计费交换机的切换内容小部件位于计划中 定价页面.

相关阅读

• 比较表小部件:定价表应链接到的完整特征矩阵
• 动态表小部件:每行一个价格的价格表,用于菜单和服务列表
• 元素动画按钮:卡页脚的按钮样式
• 元素营销小部件:主插件中的其他转换小部件
• 定价表小部件文档:每个控件都解释了
• 主题构建器:定价页面其余部分的页眉和页脚模板