金山做网站:按钮设计指南为什么很重要

2019.05.06 关键词:

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

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

尤其是在主要的行动呼吁和电子商务网站上,按钮实际上影响了底线。然而,作为社交分享按钮,电子邮件注册和表单提交按钮是网站成功的关键。

因此,金山做网站本文将详细介绍这个经常被忽视的设计元素,以及如何为WordPress网站创建高转换按钮。虽然重点将放在CTA(呼吁行动),我们也将讨论许多一般性的建议,当涉及到按钮设计。

那个话题按你的按钮了吗?那就继续读书。

在我们开始之前,一个关于A/B测试的快速单词

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

然而,同时重要的是要记住,这只是提高你的转换率的基础。设计原则可以让你对什么是有效的进行合理的猜测,但要真正知道哪一种按钮是将访问者转换为订阅者、买家或者是测试的关键所在。运行A/B测试让你知道什么是真正适合你的网站,哪个按钮的颜色,复制,位置和其他标记访问者最好的反应。

因为一切都很重要。即使是最小的变化也会对转化率产生令人惊讶的巨大影响-既有正的,也有负的。翻过去这些例子来理解我在说什么。

因此,虽然我们的按钮设计指南将帮助您了解最佳实践,它最好辅之以健康的试验,以找到获胜的组合,您的网站的成功。

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

在这个警告之后,我们现在转到如何制作性能良好的按钮,以便更好地调用操作和提高转换率。好好享受吧!

设计适合你的品牌或网站

在进入功能设计之前,考虑按钮将出现的上下文是很重要的。创建完美的按钮是没有用的,如果它破坏了你的网站。

因此,虽然下面的准则很重要,但重要的是,它们的结果必须与它所显示的情况很好地结合在一起。这意味着您的按钮适合您的网站的调色板,风格和总体设计指南。

虽然你想要按钮突出,以推动行动,但目标是让它们以一种积极的方式脱颖而出。这意味着它与整体设计是一致的,而不是破坏它。

同时,不要害怕尝试一点。有时,一个按钮在一个对比的颜色,正是所需的香料,否则平淡的设计。

使按钮看起来像按钮

设计被点击的按钮的第一步是让它们看起来像按钮。如果用户不明白他们应该利用它们,那么调用行动和共享选项是没有好处的。

当涉及到按钮设计时,用户有一定的期望。如果你完全不履行它们,他们将很难采取想要的行动。因此,包括帮助他们理解的视觉暗示是很重要的。

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

金山做网站

资料来源:维基百科经微软许可使用

当然,其他形状也是可能的,包括方形,圆圈,三角形,甚至定制形状。事实上,有许多奇怪和不寻常的按钮的例子,例如漂流

为了保持网站设计的一致性,采用一种不那么传统的形状是有意义的。然而,正如苹果的iOS已经证明它的圆形方块,这并不意味着它不工作。

ios buttons example

图片由Iexyeverytime/ShuterStock.com拍摄。

不管你选择什么,一定要保持一致。避免对不同的按钮使用不同的设计。这不仅使用户界面更好,而且确保用户能够识别整个站点的按钮。

金山做网站另一个重要的设计线索是阴影和高光。阴影已经成为一个普遍的提示,以显示元素是可点击的或可以点击的。即使在其他情况下,平面设计也会使用它们作为功能的信号。

material design button


资料来源:Material.io

提供清晰的标签

除了基本的设计,清楚的标签也是重要的按钮使用。没有标签,用户就无法确定他们做什么。

标签不一定要写,图标也能用(见社交分享按钮)。将两者结合使用是另一种可能性,特别是在与电子商务相关的按钮上。

ecommerce buttons example

图片来源:Prixel Creative.com。

重要的是用户能够理解他们点击按钮会产生什么效果。如果他们不这样做,他们可能一开始就避免这样做。

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

  • 具有描述性和具体性
  • 使用动作动词。

    帮我报名, 提交表格, 创建帐户

  • 直接向用户发送地址
  • 用像这样的话制造一种紧迫感

    现在

    今天

  • 保持简单明了

当涉及到CTA时,标签是特别重要的。仅仅更改几个单词就会对按钮的性能产生很大的影响。例如,Unball看到了一个点击率增加90%只需将他们的按钮从“开始你的30天免费试用”改为“开始我的30天免费试用”。

是的,这可能是一个词的力量。

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

这真是个无伤大雅的事。如果你的用户找不到你的按钮,就很难点击它们。因此,影响其有效性的另一个因素是地点。

有一些约定。例如,主CTA通常可以喜欢上面的褶皱。这是有意义的,现在用户已经预料到了。

netflix call to action example


资料来源:Netflix

