阴影在 Alius 设计系统中应保持克制。阴影只用于表达空间关系,不用于装饰。
阴影层级
Level 0 — 无阴影
- 仅使用边框区分层级
- 适用于:卡片、表格、文档区块
- 表达:平铺、稳定、不浮动
Level 1 — 轻微浮层
- 极轻微的阴影,暗示元素略微浮起
- 适用于:悬停状态的卡片、分组容器
- 表达:可交互、轻微提升
Level 2 — 中等浮层
- 明确的阴影,元素明显浮于底层之上
- 适用于:下拉菜单(Dropdown)、工具提示(Tooltip)、弹出面板
- 表达:临时出现、需要关注
Level 3 — 较强浮层
- 强阴影,元素显著浮于界面之上
- 适用于:对话框(Modal)、确认弹窗、重要浮层
- 表达:需要用户操作、阻断当前流程
Level 4 — 最强浮层
- 最强阴影,通常配合半透明遮罩
- 适用于:全屏对话框、关键通知、系统级弹窗
- 表达:最高优先级、必须处理
使用原则
- 文档页面尽量使用 Level 0(边框),少用强阴影
- 工具类界面优先使用边框和背景色区分层级
- 同一页面不应同时出现超过 2 个阴影层级
- 不使用彩色阴影
- 不使用大面积模糊阴影
- 移动端可适当增强阴影,因为边框在小屏幕上不够明显