大家好，这里是TCC翻译情报局，我是李泽辉。按钮是UI设计中最重要但仍被忽视的UI元素之一。了解按钮设计是非常有必要的。本文作者对按钮进行了解剖分析，通过5条速度快、可操作性强的黄金法则，提出改进按钮设计的技巧。下面就跟随笔者的学习，把理论付诸实践吧。看完之后，你会让你的纽扣焕然一新！什么是按钮？按钮是具有明确指示动作的交互元素。例如，如果按钮显示“立即付款”，则单击它可能会要求您提供信用卡详细信息。按钮在UI设计中是必不可少的，因为大多数界面都需要我们采取一些行动才能继续。无论是保存、查看还是下载内容，按钮无处不在。您可以使用按钮做更多事情。接下来，我将解释五个简单的步骤来更好地设计按钮。注意很简单，但是很重要。让我们从剖析一个按钮开始。按钮有几个定义特征：一个典型的按钮有padding、border和shadow属性。对于距离，它们有填充和边距，这是我们按钮的安全空间。通过设置CornerRounding值，可以将按钮的形状更改为尖角或完全圆角。按钮上的标签通常是文本，有时可能包含一个图标。向按钮添加朝右的V形会增加页面转换(>)。标签文本由重量、颜色和字体样式定义。现在您已经了解了基础知识，我将列出改进按钮设计的五个黄金法则：1.按钮必须看起来像一个按钮我们习惯于现实世界中的按钮是矩形的（有时是圆形的）。如果我们设计中按钮的形状既不是矩形也不是圆形（也不是圆角矩形），很可能会让用户产生混淆。这就是拟物化仍然存在于数字界面中的原因，尽管如今UI按钮几乎完全扁平化。UI上的按钮仍然需要看起来像电视遥控器上的按钮。对于“有机形状”，点不能用作按钮。三角形和六边形也会让用户花更长的时间将它们识别为按钮，有些用户甚至可能永远不会发现界面的按钮。如果您不想将矩形或圆形作为主要按钮形状，则可以选择使用带下划线的文本链接。如果您不确定颜色，深蓝色通常是最佳选择。我们有条件地知道带下划线的文本是一个链接，Google搜索页面每天都在强化这种心理模型。2.尺寸在现实生活中，你有没有需要先找到一个引脚来确保按下超小型复位按钮来复位电子设备？这是为了一个目的而设计的，因为它可以防止无意中重置设备。但是如果界面中所有的按钮都这么小的话，使用起来会很吃力。按钮应该足够大以便用户可以舒适地使用它们，但是它们需要多大呢？在触摸屏时代，我们通常通过指尖相对于屏幕密度的大小来衡量。一个44-48像素的正方形按钮会让我们感觉很舒服。一些应用程序（如Tinder）尝试将其操作按钮增大50像素（高度），并取得了良好的效果。显然，按钮的尺寸不应超出此范围太多，但值得尝试50-60px范围内的东西。在PC端设计的时候，我们可以把按钮做小一点，因为鼠标光标更精准，但也不能太小。我们仍然需要确保用户可以轻松地将鼠标指向按钮，所以最小的按钮应该在32px左右。3.对齐就是一切！所有UI中最大的视觉问题是按钮标签文本未对齐。虽然大多数设计人员和开发人员设法将其水平居中，但很少有人将每个按钮垂直居中。大写标签显然更容易居中，但是当同时使用大写和小写字母时，最好坚持基线对齐（或者只与第一个大写字母对齐，忽略降序排列的y、j和g字母）。按钮大小和字体大小适合也很重要。如果你有一个32px的按钮和17px的文本，你不能将它们完美地放在中间，你需要调整其中一个以适应另一个。4.处理阴影阴影可以帮助一个对象在背景中脱颖而出，并帮助用户将其识别为可点击或可点击的对象。因为阴影使按钮看起来比背景更远，用户会自动理解按下它是可以的。为了使按钮看起来更友好，可以在阴影颜色中添加背景颜色。在上面的示例中，阴影是蓝色的混合。应该避免深色和对比鲜明的阴影，因为即使这样的阴影吸引了用户的注意力，它们也很容易因为看起来过于尖锐和令人不快而丢失。5.可读的标签文本按钮标签文本需要居中，但它们也需要足够的呼吸空间才能清晰可读。避免按钮周围的文字没有空格。规则是在标签上方和下方的标签字体中保留“大写W间距”。将“两个大写的Ws分开”放在两侧。当然，按钮可以比上面的间距更宽，因为那个标准只是使它成为看起来好看且清晰的最小尺寸。
