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

出色的按钮设计是大多数网站用户从未想到的事情……因为当它运行良好时，它几乎是看不见的。最好的按钮易于单击或点击，具有明显的功能，并可以帮助用户与设计交互而不用思考。

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

今天，我们正在研究按钮设计的趋势，以及一些提示，以帮助您设计人们不断点击的UI按钮。这些提示，趋势和想法可激发您的按钮设计灵感。

1.保持简约

这一切都回到了设计理论中的经典短语：保持简单，愚蠢（或者，如果您愿意，则愚蠢）。

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

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

2.提供足够的对比

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

图像顶部的幻影按钮样式快速趋势和褪色的原因是因为按钮的对比度不足以使其易于辨别。用户无法立即找到它们。

不要隐藏对比度差的按钮。使它们脱颖而出，并以足够的色彩和空间对比度进行喊叫，以使其与屏幕上的其他元素分开。在按钮周围留出足够的填充物，以使它们可以呼吸。

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

3.使用颜色

您是否注意到红色或橙色的按钮有多少？这是因为鲜艳的色彩吸引了这些元素并鼓励人们行动。

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

4.写出创造期望的显微镜

不要犯这个错误：一个带有“ Click Here”字样的按钮。（这有多垃圾？）

按钮设计中的显微镜应该清楚地表明单击会发生什么。告诉用户他们接下来会得到什么。这可能很简单，例如“提交”以输入数据，或单击“了解更多”的链接，或观看视频。不管采取什么措施，请在显微镜下告知用户。

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

5.参与微妙的动画

按钮设计趋势是网站并排使用两个按钮。一个充满，一个是幽灵风格。两者都包含一个悬停动画，进一步强调了两个可单击的选择。

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

只是不要太过分。旋流，旋转，闪烁的按钮多于帮助烦人。

6.使其足够大

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

让我们对此进行透视。物理计算机键盘上的典型键为15毫米乘15毫米。那是个好目标。（请不要忘记考虑不同的屏幕尺寸，以使您的按钮不会在小屏幕上丢失。）

如果确实需要使用较小的按钮，请考虑为其添加较大的单击半径。这样，如果用户错过了按钮本身，则按钮周围有足够的空间，因此仍会发生所需的操作。（您的网站访问者将感谢您。）

7.使用熟悉的风格

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

• 矩形填充按钮，内部带有正方形边缘和文本
• 带有圆角边缘和内部文本的矩形填充按钮
• 具有可见阴影的矩形填充按钮（上）
• 矩形幻影按钮
• 简单的圆形按钮，最常用于右下角以表示支持，帮助或聊天

8.放置在预期的位置

按钮不仅需要出现并按预期起作用，还需要将其放置在用户寻找它们的位置。

• 对于首页，这包括将按钮放置在主标题或文本块下方。通常，按钮与文本对齐或位于屏幕中央。
• 对于表单，输入后会出现按钮。某些单一输入形式会将按钮对齐在同一行的右侧。
• 常规CTA按钮直接出现在它们所引用的内容下方。
• 播放或开始视频或游戏的按钮通常位于预览屏幕的中央。
• 购物车或电子商务按钮通常位于右上角。

9.不要忘记反馈

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

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

10.故意使用按钮

太多按钮会造成混乱。

在有意义的地方使用按钮。不要在各处使用按钮使设计超载。用户对要单击的最重要位置和最不清楚的地方并不清楚。

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

结论

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

如果您的按钮正常工作，请不要陷入趋势陷阱并更改设计。当涉及到按钮时，该功能应该是头等大事。