作者：Michal Malewicz

译者：Matrix

审稿：afang

原文链接：

https://uxdesign.cc/design-better-buttons-a5c90a113280

文章由交译所成员翻译，如需转载，请先申请授权。

译文如下：

按钮是触发它所描述功能的可交互元素。如果一个按钮上写着“保存”，点它十有八九会有类似保存操作。按钮也是所有电子产品上最重要的交互元素之一。按钮能够触发购买、下载、发送和很多其他重要操作。数字按钮也沿袭自真实世界中比如电视遥控、录像机或者游戏手柄上的实体按钮。

最重要的须知

按钮得看起来像按钮设计按钮最重要的法则就是要使按钮足够突出，以免按钮和其他元素混淆。从按钮中逐步移除元素，按钮的功能也开始消融丢失。它变成了装饰或者说文本，失去可操作的特性。

熟悉的=好的

我们习惯于和行为有自然关联的特定形状和形式。按钮看起来和我们认为有关联的行为越相似，设计越成功。这就是为什么选择一个矩形(或者一个圆角矩形)作为按钮是最安全的。这个元素会被立即识别为一个按钮其他形状和形式对用户就未必有这样的可识别性。需谨慎使用他们，尽量在你产品的常规风格需要与众不同时才使用。其他形状和形式(三角形、圆形、自由形态)对用户就未必有这样的可识别性。需谨慎使用他们，尽量在你产品的常规风格需要与众不同时才使用。需要花费更多时间才能被识别的可点击元素

按钮分解

按钮设计需熟记每个元素并妥善选择。使用品牌手册作为基准，思考哪种按钮能够匹配品牌并和界面很好相容。你应该使用网格基本数值用来设置内外边距。以上图为例，左侧内边距为两倍上下内边距，这是种增加可读性的安全做法。

间距和对齐

不规则间距按钮是所有界面都会遇到最普遍的问题之一。务必再三确认按钮标签是否水平和竖直居中。如果要十分确定，请建立规范。除了基于网格的方法，使用大写字母W确定边距也是一个稳妥的办法。如果按钮标签4个边距都至少1 x W，那就没问题。为了提高可读性，水平边距留出2 x W更好。别忘了按钮之间安全间距。如果界面上有很多按钮，保证各个按钮外边距不重叠比较稳妥。

合理的尺寸

桌面和移动端的按钮都应该有它们的最小尺寸。如果按钮太小，就会导致按钮难以用手指或鼠标点击。这会导致给用户带来困扰，用户甚至会直接卸载你的APP。在移动端，最好把44 x 44 pt作为所有可交互元素的最小尺寸。移动端上的按钮尺寸在50左右最佳。如果是基于光标的设备，32 x 32也是可行的。牢记即使在桌面端，更大按钮也依然代表它使用起来更容易。

良好的实践

重要的按钮也会搭配有图标。一个“结账”可以通过一个购物篮或购物车图标快速识别，但是只在与文字“结账”同时出现时有效。一个合适的箭头或“>”放在按钮标签后，能更强地传达信息。更强制地去引导用户点击并“继续”。如果你要强化CTA，这个办法就很有效。相较扁平的按钮，有阴影的按钮会更有可点击性、更快被识别。加个微妙的阴影可以使按钮在背景中更为突出。

圆角

圆角按钮会看起来比尖角按钮更友好和积极。同时，圆角按钮周围的内容设计难度剧增。如果文本标签在按钮上方与按钮保持左对齐，那么按钮的圆角越大，文本标签和按钮视觉上越不协调。这让按钮感觉看起来同时有两个左边距。

图标对齐

合适的图标对齐是按钮设计中最难的事之一。大多数情况下，字重和图标尺寸是直接相关，它们的关系也是特有的。但是依然有个简单有效的法则适用于大多数情况。根据按钮圆角半径画个圆，或者根据按钮高度画个方块。在它内部，再画个小的来放置图标。大的形状和小的之间的内边距应该有和标签文字高度相同。然后就可以把图标放到小的形状里。在有图标的情况下，最好保持图标高度和文字高度一致，可以对比文本线宽和单字宽，然后使它们匹配度越高效果越好

边缘平衡

在使用圆角矩形按钮时，需要注意去调整圆角和其他界面元素的比例来确定使用多大的圆角。都使用相同的圆角半径会使得外边距不平衡。对话框边距也是一样，就像左边距和底边距。因此，处理起外边缘会更舒服和快速。对话框按钮和背景之间的左边距和底边距过大(左)、过小(右)。这让对话框边缘太过突出，夺取了按钮本身的关注度。

总结

当你创建一级、二级、三级按钮时，谨记每次去检查一系列因素。甚至小的不统一或者不对齐会降低交互质量。按钮交互和点击都影响重大。谨记：

• 把按钮设计的像按钮

• 保证标签和按钮水平、竖直居中

• 保证按钮有充足内边距

• 为图标选择正确的大小和对齐关系

• 根据按钮的使用环境设置合适的圆角半径

• 检查按钮圆角半径是否与其他元素契合

• 选择合适尺寸。按钮越大，用起来越简单。桌面端同理。

·END·