这篇文章来自我们的用户体验清单系列:
按钮是用户以可操作的方式参与内容的可操作接触点。按钮虽小但功能强大，如果设计得不好，它可以成就或破坏网站的用户体验，所以在设计按钮时遵循最佳用户体验实践很重要。
按按钮是令人满意的。从手机上发光的红色大按钮到可轻触的小图标，按钮代表着动作。我们常常没有意识到我们每天点击了多少按钮，直到我们有了消极的经历;一个讨厌的按钮太小而无法点击，或者你点击了一个按钮却什么都没有发生，这都可能破坏用户体验。
在这篇文章中，我们将介绍如何确保网站上的按钮具有积极的用户体验。遵循这些指导方针来决定哪种类型的按钮最适合您的内容和用户。
按钮解剖学
5按钮类型
坚实的按钮
实心按钮在页面上突出，作为用户操作的视觉提示，指向用户要采取的主要操作。按钮使用户能够做出选择，而不是被动地参与内容。因此，您希望实体按钮操作是您的最高优先级的操作项，无论是注册获取更多信息的CTA还是将用户引导到另一个内容页面。
实心按钮的例子
行/鬼按钮
这些按钮用于辅助操作，在屏幕上不那么显眼。使用简单的颜色轮廓，它们吸引用户的注意力较少，但仍然与页面上的其他内容有所区别。当用户将鼠标悬停在桌面上的按钮上时，颜色填充可能会“隐进”以增加交互性。
Line/Ghost按钮的例子
FABs(浮动动作按钮)
因谷歌的材料设计， fab代表屏幕上的主要操作，通常通过单个操作图标传达。按钮后面的阴影以光学方式将其从屏幕上拉出来，使FAB成为天然的注意力焦点。它们的圆形形状通常不同于其他可见内容，UX研究表明这一点圆角对眼睛更舒适．
FAB的例子
图标按钮
图标按钮通常搭配标签来传达动作。不建议计算机水平较低的观众使用没有标签的图标按钮，因此安全的做法是始终将图标与按钮中的文本配对。
图标+标签(左)vs图标按钮(右)
文本链接
最后但并非最不重要的是，文本链接用颜色(通常是蓝色)、下划线和/或特定的可操作的措辞表示，如“关注我们”、“阅读更多”等。
这些按钮可以位于文本体内部，也可以位于文本体外部，通常用于不太重要的操作。
按钮大小
后麻省理工学院触摸实验室的结果在测量用于触屏的手指表面积时，一个好的经验法则(双关)是最小按钮大小为10mm x 10mm，或37px x 37px。在最小的要求下，这种大小的按钮具有较低的触摸精度。
另一方面，超过72px x 72px的按钮也具有较低的触摸精度，这使得移动设备上的按钮大小最好在42px-72px左右。
当为台式机而不是移动设备调整按钮大小时，光标比手指还小，这通常会诱使设计师认为他们可以创建更小的按钮。电脑屏幕比平板电脑和手机屏幕大得多，如果太小，按钮很容易在页面上丢失。
要遵循的一般规则是用你使用的字体点大小的行高+ 1个单位填充按钮的垂直高度。如果有视觉障碍的用户在浏览器中增加字体大小，这将确保按钮高度不会随着字体大小的增加而被切断。
除了按钮的大小，考虑按钮之间的空间也很重要。将按钮放在一起太近会增加用户意外点击错误按钮的风险，但将它们放置得太远可能会使UI看起来脱节，并且在需要时可能很难快速点击不同的按钮。
按钮的一致性
用户会有意无意地记住UI细节。我们将某些元素形状与动作和按钮相关联，比如将软盘图标作为“保存”按钮，或将垃圾桶图标用于从设备中删除文件。一致的设计不仅改善了整体设计，还为用户创造了熟悉和更无缝的体验。
因为按钮是用户的操作点，所以按钮文本也应该是可操作的。坚持使用动词(完成，开始/完成，搜索)或按钮的简单动词+名词组合(下一页，提交文章，了解更多)．无论您选择哪种标记方法，都要保持所有按钮的一致性。
动词+名词(左)对动词(右)
当涉及到视觉效果时，决定你的按钮文本是全部小写、大写还是标题大小写。考虑颜色语言:用户可能会被一个表示“保存”的红色按钮所迷惑。
同样，在选择颜色时，要注意可读性。有视觉障碍的用户可能在阅读和使用您网站上的按钮时遇到困难，所以请尝试使用此功能有用的工具确保您的颜色符合可访问性要求。查看我们的易访问设计最佳实践的UX检查表欲知详情。
小写字母(左)，大写字母(中)，标题字母(右)
按钮设计中的色彩语言
将按钮作为展示品牌颜色的机会。
使用一致的按钮形状和大小。按钮可以有不同的角半径，但通常分为三类:硬线、圆角或药丸形。圆角通常代表着简单和开放，而硬边则更统一和正式。无论你选择哪种风格，让你所有的按钮都保持相同的形状以保持一致。
硬线(左)，圆边(中)，药丸状(右)
下一个步骤
读完这篇文章后，不要太高兴了。过度使用动作提示会导致用户在没有参与任何事情的情况下离开网站。按钮应该为您希望用户采取的少数重要操作保留。确保并检查你网站上的按钮是否符合本指南，以确保它们与你的视觉品牌标识一致。
- 想要更多关于按钮设计和UX最佳实践的帮助?联系我们的创意团队了解更多。我们是来帮忙的!
- 寻找更多的设计最佳实践?继续阅读我们的创意和用户体验清单系列．
注册我们的通讯，以获取更多这样的文章-直接发送到您的收件箱!
