您需要了解WORDPRESS的7个按钮设计

创建按钮的设计指南似乎是多余的。毕竟,你已经知道网站按钮是什么样的,不是吗?那么,你真的需要帮助创建它们吗?

像按钮一样常见,不应忘记它们是具有重要功能的网页设计的核心部分:

  • 按钮通常构成主要的行动呼吁
  • 购买按钮极大地影响收入
  • 电子邮件注册按钮有助于构建列表
  • 表单提交按钮对于潜在客户生成很重要
  • 社交按钮有助于分享您的内容

因此,在这篇文章中,我们将为您提供一些按钮设计指南和最佳实践。目标是帮助您创建提高转换的按钮,使您更接近实现网站的目标。

只是一个简短的警告:虽然下面的最佳实践将帮助您创建更好的按钮,但你需要真正知道什么会提高您的转换率,您应该采用A / B分割测试。只有通过尝试不同的替代方案,您才能找到哪种按钮可以改善您的网站。

按钮设计指南,以帮助您创建更好的按钮

以下指南将帮助您创建吸引点击和用户注意力的按钮。

1.确保他们适合您的网站和品牌

按钮需要突出(以便用户点击它们)但是以积极的方式。

因此,在遵循按钮设计指南的同时,还要确保结果与其出现的上下文完美结合。将现有的品牌和设计考虑在内,并确保您的按钮与网站的调色板和样式相协调。

同时,不要回避试验。大胆的色彩可能正是您的网站增加转化所需的。

2.坚持既定的设计惯例

这一点应该是不言自明的。对于用户单击按钮,他们需要知道该选项存在。如果您的设计远远超出通常的约定,则可能会阻止用户识别按钮甚至其存在。

那么,这些惯例是什么?

首先是形状。由于计算机的长期发展,最熟悉的形状是一个矩形(有或没有圆角)。看看WordPress吧。

矩形按钮示例

用户已经适应了很长时间的风格,以至于他们很容易识别它。当然,到目前为止,其他的风格也已经建立,这是一个好的开始。

此外,按钮的重要设计线索是阴影和高光。阴影已成为可以点击或点击某些内容的通用信号。因此,不要忘记让您的按钮感觉更凸出。

无论您为网站选择哪种按钮形状和设计,都要确保保持一致。如果您的按钮差异太大,它们会使用户感到困惑并影响他们采取的行动。

3.使用清除标签

我们的按钮设计指南的下一点是标签。如果不知道按钮的作用,用户无法确定点击它是否对他们有意义。请参阅上面的发布按钮。

这不一定是文本,图标也可以。你可以在社交分享按钮中看到它已经无处不在。

按钮设计指南标签

文本和图像的组合也是可能的。唯一重要的是用户可以识别点击按钮所产生的效果。如果他们不这样做,就没有你想要的行动结果。

一定要使你的标签具有描述性和特殊性,使用描述它将要执行的动作的动词(如购买),并用类似”现在“的词语创建紧急程度。这对于号召性用语尤其重要,号召性用语通常是任何网页的核心部分。

4.按钮大小和间距

获得正确的间距和尺寸对于移动设计尤为重要。用手指使用网站不如用鼠标精确,只是因为“光标”要大得多。这里的重要部分是

a)使它们可用的方式创建按钮

b)防止用户意外地窃听错误的东西。

在尺寸方面,人的指尖平均为16-20mm。这大约是45到57像素。为了适应这种情况,Apple建议按钮尺寸至少为44 x 44像素(为视网膜显示器制作该点)。还说明了其他制造商的建议,其中大多数人说至少间距10毫米。

似乎没有具体的间距规则。只需确保您的按钮排列方式不会碰到错误的按钮。提供足够的空间还可以帮助设置更重要的按钮,例如号召性用语。

5.实施反馈

一旦您以用户可以清楚识别的方式设计按钮,工作就不会停止。接下来的问题是:当他们使用按钮时会发生什么?事实证明,这些设计元素有多个状态:

  • 正常 – 您可以清楚地看到它是一个按钮,该元素邀请互动
  • 聚焦 – 通常鼠标悬停效果,确认可以与元素交互
  • 按下 – 奖励用户采取行动,确认正在发生的事情
  • 忙碌 – 显示在后台进行的活动
  • 已禁用 – 清楚地表明其他操作是可能的,当前不是
