不会设想按钮？具有这 5 个黄金法例就够了

按钮是 UI 设想中最重要但仍被疏忽的 UI 元素之一，领会按钮设想有非常需要的意义，本篇文章将按钮剖解并停止剖析，经过快速并可操纵性极高的五个黄金法例，重点先容了提升按钮设想的技能。让我们一路来跟从作者停止进修，并将理论付诸于理论，阅读完后立马会让自己的按钮脸孔一新！

经过 “设想用户界面” 一章，我们周全领会了 UI 设想的所需的一切根本常识并启动了我们的 APP 项目，是时辰深入探讨最重要之一却一向被疏忽的 UI 元素了。

你好，按钮

Hello, button

之前，我已经在一些更具体的文章中先容了按钮，可是此次，我想重点先容快速、可操纵的技能，你可以立即利用它们来 提升项目标质量 。

什么是按钮？

What is a button?

按钮是 一个具有明白指示行动的交互元件 。例如，假如按钮上显现 “立即付出”，则单击它能够会要求你供给信誉卡具体信息。

在 UI 设想中，按钮是必不成少的，由于大大都界面都需要我们采纳某种行为才能继续。不管是保存，考核还是下载内容等操纵，按钮无处不在。

利用按钮可以做更多的工作，接下来我将论述五个简单的步调更好地来设想按钮，要留意，他们虽简单，但却很是重要。

让我们起头剖解按钮
 

按钮具有几个 界说特征

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

经过设备 圆角值 ，按钮的外形可以酿成尖锐的或完全圆润的角。

按钮上的标签凡是是 文本，偶然能够会带有 图标 。向按钮增加一个向右的V形图标，将增加页面转换率（>）。标签文本由字重，色彩和字体款式界说。   

现在你已经领会了根本常识

接下来，我将提出改良按钮设想的 五个黄金法例：

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

1. A button should look like a button

我们习惯于现实天下中的按钮是矩形（偶然是圆形）。假如我们设想中的按钮外形既不是矩形也不是圆形（也不是圆形矩形），极能够让用户感应迷惑。

这就是为什么即使现在的 UI 按钮几近完全扁平，但拟物化设想现实上仍然存在于数字化界面中。用户界面上的按钮仍然需要看起来像电视遥控器上的按钮 。

具有 “有机的外形”，圆点作为按钮将不起感化。三角形和六角形也将耗用度户更长的时候来将它们认知为按钮，甚至有些用户能够永久不会发现界面的按钮。

假如你不想以矩形或圆形作为首要按钮外形，则可以挑选利用 带下划线的文本链接 。假如不肯定色彩，则 深蓝色凡是是最好选项。

我们已经习惯性认知，带下划线的笔墨是一个链接，Google搜索页天天都在增强我们的这一心理模子。

2. 尺寸

2. Size

在现实生活中，你能否已经需要先找到一根针来确保按下超小型复位按钮来重置电子装备？这样的设想是有目标的，由于这样便可以避免在不留意的情况下重置装备。

可是假定在界面中一切按钮都这么小，这将让它们难以利用。

按钮应充足大以便用户舒适天时用它们，可是需要有多大？

在触屏时代，我们凡是经过相对于 屏幕密度的典型指尖尺寸来停止丈量 。按钮为 44-48px 尺寸的正方形会让我们感应舒适。某些利用法式（例如 Tinder ）尝试将其行动按钮放大 50px（高度），也获得了不错的结果。明显，按钮的尺寸不能超越这个范围太多，可是在 50-60px 的范围内还是值得一试的。

在为 PC 端设想时，我们可以将按钮缩小一些，由于鼠标光标更切确，但一定不要太小。我们仍 需要保证用户可以很轻易地将鼠标指向按钮，是以最小的按钮应设为 32px 左右 。

3. 对齐就是一切！

3. Alignment is everything！

一切UI中最大的视觉题目是 按钮标签文本没法对齐 。虽然大大都设想职员和开辟职员想法将其水平居中，但很少 将每个按钮都能都垂直居中 。

大写标签明显更轻易居中，可是在同时利用巨细写字母时，最好对峙利用基线对齐（或仅将其与首个大写字母对齐，而疏忽降序的 y，j 和 g 字母）。

按钮巨细和字体巨细适配性也很重要 。假如你有一个 32px 的按钮和 17px 的文本，则没法将其完善地放在中心，需要调剂其中一个使之相互顺应。

4. 在阴影高低功夫

4. Work on your shadows
 

阴影可以帮助一个工具在布景上突出显现出来 ，并帮助用户将其识别为 可单击或需点击的工具 。

由于 阴影会让按钮看起来比布景间隔远 ，用户自然就会大白，可以将其按下。

为了使按钮看起来更友爱，可以在阴影色彩中增加布风景。在上面的示例中，阴影是蓝色的一种混和色。应 避免利用深色和对照鲜明的阴影 ，由于即使这类阴影吸引到了用户的留意力，但看起来过于尖锐使人不快，就很轻易丢 失掉用户的留意力 。

5. 易读的标签笔墨 

5. Readable labels

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

固然，按钮可以在上述间距的根本上更宽，由于阿谁标准只是让它是看起来既美妙又易读的最小尺寸。