跳转到内容

设计与体验 · DEFINED TERM

Shadow 阴影

用明暗和模糊模拟元素层级或悬浮关系。

你可能会这样说“弹窗比卡片阴影更明显,但不要像发光边框。”

VISUAL EXAMPLE

先看懂它怎么工作

Shadow 阴影
层 1确定层级
层 2设置偏移模糊与透明度
层 3在背景上校验

MECHANISM

运行机制

  1. 确定层级
  2. 设置偏移模糊与透明度
  3. 在背景上校验

USE WHEN

适合这样用

弹层、悬浮菜单和少量层级提示

NOT FOR

不要这样理解

不要用强阴影掩盖布局层级不清的问题

TELL YOUR AGENT

可直接发给 Agent

请按“Shadow 阴影”的概念处理这个需求:弹窗比卡片阴影更明显,但不要像发光边框。。先说明实现边界,再给出可检查的结果。

ACCEPTANCE

怎么确认它真的做好了

阴影克制且层级一致,深浅主题都可见,不制造脏边

OFFICIAL SOURCES

官方来源