对于其他类型的按钮也是如此,在这些按钮中,用户已经接受了期望特定位置的培训。例如,按钮前人下一个通常是互相左右排列的。

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

然而,对于位置更灵活的按钮,例如社交共享按钮,考虑将它们放置在何处是最重要的。例如,您可能认为在文章末尾放置社交按钮是个好主意。这样,用户完成帖子后就可以分享了,对吧?

然而,广大读者甚至连你的帖子都没有结束。因此,一个更好的想法是放置按钮,在那里可以访问他们的任何一点的阅读体验。其中一个例子是君王浮动侧边栏:

monarch social sharing buttons example

当有疑问时,按钮放置的一个好的经验法则就是问问自己,用户下一步会在哪里看。设计应该引导用户在他们的道路上,所以按钮可以是他们的路径在网站上的逻辑结论。

注意尺寸和间距

现在我们金山做网站来讨论一个在移动设计中特别重要的话题。通过触摸与您的站点交互的人在其操作上不如使用鼠标的人精确。由于这个原因,你需要让他们能够使用和到达按钮,没有问题,也没有敲击错误的危险。

button size and spacing

资料来源:苹果

第一步是确保你的按钮足够大。这个平均人类指尖大8-10毫米。因此,苹果建议使触控元件至少用44 px(用点代替像素来显示视网膜)。来自其他制造商的建议也围绕着10毫米的标记。当然,针对桌面使用的网页设计可以稍微缩小一些大小。

同时,您需要考虑按钮之间的间距。你不想让用户失望,因为他们不小心推了一些他们不想要的东西。充足的空间也使元素更容易被发现,这对于主要的行动呼吁很重要。

提供反馈

一旦按钮或您的站点可以被识别为可使用的按钮,那么就应该考虑一下它们被实际调用到行动的那一刻了。按钮可以有几种存在状态:

  • 正常

    -可识别为按钮,可单击信号
  • 聚焦

    -鼠标悬停时更改,确认用户可以采取行动
  • 压紧

    -进一步改变,奖励用户采取行动并确认正在发生的事情
  • -当在后台采取行动时,按钮可以反映这一点
  • 残废

    -表明其他行动是可能的,只是此时不行

金山做网站

资料来源:Material.io

通过向用户提供使用按钮的视觉反馈,您可以使交互更加清晰和愉快。关于其他类似的想法,请参阅微观相互作用.

充分利用对比

并不是所有的按钮都是相同的。虽然登陆页面可能有几个链接可点击,但应该只有一个真正重要的。

向游客表明这一点的工具是颜色、对比和位置。有效地利用它们来吸引注意力,让用户点击。

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

button contrast

说到颜色,没有一个最好的选择。再说一遍,这里很大程度上取决于你自己的设计。一个好的经验法则是与对比的颜色,并采取它从那里。有关该主题的更多信息,请参阅我们在配色技术.

除了颜色,您还可以使用不同的方法引入对比度,包括大小、排版和空白。按钮颜色和文本的对比可以进一步增强效果,使拷贝更加清晰。再加上一个突出的位置,这些按钮真的会弹出。

call to action button example

资料来源:普雷兹

要想弄清楚你对行动的呼吁是否值得注意,请使用好的老的“斜视测试”。应用设计,从屏幕上走几步,斜视你的眼睛,看看你的按钮是否突出。我知道,这听起来不太专业,但很管用!

你的斜视是在测试你的#CTA?这是最好的方式来判断你的行动呼吁是否突出。http://t.co/uO53xJIOPu pic.twitter.com/wzNPyTErD2

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

对比按钮也很重要,以便在它们之间建立秩序。当有两种或更多的选择时,更强烈的颜色可以表示你更喜欢哪种颜色,或者建议游客选择哪种颜色。

button design guide quicksprout popup

资料来源:QuickSprout

总结

按钮是网页设计中一个核心但经常被忽略的元素。不配如此。特别是以呼吁行动的形式,它们可以对转换、通过速率点击和其他重要的成功标志产生巨大的影响。

因此,不应掉以轻心地讨论按钮的设计和放置问题。回顾一下,为了创建有效的按钮:

  • 确保它们符合你的总体设计。
  • 确保用户可以将其识别为按钮。
  • 提供清晰的标签
  • 把它们放在用户可以找到的地方
  • 注意尺寸和间距
  • 使用时提供反馈
  • 让他们脱颖而出

这些指导原则将帮助您设置用户无法帮助的按钮,只需单击。然而,正如一开始所提到的,这些最佳做法应被视为一个起点。要真正弄清楚哪些按钮适合您的站点,以及如何改进转换,按钮设计应该始终与彻底的A/B测试齐头并进。幸运的是,我们还有一篇文章关于这个话题。


关键词
最新推荐
联系电话 400-6065-301

微信咨询 寒总监