设计语言-按钮02
这篇是上篇《设计语言—按钮01》的延续，内容完全不同。
讲的更细化，实操性更强。列举具体例子，让大家更清晰明白按钮设计规范：按钮的网格基数、宽高、字符、曲度、功能等。
目录
1.解构按钮
2.网格基数
3.按钮的宽高
4.按钮的曲率
5.按钮中添加字符
6.按钮中添加功能
1.解构按钮
首先得先解构一个按钮，把按钮中各个元素都提取出来。按钮的绘制过程：先设一个网格基数（一般为4px） – 绘制一个宽与高存在比例关系的矩形（固定宽度的情况下） – 添加字符（中英文） – 添加按钮（功能） – 调整距离（字符/按钮与矩形之间的距离） -完成。下图就是一个按钮的线稿与正常按钮的对比图。
2.网格基数
绘制一个按钮的第一步，就是设置网格基数。如果网格基数不设置4px而设置3px，那当我们画一个高度为45px的时间选择器时，得知右面“上”的图标高度就是45/2=22.5px，这里出了小数点，22.5px中包含7个网格位，并多出了1.5个px，即22.5-21（3×7网格位）=1.5px的空位，1.5px<3px。所以网格基数设置为3px它是不规范的。在下图中也做出了相应的解释。
我把图上按钮中为“上”的这个图标拆解出来，再来分析它。图标宽高为22.5px，多出了1.5px的。如果宽高为21px，就刚好是7个网格位。所以说把网格的基数设为3px，在绘制模块时会出现小数位，小数位不满一个网格位，则网格基数设为3px就是不规范的。
3.按钮的宽高
当我们绘制按钮并选择宽高时，要看它的字数是“固定的”还是“随之变化的”。字数固定指的是像“确认按钮”这样永远都只有两个字的情况。而随之变化指的是，按钮的宽度要随着字数的变化而变化。在字数固定的情况下，按钮的宽高可以采用倍数关系，即按钮“宽80px/高40px“的两倍。
但要注意的是，在按钮宽度随着字符数的变化而变化时，按照比例来绘制按钮的宽高，造成的视觉效果不理想，就可以不采用倍数关系，直接用网格基数来绘制按钮。例如：按钮“宽88px/高32px”。
4.按钮的曲率
按钮的曲率要针对不同的业务需求选用不同的数值。如果统一了按钮曲率，当对应很多高度与间距不同的产品时，会造成几个产品中按钮曲率不和谐的问题。间距和高度越大的产品，按钮的曲率就越接近直角矩形，差异性也越来越小。但在同一个产品时，曲率的变化幅度也不要太大，这样就会失去一致性。
这里拿上一章提到的4/6/8来举例吧（4/6/8数值递增为2像素），当按钮高度为32px时，可以采用4px的曲率，当按钮高度为40px时，采用6px的曲率，当按钮高度为48时，采用8px的曲率，以此类推。
那如果随着按钮的高度的增加，不做曲率的变化，按钮就会越来越接近直角矩形。按钮高度越高，这种感觉就越强烈。所以我个人建议，在不同的业务需求中，运用不同的曲率更合适一些。
5.按钮中添加字符
在按钮中添加字符，要注意的是字符与按钮边框之间要留多少距离就可以了，问题不大。但它们之间的距离不能过少，太少就会显得很挤，给人感觉很小气。也不能太大，太大给人感觉字符上下有种压迫感。距离还需要设计师自己根据自身审美去控制。
6.按钮中添加功能
在按钮中添加功能，这里的“功能”指的就是“图标”，加了图标的按钮就变成了“功能按钮”。绘制功能按钮跟添加字符类似，但绘制功能按钮会考虑视觉差与平衡性的问题，就稍微麻烦一些。
结语
好的作品（有规则有逻辑）与不好的作品（无规则无逻辑），他们从视觉的差异并不是很大。大家看问题不要看表象，形式主义缺乏内涵。当然从心理学角度讲人们很确实容易受“美好事物”的影响，但大家要理性看待问题，不能过于感性，寻找作品中的主观唯心主义，学习作品中好的一面，并运用到自己的设计思维当中。
好的作品经得住时间的考验，而那些形式主义只存于某时某刻，止步不前并永不前进。
站酷
作者：Lawrence_V