积极响应号召_“号召性用语”按钮：指南，最佳做法和示例

网站上的号召性用语按钮通常被忽略。 设计师有时除了吸引人和融入整体设计外，还无法完全理解什么是良好的号召性用语。 但是，号召性按钮太重要了，以至于无法在某种程度上理解使按钮生效的方式而设计。 毕竟，对操作按钮呼叫的主要观点是让游客做一些事情。

至少必须对颜色，比例，语言和其他因素如何影响号召性用语的转化率有一个基本的了解。 这里的概念并不复杂，但是确实需要一些深思熟虑和计划，才能在给定的设计中创建最有效的号召性用语。 继续阅读以获取关于这些要点的更多信息以及更多信息。

“号召性用语”按钮的目的

号召性用语按钮可以提供多种功能。 毕竟，“呼吁采取行动”确实有点含糊。 这意味着它的主要目的是使您的站点的访问者做某事 。 那可能是将某种产品添加到他们的购物车中，下载了一些东西，请求了信息或几乎其他任何东西。

由于号召性用语按钮的用途如此多样，因此必须对按钮的目标进行很多考虑。 网站的类型，目标市场和所需的操作都可以在如何最好地设计号召性用语中发挥作用。

“号召性用语”按钮的类型

号召性用语按钮有几种不同类型。 尽管每种类型都旨在让访问者执行特定的操作，但是该操作可能会发生很大的变化。 下面是最常用的号召性用语类型，具体取决于他们希望您执行的操作。

1.添加到购物车按钮

电子商务网站通常使用许多号召性用语按钮，但是使用最广泛的是“ 添加到购物车 ”按钮。 这些按钮通常显示在各个产品页面上。 他们的目的是吸引顾客购买物品。 添加到购物车按钮中的常见设计元素包括简单的措辞（例如“ 添加到购物车 ”或“ 添加到购物 袋 ”或“ 立即购买 ”）和使用图标（通常是购物袋或购物车）。

2.下载按钮

下载按钮类似于添加到购物车按钮，因为它们试图诱使访问者拥有某项物品。 对于下载按钮，许多设计人员选择包含比其他类型的按钮更多的信息（例如版本信息或下载大小）。

3.试用按钮

一些网站尝试以免费试用的形式来诱使访问者试用其产品。 这可以是免费下载或免费帐户，具体取决于特定站点。 一些站点使用“少即是多”的理念，并将按钮上的语言保持在最低限度，而其他站点则希望提供有关试验内容的更多信息。

4.了解更多按钮

了解更多信息通常在一段预告片信息的末尾使用按钮（通常在主页上）。 这些按钮通常很简单，但通常尺寸过大以吸引访问者的注意力。

5.注册按钮

注册按钮最常出现在两种不同版本中。 第一种类型通常直接与注册表单相关联。 第二种类型通常以类似的方式用于“添加到购物车”按钮，作为用户在实际到达注册表单之前购买或注册服务或帐户的一种方式。

还有其他类型的号召性用语按钮，但这是最常见的。 适用于上述内容的指南也可能会适用于您正在设计的任何其他类型的号召性用语按钮。

有效利用负空间

您希望号召性用语按钮从周围的内容中脱颖而出，并真正引起站点访问者的注意。 为此，您需要在这些按钮周围使用负号空间。 在您的内容和号召性用语之间添加空格。 尽管这在某些按钮（例如添加到购物车按钮）上不太重要（也较不常见），但在其他按钮（如需了解更多信息）上，它们在更大的空间上效果更好。

平衡按钮周围的负空间量和按钮本身的大小非常重要。 这是关于比例。 您希望按钮，按钮周围的空间以及周围的内容看起来都一样，即使它们之间存在大小差异。 为了使它们看起来恰到好处，您可能必须在事情上摆弄一些。

• 确保按钮周围有足够的空间，以免混乱
• 在确定要包含多少空间时，请考虑三分法或黄金分割率等原则
• 负号空间使您可以使用号召性用语来突出其他内容并将其与众不同

大小和颜色

号召性用语按钮的大小非常重要。 太大的按钮会压倒周围的一切。 太小的按钮会迷失在页面上的所有其他内容中。 您希望按钮足够大以在不压倒设计的情况下脱颖而出。

颜色可以发挥很大的作用，以帮助平衡按钮的大小。 对于较大的按钮，请选择在您的设计中不太突出的颜色（但仍会突出背景）。 对于较小的按钮，您可能希望选择更亮的对比色以真正使按钮弹出。 在任何一种情况下，请确保您使用的颜色将按钮分开，而不与网站的整体设计相冲突。

