作者：rydzfj_UI

一个简单的按钮需要经过无数次的审查，然后才能集成到设计语言中。

今天，我将谈谈设计语言的基本部分，其中一个组成部分——按钮。在结构上，语言分为：基础部分、规章制度部分和业务部分，其他部分我后面会完成。

基础部分的画布大小为250000x56000，由47个组成部分组成。规范部分庞大(工业设计、交互设计、平面设计、设计心理学等。);业务部分分为一级系列和二级系列。目前只有两个系列(N和S)，N系列对应基本块，S系列对应嵌套自定义块。我把一个系列的主系列称为主版本，子系列称为子版本。N系列的一个子版本大约有50页，每页包含三种样式，每个系列大约有20个子系列。工作量很大，粗略计算，需要做两个大系列(N和S):50(页)x3(样式)x20(系列号)x2(大系列类别)=6000(页)。

目前，我正在独自完成上述所有工作。这个东西形成后，建站只需要15分钟(从前期到上线阶段)。这样做的目的也很简单，就是希望帮助企业树立品牌形象，用专业知识解决他们面临的问题，质优价廉。我的信念是帮助企业或个人实现社会价值，赋予企业或个人一定的能力，让他们为这个社会做出一定的贡献，履行一定的社会责任。利己之前的利他，集体利益和集体主义优先。从成本评估到定价，我不赚钱，但只要我活着，我就会履行我的社会责任。

我说得有点太多了。反正这一章其实并不难，只是一些基础知识需要仔细讲解。对于一些设计师来说，废话很多，但是对于初学者来说，还是有值得学习的地方。请体谅。

1.网格基数的设置

这里的网格不是平面设计中的网格系统，而是绘图工具中包含的网格功能。虽然它们本质上是一样的，但是现在不要对它们做太多的区分。用绘图工具绘制网格可以帮助我们对模块进行约束，使模块的比例有一定的关系。比如我以137x31大小的按钮A和128x32大小的按钮B为例。尺寸为137x31的按钮A是非标的，宽度137和高度31没有比例关系。尺寸为128x32的按钮B是标配。128的宽度和32的高度不仅是倍数(128/32=4倍)，而且这两个数字都可以精确地除以我们在整个世界上设置的基数4(32/4=8，128/4=32，其中4是基数)。

当我们理解按钮的比例关系时，我们要在绘图工具(AI、Ps、Sketch、Affinity Designer)中找到我们的网格函数，设置一个数字作为基准，将其设置为基数，然后根据这个基数绘制按钮，按钮就相对标准化了。因为设置一个基数后，只要在网格上画按钮，就有一定的比例关系。如何用绘图工具设置网格基数可以在Ps绘图工具中找到：编辑-首选项-参考线、网格和切片-弹出首选项对话框-网格-网格线间距/子网格间距设置为[4]-子网格设置为[1]；

在亲和设计器矢量工具中找到：[视图]-[网格和轴管理器]-弹出网格和吸附轴对话框-[基本]-间距设置为[4]-分割设置为[1]。为什么我们要在这里将网格基数设置为[4]？这是谷歌材料设计。

gn绘制小组件的规范，而模块之间定义的基数则为【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端的体验上来看，比例也是相对更合适的，所以采用这几个数较为规范一些。