按钮

作者: 丁颖 | 来源:发表于2021-09-01 22:17 被阅读0次

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

相关文章

  • 2019-04-12 按钮组(3)

    基本按钮组 按钮 1 按钮 2 按钮 3 按钮工具栏 按钮 1 按钮 2 按钮 3 按钮 4 ...

  • macOS人机界面准则四—控件和拓展功能

    * 按钮 复选框、折叠控件、渐变按钮、帮助按钮、图像按钮、弹出按钮、下拉按钮、操作按钮、单选按钮、范围按钮、切换按...

  • 按钮,按钮

    他不知道自己是如何变成这样的。 或者说意识到。 用他自己的话来说,就是没有人性——尽管与他接触的任何人都绝不可能接...

  • JQuery mobile

    JQuery mobile 编写页面的参数: 所有的按钮 普通按钮 行内按钮 组合按钮: 后退按钮 更多用于按钮的...

  • 平面设计课堂:按钮如何设计更能吸引人

    按钮的不同分类如下: * 动作按钮 * 常用按钮样式 * 按钮的颜色和形状 * 按钮状态和反馈 * 标签按钮 * ...

  • 自定义Vue2.0组件

    Button 按钮 常用的操作按钮。 基础用法 基础的按钮用法。 禁用状态 按钮禁用状态 带图标的按钮 让按钮不仅...

  • B端设计组件:按钮

    一、按钮类型 依据按钮呈现的视觉重量差异,我们可以通过改变样式将按钮分为主按钮、次按钮、虚线按钮、文字按钮、图标按...

  • 第四天

    1、Form:包裹标签,action:# Input:文本框,单选按钮,多选按钮。提交的按钮,按钮,重置的按钮。 ...

  • 2019-04-24 vue css实现按钮淡入淡出效果

    具体场景:点击添加显示删除按钮,此时删除按钮淡入;点击删除按钮,删除按钮淡出 注意:在点击添加按钮,删除按钮淡入时...

  • jquery事件的常用方法

    单击按钮 ,按钮消失 双击按钮,按钮消失 鼠标放上去,按钮消失 鼠标离开,按钮消失 2.绑定事件和解除绑定事 3....

网友评论

      本文标题:按钮

      本文链接:https://www.haomeiwen.com/subject/ylvfwltx.html