按钮

概述

按钮用于开始一个即时操作。标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

尺寸

按钮大小分为三种类型：小号按钮（S）、中号按钮（M-默认）、大号按钮（L）；

按钮尺寸需遵循以下原则：

1）最小尺寸固定：小、中、大按钮的最小宽度分别为：48px、72px、96px，高度分别为：24px、32px、40px

2）根据文字内容，按钮宽度自适应：小按钮固定间距为8px；中按钮为16px；大按钮为24px

类型

常用的按钮类型可以分为以下几种：主按钮、次按钮、文字按钮、图标按钮、图标+文字按钮、虚线按钮、幽灵按钮、警示按钮

● 主按钮：突出「确定」、「提交」、「新建」类操作，一个按钮区最多使用一个主按钮

● 次按钮：常规按钮，用于非主要动作。如果不确定选择哪种按钮，次按钮永远是最安全的选择

● 文字按钮：弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景，例如表格组件中的操作列

● 图标按钮：图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面

    ○ 需要在较小的空间内展示尽量多的按钮

    ○ 使用纯图标按钮必须有 Tooltip 提示按钮含义

● 图标+文字按钮：用于对按钮含义补充解释，提高按钮识别效率

● 虚线按钮：用于引导用户在一个区域中添加内容，如「逐条添加」

● 幽灵按钮：置于复杂或较深的背景中，避免按钮突兀地破坏背景的整体性。该场景下可灵活定制样式

● 警示按钮：警示用户该操作存在风险

状态

按钮的各个状态：普通、悬停、按下、失效、加载中

强调等级

常规按钮类型呈现出不同的强调程度，使用者可以据此变化出合适的按钮类型

组合

● 数量：多个按钮成组时必须有且仅有一个主命令按钮，次命令按钮不建议超过3个

● 间距：按钮间距为8px

● 顺序：按钮位于右侧时主命令按钮最右，按钮位于左侧时主命令按钮居左

位置

应将按钮置于用户浏览路径中，便于用户发现，且尽量靠近最用对象，帮助用户快速找到需要操作的按钮。