【进阶】一篇文章读懂UI按钮设计细节与规范
按钮是一种能够让用户产生对其描绘效果的交互式元素。咱们打个赌，假如一个按钮上显现“保存”，那么单击它很可能会“保存”某些内容。按钮也是任何数字产品中最重要的交互元素之一。
按钮也能够触发比如购买，下载，发送或许其它许多重要的操作。数字按钮是现实世界中按钮的下一代表现形式，比如电视遥控器，音乐播放机或许游戏控制器中的按钮。
你最应该知道的一件事
一个按钮应该看起来就像是“按钮”
规划按钮时最重要的原则是让其满足的杰出，不会与其它任何东西混淆在一起。
从左到右，将按钮中的元素逐渐删去，它的功能性开始消失，
以至于变成了装饰或许文字，失去了其可操作的特性。
熟悉的便是好的
咱们习惯了一般与动作相关的某些形状或许形式。按钮看起来越类似于与按钮相相关的按钮则越好。这便是为什么矩形（或许圆角矩形）始终是按钮最安全也最常见的挑选的原因。
看到这个咱们就会以为它是按钮
用户无法辨认其他形状的按钮，比如三角形，原型，或许不规矩形状。所以，在运用这些形状作为按钮的时分请必须小心，仅仅在产品整体风格需求时再去运用它们。
用户需求更多的学习才能够将上面的图形辨以为按钮
按钮元素详解
在规划按钮时，请记住按钮中的每一个规划关键，明智的挑选它们。以品牌手册为基准，考虑哪种按钮与品牌相匹配并能更好的适合于整个界面。
你应该运用设定好的网格基数来设置填充和安全外间隔。在上图的典范里边，左面内部间隔是笔直间隔的二倍，这是进步可读性的安全挑选。
间隔和对齐
按钮间隔不均匀是所有界面中最常见的问题之一。仔细查看按钮表情是否在水平缓笔直方向上居中。假如的确需求，能够在规划规范中设定此类的规矩。
除了用基于网格的办法外，咱们还能够运用大写字母W来挑选按钮安全间隔的办法。如下图，假如按钮的上下两侧能够放下一个W的话，在侧面，最适宜的情况是放下两个W，以此来进步可读性。
别的不要忘记保持按钮之间的安全空间。假如你有一组按钮，那么它们之间的安全空间如下图表明，必须不要堆叠。
适宜的按钮巨细
网页或许移动端规划中的按钮都应具有正确的最小尺度。假如你的按钮太小，用户会很难点击或许运用它们。这样的另一个后果便是，用户一怒之下卸载您的运用。所以最小的按钮尺度为44X44pt，请必须留意。
移动端按钮的尺度最好在50X50以上。在基于光标的设备中，32X32也应该能够用。但请记住，即使是在台式机上，按钮越大，用户运用起来就越简单。
按钮规划最佳实践
重要的按钮也能够与图标配合运用。如结账按钮能够通过购物篮或许购物车图标促运用户快速辨认，但条件依然是要将“结账”一词显现出来。
在按钮标签之后放置向右箭头，能够让按钮的导向性进一步加强。用户愈加火急的点击并持续操作。假如你想提升页面转化效果，能够考虑采取这种规划办法。
与平面化的按钮比较，带有暗影的按钮也能够让用户有更强的点击愿望，而且更快的留意到这个按钮。在按钮中增加一个奇妙的暗影，能够让它从布景中脱颖而出。关于按钮暗影的最佳实践将在本章稍后讨论。
圆角按钮
圆角按钮被以为比尖利边沿的按钮更为友爱和正面。可是，与此同时，这种做法使围绕它们的内容规划变得愈加困难。假如你在按钮上方保留了对齐文本，则圆角越圆，在该文本在视觉上将会越小。太会让你感觉左面距和上方文本不在同一个方位上（也便是说没有对齐）。
对齐图标
在按钮上进行良好的图标对齐是一件很困难的工作。在许多情况下，字体粗细，图标粗细之间的关系都会影响到对齐。可是，有一条简单而有用的规矩，在大多数情况下都适用。
依据按钮的圆角半径，咱们来创建一个圆或许正方形，其巨细等于按钮的高度。在这个图形中，咱们创建另一个形状来容纳图标。这个图形应该在一个视觉形状中有填充，以便与咱们的文本高度相同。然后，将图标放置在较小的形状中。
假如是人字形图标，那么最高使其与文本高度相同，而且您还能够依据字体的宽度查看线宽。匹配越紧密，最终成果越好。
边沿平衡
假如你运用的是圆角按钮，请记住将正确的圆角比率与屏幕上的其它元素对齐。在所有的情况下运用一种设置会形成视觉边沿的不平衡。
对角线间隔与左面和底部的对角线间隔相同。这样能够更好更快的处理外部边沿。
对角线间隔大于（左面）间隔，小于（右侧）间隔。这会使边沿杰出太多，使留意力从按钮本身上移开。如上图两种都是过错的例子。
最后的总结
当你开始规划主按钮，辅助按钮和三级按钮时，请记住每次都要针对上面这些因素进行查看。即使是很小的不一致或许对齐不良也会导致用户转化率下降。
请记住以下关键：
使你的按钮看起来像一个按钮
使标签笔直和水平居中
按钮内部有满足的空间（或填充）
假如你运用的是图标，请挑选正确的尺度和对齐办法
依据按钮的方位设置适宜的边框半径
查看该半径是否与你的其它屏幕元素匹配
确保有适宜的尺度。按钮越大越简单运用，包含台式电脑。
原文地址：uxdesign.cc/design-bett…
翻译：静电 / 作者：Michal Malewicz
////// END //////
本文内容为转载 仅供个人学习运用
