打开一个深色模式的设计工具，深灰色的画布铺满屏幕，白色的设计稿内容放在中间。我们的注意力自然会落在白色区域，没有人告诉我们该看哪里，但我们就是先看到了那里——深灰色的画布退到了背景，白色的内容浮在前面，成为了视觉的主体。

然后当我们打开了一个属性面板，一个更深色的浮层从右侧滑入，浮层上的文字和图标是亮灰色的。在这个浮层里，图和底的关系又被重新建立了一次：浮层的深色背景是底，亮色的文字和图标是图。

这个过程里，感知系统完成了多次图底分层，整个过程几乎不需要任何主动的思考。

一. 图底关系是什么

图底关系（Figure-Ground）是格式塔心理学中的一条基础感知规律，也是人类视觉系统处理任何画面时最先完成的工作之一：感知系统会把视觉画面自动分为"图"（Figure）和"底"（Ground）两层——"图"是前景，是被注意的主体；"底"是背景，是衬托主体的环境。

鲁宾之杯（Rubin's Vase）是图底关系最经典的示例。在这幅图里，白色区域和黑色区域都可以分别被感知为"图"：当黑色是图时，看到的是两张相对的白色侧脸；当白色是图时，看到的是一只黑色的花瓶。两种解读不能同时保持，感知系统每次只能选择其中一种，在两种解读之间反复切换。鲁宾之杯的意义在于，它让这个平时无意识的过程变得可见——图底的划分是感知系统的主动选择，而不是被动的信息接收。

被感知为"图"的元素，通常有几个共同特征：有清晰的轮廓，形状明确；视觉分量更重，颜色饱和度更高或亮度对比更强；感知上在"前面"，像是漂浮在底的上方。被感知为"底"的元素则相反：没有明确的形状，向后退，感知上是"衬托"图的环境。图有中心感，底有延展感——图是画面的主体，底是画面的容器。

二. 图底关系在界面设计里的体现

图底关系不是一个高层次的理论，它渗透在界面设计的每一个细节里——每当一个元素需要从背景里被区分出来，图底关系就在发生作用。

1. 页面背景和内容区域

页面背景和内容区域是最基础的图底层。浅灰色的页面背景是底，白色的内容卡片是图；白色的页面背景是底，带边框或阴影的卡片是图。这个层级让用户在进入页面的瞬间，就感知到"内容在哪里，背景在哪里"，不需要阅读任何文字就能完成空间定向。

2. 弹窗和遮罩

弹窗和遮罩是图底关系最典型的设计应用。当一个弹窗出现，弹窗后面的页面内容被半透明的遮罩覆盖，这个遮罩把原来的页面内容变成了"底"——它的明度下降，感知上后退，不再是视觉的主体。弹窗本身成为了新的"图"，它在遮罩之上，有清晰的轮廓，颜色比遮罩更亮，自然地吸引了全部的视觉注意力。遮罩的作用不只是"遮住背景"，更重要的是通过改变背景的明度，重新建立图底关系，引导用户的注意力集中在弹窗上。

3.卡片和页面背景

卡片和页面背景的图底关系通过两种方式建立。一种是颜色差异：白色卡片放在浅灰色背景上，颜色的差异让卡片从背景里分离出来，成为图。