作用
按钮用于开启一个即时操作
分类
| 名称 | 描述&使用场景 | 样式举例 |
|---|---|---|
| 默认按钮 | 通常使用默认按钮 | |
| 主按钮 | 突出操作，一个操作区域只能有一个主要按钮，比如：”确定“ | |
| 文本按钮 | 弱化的按钮，可用于大面积使用按钮的场景，比如表格操作列 | |
| 图标按钮 | 常用于较小空间内展示尽量多的按钮，比如菜单右上角；纯图标按钮可配合tooltip提示按钮含义 | |
| 按钮中添加图标 | 图标补充按钮含义，提高按钮识别效率 | |
| 虚线按钮 | 常用于表单中添加结构化数据 | |
| 链接按钮 | 相当于a标签，使用场景比如：更多 | ! |
| 菜单按钮 | 一组按钮集合 | |
| ... |
状态
作用：引导他们在正确的方向上交互，而不是浪费精力在重复操作上；比如loading状态如果没有，用户可能频繁点击，不确定是否已下发指令
正常状态（Normal) | 聚焦状态（Focus) | 悬停状态（Hover) |
|---|---|---|
激活状态（Active) | 加载状态（Loading) | 禁用状态（Disabled) |
特殊按钮
| 名称 | 描述&使用场景 | 样式举例 |
|---|---|---|
| 危险按钮 | 删除、移动、修改权限等危险操作，一般需要二次确认 | |
| 幽灵按钮 | 用于背景色复杂的场景，常用于首页、产品页 | |
| 行动号召按钮 | 一般独立出现，常出现在登录页或者一些引导性场景；常是block button |
设计原则
文案
清楚传达用户按下按钮要执行的操作，文案使用动词（下拉按钮除外）；
文案含义
确认（confirm）: 不可逆操作的提示，常为二次确认弹框，比如用户配置；
确定（yes）: 询问用户是否进行某项不可逆操作，一般为单独操作；
按钮分组
同类型按钮优先通过间距分隔，需要分组时使用分隔线；
| 名称 | 同类型展示 | 分组展示 |
|---|---|---|
| 平铺按钮 | ||
| 下拉按钮 |
位置布局
普通表单按钮
按钮区跟随受控内容。将按钮区放在用户的浏览路径中，便于用户发现
筛选表单按钮
按钮靠右，控制筛选栏
按钮顺序
推荐操作是阅读的起点，折叠内容在最侧边；
-
遵从对话习惯：优先提供用户可能要执行的操作或你期望用户执行的操作，最后提供风险性操作；
-
方向性含义：例如返回按钮应在左侧，暗示回到上一步；
通用设计模式
内部结构
页面结构
操作组
- 操作按钮类型：默认按钮
- 操作组按钮间分隔：使用空格分隔；间距8px
- 按钮顺序：阅读起点在左侧；从左至右顺序：主要按钮 > 默认按钮 > 危险按钮
- 批量操作按钮展示形态
- 在未选择数据时为disabled状态
- 批量操作按钮在未选择数据时点击，warning顶部提示”您还未作选择“
- 用户未勾选数据时，不展示批量操作按钮（antd）
操作列
- 按钮类型：文本按钮、危险按钮
- 按钮间间隔：使用空格分隔；间距8px
- 操作列布局：不换行，固定在表格右侧；超过5个，使用dropdown折叠展示
查询表单
- 按钮类型：主要按钮
- 按钮间间隔：使用空格分隔；间距8px
- 布局 单行左右布局：
多行紧凑布局：（注意：展开收起按钮可点击，应为蓝色而非黑色）
数据录入表单
- 按钮类型：主要按钮（“确认”），默认按钮（“取消”）
- 按钮间间隔：使用空格分隔；间距8px
- 按钮顺序：阅读起点在右侧；从右至左顺序：主要按钮 > 默认按钮 > 危险按钮
- 按钮状态：
- 必填数据未全部输入时，保存按钮置灰；适合表单内容较少页面；
- 必填数据未全部输入时，点击保存按钮，顶部warning提示+触发表单项校验；适合数据量较大页面；
- 点击“确认”按钮后，按钮处于loading+disabled状态
危险按钮二次确认弹窗
删除
| 类型 | 演示 | 说明 |
|---|---|---|
| 直接删除，可撤销 | 重要程度低； | |
| 删除二次确认popconfirm | 重要程度高；相较modal：用户操作移动距离短，问题就近解决；有利于用户在心流中工作； | |
| 删除二次确认modal | 重要程度高；模态特点：强制用户关注，必须采取行动，干扰心流（B、C端）； |
批量删除
使用删除二次确认modal
