网页按钮设计优化指南（CTA按钮指南）

设计师、产品经理是否知道只要更改网页中按钮的颜色可以将网站的转化率提高35％？是否值得在折叠线上方或页面底部放置一个按钮？如何更改按钮上的文字以将效率提高68％？

在这里云智引入一个概念：CTA（Call-To-Action）具有吸引力的按钮。

云智收集了10多个有趣的案例研究，并准备了一个完整的指南，说明CTA按钮应如何发挥作用以提高您网站的转换率。我们将分析CTA按钮是什么，并展示如何将它们正确放置在您的网站上，插入必要的文本并选择有效的设计。

首先让我们从理论开始。

什么是具有吸引力的按钮以及关于它的四个重要事项？

号召性用语（CTA）按钮是网站的图形元素，提示用户执行某种有针对性的操作。示例包括注册，订阅时事通讯，购买，下载，上传文件等。

有几种类型的CTA按钮：

• 一个带有文本的交互式按钮，告诉您点击后会发生什么：“下载一本书”; “获得折扣”。

• 用于将访问者发送到其他页面的按钮，例如，有关产品的详细信息：“了解详情”。

• 按钮作为潜在客户表单的一部分。它有助于使数据传输过程符合逻辑结论：“发送”，“订阅”。用户在填写表单中的所有字段后单击它们。

为您的网站选择CTA按钮时，您需要至少考虑以下四个要点：

• 按钮的位置;

• 选择什么样的设计;

• 在按钮上以及在它上面和下面写什么;

• 在页面上使用CTA按钮的频率。

我们将在本文中进一步回答所有这些问题，以帮助您为您的网站创建有效的CTA按钮。

我应该在哪里放置CTA按钮以大化效率？

这就是问题所在：当用户不熟悉您的提案时，您应该在哪里放置主CTA按钮 - 折叠线上方或底部，作为网页的逻辑结尾？

什么时候应该将CTA放在折线上方？

此解决方案似乎有风险，因为您要求客户端在它们到达后立即单击按钮。然而，如果符合以下情况，这种方法是合理的

• 你有一个“热门”的领导者，他已经了解你的产品并在其他地方了解了它。例如，您要将用户从您的订阅者群引导到目标网页以提供产品折扣。

• 如果第一个屏幕被设计为登录页面的迷你版本，那么您将获得“温暖”的领先优势。

将CTA置于折线之上的六条规则

• 吸引客户注意的短标题;

• 一个辅助标题，解释了您提案的重点;

• 清晰传达您提案的照片或视频;

• 对福利的审查;

• 社会证据和触发器;

• “Call to Action”按钮描述客户端将收到的内容。

这是来自Unbounce的公式，用于在第一页传播上有效操作CTA。

第一个网页屏幕的结构，用于有效的号召性用语按钮

如何在网页底部放置CTA可以提高转化率？

当您需要激发信心并为用户提供更多信息以做出决策时，网页末尾的按钮会更好地工作。这些页面应该根据AIDA模型构建：

• 吸引注意力（标题通常是答案），

• 通过兴趣关注（列出对客户的好处），

• Arouse Desire（提供诱人的优惠），和

• 行动呼吁 - 这就是你需要一个好按钮的地方。

来自ContentVerve的案例研究证明，CTA在页面末尾的位置，但不是在开头，可以将转换率提高304％。该研究的研究任务是找出哪种方案更有效：CTA高于折线或低于折线。

他们只是将带有按钮的表单移动到页面末尾，并将转换率提高了304％。

从上面可以得出一个合乎逻辑的结论：

• 如果客户已经熟悉您的产品或服务，请将CTA按钮放在折叠线上方，要求进行简单，有针对性的操作，而不需要花费太多时间来决定。

• 如果您有复杂的产品或服务，并且潜在客户需要消化大量信息以做出决定，请在提供有关产品的所有信息以及优势和信任触发器之后放置CTA按钮。

KISSmetrics创建了一个图表，以显示CTA按钮的放置方式取决于产品或服务的复杂程度：

产品越简单，您可以越早放置按钮。它越难，它应该越低。

什么是有效的号召性用语按钮设计？

要选择正确的CTA设计，请记住以下五个原则：

1.使按钮对比

这里的重点不仅仅是颜色; 该按钮必须在网页其他元素的背景下显而易见。
以下是RIPT Apparel公司的一个奇怪案例。他们对CTA按钮进行了A / B测试，并比较了不显眼的黑色按钮和对比绿色按钮的效率。

将按钮的颜色更改为绿色后，网站的转换率增长了6.3％。

按钮文本颜色也会影响转换率。因此，在下一种情况下，用黄色替换黑色文本会使按钮效率降低。

通过更改文本颜色，转换率下降了18.01％。

2.按钮应该看起来像一个按钮

平坦且不显眼的按钮可能被误认为是设计元素。当您将鼠标悬停在按钮上时，不要忽略颜色变化或阴影外观等效果 - 这会告诉用户该项目是可点击的。

另请阅读：应用程序的图标设计如何影响应用程序下载次数？

一个实际的例子：在一个网站上，按钮颜色从蓝色变为绿色，角落是圆形的。按钮变得更亮，与灰色背景形成鲜明对比。它看起来更像是一个按钮。

更改按钮颜色和形状后，转换率提高 35.81％

3.纽扣尺寸很重要

不会注意到太小的按钮，而太大的按钮将不会被识别为按钮。在下面的示例中，按钮大小增加，导致10％的转换率损失。

