当前位置:首页 > 集团网站/站群建设

网站设计更好的CTA按钮的5种设计技术

2019-12-24

当我们访问大多数网站时,通常会想到一个目标。为了实现该目标,通常需要采取一系列步骤,第一步是单击CTA(号召性用语)按钮开始。想想您上一次注册服务或下载应用程序时,该过程可能包括与号召性用语的交互。

CTA按钮是您在网站上用来引导用户实现目标转化的按钮。CTA的全部目的是将您的网站访问者引导至所需的操作过程。CTA的一些常见示例包括:

  • “开始试用”
  • “下载应用程序/书/指南”
  • “注册更新”
  • “咨询”

今天,我们将讨论设计CTA按钮的5种最佳做法,以及最佳的实际示例,以帮助您从目标网页获得最多的点击次数。


1.醒目的按钮

您的按钮颜色很重要。实际上,如果您只想从本文中获得一条建议,那就应该是:“考虑您的CTA按钮颜色”。使用颜色,可以使某些按钮比其他按钮更加突出视觉效果,从而使它们更加突出。

使用对比色

对比色最适合CTA按钮,使用对比色可以创建醒目的醒目的按钮。您应该从网页的配色方案中选择一种对比色,同时仍要适合整体设计。考虑下面的Firefox示例。Firefox页面上CTA按钮的绿色正在跳出页面,并立即引起用户注意。


Firefox CTA按钮为亮绿色,在深蓝色背景上效果突出

另一个引人注目的CTA按钮可以在Hipmunk主页上找到。明亮的橙色按钮引起用户注意并定义了下一个可能的操作。


负空间

颜色不仅对于CTA很重要,而且对于它的周围空间也很重要。空格(或负空格)可创建必要的呼吸空间,并将CTA按钮与用户界面中的其他元素分开。旧的Dropbox主页很好地说明了如何使用负数空间来弹出其主要CTA。蓝色的“免费注册”号召性用语在背景的浅蓝色中脱颖而出。



2.面向行动的文本

为号召性用语按钮编写文字,以迫使访问者采取正确的措施并非易事。幸运的是,有几件事可以帮助您做到这一点:

从动词开始

您应该避免在CTA按钮上使用诸如“输入更多信息”之类的含糊而无聊的字词,而应将其替换为诸如“开始免费试用”或“立即获得折扣”等面向行动的字词。Evernote是最常见的一种,但其CTA按钮仍可使用面向操作的文本。


以“开始”,“获取”或“加入”之类的动词开头

可以在Treehouse主页上找到一个更有趣的示例。Treehouse网站上的CTA不仅说“开始免费试用”,还包括“免费试用”。它说“要求免费试用”。措辞上的差异似乎微妙,但是“要求免费试用”听起来更个人。


使用简短易懂的按钮文字

请确保准确说明访问者单击CTA会得到什么。理想情况下,您希望按钮文字保持在2到5个字之间。

增值主张

您很可能已经注意到,许多按钮的副本中都带有“免费”之类的字眼,这并非巧合,在按钮副本中使用此类字眼可以突出您的报价的价值主张。因此,在编写CTA时,请尝试寻找一种方法来整合一个(或全部)3个有说服力的单词:

  • 自由
  • 奖金
  • 即刻

让我举个例子:用户在承诺签约之前最大的恐惧是,如果他们不喜欢该服务,取消订阅将很痛苦。Netflix使用“每月免费加入” CTA旁边的“随时取消”承诺来缓解这种恐惧。


产生紧迫感

在CTA按钮中营造紧迫感,可以产生令人印象深刻的点击率。例如,您可以使用诸如“今天注册并享受25%的折扣!”之类的按钮文字,从而限制了人们做出决定的时间,使人们希望在可以的情况下要求其报价。

有用的文字

有时您可能需要考虑在按钮文本中添加额外的信息行。这种做法在免费试用按钮中很常见。例如,免费试用按钮可能会在CTA按钮下方带有“开始免费试用”文本的较小文本中显示“ 30天试用期,无信用卡”。这些额外的文字应简化决策过程。


3.使其可见而不滚动

号召性用语按钮的位置与颜色和消息一样重要。CTA按钮应位于易于查找的位置,该位置从网页的流动开始自然而然地跟随。您应该尝试将CTA按钮保持在首位,以使用户永远不会错过它。理想情况下,您的CTA按钮应该是用户访问页面时首先在页面上看到的东西。附加信息应保持在折叠下方,在此处仍可访问但不能分散注意力。


4.圆角大按钮

考虑一下设计如何传达能力。用户如何将元素理解为按钮?使用形状和大小使元素看起来像一个按钮。

使它足够大

CTA应该足够大,可以远距离观看,但又不能太大,以免分散页面主要内容的注意力

带有圆角的用户按钮

纽扣形状可以发挥很大的作用。这是一个 被证明的事实是圆角是对眼睛更容易。在ContentVerve的测试中,绿色的圆形按钮比蓝色的矩形效果更好。



5.选择时少即是多

请记住,如果您希望客户采取行动,则必须通过消除所有可能的障碍来帮助他们。当给用户太多选择时,他们往往会感到困惑。因此,最好只向潜在客户提供一种选择。

如果您仍然希望包括多个按钮选择,则将一个选择的权重放在其他选择上,以帮助将用户引导至特定路径。Evernote就是一个很好的例子:当您到达Evernote主页的底部时,很明显,一个更好的选择是“免费注册”,而用户比较计划的CTA则是次要的。



结论

网站设计制作有效的CTA设计,您需要考虑的不仅仅是按钮本身。考虑背景颜色,周围图像,周围文本和许多其他元素也很重要。Basecamp团队了解这些元素的重要性,并为其着陆页设计了完美的布局。甚至他们在CTA按钮下使用的复印件(“本周已签署了4,714家企业!”)也提高了潜在客户的信心。

免费获取报价

  • 29923329

  • 杭州市丰庆路498号北软智慧科创大厦203

  • 0571-85815193

  • pady@1t2.cn

网站地图 版权所有 © 2008-2021 杭州派迪科技有限公司  Copyright © 2008-2020  www.hzpady.com  All Rights Reserved    浙ICP备14029905号-1     公安备案:33010802008411    软著登字第3457658号