(一)按钮
1、按钮样式
三种按钮样式覆盖操作层级的主次场景——面性用于核心行动召唤,线性用于辅助操作,文字用于低频或行内弱操作,通过视觉权重的梯度递减实现操作层级的清晰区分,避免同一区域按钮争夺注意力。
| 样式 | 示意图 | ||
|---|---|---|---|
| 面性按钮 | 有色相 | 有icon | |
| 无icon | |||
| 无色相 | 有icon | ||
| 无icon | |||
| 线性按钮 | 有色相 | 有icon | |
| 无icon | |||
| 无色相 | 有icon | ||
| 无icon | |||
| 文字按钮 | 有/无icon | ||
2、按钮尺寸
三种按钮尺寸覆盖不同信息密度场景:大尺寸用于页面核心入口与弹窗主操作,中尺寸作为默认规格适配表单与常规页面,小尺寸用于表格行内与密集操作区,通过高度的梯度递减实现操作层级的视觉区分与屏效的灵活平衡。
| 尺寸 | 高度 | 使用场景 |
|---|---|---|
| 大(Large) | 40px | 页面级核心操作、弹窗主按钮 |
| 中(Medium) | 32px | 默认尺寸,表单、卡片、常规页面通用 |
| 小(Small) | 24px | 表格行内操作、密集信息区、筛选标签旁 |
3、按钮状态
三种状态覆盖操作结果的语义场景——危险用于删除、禁用等不可逆操作,警示用户审慎决策;警告用于生效风险或二次确认场景,提示潜在影响;成功用于保存生效、提交完成等正向操作,强化确认反馈。通过色彩语义的直观映射,实现操作结果的一眼识别,降低误操作概率与决策成本。
| 危险 | ![]() |
|---|---|
| 警告 | ![]() |
| 成功 | ![]() |
4、禁用按钮
为按钮提供明确禁用状态,旨在阻断用户的无效点击预期——当操作条件未满足或流程处于中断态时,禁用状态以视觉降权直观传达"当前不可操作",避免用户误点后遭遇报错或无效反馈,从而减少操作挫败感与系统异常调用,实现防错与流程引导的双重目的。




