按钮设计指南：如何设计可转换的按钮

为什么要编写按钮设计指南？ 按钮有那么重要吗？ 为什么要在用户界面的这么小的部分上花费这么多精力？

虽然按钮在网页设计中很常见并且看起来很简单，但它们的重要性不应被低估。 它们是执行非常重要职责的重要站点元素。

尤其是作为主要的号召性用语和电子商务网站，按钮确实会影响底线。 然而，作为社交分享按钮，电子邮件注册和表单提交按钮也是网站成功的核心。

出于这个原因，在本文中想详细讨论这个经常被忽视的设计元素以及如何为 WordPress 网站创建高转换按钮。 虽然重点将放在 CTA（号召性用语）上，但我们还将讨论有关按钮设计的许多一般性建议。

该主题是否按下了按钮？ 然后继续阅读。

在开始之前，先简单介绍一下 A/B 测试

下面，我们将介绍一些创建和使用按钮的明确指南。 这些原则将帮助您思考网站上任何按钮的设计、定位和其他重要属性。

但是，同时重要的是要记住，这只是提高转化率的基础。 设计原则可让您对什么会起作用进行有根据的猜测，但要真正知道哪种按钮是将访问者转化为订阅者、购买者的关键，否则就在于测试。 运行 A/B 测试可以让您弄清楚什么对您的网站真正有效，访问者对哪些按钮颜色、副本、位置和其他标记做出最佳响应。

因为一切都很重要。 即使是最小的变化也会对转化率产生惊人的巨大影响——无论是正面的还是负面的。 仔细阅读这些示例以了解我在说什么。

因此，虽然我们的按钮设计指南将帮助您了解最佳实践，但最好辅之以健康的实验，以找到使您的网站取得成功的最佳组合。

如何设计用户实际点击的按钮

在此警告之后，我们现在转向制作性能良好的按钮以更好地号召性用语和提高转化率。 享受！

设计它们以适合您的品牌或网站

在进入功能设计之前，重要的是要考虑按钮出现的上下文。 如果它搞砸了您的网站，那么创建完美的按钮是没有用的。

出于这个原因，虽然下面的指南很重要，但它们的结果与其出现的上下文很好地集成也很重要。这意味着您的按钮适合您网站的调色板、样式和整体设计指南。

虽然您希望按钮突出以提示操作，但目标是让它们以积极的方式突出。 这意味着一种与整体设计相协调且不会破坏它的设计。

同时，不要害怕尝试一下。 有时，对比色的按钮正是为原本平淡的设计增添趣味所需要的。

使按钮看起来像按钮

设计被点击的按钮的第一步是让它们看起来像按钮。 如果用户不明白他们应该利用它们，那么号召性用语和共享选项就毫无用处。

用户对按钮设计有一定的期望。 如果您根本不满足它们，他们将很难采取所需的行动。 因此，重要的是包含有助于他们理解的视觉提示。

第一个线索是形状。 按钮最常见的形状是矩形或带有圆角的矩形。 计算机用户已经接触这种设计很长时间了，因此对它非常熟悉。

来源：维基百科 经微软许可使用

当然，其他形状也是可能的，包括正方形、圆形、三角形甚至自定义形状。 事实上，有很多古怪和不寻常的按钮的例子，例如在 dribbble

使用不那么传统的形状是有意义的，以保持您的网站设计一致。 然而，正如 Apple 的 iOS 用圆角方块所证明的那样，这并不意味着它不起作用。

图片来自 Ienjoyeverytime/shutterstock.com。

无论您选择什么，只要确保保持一致即可。 避免为不同的按钮使用不同的设计。 这不仅可以提供更好的 UI，还可以确保用户能够识别整个站点中的按钮。

另一个重要的设计提示是阴影和高光。 阴影已成为显示元素可点击或可点击的通用提示。 甚至其他平面设计也将它们用作功能的信号。

资料来源：Material.io

提供清晰的标签

除了基本设计，清晰的标签对于按钮的使用也很重要。 没有标签，用户就无法确定他们在做什么。

不一定要写标签，图标也可以（参见社交分享按钮）。 两者一起使用是另一种可能性，尤其是在与电子商务相关的按钮上。

图片由 Prixel Creative/shutterstock.com 提供。

重要的是用户可以理解他们点击按钮的行为会产生什么影响。 如果他们不这样做，他们可能一开始就避免这样做。

以下是清晰标签的一些指南：

• 具有描述性和具体性
• 使用动作动词，例如注册我、提交表格、创建帐户
• 直接联系用户
• 用“现在”或“今天”等词营造紧迫感
• 保持简单明了

当涉及到 CTA 时，标签特别重要。 只需更改几个单词即可对按钮性能产生重大影响。 例如，Unbounce 只需将按钮副本从“开始您的 30 天免费试用”更改为“开始我的 30 天免费试用”，点击率就提高了 90%。

是的，这就是一个词的力量。

将按钮放在用户可以找到的地方

这真的是不费吹灰之力。 如果您的用户找不到您的按钮，将很难点击它们。 因此，影响其有效性的另一个因素是位置。

有一些约定。 例如，主要的 CTA 通常会喜欢首屏。 这是有道理的，现在用户已经预料到了。