更大并不总是意味着更好。

这是另一种情况，更改按钮设计会增加商业网站的点击率。

带有信封图像的窄棕色按钮被更亮的橙色和绿色箭头图像所取代。它的尺寸也有所增加。结果，CTR增加了一倍。

4.使用特殊元素吸引注意力

对比，引人注目的箭头，如前面的例子，可以为你工作。在下面的例子中，当箭头从按钮上移开时，转换率下降了12.29％。

箭头原来是吸引注意力的元素，使按钮更加醒目。

5.使用负空间

借助所谓的负（空）空间，您可以使按钮更加醒目。
一个很好的例子是在Dropbox主页上。

按钮在背景下清晰可见，不仅由于对比色，而且由于周围有足够的空白空间。

我应该在CTA按钮之前，之后及之后写什么？

更改按钮上的文字会严重影响转换率。
在以下示例中，我们将两个CTA按钮与不同的文本进行了比较。租赁房屋网站的用户想要获得有关设施的更多信息，必须单击CTA按钮以获取有关邮件的详细信息。测试了两个版本的CTA按钮文本：“订单信息”和“获取信息”。第二个版本的工作效率提高了38.26％。

在第二个版本中，按钮上的文字更好地解释了点击后会发生什么。

另一个奇怪的案例涉及用文章替换网站上的按钮。未注册的用户只能阅读网站上的部分文章。要阅读完整的文章，您需要单击按钮并注册。在实验过程中，测试了两个按钮：“立即阅读全文”和“立即获取即时访问”。

第一个按钮的转换率比第二个按钮高39.03％。

第一个按钮不仅传达了价值，还传达了提案的相关性。这是用户在阅读论文时想要做的事情 - 读完它。
按钮上的文字不仅应传达句子的价值，还应传达其相关性。

以下是更多相关按钮文本如何提高转换率的另一个示例。健身房网站的按钮文本的两个变体进行了测试：“获得您的会员资格”和“找到您的健身房并获得会员资格”。

第二个按钮效果更好68％。

事实证明，健身房对其客户的位置至关重要，因此这一更相关的信息提高了转换率。
您在按钮之前和之后编写的文本也可以帮助您告诉用户单击按钮后将获得哪些好处。这样可以避免在按钮上放置大量文本，保持其设计整洁。

标题描述了用户想要获得的好处，字幕提供了单击按钮时发生的事情的解释，并且CTA按钮具有单个清晰的句子。这是理想的公式。

为了吸引人们对CTA按钮的注意，您还可以使用其他视觉效果; 例如，从按钮上方或下方区域的箭头指向按钮本身。

该网页简要列出了该服务的优点。从那里，箭头将用户的视图定向到按钮。

您可以在按钮本身上放置帮助信息。有时，一个这样的澄清词可以使整个信息更容易理解并提高转换率。

在此示例中，按钮上的主文本以大字体写入：“免费试用”。细则指定不需要信用卡。这一举动否定了客户担心花钱购买不熟悉的产品。

如您所见，要获得更高的转换率，您需要选择以下按钮文本：

• 将向用户解释点击按钮后会发生什么，

• 将传达您的报价的价值，并且

• 将与用户的情况相关。

在这种情况下，您可以将这些消息放在按钮的上方和下方，还可以使用箭头和其他效果将用户的视图引导到所需的文本。

你应该多久插入一次CTA按钮？

如果你给大多数人很多选择，他们根本就无法做出任何选择。例如，此页面上丰富的CTA使用户感到困惑。

在这个网站上，有很多设计元素和按钮，你迷路了，不知道在哪里点击。

在网页上向用户指定一个特定路径，并在终报价中指定一个目标操作。如果需要建议事件开发的几种变体，请关注一个主要的CTA按钮。其余部分将不太明显。
例如，Reddit使注册按钮比登录按钮更亮。

过渡到旧版本几乎不可察觉。

在下面的示例中，重点是“创建Wiki”按钮，但其他两个按钮也引起了用户的注意。

您为用户提供的选择越多，他或她就越不可能。

DrExplain的经验表明，屏幕的一个区域上不应该有几个按钮。删除其中一个CTA可将转化率提高26％。

初，他们邀请访问者下载并购买自己的产品。

然后，他们邀请用户免费下载。这增加了转换率。

为了不使用CTA过度使用，请遵循以下简单公式：一个屏幕高度，一个CTA。如果需要放置几个CTA按钮，使主要的一个对比度更高，其余的不太明显; 例如，通过使用链接，而不是按钮。

你的CTA按钮效果如何？

使用此核对清单检查您的网站上的CTA按钮的有效性：

• 第一个屏幕上是否有CTA按钮？如果是这样，您是否遵循组织此类屏幕的六条规则？

• 页面上的CTA按钮是否可见？网页上是否还有其他元素与之并存，可能会引起用户的注意？

• 按钮的设计是否显示可点击？（例如，通过在悬停时添加颜色，添加阴影等）

• CTA是否传达了您的提案的价值？

• CTA的文本是否相关？

• 按钮前面的文字是否与其上的文字一致？

• 在通往CTA的途中，其他元素会分散用户的注意力吗？

• 你在网页上有几个不同消息的CTA吗？主要按钮是否在其中突出显示？

• 您是否使用其他元素来吸引对按钮的注意？

如果对所有10个问题的答案都是“是”，那么恭喜！如果没有，你已经知道该怎么做了。

我们祝你转化率高！