UI设计学习—改善按钮设计的法则

1.按钮必须看起来像按钮

我们习惯了现实世界中的按钮是长方形的(有时是圆形的)。如果我们设计中的按钮形状既不是矩形也不是圆形(也不是圆形矩形)，很可能会让用户感到困惑。这就是为什么即使现在的UI按钮几乎完全是平面的，但伪物化设计实际上仍然存在于数字界面中。用户界面上的按钮仍然需要看起来像电视遥控器上的按钮。

有了“有机形状”，圆点就不能当按钮用了。三角形和六边形也会让用户花更长的时间来识别它们是按钮，甚至有些用户可能永远找不到界面的按钮。如果不希望矩形或圆形作为主按钮形状，可以选择使用带下划线的文本链接。如果你不确定颜色，深蓝色通常是最好的选择。

2.大小

在现实生活中，你是否曾经需要先找到一根针来确定超小的重置按钮被按下以重置电子设备？这个设计是有目的的，因为可以避免不注意重置设备。但是假设界面中所有的按钮都那么小，会让它们很难使用。按钮应该足够大，让用户舒适地使用，但需要多大呢？

在触摸屏时代，我们通常以典型的指尖大小相对于屏幕密度来衡量。一个44-48px按键的正方形会让我们感觉很舒服。一些应用(如Tinder)尝试将其动作按钮放大50px(高度)，取得了不错的效果。很明显，按钮的大小不能超过这个范围太多，但在50-60px的范围内还是值得一试的。

在为PC设计的时候，我们可以把按键做得小一点，因为鼠标光标更准确，但一定不能太小。我们仍然需要确保用户可以轻松地将鼠标指向按钮，因此最小的按钮应该设置为32px左右。

3.对齐就是一切！

所有UI中最大的视觉问题就是按钮标签文字无法对齐。尽管大多数设计人员和开发人员试图将它水平居中，但很少有按钮可以垂直居中。大写的标签显然更容易居中，但是当同时使用大写和小写字母时，最好坚持基线对齐(或者只与第一个大写字母对齐，忽略降序的Y、J和G字母)。

按钮大小和字体大小的适应性也很重要。如果你有一个32px的按钮和一个17px的文字，你就不能完美的放在中间，所以你需要调整其中一个使之互相适合。

4.在阴影上努力工作

阴影可以帮助对象在背景中突出，并帮助用户将它识别为可以单击或需要单击的对象。因为阴影会让按钮看起来比背景更远，用户自然会理解，可以按下。

为了使按钮看起来更友好，您可以在阴影颜色中添加背景颜色。在上面的例子中，阴影是蓝色的混合色。应该避免黑暗和对比强烈的阴影，因为即使这样的阴影吸引了用户的注意力，如果它们看起来过于锐利和令人不快，也很容易失去用户的注意力。

5.易于阅读的标签文本

标签文本需要居中，但它们也需要足够的喘息空间，以便于阅读。避免按钮周围的文本没有空格。规则是在标签上方和下方的标签字体中留出“大写字母W的间距”。把“两个大写字母W之间的距离”留在边上。

当然，按钮可以在上述间距的基础上更宽一些，因为那个标准只是让它成为看起来很漂亮，容易阅读的最小尺寸。