1 按钮的交互状态
1.1 Normal 正常状态
1.2 Hover 悬浮状态
当鼠标滑过时候的状态会给用户一个交互反馈,因为它只是一个视觉上的反馈并无实际作用,所以在移动端就把此状态去掉了。
1.3 Click 点击状态
为按钮的鼠标 / 手指按钮状态,操作完此状态后,就会引发此按钮的真实作用。
1.4 Disable 禁用状态
一般方案有两种:
无论按钮本身颜色是什么,它的背景色均为纯灰色,常用的色值有:#CCC、#999等,此种方案为常用方案;
Disable 状态为 Normal 状态的 30% 透明度,如果你想让按钮都有颜色倾向的话,可以用这种方案。
2 圆角值
2.1 圆角值为 0
这种适合用在比较严谨 / 企业级产品中,比如:阿里云;
2.2 小圆角值
这种是最常用的形式,在不失严谨的同时还有一些细节,如果可以的话,尽量选这种的;
2.3 超大圆角值
这种一般需要有独特的产品风格才可使用。样式不好把控全局效果,所以使用频率较低,慎重使用。
3 按钮尺寸
按钮尺寸具体用多大的,这里我总结了一个规范(仅代表个人意见)。
高 = 文字行高 + Xn,X=自然数,n=4
宽 = 文字宽度 + Xn,X=自然数,n=4
网友评论