网页和APP设计都适用的按钮设计细节

按钮在UI设计中无处不在，它的功能又很普通但又重要，比如上期我们分享的《提高转化率的界面，终极触发设计指南》就提及了按钮对触发用户购买的重要性，所以今天继续分享8个按钮设计细节，特别适用于网页和APP设计上使用，如果是新手设计师更需要阅读本文，来一起学习。

最重要的要知道，

一个按钮应该看起来“像按钮一样”

设计按钮时最重要的规则是使其足够明显突出，因此不会与其他任何东西混淆。

我们通常习惯了某种样式的按钮，他们一般涉及到一些操作。这些按钮与类似的按钮看起来越像越好。这就是为什么对于按钮来说，矩形（或圆角矩形）始终是最适合的选择。

其他的样式(比如三角形、圆形、无规则图形)对用户来说是无法识别的，所以要小心使用。只有当你的产品的一般风格需要偏离规范时才使用它们。

设计按钮时，请记住每一个元素，并合理地选择它们。以品牌手册为基准，考虑哪种按钮将与品牌相匹配并很好地适应界面。

应该使用网格基数来设置填充和安全边距。在上面的示例中，横向间距是纵向间距的两倍，这是提高可读性的安全选择。

按钮间距不均匀是所有界面中最常见的问题之一。仔细检查按钮标签是否在水平和垂直方向上居中。如果需要确定的话可以创建一个新的规范。

除了基于网格的方法外，还可以使用大写W来选择合适的按钮间距。如果按钮标签的每一侧至少适合1W，那么就是合适的。文字到按钮边框的间距最好使用2W来提高可读性。

不要忘记按钮的安全空间。这两个按钮之间要有一定的空隙，否则会导致点击错误。

网页和移动按钮都应具有正确的最小尺寸。如果按钮太小的话，将很难点击或单击它们。用户会沮丧，并可能导致用户卸载您的应用程序。最好的方法是从移动设备上的所有交互式元素的44 x 44点(需要查询）开始。

最好的地方是 50左右 用于移动按钮。在基于光标的设备中，32 x 32也应该起作用。请记住，即使在网页上，也遵循“按钮越大，使用起来就越容易”的原则。

重要按钮其实也可以与图标配合去使用。比如说在显示“结帐”一词的前提下，可以加入的购物车图标更快速地让用户进行识别。

在按钮标签之后放置向右箭头或>形符号，可以更清晰的去引导用户。用户如果“继续”操作的话，可增加一个CTA的按钮，方便用户点击。

与平面按钮相比，带有阴影的按钮也会更增加用户的点击欲望，并且能更快地引起用户的注意。在按钮中添加一个弥散式投影，让它在背景中清晰地展示出来。关于按钮阴影的实际操作将在文章后面阐述。

圆形按钮被认为比锋利的边缘更具有亲和力。但是，与此同时，这使得它们的内容设计变得更加复杂。如果你在按钮上方保留了对齐的文本，则圆角越圆，则该文本在视觉上将越小。它会让你感觉好像左边距同时在两个位置中。

在按钮上进行良好的图标对齐是最困难的事情。在多数情况下，字体粗细和图标粗细之间的关系和对齐图标直接相关且有特定的联系。但是，有一条简单而有用的规则在大多数情况下都适用。

根据我们的圆角半径，我们创建了一个圆或正方形，其大小等于按钮的高度。在它里面我们创建另外一个形状来放置图标。它应该有一个填充在这个较大的形状里。与我们的文字高度相同，然后我们将图标放在较小的形状里。如果是向右箭头“>”，最好使箭头高度与文本高度相同，并且你还可以根据字体宽度去衡量图标的线性宽度。两者的统一性越紧密，最终展示出来的效果会越好。

如果你使用的是圆角按钮，请记住将正确的圆角比率与屏幕上的其他元素对齐平衡。对所有事物使用相同的圆角数值会在边际上造成不平衡。

对角线间距与左侧和底部的对角线间距相同。这样可以更好，更快地处理外部边缘。

对角线间距大于（左侧）间距，小于（右侧）间距。这会使边缘突出太多，使注意力从按钮本身上移开。

总结

当你开始构建主按钮，辅助按钮和三级按钮时，请记住每次都要针对几个因素进行检查。即使是很小的不一致或对齐不统一也会导致转换率降低。有了转换按钮和点击按钮在这里就显得极其重要。

最后这个定律也是设计师应该了解的，推荐阅读《一文读懂交互设计7大定律》，扎实设计理论知识，今天就分享到这里，希望对你有所帮助~

作者：灿灿&阿Ben（id:Aa设计专题）