VOCABULARY / 词条
图形与背景
Figure–Ground
人眼会自动把一个场景分为聚焦的图形和衬托它的背景；对比度、尺寸和边缘线索越强，这种分离越稳定。
示意图 · 编辑插画，尚无可操作示例
识别特征
- 主要内容或操作有明显更高的对比度、尺寸或阴影层级
- 背景元素被压低对比度或模糊处理以退居其后
- 图形的边缘清晰，观者无需猜测应聚焦何处
概念边界
图形与背景依靠对比、尺寸、边缘和深度线索起作用，机制不同于依靠距离分组的接近律，也不同于依靠共同属性分组的相似律；具体的对比度是否达标属于量化可读性检查，本条目只做定性说明，不覆盖该检查。
什么时候考虑它
- 需要让主要操作或核心内容在视觉上第一时间被识别
- 叠加层（弹层、抽屉、提示条）需要与主内容明确区分前后关系
什么时候慎用
- 用图形与背景暗示元素之间不存在的分组关系（应改用接近律或相似律）
- 在功能性界面中使用图底关系可逆的图案（如经典的花瓶/人脸错觉），造成用户无法确定焦点
取舍
强化图形对比能加快焦点识别，但过度使用高对比或强阴影会让界面显得沉重，并可能弱化次要内容的可读性。
条件规则 · 编辑建议
当呈现主要操作或核心内容必须让其通过对比度、尺寸或层级（阴影/提升）读作图形，而不是依赖装饰性视觉效果。
当使用弹层或调暗背景的遮罩建议保持前景与被压低的背景之间清晰的图形—背景分离，不要让二者相互竞争焦点。
当在功能性界面中使用装饰性图案或插画建议避免使用图底关系可逆、容易产生歧义的图案，以免用户无法判断视觉焦点。
相关词条
接近律 ↗相关但不同 · 都属于格式塔分组/知觉原则
接近律依靠距离分组，图形与背景依靠对比、尺寸与边缘分离前后景，机制不同但常被一起讨论。
模态对话框 ↗提供解释 · 弹层需要与主内容区分前后关系
遮罩层的存在正是利用图形与背景原则，让弹层内容成为图形、原页面退为背景。
玻璃拟态 ↗条件冲突 · 半透明磨砂层导致前景与背景对比度降低
毛玻璃效果会让背景透出并削弱前景与背景的对比，可能与图形与背景的清晰分离要求相冲突。
来源与支持范围
NN/g · Figure/Ground: Gestalt Principle for User Interface Design ↗
用户会把界面中与背景形成差异的前景元素感知为需要关注或可交互的对象。
检索日期：2026-09-15 · 存档于 2026-09-16Interaction Design Foundation · Gestalt Principles ↗
图形与背景的关系在多数情况下是稳定的，但可以被设计成不稳定（如花瓶/人脸错觉），且该原则与接近律、相似律是不同的分组机制。
检索日期：2026-09-15 · 存档于 2026-03-02Smashing Magazine · Design Principles: Visual Perception And The Principles Of Gestalt ↗
观者会先把构图分为图形（对焦元素）与背景（图形所在的衬底），并用面积和凸性等线索加强这一判断。
检索日期：2026-09-15定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。
类型扩展与实现说明
尚无可操作的示例；插画为编辑用途，用于说明图形与背景概念，不代表已验证的实现。应用到实际产品前，仍需在真实界面中验证对比度、层级线索与可访问性表现。
{
"evidenceType": "格式塔知觉原则的设计解释",
"limit": "本条目不测量具体对比度是否达到可读性阈值，也不规定普适的像素或色值；量化对比检查属于独立议题。"
}打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段，并附上来源、存档与编辑声明。