一个小小的按钮，也隐藏很多设计哲学。虽然看起来不太起眼，然而使用频率几乎挺高的。作为体验设计师，更要把一个与用户常打交道的按钮设计美观易用。
在工作中，设计按钮组件时，大部分设计师有以下情况：
1、按钮容器内文字两边间距不是做大了就是做小了；
2、主要按钮、次要按钮、幽灵按钮傻傻分不清；
3、加了很多效果的按钮，实现难度加大；
4、按钮内文字上下高度不知道如何确定，全凭感觉；
以上几种情况，我早期刚入门的时候也是会经常遇到，但其实我发现工作多年的设计师也会犯错，到底如何做？
下面开始今天的分享。
01
文字的左右间距
一个按钮的组成里面除了容器本身色彩、质感、圆角等等，那么按钮内部有文字、图标等元素。
一个完美的按钮，通常情况下，左右边距的大小是文字大小的2倍。
来看个例子，当文字大小是40px时候，那么文字距离按钮两侧边距就是80px，如下图所示。
如上图，当文字大小一致时候，右侧的按钮是最完美的状态。
02
文字的上下间距
一个按钮的组成里面除了容器本身色彩、质感、圆角等等，那么按钮内部有文字、图标等元素。
完美按钮组件文字上下间距计算公式,**当文字行高等于文字本身大小时：文字大小的一半+8px。
比如文字大小40px，它的一半就是20px，最终结果20px+8px=28px按钮上下高度。
上图中，当一个按钮内文字40px时候的上下间距示例。
下面再来看2个案例。
当文字大小变化时，这个公式同样的适用。
03
分清按钮主次
一个完整的设计体系中，按钮一定分多种类型，比如主要按钮，二级按钮，幽灵按钮，文字按钮等，以满足不同功能使用场景。
如上图，左侧按钮一级和二级按钮颜色都很重，分不清楚主次，右侧的主要按钮和二级按钮视觉重量不同，主次分明。
来看个案例。
上图，主要按钮和次要按钮区分较为明显。
最后再补充一下，按钮定义方法很多，没有绝对的，每一个方法出来后，都值得验证和尝试，值得被挑战，没有完美的方法，只有合适的方法策略。
内容转载自“功夫体验设计”
精选文章：
非特殊说明，本文版权归原作者所有，转载请注明出处:大作网