9个重要的CTA设计技巧，用于使人们点击的按钮

您的号召性用语 (CTA) 是您营销策略的高潮。 无论您是要求购买、注册还是下载。 到目前为止，一切都是为了让潜在客户访问您的目标网页。 有时，您只需几句话就可以达成交易。

这就是为什么您的 CTA 按钮是您网站最重要的设计元素。 因为它可以将被动访问者变成主动用户。

号召性用语按钮看起来很简单。 但他们很容易搞砸。 或者完全错过。 这 9 个 CTA 设计技巧将确保您获得该转换。 另外，还有很多有用的例子：

1. 让你的按钮看起来可点击
2. 对您的副本进行描述
3. 大小和空间适当
4. 使用第一人称连接
5. 制造紧迫感并使用强动词
6. 试试副标题
7. A/B 测试变体
8. 注意手机版

使您的 CTA 按钮看起来可点击

让按钮看起来“可点击”听起来很傻。 但是您不会相信网站经常出错。 它主要与按钮的轮廓和颜色有关。

转化率趋势来来去去。 就像带有细边框和淡入背景颜色的文本的透明“幽灵按钮”。 虽然它们可能看起来很酷，但它们往往会引起较少的关注。 与有效的 CTA 应该做的相反。

这种设计通常唯一有效的时候是作为辅助按钮：

资料来源：用户体验运动

这是另一个 CTA 按钮显然不可点击的示例。 当然，这个设计机构的登陆页面看起来很酷。 但是你会被原谅滚动过去这个案例研究：

那么，如何让人们点击呢？ 为了获得更高的转化率， 您的按钮应该大而粗，并且与您选择的配色方案一起使用。

Netflix 使用其标志性的红色来吸引您的注意力。 几乎就像一个停车标志：

它也可以具有对比色，因此它脱颖而出。 就像电子商务平台 BigCommerce 在这里所做的那样：

这也适用于框中的文本。 确保它对比，以便您可以正确阅读。

渐变也可以在相同的品牌配色方案中使用。 它们赋予事物现代、更年轻的感觉：

资料来源：星期一

我的建议是尽量让你的 CTA 设计清晰可见。 开箱即用可能听起来不错，但人类是习惯性动物。 你会惊讶于有多少人会错过重点。

对您的副本进行描述

最简单的转化率优化 (CRO) 策略之一是出色的文案。 但不仅仅是大块文本。 显微复制同样重要，涵盖了较小的细节。

您通常会在联系表格和社交媒体状态更新栏中看到它。 就像 Facebook 著名的“你在想什么？” 或 LinkedIn 的“发帖”。

显微镜可以帮助：

• 告诉用户该做什么
• 提供建议
• 解决问题
• 提供上下文

您的 CTA 按钮副本是另一个示例。 它应该准确地告诉人们他们将得到什么/当他们点击它时会发生什么。

这曾经是 IMPACT 的 CTA 按钮。 “免费下载”。 不是很有想象力吧？

资料来源：影响

但通过使其更具描述性，他们将转化率提高了 78.5%。 “告诉我如何吸引更多客户”显然更具吸引力：

只写“单击此处”很诱人。 但是有很多选择可以吸引用户并希望激发所需的行动。

那么，你应该写什么？ 首先，您需要确定转化意图。 您希望与用户在渠道中的位置以及他们来自哪里（流量来源）保持一致。

资料来源：KlientBoost

然后你需要强调你所提供的东西的价值。 并处理任何异议。

资料来源：营销示例

这是一个如此独特的过程。 这将取决于您的利基市场和品牌声音。 但无论您选择什么措辞，都不要忘记保持按钮文本简短而中肯。

适当调整大小并使用空白

CTA 按钮的设计也不仅仅是颜色。 按钮大小是另一个真正影响点击率的小细节。 空白与文本本身一样重要。

这在很大程度上取决于您的网页设计。 负（白色）空间将注意力吸引到页面上的某些元素上。 你不想要一个杂乱的主页。 需要有一条明显的路径供访问者遵循。

