10个网站UI按钮设计的艺术趋势和技巧

出色的按钮设计是大多数网站用户几乎不会关于注意的事情……因为当它运行良好时，它几乎是看不见的。 一个好的按钮设计应该易于点击，具有明显的功能，并可以帮助用户不用过多思考就与设计进行交互互动。

这是一个非常简单的道理，但是如果事后考虑，可能会很难设计。

今天，我们将来着重研究按钮设计的趋势，以及一些关于如何设计一个好按钮的提示，以帮助你设计用户将不断产生点击欲望的UI按钮。 这些提示，趋势和想法可激发你对按钮设计的灵感。

1.保持简单（Keep It Simple）



这一切都回到了设计理论中的经典短语：保持简单，看似愚蠢。

网站按钮设计其实也并没有什么不同。 按钮的设计不必太复杂，它应该是显而易见的且具有功能。 有时，其他设计趋势可能会影响到这种情况，并且这可能会影响网站上的转化。

因此，在按钮设计方面，请这样思考——不要过分考虑。 一个按钮应该看起来像一个按钮，就这么简单。

2.提供大量对比（Provide Plenty of Contrast）



确保具有易于识别的按钮几乎与具有可识别的按钮一样重要。

原因在于，位于图像或背景层顶部的按钮样式可能因为对比度不足以至于不易于被辨别，用户无法立即找到它们。

不要因为对比度而影响你的按钮发挥，你需要尽可能使它们脱颖而出，并以足够的色彩和空间创建对比度以使其与屏幕上的其他元素分开。 在按钮周围留出足够的空间，以使它们可以单独引起注意。

这使按钮更易于用户查找和识别为可单击元素，并使它们在物理上更易于单击，而不会获得错误的信息元素。

3.使用颜色（Use Color）



你是否注意到红色或橙色的按钮在实际上使用的有多广泛？ 这是因为鲜艳的色彩可以提供吸引力，并鼓励人们采取行动。

使用颜色也是一种非常流行的设计技术。 从鲜艳的颜色到具有简单渐变的按钮，颜色可能是帮助人们与设计进行交互的较简单方法之一。

4.具有吸引力的号召短语（Write Microcopy That Creates Expectation）



不要再犯这中错误：一个带有“ 点击”或“单击这里”字样的按钮。

按钮设计中的短语应该清楚地表明单击以后会发生什么。 告诉用户他们接下来会得到什么。 这可能很简单，例如“提交”以输入数据，或单击“了解更多”的链接，或“观看视频”。 不管接下来展开的是什么内容，请在短文本中告知用户。

此信息可以帮助建立用户的信任，并通过用户认为理想的操作/交互来增加转化。

5.微妙的效果（Engage with Subtle Animation）



在网站设计中经常会使用到并排两个按钮的样式，这也是一个不要忽视的趋势。 一个是填充的，另一个则是边框线的，两者都包含一个悬停动画，进一步强调了两个可单击的选择。

动画可以帮助引起人们对按钮的关注，甚至可以鼓励点击。 在按钮上包含悬停动画，并已为用户提供了一个简单的提示，使其成为一种很常见的用户模式。

只是不要在效果的使用上用力过猛就好。

6.易于点击的尺寸（Make It Big Enough to Tap）



按钮应包括直径至少10毫米的可单击（可轻敲）区域，并且要始终贯彻。 该建议来自the MIT Touch Lab的一项研究，该机构研究了指垫大小与触摸设备的关系。

让我们这样想，计算机键盘上的典型键被设计为15毫米乘15毫米，这是为什么呢（请不要忘记考虑不同的屏幕尺寸，以免按钮在小屏幕上丢失）？

如果确实需要使用较小的按钮，请考虑为其添加较大的单击半径。 这样，如果用户错过了按钮本身，则按钮周围有足够的空间，因此仍然可以进行所需的操作。

7.使用统一的风格（Use a Familiar Style）



每个人都熟悉一些通用的按钮样式，使用其中之一。

· 矩形填充按钮，内部带有正方形边缘和文本

· 带有圆角边缘和内部文本的矩形填充按钮

· 具有可见阴影的矩形填充按钮

· 矩形边框线按钮

· 简单的圆形按钮，最常用于右下角以表示帮助或聊天等

8.适当的位置（Put in an Expected Location）



按钮不仅需要出现并按预期发挥作用，还需要将其放置在用户容易找到它们的位置。

· 对于首页，这包括将按钮放置在主标题或文本块下方。 通常，按钮与文本对齐或位于屏幕中央。

· 对于表单，输入内容后会出现按钮。 某些单一输入形式会将按钮对齐在同一行的右侧。

· 常规CTA按钮直接出现在它们所引用的内容下方。

· 播放或视频或游戏的按钮通常位于预览屏幕的中央。

· 购物车或电子商务按钮通常位于右上角。

9.不要忘记反馈（Don’t Forget Feedback）


按钮是否响应交互？ 确保按钮界面设计中包含明显的反馈回路。

提供按钮已完成其工作的视觉或指导性提示。 有些按钮比其他按钮需要更多的工作。 例如，链接到另一个页面或网站的按钮会提供反馈，表明如果加载了新页面，则该按钮已起作用。 如果信息提交正确，则表单提交按钮可能会在屏幕上显示“谢谢”消息。

10.有目的性的使用按钮（Use Buttons Intentionally）



太多按钮会造成混乱。

在需要以及有意义的地方使用按钮。 不要在各处使用按钮使设计看起来眼花缭乱。 除了你之外，用户对要点击的位置和最重要的内容一无所知。

按钮应该以用于网站的最终目标。 他们应将访客带入整体网站设计中最重要的元素。

总结

网页设计中的按钮是将号召性用语转换为结果的元素。 从颜色到功能再到微文本，请花点时间考虑一下这种设计。 测试按钮设计，以确保在你的界面中使用的是具有最实用的版本。

请不要陷入趋势陷阱，当涉及到按钮时，功能应该是头等大事。