用途
本技能用于在界面设计中应用“图形与背景法则”（Law of Figure-Ground），确保用户能立刻分辨什么是前景（内容或操作）、什么是背景（语境或表面），并在界面的每一层刻意控制这种关系。适用于设计模态框、浮层与深度层级等场景。
核心原则
人的大脑会自动把视野分成主体（图形）与语境（背景）。图形被感知为在前、有边界、是注意力焦点；背景被感知为在后、无边界、后退。这种解析不是一种选择，而是一种知觉反射。每个 UI 表面都会触发图底分离，关键在于你是否有意设计，还是听凭偶然。
图形与背景的特征对照
图形（前景）：出现在前面；有界，被感知为具有边缘；是注意力焦点；对比度更高，纹理或细节更丰富；通常面积较小。
背景（背景）：出现在后面；无界，被感知为延伸到图形之外；是注意力的语境；对比度更低、更平整、更统一；通常面积较大。
在 UI 中建立清晰的图底关系
- 高度与阴影：高度是分层设计系统中处理图底关系的主要工具。卡片浮在页面上方即为图形，页面为背景；阴影提示深度，深度提示前景。下拉菜单、面板、模态框和工具提示必须出现在它们被调用的表面之上——深度传递主次。
- 浮层与遮罩：模态框需要背景后退。遮罩——一层半透明深色覆盖层——降低背景的视觉存在感，使模态框成为无歧义的图形。没有遮罩时，图底关系不清晰，注意力会在模态框与下方页面之间被分散。
- 对比度：高对比元素被感知为图形，低对比元素被感知为背景。表面上的文字也通过图底关系起作用：文字是图形（高对比，被行边界包围），表面是背景（较低对比，无界）。当文字与背景的亮度值过于接近，图底关系会崩塌，文字不再可读。
- 激活与选中状态：在导航或列表中，选中项成为图形，未选中项成为背景。选中状态——背景填充、加粗排版、颜色变化——必须让图底切换无歧义。如果选中与未选中状态过于相似，用户就无法判断哪个项目处于激活状态。
模糊的图底关系
当同一元素既可被读作图形也可被读作背景时，就会出现模糊的图底关系——相当于视觉上的鲁宾之杯。在纯艺术与插画中，这有时是有意为之；在 UI 中，它几乎总是失败。如果用户无法立刻解析什么是内容、什么是表面，他们就不能自信地操作。
常见图底关系失败
- 遮罩不足：白色页面上的模态框没有遮罩时，用户只能从边缘解析图底关系——应始终提供使背景变暗的层。
- 嵌套高度缺乏对比：卡片套卡片而层级之间没有明确亮度差异，会产生模糊的深度。
- 文字压在照片上：图像作为图形参与竞争；需用颜色覆盖层、模糊或渐变层把文字与图像分开。
- 扁平设计缺少表面区分：完全移除高度提示会让前景/背景关系不可见——某种深度提示是必要的。
深色模式注意事项
浅色与深色模式会反转图形与背景之间典型的亮度关系。原本浅色背景上的深色图形，会变成深色背景上的浅色图形。在浅色模式下读作高度的阴影，在深色模式下可能不可见——当阴影消失时，使用细微的浅色边框或降低亮度的填充来维持图底清晰。
最佳实践
- 在设计令牌中定义表面栈：base、raised、overlay、modal——每一层都应与下方各层保持清晰且一致的对比关系。
- 永远不要把文字直接放在照片或复杂图像上而不加分离层。
- 通过去掉颜色来测试图底：仅凭形状和对比度，你还能分辨前景与背景吗？
- 克制使用高度——堆叠的表面层越多，维持无歧义层级就越难。
- 在两种主题下验证遮罩：在浅色模式可用的遮罩，在基础表面本就较暗的深色模式中可能需要调整。