语言在结构上分为基础部分、规章制度部分和业务部分，其他部分我稍后再完成。
基础部分的画布尺寸为250000×56000，共有47个组成部分；规范部分庞大(工业设计、交互设计、平面设计、设计心理学等。);部分业务按系列划分，可分为主次。目前只有两个系列(N和S)，N系列对应基本块，S系列对应嵌套定制块。我把一个系列的主系列称为主版本，子系列称为子版本。N系列的子版本大约有50页，每页包含三种样式，每个系列大约有20个子系列。工作量很大，粗略算了一下。要完成两个大系列(N和S)，需要做到：50(页)x3(样式)x20(系列数)x2(大系列的类别)=6000(页)。
目前，我正在做上面简要描述的所有工作。这个东西成型后，搭建一套网站(从前期到上线阶段)只需要15分钟。而我做这件事的目的很简单，就是希望用专业知识帮助企业竖立品牌形象，解决面临的问题，质优价廉。我的信念是帮助企业或个人实现他们的社会价值，赋予他们一定的能力，让他们为这个社会做出一定的贡献，履行一定的社会责任。利他优先于利己，集体利益优先于集体主义。从成本评估到定价，我不赚钱，但只要我能活下去，我就履行我的社会责任。
那有点太多了。让我们言归正传。这一章其实不难，但是有些基础知识需要仔细讲解。对于一些设计师来说，废话很多，但是对于新手来说，还是有东西可以学的。请体谅。
目录
1.网格基础的设置
2.按钮的基本规格
3.按钮的字符限制
4.按钮的交互状态
1.网格基础的设置
这里的网格不是平面设计中的网格系统，而是绘图工具中包含的网格功能。虽然本质上是一样的，但是现在不要对它们做太多的区分。用画图工具画网格可以帮助我们约束模块，让模块的比例有一定的关系。比如我就拿尺寸为137×31的按钮A和尺寸为128×32的按钮B为例。137×31大小的按钮A不规范，137的宽度和31的高度没有正比关系。而128×32尺寸的按键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]？这是Google Material Design绘制widgets的规范，模块之间定义的基底是[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.按钮的交互状态
一个按钮有四种交互状态，分布为：无状态、悬停、点击后、禁止。采用的配色方案可以增加(由浅入深)或减少(由深入浅)。按钮交互状态的配色深度也与页面整体有关。如果整体色调太深，可以减少配色(由深到浅)，如果整体色调太浅，可以增加配色(由浅到深)。
颜色按钮的交互状态是由配色的色标决定的。同样，颜色匹配增加(由浅入深)和减少(由深入浅)。
附加另一个颜色按钮状态渲染用明亮柔和的颜色。
感谢您的阅读。
谢谢你的支持
从车站酷
