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

2、滚动条
滚动条用于内容溢出容器时的定位导航,默认隐藏以减少干扰,hover 容器时显现。分为 2 种类型:垂直(纵向溢出)、水平(横向溢出)。滑块长度按内容比例自适应;支持滚轮、手势、拖动、点击轨道四种操作。

3、链接
链接用于页面内或跨页面的导航跳转,通过文字与图标组合引导用户前往目标位置。提供大、中、小三类尺寸,提供前缀/后缀图标、下划线辅助元素。外部链接建议配后缀图标提示。




