[原创译文]用好这五个小技巧，搞定UI按钮设计不再难

本文由静Design翻译小组出品

译者：Winterbure / 没有心的无心菜 原文： Michal Malewicz

https://uxdesign.cc/5-tips-for-better-button-design

静Design翻译小组持续招新中，有兴趣的小伙伴请加静电微信Hixulei报名

这次我们想集中讨论一些快速、超级可行的技巧。你可以将这些技巧立马应用于项目中，使其变得更好。虽然标签看起来很简单，但是却有非常多复杂的情况需要注意。

什么是按钮？

按钮是一种带有明确标签的交互元素。你可以这么想，如果按钮上写着“支付”，点击该按钮，它可能就要求你提供信用卡详细信息。

对于 UI 来说，按钮是必不可少的。因为大多数界面都需要我们执行某种操作才能进行下一步。无论是保存，结账或是下载，按钮无处不在。

让我们来谈谈如何通过简单的五个步骤让按钮发挥更好的作用。显然，按钮可以做的事情还有很多，但这五个步骤是必不可少的。

我们先来剖析一个按钮

首先，按钮有几个明确的特征。

作为一个典型的形状，按钮包含填充，边框和阴影。就间距而言，它又包含内边距（也称为padding）和外边距，作为按钮的安全空间。（按钮包含外边距margin和内边距padding，内边距一般理解为按钮的安全区，通常可以理解为内部的留白）

就形状本身而言，可通过边界半径值（或角半径工具）调整为尖角或完全圆角。

按钮上的标签通常是文本，有时会有一个图标。在按钮上添加向右的箭头，是可以提高一点转化率的。标签文本由字体、颜色和字体样式来定义。

以下是我的五条按钮设计的金科玉律：

1.要让按钮有点击欲望

这个问题很简单。我们已经习惯了现实世界中的按钮是矩形（有时也是圆形）。使用既不是矩形也不是圆形的按钮肯定会让用户感到困惑。

这就是为什么即使拟物设计已几乎完全扁平化，但它依然存在于数字界面的原因。UI 中的按钮仍然需要看起来以及感觉就像你的电视遥控器上的一个按钮一样。

将一个“有机的”、模糊的形状作为按钮是行不通的。三角形和六边形作为按钮处理起来也会花很长时间。一些用户可能永远不会发现它们的作用。

如果你不想用矩形或圆形作为你的主按钮形状，唯一的其他选择是带有下划线的文本链接。如果你不确定颜色——深蓝色效果最好。

我们已习惯于认为带下划线的文本是一个链接，谷歌搜索页面每天都在帮人们强化这一点。

2. 按钮尺寸

当你想要重置一个电子设备的时候，需要先用一根针插进一个非常小的重置按钮里，你有过这种经历吗？这种按钮的设计概念是非常具有目的性的，因此你不会意外重置设备。

想象一下，如果所有的按钮都这么小，这将非常烦人并且难用。

按钮应该足够大，以便于用户使用。那么究竟应该是多大呢？

在触屏时代，相对于屏幕密度来说，我们通常用手指头的触碰区域来衡量按钮的尺寸。在2倍图中，44-48pt（88-98px）的范围是容易被点击的。

也有一些App，像是Tinder experimented 这个app，就把他们的CTA（call-to-action，这里的CTA指用户行为召唤，号召用户看了后可以有所行动）按钮放大到50pt（高度），这种设计也被证实取得了很好的效果。

当然你也不能做的太离谱了，但是50-60pt的高度还是值得尝试下的。

在做WEB端桌面按钮设计的时候，我们可以做的小一些，因为鼠标可以更精确地点击，但是也不能做得太小了，按钮还是需要能够被鼠标轻易地点击。因此最小的点击区域建议至少也要做到32pt。

3.对齐非常重要

在现有的一些UI界面设计中，最大的视觉问题就是按钮标签（这里指按钮上的字）的对齐问题。很多设计师和开发者都能做到水平居中，但是很少有人能做到垂直居中。在大多数情况下，标签要么太高，要么太低。

大写的按钮标签显然更容易居中，但是遇到首字母大写的情况时，最好能够使用基线对齐。（或者仅对齐首个大写字母，忽略后面高度较低的‘s等）。

按钮的大小和字体的大小也是很重要的。如果你的按钮是32pt，而你的文本是17pt，这会很难把他们完美地对齐，需要调整其中一个的尺寸来适应。

4.注意阴影的表现

阴影可以帮助物体在背景下突出显示出来，并且有助于将这个物体识别为可以点击或是可以按的对象。

这是因为，如果某个物体看起来比背景要高，我们自然而然地就能明白，它是可以被按下去的。

为了让你的按钮看起来更友好，可以在阴影的颜色中加上一点背景色。在上面的示例中，阴影的颜色混合了蓝色。按钮的阴影颜色也应当避免使用比较实、深或是对比强烈的色彩。

因为这些阴影颜色确实能把用户的注意力转移到按钮上。但是这些它们会非常扎眼，并且让人不舒服，还会分散用户的注意力。

5.标签要有可读性

我们已经知道，按钮的标签需要对齐，但是他们也需要有足够的呼吸感来保证可读性。

避免按钮和文字之间间距太小。有一个好的原则是用一个固定的数值W作为字体标签和按钮边缘的上下间距，左右的边距则设为W的两倍。

当然按钮距离字体标签的间距可以比2W宽一些，因为这里的建议仅是保证按钮美观和可读性的最小尺寸。

了解了这些规则也可以有助于你设计其它的UI元素，但是按钮作为UI设计中最重要的部分，多多练习起来，可以让大家做到游刃有余，加油！

▼