UI按钮

1.网格基数的设置

绘图工具中的网格功能帮助我们约束模块，使模块的比例存在一定的关系。

例如尺寸大小为137x31的按钮A，和尺寸大小为128x32的按钮B举例，尺寸大小为137x31的按钮A是不规范的，宽137和高31是不存在比例关系的。而尺寸大小为128x32的按钮B就是规范的，宽128和高32不仅是倍数关系（128/32=4倍），而且两个数都可以整除我们在全局中设的基数4（32/4=8，128/4=32，这里的4为基数）。

2.按钮的基础规范

按钮从物理位置显示左面少一些，右面多一些，但在视觉角度上看则左右是平衡的。

按钮边角的曲率越大，给人的感觉越柔和。

按钮的曲率会随着尺寸的变化而变化。

常用尺寸是基于Web端的，常用的按钮尺寸有：24px、32px、40px、48px，超出48px的按钮都属于特殊按钮，需要进行单独设置的。绘制按钮时尺寸也可以平分，留出按钮上下均等的距离。

3.按钮的字符限制

无图标的按钮时，直接把相应文本放在按钮中水平、垂直居中就可以了，然后再算清文本与边框之间的距离就可以了。

有图标的按钮时，就要考虑把图标的内边距算出来，并与图标到按钮外边距的距离算出来。

按钮的尺寸、字号、曲率都应该是存在比例关系并递增的。

英文字体结构要比中文字体结构看上去更小一些，英文的字符长度也要比中文长很多。

4.按钮的交互状态

无状态、hover（触碰）、点击后、禁止。

采用的配色可以递增（由浅到深），也可以递减（由深到浅）。

按钮交互状态的配色深浅也是根据整体页面有关的。如果整体的调性偏深，配色可以递减（由深到浅），如果整体的调性偏浅，配色可以递增（由浅到深）。