Airbnb是正确处理负空间的最佳例子之一。 对比色使其更加明显：

Buffer 在他们的主页上有更多内容，但他们仍然将 CTA 按钮保持在靠近主副本的位置。 另外，一个有效使用幽灵按钮的例子。 这使得下一步做什么变得非常清楚：

你的按钮越大，它就越明显。 它需要脱颖而出以引起注意。 但它不会占据页面并破坏用户体验。

如果您容易偏头痛，请立即移开视线。 这是一个如何不这样做的示例：

资料来源：贾斯汀敏德

这里有很多元素看起来像一个按钮。 我什至不确定这个网站是否知道它希望访问者点击什么。

相比之下，您在 Spotify 的登录页面上看到的第一件事是什么？

巨大的“Go Premium”按钮，对吧？ 这就是如何设计清晰的用户路径。

最后，关于好例子的 CTA 设计，您还注意到其他什么吗？ 如果你再看一眼，你会发现它们几乎都有共同点。

科学家们发现，人类喜欢“曲线柔和的形状，而不是尖点的形状”。 它们更赏心悦目，让我们感觉更平静。 因此，最有效的号召性用语按钮是圆角矩形。

资料来源：CleverTap

这是最流行的格式是有原因的。 但尝试不同的选择。 你的听众可能更喜欢别的东西。

使用第一人称连接

更好的 CTA 设计只需一次调整即可。 有时，一个字。

在文案写作中，我们被教导使用“你”这个词。 因为它让读者觉得他们正在被直接对话。 所以你认为这也适用于你的按钮副本，对吧？ 奇怪的是，没有那么多。

Unbounce 发现，将其登陆页面上的副本从“开始免费 30 天试用”更改为“开始我的30 天免费试用”可将点击率提高 90%。

那么，这是为什么呢？ 好吧，当有人觉得与产品有联系时，他们更有可能转化。 它提供了个人风格，而无需了解他们的任何信息。

营销心理学表明，购买决策主要基于情感。 因此，您希望您的网站访问者觉得这是他们的选择。

写“我的”有助于用户形象化他们将要采取的行动。 它赋予他们控制权并（希望）推动他们做出决策。

另外，它可以表明他们将获得立竿见影的价值。 就像在 Crazy Egg 的主页上一样：

来源：疯狂的鸡蛋

1-800 Contacts 是世界上最大的隐形眼镜商店。 但他们也这样做。 他们确保他们的 CTA 按钮只针对一个人：

来源：1-800 联系人

没有很多公司使用这种技术。 这意味着当你看到它时它会脱颖而出。 那么，为什么不试一试呢？

营造紧迫感并使用强动词

您的文案需要营造一种紧迫感并抓住用户的注意力。 这对电子商务企业尤其有效。 使用像“现在”和“今天”这样的词可以帮助激发行动。 因为他们暗示这个提议不会永远存在。

“立即购买”是经典。 但我们可以通过 CTA 设计做得比这更好。

资料来源：GoSquared

你可以试试这样的措辞：

• “今天犒劳自己”
• “立即解锁折扣”
• “一次性免费下载”

您还想让您的报价具有吸引力并激发好奇心。 所以，从一个强动词开始。 不是一件看起来很费力的事情。 这是让人们失望的简单方法。

以下是我的意思的几个例子：

左侧听起来像是您的用户会从点击中获得一些东西。 右手边听起来他们需要放弃时间或金钱。

你也可以变得很有创意。 喜欢这个版本的 Huemor 主页：

资料来源：FastCapital360

或者洪堡县的旧登陆页面，给它一个神秘的转折：

资料来源：ConEmprendimiento

与您的团队一起集思广益。 不管多么荒谬。 你会惊讶于你会想出什么并最终使用它。 但无论你选择什么措辞，别忘了在另一端兑现你的承诺。

尝试在您的号召性用语按钮旁边添加一个副标题

有时，人们需要一点点推动。 CTA 按钮下的一些文字可以解决问题。 这不是常规的“副标题”。 但这是最简单的描述方式。

