按钮类型

通过大小、填充、描边、色相、饱和度等的不同来对按钮进行强弱差异,不同强弱的差异表现出按钮的等级类型:行动触发、主要、次要、辅助、禁用等
image.png

状态

正常状态、鼠标悬浮状态、点击状态、点击后状态、加载中状态、禁用状态

属性

常规按钮、危险按钮、幽灵按钮、悬浮按钮、加载按钮

使用方法

一个操作区有且只有一个主按钮,主次分明

圆角值

  • 圆角值为 0:适合用在比较严谨/企业级产品中
  • 小圆角值:最常用的形式,在不失严谨的同时还有一些细节,如果可以的话,尽量选这种的
  • 超大圆角值:需要有独特的产品风格才可使用,样式不好把控全局效果,所以使用频率较低,慎重使用

    精简按钮文案,文案需要包含具体动作的动词,且避免歧义难懂

    按钮里面的文案一定是精简的,不要展示过多文字,更不要换行

    文字与按钮比例要适中

    投影颜色设置基于按钮本身色相,但勿过度使用按钮投影

    主次操作按钮样式统一

    按钮样式与其他组件要有区别

    不同场景灵活适配

    注意按钮尺寸和按钮热区,要便于点击

    主次按钮的位置顺序