设计模态框、浮层与层级深度时，用图底关系法则明确前景与背景

在 UI 中建立清晰的前景（内容/操作）与背景（上下文/表面）层级，让用户一眼分辨可操作层与上下文层。

适用场景

解决思路

1. 用高度与阴影建立图底关系：卡片高于页面表面即为图，页面为底；下拉、面板、模态框、提示必须浮现在其来源表面之上，深度即优先级。
2. 为模态框加遮罩（scrim）：用半透明深色覆盖层降低背景存在感，使模态框成为明确的图；没有遮罩会导致注意力在模态框与底层页面间分裂。
3. 用对比度区分图底：高对比元素视为图，低对比视为底；文字与背景亮度过于接近会导致图底关系崩塌、文字不可读。
4. 让选中/激活态成为图：在导航或列表中，选中项通过背景填充、加粗字体或颜色变化明确成为图，未选中项退为底；两者过于相似则用户无法判断当前项。
5. 避免模糊图底：同一元素既可读作图又可读作底（如鲁宾花瓶）在 UI 中几乎总是失败，用户无法立即分辨内容与表面就无法自信操作。
6. 修复常见失败：模态框缺遮罩时务必加背景变暗层；嵌套卡片层级间要有明确亮度差；文字压在照片上时用颜色叠加、模糊或渐变层分隔；扁平设计需保留一定深度信号。
7. 暗色模式适配：明暗模式会反转图底亮度关系，亮色模式中表现高度的阴影在暗色模式可能不可见，改用细微浅色边框或降低亮度的填充来维持图底清晰。
8. 在设计令牌中定义表面栈：base、raised、overlay、modal 每层与下层保持清晰一致的对比关系。
9. 绝不在照片或复杂图像上直接放文字，必须先加分隔层。
10. 去掉颜色测试图底：仅凭形状与对比度是否仍能分辨前景与背景。
11. 克制使用高度：堆叠的表面层越多，越难维持无歧义的层级。
12. 在两种主题下验证遮罩：亮色模式可用的遮罩在暗色模式（底色本已很暗）可能需要调整。

适用边界 · 注意事项

• 当目标是在同级元素中强调某一个元素时，应改用 von Restorff 效应，而非图底关系法则。
• 在纯艺术或插画中，模糊图底有时是刻意为之，不适用此 UI 规则。