按钮不会设计？掌握这 5 个黄金轨则就够了

经由 “设计用户界面” 一章，我们全面理解了 UI 设计的所需的所有根本知识并启动了我们的 APP 项目，是时候深入磋商最主要之一却一贯被忽略的 UI 元素了。

之前，我已经在一些更详细的文章中先容了按钮，但是这次，我想重点先容快速、可操作的技巧，你可以立即利用它们来 提升项目的质量。

一、什么是按钮？

按钮是 一个具有明确指示动作的交互元件。
例如，如果按钮上显示 “立即支付”，则单击它可能会哀求你供应信用卡详细信息。

在 UI 设计中，按钮是必不可少的，由于大多数界面都须要我们采纳某种行为才能连续。
无论是保存，审核还是下载内容等操作，按钮无处不在。
利用按钮可以做更多的事情，接下来我将阐述五个大略的步骤更好地来设计按钮，要把稳，他们虽大略，但却非常主要。

按钮具有几个定义特色：

一个范例的按钮具有 添补，边框和 阴影 这几个属性。
对付间隔而言，它们有一个内边距和一个外边距，这是我们按钮的安全空间。

通过设置 圆角值，按钮的形状可以变成尖锐的或完备圆润的角。
按钮上的标签常日是 文本，有时可能会带有 图标。
向按钮添加一个向右的V形图标，将增加页面转换率（>）。
标签文本由字重，颜色和字体样式定义。

现在你已经理解了根本知识，接下来，我将提出改进按钮设计的 五个黄金法则：

二、五个黄金法则1. 按钮看起来必须像一个按钮

我们习气于现实天下中的按钮是矩形（有时是圆形）。
如果我们设计中的按钮形状既不是矩形也不是圆形（也不是圆形矩形），很可能让用户感到迷惑。

这便是为什么纵然现在的 UI 按钮险些完备扁平，但拟归天设计实际上仍旧存在于数字化界面中。
用户界面上的按钮仍旧须要看起来像电视遥控器上的按钮。

具有 “有机的形状”，圆点作为按钮将不起浸染。
三角形和六角形也将耗费用户更长的韶光来将它们认知为按钮，乃至有些用户可能永久不会创造界面的按钮。

如果你不想以矩形或圆形作为紧张按钮形状，则可以选择利用 带下划线的文本链接。
如果不愿定颜色，则深蓝色常日是最佳选项。

我们已经习气性认知，带下划线的笔墨是一个链接，Google搜索页每天都在加强我们的这齐心专生理模型。

2. 尺寸

在现实生活中，你是否曾经须要先找到一根针来确保按下超小型复位按钮来重置电子设备？这样的设计是有目的的，由于这样就可以避免在不把稳的情形下重置设备。

但是假设在界面中所有按钮都这么小，这将让它们难以利用。
按钮应足够大以便用户舒适地利用它们，但是须要有多大？

在触屏时期，我们常日通过相对付 屏幕密度的范例指尖尺寸来进行丈量。
按钮为 44-48px 尺寸的正方形会让我们感到舒适。
某些运用程序（例如 Tinder ）考试测验将其行动按钮放大 50px（高度），也取得了不错的效果。
显然，按钮的尺寸不能超出这个范围太多，但是在 50-60px 的范围内还是值得一试的。

在为 PC 端设计时，我们可以将按钮缩小一些，由于鼠标光标更精确，但一定不要太小。
我们仍 须要担保用户可以很随意马虎地将鼠标指向按钮，因此最小的按钮应设为 32px 旁边。

3. 对齐便是统统！

所有UI中最大的视觉问题是 按钮标签文本无法对齐。
虽然大多数设计职员和开拓职员设法将其水平居中，但很少 将每个按钮都能都垂直居中。

大写标签显然更随意马虎居中，但是在同时利用大小写字母时，最好坚持利用基线对齐（或仅将其与首个大写字母对齐，而忽略降序的 y，j 和 g 字母）。

按钮大小和字体大小适配性也很主要。
如果你有一个 32px 的按钮和 17px 的文本，则无法将其完美地放在中间，须要调度个中一个使之相互适应。

4. 在阴影高下功夫

阴影可以帮助一个工具在背景上突出显示出来，并帮助用户将其识别为 可单击或需点击的工具。
由于阴影会让按钮看起来比背景间隔远，用户自然就会明白，可以将其按下。

为了使按钮看起来更友好，可以在阴影颜色中添加背景色。
在上面的示例中，阴影是蓝色的一种混和色。
应 避免利用深色和比拟光鲜的阴影，由于即便这种阴影吸引到了用户的把稳力，但看起来过于尖锐令人烦懑，就很随意马虎丢 失落掉用户的把稳力。

5. 易读的标签笔墨

按钮标签笔墨须要居中，但它们还须要 足够的呼吸空间以使其易读。
避免按钮周围的笔墨没有空格。
规则是在标签上方和下方空出标具名体中的 “大写字母 W 的间距”。
侧面空出 “两个大写字母 W 的间隔”。

当然，按钮可以在上述间距的根本上更宽，由于那个标准只是让它是看起来既都雅又易读的最小尺寸。

本文翻译已得到作者的正式授权（授权截图如下）

作者：Michal Malewicz

原文：https://uxdesign.cc/5-tips-for-better-button-design-8d68f0418f0e

译者：刘昱茜；审核：吴鹏飞、张聿彤；编辑：孙淑雅

本文由@TCC翻译情报局 翻译发布于大家都是产品经理，未经容许，禁止转载。

题图来自 Unsplash，基于 CC0 协议