阴影在 Alius 设计系统中应保持克制。阴影只用于表达空间关系,不用于装饰。

阴影层级

Level 0 — 无阴影

  • 仅使用边框区分层级
  • 适用于:卡片、表格、文档区块
  • 表达:平铺、稳定、不浮动

Level 1 — 轻微浮层

  • 极轻微的阴影,暗示元素略微浮起
  • 适用于:悬停状态的卡片、分组容器
  • 表达:可交互、轻微提升

Level 2 — 中等浮层

  • 明确的阴影,元素明显浮于底层之上
  • 适用于:下拉菜单(Dropdown)、工具提示(Tooltip)、弹出面板
  • 表达:临时出现、需要关注

Level 3 — 较强浮层

  • 强阴影,元素显著浮于界面之上
  • 适用于:对话框(Modal)、确认弹窗、重要浮层
  • 表达:需要用户操作、阻断当前流程

Level 4 — 最强浮层

  • 最强阴影,通常配合半透明遮罩
  • 适用于:全屏对话框、关键通知、系统级弹窗
  • 表达:最高优先级、必须处理

使用原则

  • 文档页面尽量使用 Level 0(边框),少用强阴影
  • 工具类界面优先使用边框和背景色区分层级
  • 同一页面不应同时出现超过 2 个阴影层级
  • 不使用彩色阴影
  • 不使用大面积模糊阴影
  • 移动端可适当增强阴影,因为边框在小屏幕上不够明显