没想到一个小按钮，隐藏这么多细节！

关注 功夫体验设计 与十万读者见证成长的力量

这是功夫体验设计公众号第 243 期分享

作者 | 刘涛

一个小小的按钮，也隐藏很多设计哲学。虽然看起来不太起眼，然而使用频率几乎挺高的。作为体验设计师，更要把一个与用户常打交道的按钮设计美观易用。

在工作中，设计按钮组件时，大部分设计师有以下情况：

1、按钮容器内文字两边间距不是做大了就是做小了；

2、主要按钮、次要按钮、幽灵按钮傻傻分不清；

3、加了很多效果的按钮，实现难度加大；

4、按钮内文字上下高度不知道如何确定，全凭感觉；

以上几种情况，我早期刚入门的时候也是会经常遇到，但其实我发现工作多年的设计师也会犯错，到底如何做？

下面开始今天的分享。

文字的左右间距

一个按钮的组成里面除了容器本身色彩、质感、圆角等等，那么按钮内部有文字、图标等元素。

一个完美的按钮，通常情况下，左右边距的大小是文字大小的2倍。

来看个例子，当文字大小是40px时候，那么文字距离按钮两侧边距就是80px，如下图所示。

如上图，当文字大小一致时候，右侧的按钮是最完美的状态。

文字的上下间距

一个按钮的组成里面除了容器本身色彩、质感、圆角等等，那么按钮内部有文字、图标等元素。

完美按钮组件文字上下间距计算公式,当文字行高等于文字本身大小时：文字大小的一半+8px。

比如文字大小40px，它的一半就是20px，最终结果20px+8px=28px按钮上下高度。

上图中，当一个按钮内文字40px时候的上下间距示例。

下面再来看2个案例。

当文字大小变化时，这个公式同样的适用。

分清按钮主次

一个完整的设计体系中，按钮一定分多种类型，比如主要按钮，二级按钮，幽灵按钮，文字按钮等，以满足不同功能使用场景。

如上图，左侧按钮一级和二级按钮颜色都很重，分不清楚主次，右侧的主要按钮和二级按钮视觉重量不同，主次分明。

来看个案例。

上图，主要按钮和次要按钮区分较为明显。

最后再补充一下，按钮定义方法很多，没有绝对的，每一个方法出来后，都值得验证和尝试，值得被挑战，没有完美的方法，只有合适的方法策略。

挑战日更100天，目前已完成1篇