大家好，这里是 TCC 翻译情报局，我是李泽慧。按钮是 UI 规划中最重要但仍被疏忽的 UI 元素之一，了解按钮规划有十分必要的含义，本篇文章作者将按钮解剖并进行解析，经过快速并可操作性极高的五个黄金规律，重点介绍了提高按钮规划的技巧。让咱们一起来跟从作者进行学习，并将理论付诸于实践，阅读完后立马会让自己的按钮面目一新！
按钮不会规划？把握这 5 个黄金规律就够了～
按钮是一个具有清晰指示动作的交互元件 。例如，假如按钮上显现 “立即支付”，则单击它可能会要求你提供信用卡详细信息。
按钮不会规划？把握这 5 个黄金规律就够了～
在 UI 规划中，按钮是必不可少的，由于大多数界面都需求咱们采纳某种行为才干持续。无论是保存，审阅仍是下载内容等操作，按钮无处不在。运用按钮能够做更多的事情，接下来我将阐述五个简略的步骤更好地来规划按钮，要注意虽简略，但却非常重要。
按钮具有几个定义特征：
按钮不会规划？把握这 5 个黄金规律就够了～
一个典型的按钮具有填充，边框和暗影这几个特点。关于间隔而言，它们有一个内边距和一个外边距，这是咱们按钮的安全空间。经过设置圆角值 ，按钮的形状能够变成尖利的或彻底圆润的角。按钮上的标签一般是文本，有时可能会带有图标 。向按钮增加一个向右的 V 形图标，将增加页面转换率（>）。标签文本由字重，色彩和字体样式定义。
接下来，我将提出改进按钮规划的五个黄金规律：
1. 按钮看起来必须像一个按钮
咱们习惯于实际世界中的按钮是矩形（有时是圆形）。假如咱们规划中的按钮形状既不是矩形也不是圆形（也不是圆形矩形），很可能让用户感到迷惑。这便是为什么即便现在的 UI 按钮简直彻底扁平，但拟物化规划实际上依然存在于数字化界面中。用户界面上的按钮依然需求看起来像电视遥控器上的按钮 。
具有 “有机的形状”，圆点作为按钮将不起作用。三角形和六角形也将耗费用户更长的时刻来将它们认知为按钮，乃至有些用户可能永久不会发现界面的按钮。假如你不想以矩形或圆形作为主要按钮形状，则能够选择运用带下划线的文本链接 。假如不确定色彩，则深蓝色一般是最佳选项。
按钮不会规划？把握这 5 个黄金规律就够了～
咱们已经习惯性认知，带下划线的文字是一个链接，Google 查找页每天都在加强咱们的这一心思模型。
2. 尺度
在实际生活中，你是否从前需求先找到一根针来确保按下超小型复位按钮来重置电子设备？这样的规划是有目的的，由于这样就能够防止在不注意的情况下重置设备。可是假设在界面中所有按钮都这么小，这将让它们难以运用。按钮应足够大以便用户舒适地运用它们，可是需求有多大？
在触屏年代，咱们一般经过相关于屏幕密度的典型指尖尺度来进行丈量 。按钮为 44-48px 尺度的正方形会让咱们感到舒适。某些应用程序（例如 Tinder ）尝试将其举动按钮放大 50px（高度），也取得了不错的效果。明显，按钮的尺度不能超出这个规模太多，可是在 50-60px 的规模内仍是值得一试的。
在为 PC 端规划时，咱们能够将按钮缩小一些，由于鼠标光标更精确，但一定不要太小。咱们仍需求保证用户能够很容易地将鼠标指向按钮，因此最小的按钮应设为 32px 左右 。
按钮不会规划？把握这 5 个黄金规律就够了～
3. 对齐便是一切！
所有 UI 中最大的视觉问题是按钮标签文本无法对齐 。虽然大多数规划人员和开发人员设法将其水平居中，但很少将每个按钮都能垂直居中 。大写标签明显更容易居中，可是在同时运用大小写字母时，最好坚持运用基线对齐（或仅将其与首个大写字母对齐，而疏忽降序的 y，j 和 g 字母）。
按钮大小和字体大小适配性也很重要 。假如你有一个 32px 的按钮和 17px 的文本，则无法将其完美地放在中心，需求调整其间一个使之互相适应。
按钮不会规划？把握这 5 个黄金规律就够了～
4. 在暗影上下功夫
暗影能够协助一个对象在背景上突出显现出来 ，并协助用户将其识别为可单击或需点击的对象 。由于暗影会让按钮看起来比背景间隔远 ，用户天然就会明白，能够将其按下。
为了使按钮看起来更友爱，能够在暗影色彩中增加背景色。在上面的示例中，暗影是蓝色的一种混和色。应防止运用深色和比照明显的暗影 ，由于即便这种暗影招引到了用户的注意力，但看起来过于尖利令人不快，就很容易丢失掉用户的注意力 。
按钮不会规划？把握这 5 个黄金规律就够了～
5. 易读的标签文字
按钮标签文字需求居中，但它们还需求足够的呼吸空间以使其易读 。 防止按钮周围的文字没有空格。规则是在标签上方和下方空出标签字体中的 “大写字母 W 的距离”。旁边面空出 “两个大写字母 W 的间隔”。
当然，按钮能够在上述距离的基础上更宽，由于那个标准仅仅让它是看起来既美观又易读的最小尺度。
按钮不会规划？把握这 5 个黄金规律就够了～
欢迎关注作者微信大众号：「TCC翻译情报局」
按钮不会规划？把握这 5 个黄金规律就够了～
