按钮是可操作的接触点，用于用户以可操作的方式与内容接触。小但强大的，按钮可以在网站上制作或打破用户体验，如果设计不佳，因此在设计按钮时遵循最佳UX实践是很重要的。
按下按钮是令人满意的。从大发光红色按钮到我们手机上的微小令人震惊的图标，按钮表示动作。我们经常没有意识到我们在每天点击或点击的纽扣，直到我们有负面的经验;一个太小的讨厌的按钮，无法点击，或者您可以在没有发生任何情况下单击的按钮，可以毁灭用户体验。
在这篇文章中，我们将通过您网站上的按钮确保正面UX。遵循以下准则来决定哪种类型的按钮适用于您的内容和用户。
按钮解剖学
5种类型的按钮
坚固的按钮
稳定按钮指向主要动作，为用户站在一个页面上作为视觉提示进行用户动作。按钮使用户能够做出选择而不是被动地与内容进行搞。因此，您希望稳定按钮操作成为您的最高优先级操作项，无论是用于注册更多信息的CTA，还是将用户驱动到另一个内容页面。
Solid按钮的例子
行/鬼按钮
这些按钮用于辅助操作，在屏幕上不那么显眼。用一个简单的颜色轮廓，他们不太吸引用户的注意力，但仍然区别于页面上的其他内容。当用户将鼠标悬停在桌面按钮上时，颜色填充可能会“ghost in”以增加交互性。
行/幽灵按钮的示例
FABs(浮动动作按钮)
受欢迎谷歌的材料设计， FABs表示屏幕上的一个主要动作，通常通过一个动作图标传达。按钮后面的阴影从视觉上把它从屏幕上拉下来，使FAB成为一个自然的注意力捕捉器。它们的圆形形状通常与其他可见内容不同，UX研究表明这一点圆角在眼睛上更容易。
工厂的例子
图标按钮
图标按钮通常与标签搭配以传达动作。没有标签的图标按钮不推荐给计算机水平较低的观众，因此安全的做法是在按钮中总是将图标与文本配对。
图标+标签（左）与图标按钮（右）
文本链接
最后但并非最不重要的是，文本链接用颜色（通常是蓝色），下划线和/或特定的可操作术语表示，例如“关注我们“，”阅读更多“， 等等。
这些按钮可以落在文本的身体外部，通常用于不太重要的行动。
按钮尺寸
下列的麻省理工学院的触摸实验结果在测量用于触摸屏幕的手指表面区域时，拇指的好规则（双关语）是具有10mm x 10mm的最小按钮尺寸，或37px x 37px。在最小的最低要求，此尺寸的按钮具有低触摸精度。
在翻盖方面，超过72px x 72px的按钮也具有低的触摸精度，使得甜点大小为42px-72px在移动设备上。
当为桌面而不是移动设备调整按钮大小时，光标比手指还小，这常常使设计师误以为他们可以制作更小的按钮。电脑屏幕比平板电脑和手机屏幕大得多，如果太小，按钮很容易在页面上消失。
遵循的一般规则正在使用您使用+ 1单位的字体点大小的线高度填充按钮的垂直高度。如果具有视觉障碍的用户在浏览器中增加字体大小，这将确保按钮高度不会以增加的字体大小切断。
随着按钮尺寸，考虑按钮之间的空间量也很重要。将按钮放在一起提高用户意外攻击错误按钮的风险，但将它们放置得太远可能使UI看起来脱节，如果需要，可能很难快速点击不同的按钮。
按钮的一致性
有意识地与否，用户记住UI详细信息。我们将某些元素形状与操作和按钮相关联，如软盘图标为“保存”按钮或垃圾桶可以从设备中删除文件。一致的设计不仅提高了整体设计，它也为用户创造了熟悉和更无缝的体验。
由于按钮是用户的动作点，因此按钮文本也应该是可操作的。坚持使用动词（完成,开始/结束,搜索)或按钮的简单动词+名词组合(下一页，提交文章那了解更多）.无论你选择哪种标签方法，保持所有按钮的一致性。
动词+名词（左）与动词（右）
谈到视觉效果时，确定您的按钮文本是否全部小写，大写或标题案例。考虑颜色语言：用户可能会被一个红色按钮混淆，“保存”。
同样，选择颜色时会记住可读性。具有视觉损伤的用户可能难以阅读和与您网站上的按钮啮合，因此尝试使用此有用的工具确保颜色满足易访问性要求。看看我们易访问设计最佳实践UX清单更多细节。
小写(左)，大写(中)，标题(右)
键入按钮设计的彩色语言
使用按钮作为展示品牌颜色的机会。
使用一致的按钮形状和大小。按钮可以有不同的角半径，但通常分为三种类型:硬线、圆角或药丸型。圆角通常传达简单和开放，而硬边则更加统一和正式。无论你选择哪种风格，让你的所有按钮的形状一致。
硬线(左)、圆边(中)、丸形(右)
下一步
读完这篇文章后，不要太高兴了。过度使用动作线索会导致用户离开网站而不参与任何活动。按钮应该保留给您希望用户执行的少量重要操作。确保并检查你网站上的按钮，以确保它们是一致的，并与你的视觉品牌标识对齐。
- 想要更多帮助按钮设计和UX最佳实践吗？联系我们的创意团队以了解更多信息。我们在这里提供帮助！
- 寻找更多设计最佳实践？继续阅读我们的创意和UX核对表系列。