如果我们将按钮文本视为标题，您会看到最流行的副标题是“无需信用卡详细信息”。 但你可以说什么。 用它获得一点创意很有趣。

很多时候，他们习惯于给潜在客户信心。 他们可以解决人们可能遇到的主要痛点：

资料来源：CoSchedule

CoSchedule 了解用户可能认为这只是免费试用。 所以，“为什么不呢？ 它永远免费”澄清道。

您还可以使用它们来添加一些社会证明：

资料来源：大本营

这给了你即时的可信度，因为用户可以清楚地看到其他人已经信任你。 它还可以激发 FOMO，因为人们认为这么多订阅者肯定是有原因的。

如果您的服务提供特别优惠或额外价值，请使用副标题突出显示：

资料来源：莫兹

显微文案是让您的品牌声音大放异彩的机会。 哪怕只有一句话。 所以，如果合适的话，不要害怕有点厚脸皮：

资料来源：KlientBoost

您还可以具体说明人们点击后会发生什么。 告诉他们：

• 他们会得到什么（新的营销理念）
• 多少(17+)
• 以及为什么他们应该关心（他们比你拥有的更好）

使用这些示例作为灵感模板。 或者做一些完全不同的事情。 只需确保它适合您的品牌标识并从中获得乐趣即可。

不要忘记 A/B 测试

大多数 CRO 工具旨在改善用户体验 (UX)。 您可能已经对网页的主要部分进行了此操作。 但是你也应该用小元素来做。

众所周知，亚马逊对其 CTA 按钮设计非常挑剔。 尤其是第 3 方使用。 因此，请确保您没有违反任何规则。

在那之后，对按钮设计的微小改动就会产生巨大的影响。 因此，比较不同类型的 CTA 按钮。 然后 A/B 测试变体：

• 按钮颜色
• 号召性用语副本
• 字体
• 页面设计中的位置
• 弹出窗口
• 联系表格

资料来源：斯诺夫

正如我之前所讨论的，有时只更改一个单词就可以提高转化率或点击率。 但在您加入之前，您需要了解访问者如何浏览您的网站。

您想了解以下内容：

1. 他们试图与之交互的元素
2. 他们来自哪里
3. 您网站的用户旅程/购买渠道
4. 人们在那里的动机

资料来源：GIPHY

一旦你得到了这些信息，你就可以根据事实进行实验，而不是猜测。

将 A 和 B 版本与 CTA 设计进行比较通常更容易。 但是你可以增加这个并尝试多变量测试。 一开始通常越简单越好。 这样，你就会有一个明显的赢家。

但在那之后，没有什么能阻止你用另一个版本来试验那个获胜者。 您应该始终进行测试和比较。 即使你发现了一些有用的东西。 这就是成功的品牌所做的。

注意手机版

一个快速完成的提示。 您的设计元素在移动屏幕上看起来会非常不同。 您正在使用更小的显示器和更少的像素。 因此，混乱变得容易多了。

我们所涵盖的所有内容在您的移动版本中变得更加普遍。 对比色需要更加突出：

负空间应该是优先事项：

甚至您的副标题也可能位于不同的位置。 由于移动用户可能无法向下滚动到足以在下面看到它：

为这些图形向CleverTap 大喊大叫

一般来说，移动端的用户体验需要更多的思考。 因为移动端占全球搜索流量的一半以上。 你不能指望你的桌面版本能翻译。 一点点努力可能会导致更高的点击率。

结论

有效的 CTA 设计由许多这些小细节组成。 我自始至终都说过很多次，但最小的调整可能就足够了。 甚至像轮廓的颜色或形状这样微不足道的东西。

A/B 测试是您了解的唯一方法。 而且您甚至不需要昂贵的 CRO 工具来执行此操作。 只需跟踪您的转化。 做出改变。 并查看是否比通常的数字增加或减少。

只需给予您的号召性用语按钮应有的关注。 这可能是新客户或失去机会之间的区别。

你最近有没有看过任何原创的 CTA 设计？ 您是否进行了提高转化率的小改动？ 请在下面的评论中告诉我们。