资料来源：车站酷
作者： Lawrence_V
个人主页： https://www.zcool.com.cn/u/14425487 /
要整合到设计语言中，需要反复推敲简单的按钮。 今天将发表设计语言的基础部分、组件部分的一部分-按钮。 设计语言在结构上分为基础部分、规则规范部分和业务部分，以后再补充其他部分。
基础部分的画布大小为25000056000，共计47个组成部分； 规格部分庞大(工业设计、交互设计、平面设计、设计心理学等)； 业务部分按系列划分，有主要的和主要的，现在只分为两个系列(n和s )，n系列对应基础组块，s系列对应嵌套定制组块。 我把某个系列的主系列叫做大师，子系列叫做子版。 n系列的子版本约有50页，每页还包含三种样式，每个系列约有20个子系列。 由于工程量大，粗略计算一下，要完成两个大系列(n和s )，需要50 (页) x3 )风格) x20 )系列数) x2 )大系列类别)=6000 )页)
以上简单说明的这些工作，现在是我一个人做，但从这个成型到网站(从前期到上线)，最快只需要15分钟。 其目的也很简单，我希望企业树立品牌形象，用专业知识解决他们面临的问题，质量高价格低。 我的信仰是帮助企业和个人实现社会价值，赋予企业和个人一定的能力，使他们对这个社会做出一定的贡献，履行一定的社会责任。 利他之后变得自私，集体利益和集体主义优先。 从成本评估到定价，我不赚钱，但只要我活着，我一定会履行我的社会责任。
虽然说多了一点，但是收回话来，这篇文章其实并不难。 但是，有需要仔细说明基础知识的，也有对设计师来说废话很多的，但对初学者来说有值得学习的地方，所以请多了解。
目录
1 .网格基数的设定
2 .按钮的基本规格
3 .按钮的文字限制
4 .按钮的相互作用状态
1 .网格基数的设定
此网格不是图形设计的网格系统，而是绘图工具中包含的网格功能。 两个人本质上是一样的，但现在不要太区别了。 使用绘图工具绘制网格可以约束模块，使模块的比率具有一定的关系。 例如，以尺寸为13731的按钮a和尺寸为12832的按钮b为例进行说明。 尺寸为13731的按钮a不符合规格，宽137和高31没有比例关系。 尺寸为12832的按钮b很规范，宽128和高32不仅是倍数关系(128/32=4倍)，两个数都是全局设置的基数4 ) 32/4=8，128/4=32，这里的4可以被基数整除。
了解按钮的比例关系后，利用绘图工具(AI、Ps、Sketch、Affinity Designer )找到网格功能，以数量为基准决定基数，按照该基数进行按钮的绘制。 按钮相对规范。 因为设定基数后，只要在网格上画按钮，就有一定的比例关系。 那么，如何用绘图工具设置网格基数呢？ 用Ps绘图工具发现的。 【编辑】-【环境设定】-【导轨、网格、切片】-显示环境设定对话框-【网格-网格线间隔/子网格】-将网格线间隔设为【4】-将子网格设为【1】
在Affinity Designer向量工具中，将【视图】-【网格和轴管理器】-显示网格和吸附轴的对话框-【基本】-螺距设定为【4】-分割为【1】。 这里为什么要把网格基数设定为【4】？ 这是Googlematerialdesign绘制小部件的规格，但在模块之间定义的基数为【8】。 这里的测量单位为DP，平时绘制网页时，单位可以是px像素。
2 .按钮的基本规格
使用绘图工具的网格功能，设定基数绘制按钮时，如果熟练的话，应该会相当讲究，每个细小的间隔都符合倍数关系，不仅物理位置统一，在视觉上也能满足一定的美感。 例如下图所示。
时光流逝
我们理解了如何用网格功能绘制一个按钮后，接下来就可以理解按钮的边角的曲率设置了。那我把按钮的边角分为三种样式：直角、曲率圆角和圆角。直角就是边角呈90度的角，曲率圆角和圆角的差别在于，曲率圆角的角弧度没有那么大，而圆角的角弧度就是一半个圆。我将按钮的曲率按照不同的样式分布展示了出来，如下图所示。理解了按钮边角的三种样式，要怎么设置他们呢。直角设置无曲率/90度直角。圆角就设置为50%的曲率，刚好就是半个圆。而曲率圆角就稍微有点麻烦，因为曲率圆角是要根据按钮的大小做相对的变化的。按钮的尺寸变大曲率就应该也随之变大，按钮尺寸越大差异越明显。另外曲率弧度的值也应该有一定的倍数关系或基数关系，例如：4/8/16, 4/6/8，4/8/12，都是可取的。
理解了如何设置网格基数，如何设置圆角的曲率，就要讲到按钮的常用尺寸了，要注意的是这个常用尺寸是基于Web端的，道理是相同的，就看设计师如何在移动端上进行设置了。常用的按钮尺寸有：24px、32px、40px、48px，超出48px的按钮都属于特殊按钮，需要进行单独设置的。
这里的尺寸不是死的，设计师可以根据自己的理解进行尺寸的设置。而采用这几个尺寸（24px、32px、40px、48px）的目的是更好的统一并规范按钮，因为24px、32px、40px、48px都是4的倍数，数与数之间也都是±8的关系，另外在绘制按钮时尺寸也可以平分，留出按钮上下均等的距离，另外这几个数值从Web端的体验上来看，比例也是相对更合适的，所以采用这几个数较为规范一些。
3.按钮的字符限制
一个按钮包含和“无图标”和“有图标”两种形式，无图标比较好处理，直接把相应文本放在按钮中水平、垂直居中就可以了，然后再算清文本与边框之间的距离就可以了。
那设计有图标的按钮时，就要考虑把图标的内边距算出来，并与图标到按钮外边距的距离算出来。
当我们掌握的以上几种绘制按钮的方法，就可以绘制出一整套符合规范的按钮组件。
英文也一样，英文与中文的差别在于细微的尺寸差异。英文字体结构要比中文字体结构看上去更小一些，英文的字符长度也要比中文长很多。但问题不大，只要把控好文本/图标和按钮边角的距离，按照基数递增，就不会有什么问题。
4.按钮的交互状态
一个按钮的交互状态有四种，分布是：无状态、hover（触碰）、点击后、禁止。采用的配色可以递增（由浅到深），也可以递减（由深到浅）。按钮交互状态的配色深浅也是根据整体页面有关的。如果整体的调性偏深，配色可以递减（由深到浅），如果整体的调性偏浅，配色可以递增（由浅到深）。
而颜色按钮的交互状态是根据配色的色阶决定的，同理配色递增（由浅到深），配色递减（由深到浅）。
另外附上一张彩色按钮状态效果图，配色为明亮柔和。
这些按钮的绘制看似简单的不得了，其实都是些高精度的工作，差一个像素点都不可以，当然更需要具备一定的毅力与耐心。我觉得做设计应该追求极致，重视体验和功能，让形式追随内容，而不是内容追随形式，就这样吧。