资料来源：Netflix

对于其他类型的按钮也是如此，在这些按钮中，用户已经接受过特定位置的培训。 例如，上一个和下一个按钮通常按左右顺序排列。

由于这在公众意识中根深蒂固，颠倒顺序可能会使访客感到沮丧并导致他们离开。 这是你最不想要的。

然而，对于具有更灵活位置的按钮，例如社交分享按钮，考虑将它们放在哪里是最重要的。 例如，您可能认为在文章末尾放置社交按钮是个好主意。 这样，用户可以在完成后分享帖子，对吗？

然而，大多数读者甚至没有读到你的文章的结尾。 因此，更好的主意是将按钮放置在阅读体验的任何时候都可以访问的位置。 一个这样的例子是 Monarch 浮动侧边栏：

如有疑问，按钮放置的一个很好的经验法则是问问自己用户接下来会看哪里。 设计应该引导用户走他们的路，所以按钮可以成为他们在整个网站上的路径的合乎逻辑的结论。

注意尺寸和间距

现在我们来到一个在移动设计中特别重要的话题。 与使用鼠标的人相比，通过触摸与您的网站进行交互的人的行动不那么精确。 出于这个原因，您需要让他们能够毫无问题地使用和到达按钮，也没有点击错误按钮的危险。

资料来源：苹果

第一步是确保您的按钮足够大。 人的平均指尖有 8-10 毫米大。 因此，Apple 建议让触摸使用的元素至少为 44 像素 x 44 像素（使用点而不是像素用于视网膜显示）。 其他制造商的建议也围绕 10 毫米标记。 当然，针对桌面使用的网页设计可以稍微减小尺寸。

同时，您需要考虑按钮之间的间距。 你不想让用户感到沮丧，因为他们不小心推送了他们不想要的东西。 充足的空间也使元素更容易被发现，这对于主要的号召性用语很重要。

提供反馈信息

一旦按钮或您的网站可以识别并可用，就该考虑实际调用它们的时刻了。 按钮可以有几种存在状态：

• 正常- 可识别为按钮，表示可以单击
• Focused — 将鼠标悬停在其上时发生变化，向用户确认该操作是可能的
• Pressed - 进一步更改以奖励用户采取行动并确认正在发生的事情
• 忙碌——当动作在后台发生时，按钮可以反映
• 已禁用- 表示可以执行其他操作，只是目前不行

资料来源：Material.io

通过向用户提供使用按钮的视觉反馈，您可以使交互更清晰、更愉快。 对于其他类似的想法，请查看关于微交互的文章。

善用对比度

并非所有按钮都生而平等。 虽然着陆页可能有多个链接可供点击，但应该只有一个真正重要。

使访问者清楚这一点的工具是颜色、对比度和位置。 有效地使用它们来吸引注意力并让用户点击。

通过对比界面其余部分的按钮，您可以使它们更加引人注目。 除此之外，它还避免了它们在其他元素中丢失。

说到颜色，没有最好的选择。 同样，这里在很大程度上取决于您自己的设计。 一个好的经验法则是使用对比色并从那里开始。 有关该主题的更多信息，请查看我们关于颜色匹配技术的文章。

除了颜色之外，您还可以使用不同的方式来引入对比度，包括大小、排版和留白。 按钮颜色与文字的对比可以进一步提升效果，让文案更清晰易读。 结合突出的位置，这些使按钮真正流行。

资料来源：Prezi

要确定您的号召性用语是否引人注目，请使用古老的“斜视测试”。 应用设计，从屏幕上走几步，眯着眼睛看看你的按钮是否突出。 我知道，这听起来不太专业，但确实有效！

你在测试你的#CTA 吗？ 这是判断您的号召性用语是否突出的最佳方式。 http://t.co/uO53xJIOPu pic.twitter.com/wzNPyTErD2

- 设计泡菜 (@designpickle) 2015 年 7 月 25 日

对比按钮对于在它们之间建立顺序也很重要。 当有两个或更多选择时，更强烈的颜色可以表示您更喜欢或建议访问者选择哪一个。

来源：Quicksprout

加起来

按钮是网页设计中一个核心但经常被忽视的元素。 不该如此。 尤其是以号召性用语的形式，它们可以对转化率、点击率和其他重要的成功标志产生巨大影响。

因此，不应掉以轻心的按钮设计和放置主题。 回顾一下，为了创建有效的按钮：

• 确保它们适合您的整体设计
• 确保用户可以将它们识别为按钮
• 提供清晰的标签
• 将它们放在用户可以找到的地方
• 注意尺寸和间距
• 使用时提供反馈
• 让他们从网站的其余部分中脱颖而出

这些指南将帮助您设置用户忍不住点击的按钮。 但是，正如开头所提到的，这些最佳实践旨在作为起点。 要真正弄清楚哪些按钮适用于您的网站以及如何提高转化率，按钮设计应始终与彻底的 A/B 测试齐头并进。 幸运的是，我们还有一篇关于该主题的文章。

您在按钮设计方面的经验是什么？ 有什么重要的要添加到上面吗？ 请在下面的评论部分告诉我们！

BerryCat/shutterstock.com 的文章缩略图