• 理想情况下，号召性用语按钮应该是给定页面上最大的按钮
• 使用对比色使较小的按钮更加突出
• 使用较少的不同颜色，使超大按钮更合适
• 号召性用语按钮需要引起注意，而又不会使您的设计不知所措

语言

您选择在号召性用语上使用的确切字词会对转化产生巨大影响。 将“ 立即购买 ”与“ 添加到购物车 ”进行比较。 一个比另一个更紧迫。 或者怎么样“ 免费试用 ”和“ 免费试用 “？ 一个比另一个强得多，而且更加突出。

您在号召性用语按钮上使用的语言应尽可能简单明了。 您希望访问者一眼就能知道他们在单击按钮时会得到什么。 如果他们提出疑问，则表示他们已经暂停，这可能会导致转化率降低。

也不要忘记您的字体大小。 号召性用语按钮上的文本应大而粗体，以适合按钮本身的大小和颜色。 确保有足够的对比度，并且文本易于阅读。

• 使用简单直接的语言
• 在按钮上为主要文本使用大胆的字体
• 确保语言明确要求采取特定行动

创造紧迫感

您希望网站上的访问者尽可能少地思考并执行所需的操作。 当您不想欺骗访客时，您给他们更多机会停下来考虑他们在做什么，您给他们更多机会说“不”。

您希望按钮给他们一种印象，即他们需要立即采取行动。 您想鼓励他们立即做出决定。 尽管这对每个号召性用语按钮（特别是那些购买高价商品的按钮）都无效，但对于低成本或免费的操作而言，希望访问者点击时少先考虑。

• 鼓励您的访客立即采取行动
• 不要给访客任何暂停的理由
• 紧迫性很重要，但不要以任何方式误导访客

提供额外的信息

在适当的地方，使用号召性用语按钮为访问者提供更多有关他们单击按钮后将获得的信息。 这最常见于试用按钮或下载按钮。 额外信息的常见示例包括免费试用将持续多长时间或文件下载的大小。 版本信息也很常见。

包含其他信息时，请记住，您需要重点关注实际的号召性用语。 确保诱使访问者采取行动的语言文字最为突出，而其他信息则不太明显。

• 仅在增加用户体验时才包括其他信息
• 额外信息仅适用于某些类型的号召性用语按钮，尤其是下载或试用按钮
• 确保号召性用语仍然是按钮上最醒目的文字

优先排序

如果页面上的号召性用语按钮不止一个，则必须对其进行优先排序。 这可以通过多种方式完成，但是最常见的是通过使用颜色和大小。

使用颜色突出显示页面上最重要的按钮，或使次重要的按钮看起来不太突出。 或者使用尺寸使最重要的按钮突出（使其变大），而不再强调次要的按钮。

图标和图像

在号召性用语按钮中包含视觉提示也可以帮助提高转化率。 例如，“添加到购物车”按钮上的购物车图标或下载按钮上的箭头都是很好的例子。 也可以考虑使用独特的图标，但是要弄清楚该按钮的用途，确保该图标增加了用户体验，并且不会造成任何混淆。

• 确保您使用的图标有助于阐明按钮的含义，而不是造成混淆
• 易于识别的图标可以立即向访问者指示含义
• 只要它们的含义仍然清楚，就不要害怕使用不太常用的图标

例子

这里有一些很好的号召性用语示例 。 尽管它们都不完全符合上述准则，但它们满足了足够的标准，被认为是出色的。

现场直播

区分“立即购买”（用于付费选项）和“注册”（用于免费选项）按钮是一个不错的策略。

视窗

绿色的大“ Get Windows7”按钮很容易让访客发现。

文件共享总部

此处的亮绿色按钮在白色背景下确实脱颖而出。

日志

为“下载”和“购买”按钮使用不同的颜色将它们分开设置，并优先使用“购买”按钮。

TasteBook

此按钮充分利用了图标，并使用较大的粗体文本突出显示。

好家伙

另一个亮绿色的​​号召性用语按钮。

生命树创意

从正文到调用按钮继续使用相同的字体，会产生凝聚力。

恢复器

带有红色字体的亮红色号召性用语按钮在蓝色背景下显得特别突出。

笔记本

在号召性用语按钮中包含额外信息的一个很好的例子。

墨水

优先考虑大小按钮的一个很好的例子。

优雅的主题

使用颜色脱颖而出而不与周围的设计元素冲突的另一个出色示例。

ZenDesk

另一个使颜色脱颖而出的好例子。

Storenvy

圆形按钮出人意料并且突出，尤其是在被白色边框包围时。

巴拉玛

有时，混合使用的按钮在您的整体网站设计中会更好，特别是在操作不太紧急时。

翻译自: https://www.hongkiat.com/blog/call-to-action-buttons-guidelines-best-practices-and-examples/