按钮设计指南反馈
资料来源:Tutsplus

通过提供反馈,您可以使交互清晰,更令人兴奋。这是用户看到他们的行为有效的视觉奖励。

6.明确地定位他们

当然,当您设计按钮时,最后一步是确保用户可以找到它们。否则,他们将如何点击它们?因此,选择正确的按钮位置也很重要。

在这里,使用既定的惯例也是有意义的。例如,大多数人都希望主要的行动呼吁高于一定,所以这是一个放置它的好地方。

在折叠cta例子之上

其他按钮也可能有这样的约定,例如页脚中的社交媒体按钮。

网页设计标准
资料来源:Orbit Media

虽然偶尔破坏约定是有意义的,但总是存在混淆用户的风险。反过来,这会严重影响他们对您网站的看法。测试不同的可能性,以确定最有效的方法。

7.与其他设计形成鲜明对比

很好地定位按钮也意味着提供足够的对比度。通过使按钮从设计的其余部分中脱颖而出,您可以清楚地表明交互是可能的和期望的。它还可以防止您的按钮丢失。

以下是创建对比的一般工具:

  • 颜色 – 使用对比色,包括按钮标签
  • 尺寸 – 更大的元素更突出
  • 排版 – 粗体文本或使用不同的字体可以吸引注意力
  • 空白 – 元素周围更多的呼吸空间意味着更多地关注它

找出对比度是否足够高的一个好方法是使用斜视测试。为此,只需离开屏幕,眯着眼睛看看按钮是否仍然突出。

斜视测试示例
资料来源:MailChimp

听起来很奇怪,但在网页设计师中却是一种久经考验的技术。

如何在WordPress中创建按钮

现在您知道如何使按钮看起来很好,问题是,您如何在您的网站上获得它们?幸运的是,新的Gutenberg编辑器使这很容易。

1.创建块元素

您可以像任何其他块元素一样在Gutenberg中创建一个按钮。只需单击左侧的加号。菜单打开后,向下滚动到布局元素以查找按钮。

单击它将其添加到您的页面。

2.配置按钮文本和目标

点击后,WordPress打开此菜单。

您在此处有以下选项:

  • 更改方向 – 使用顶部的符号将按钮对齐到页面的左侧,中间或右侧
  • 编辑按钮文本 – 只需单击按钮即可将文本更改为您想要的任何内容,将文本设置为粗体,斜体或删除线也可以
  • 输入目的地 – 在显示粘贴URL或类型的位置,您可以确定按钮在点击时将访问者的位置

3.编辑设计

完成后,就可以进行样式设计了。为此,您可以选择在右侧单击几下来更改按钮和文本颜色。

改变wordpress按钮的设计

选择一个可用选项或使用颜色选择器生成新阴影。您还可以输入所需特定色调的十六进制代码。如果您选择难以阅读的颜色组合,编辑甚至会警告您。

除此之外,在Advanced下,您可以向按钮添加自定义CSS类。这样,您就可以使用一些CSS标记创建自定义设计,包括悬停效果等。

就是这样 – 在WordPress中添加按钮的最简单方法。

结论

在网页设计中,按钮可能会被忽视,因为很多人认为它们是常见的元素。但是,他们所扮演的角色不应低估。按钮影响从转换和销售到电子邮件注册的所有内容。

上面,我们为您提供了按钮设计指南,您可以使用它们来提高您的效率。让我们快速回顾一下:

  1. 确保您的按钮与您网站的其他部分保持良好关系
  2. 使它们清晰可识别为按钮
  3. 添加清晰明确的标签
  4. 添加足够的尺寸和间距
  5. 为用户提供视觉反馈
  6. 将按钮突出显示在您的页面上
  7. 与页面的其余部分建立足够的对比度

遵循这些指南将帮助您为WordPress网站创建更好的按钮。此外,您现在还知道在页面上包含按钮的简单方法。

但是,不要忘记:理论不能取代测试。创建按钮后,请务必测试不同的替代方案,以便找到效果最好的按钮。

说点什么

500