中台设计组件-按钮

如何判断在组件使用时是否符合规范，可使用网格规范就可看到细致的差别，我们使用按钮举例，分别设置按钮大为96*32、102*34，如下图对比可以看出96*32大小能够正好卡住网格基准线，而102*34大小出现卡住半个网格的情况，如下图：

5.1.2 按钮的宽度规范

在实际的页面中，经过调研商业化各个中台的按钮使用情况，达到80%按钮中的文本一般为4个字以内，比如一个弹窗内容可能会出现两个按钮，比如取消和下一步按钮一般会同时出现，在我们的规范里为了保证大部分按钮的使用场景，需要给其给一个固定容器大小，超过容器的padding值以后，按钮随字数的增多而变宽，如下图显示：

原因：固定文字内容区容器大小，并设置好Paading值，超过文字内容区按钮随内容区的变而变宽，如果文字未超过文字内容区按钮宽度不变。

原因：不固定文字内容区容器大小，设置好Paading值，按钮随文字增多而变宽。

举例：在时间业务场景效果，左边按钮使用符合规范，右边按钮使用不符合规范，如下图：

5.1.3 按钮的大小设置

通过网格以4px为基数的规律下，通过size为extra large、large、middle、small、extra small分别把按钮尺寸设置为超大、大、中、小、超小，在常规使用时则尺寸为中。

5.2 颜色

5.2.1 品牌色

品牌色代表品牌对外形象及VI识别，在VI系统中品牌色数量可以是一个也可以是多个，但是VI系统中品牌色运用在组件库中需取一个品牌色作为主题色运用。如：运用在Botton、Icon、Slider、选中态等一般出现频率高、关键行动点，操作状态、重要信息高亮，图形化等场景，突出品牌特征的地方在业务中经常使用的颜色。

品牌色定义了从浅到深10个层级的色阶，并进行编号。每个颜色对应一个代号+数字横向展开，并取从中取一个基准色用作默认值，如：品牌色为Primary4和Primary3分别为正常模式下的基准色和暗色模式下的基准色，如正常模式下按钮的默认态为Primary4，那么Hover为Primary5。在暗色模式下按钮的默认态为Primary3，那么Hover为Primary4，使用其它色阶时同理。

- 正常模式

正常模式下，主要按钮在容器、文本和图标（可选择）三个元素上容器可自定义颜色，默认容器颜色为#2F88FF。