图形与背景

尚无可操作的示例；插画为编辑用途，用于说明图形与背景概念，不代表已验证的实现。应用到实际产品前，仍需在真实界面中验证对比度、层级线索与可访问性表现。

{
  "evidenceType": "格式塔知觉原则的设计解释",
  "limit": "本条目不测量具体对比度是否达到可读性阈值，也不规定普适的像素或色值；量化对比检查属于独立议题。"
}

{
  "id": "figure-ground",
  "type": "principle",
  "name": {
    "zh": "图形与背景",
    "en": "Figure–Ground"
  },
  "aliases": [
    "Figure-Ground",
    "图底关系",
    "图形背景原则"
  ],
  "granularity": "component",
  "intents": [
    "organize-content",
    "reduce-complexity"
  ],
  "tags": [
    "格式塔",
    "对比",
    "视觉层级",
    "焦点",
    "留白"
  ],
  "definition": "人眼会自动把一个场景分为聚焦的图形和衬托它的背景；对比度、尺寸和边缘线索越强，这种分离越稳定。",
  "boundary": "图形与背景依靠对比、尺寸、边缘和深度线索起作用，机制不同于依靠距离分组的接近律，也不同于依靠共同属性分组的相似律；具体的对比度是否达标属于量化可读性检查，本条目只做定性说明，不覆盖该检查。",
  "signature": [
    "主要内容或操作有明显更高的对比度、尺寸或阴影层级",
    "背景元素被压低对比度或模糊处理以退居其后",
    "图形的边缘清晰，观者无需猜测应聚焦何处"
  ],
  "when": [
    "需要让主要操作或核心内容在视觉上第一时间被识别",
    "叠加层（弹层、抽屉、提示条）需要与主内容明确区分前后关系"
  ],
  "when_not": [
    "用图形与背景暗示元素之间不存在的分组关系（应改用接近律或相似律）",
    "在功能性界面中使用图底关系可逆的图案（如经典的花瓶/人脸错觉），造成用户无法确定焦点"
  ],
  "tradeoff": "强化图形对比能加快焦点识别，但过度使用高对比或强阴影会让界面显得沉重，并可能弱化次要内容的可读性。",
  "comparison": {
    "focus": "什么是当前应被感知为前景的焦点，什么退居为背景",
    "mechanism": "对比度、尺寸、边缘清晰度与层级（阴影/遮罩）线索共同作用",
    "cost": "需要持续维护前景与背景的对比强度，避免叠加层与主体互相争夺焦点"
  },
  "sources": [
    {
      "id": "nng-figure-ground",
      "title": "NN/g · Figure/Ground: Gestalt Principle for User Interface Design",
      "url": "https://www.nngroup.com/videos/figure-ground-gestalt/",
      "claim": "用户会把界面中与背景形成差异的前景元素感知为需要关注或可交互的对象。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/videos/figure-ground-gestalt/",
        "status": "available",
        "checkedAt": "2026-09-16T04:01:02.792Z",
        "jobId": "spn2-ec499a940ea6a4724156fbe791feb36cef243a5b",
        "url": "https://web.archive.org/web/20260916040138/https://www.nngroup.com/videos/figure-ground-gestalt/",
        "timestamp": "20260916040138"
      }
    },
    {
      "id": "ixdf-gestalt-principles",
      "title": "Interaction Design Foundation · Gestalt Principles",
      "url": "https://www.interaction-design.org/literature/topics/gestalt-principles",
      "claim": "图形与背景的关系在多数情况下是稳定的，但可以被设计成不稳定（如花瓶/人脸错觉），且该原则与接近律、相似律是不同的分组机制。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.interaction-design.org/literature/topics/gestalt-principles",
        "status": "unconfirmed",
        "checkedAt": "2026-09-16T03:53:53.725Z",
        "error": "status-request-failed",
        "jobId": "spn2-fca606d2c17132695574266e9759dc9805cadef9"
      }
    },
    {
      "id": "smashing-gestalt-principles",
      "title": "Smashing Magazine · Design Principles: Visual Perception And The Principles Of Gestalt",
      "url": "https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/",
      "claim": "观者会先把构图分为图形（对焦元素）与背景（图形所在的衬底），并用面积和凸性等线索加强这一判断。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/",
        "status": "available",
        "checkedAt": "2026-09-15T18:07:23.177Z",
        "jobId": "spn2-6a63687ff50fcbb4c132638ee0b4c05237b75c63",
        "url": "https://web.archive.org/web/20260915180846/https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/",
        "timestamp": "20260915180846"
      }
    }
  ],
  "relations": [
    {
      "target": "proximity",
      "kind": "related",
      "condition": "都属于格式塔分组/知觉原则",
      "reason": "接近律依靠距离分组，图形与背景依靠对比、尺寸与边缘分离前后景，机制不同但常被一起讨论。",
      "basis": "editorial"
    },
    {
      "target": "modal-dialog",
      "kind": "informs",
      "condition": "弹层需要与主内容区分前后关系",
      "reason": "遮罩层的存在正是利用图形与背景原则，让弹层内容成为图形、原页面退为背景。",
      "basis": "editorial"
    },
    {
      "target": "glassmorphism",
      "kind": "conflicts_when",
      "condition": "半透明磨砂层导致前景与背景对比度降低",
      "reason": "毛玻璃效果会让背景透出并削弱前景与背景的对比，可能与图形与背景的清晰分离要求相冲突。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "呈现主要操作或核心内容",
      "instruction": "让其通过对比度、尺寸或层级（阴影/提升）读作图形，而不是依赖装饰性视觉效果。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "使用弹层或调暗背景的遮罩",
      "instruction": "保持前景与被压低的背景之间清晰的图形—背景分离，不要让二者相互竞争焦点。",
      "strength": "recommend",
      "basis": "editorial"
    },
    {
      "when": "在功能性界面中使用装饰性图案或插画",
      "instruction": "避免使用图底关系可逆、容易产生歧义的图案，以免用户无法判断视觉焦点。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "principle": {
    "evidenceType": "格式塔知觉原则的设计解释",
    "limit": "本条目不测量具体对比度是否达到可读性阈值，也不规定普适的像素或色值；量化对比检查属于独立议题。"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "尚无可操作的示例；插画为编辑用途，用于说明图形与背景概念，不代表已验证的实现。应用到实际产品前，仍需在真实界面中验证对比度、层级线索与可访问性表现。",
  "image": {
    "src": "/images/figure-ground.webp",
    "alt": "一个虚构的 FIELDNOTES 界面，一张卡片在略微调暗的背景上明显抬升，边缘清晰，角落的装饰纹样中隐约可见经典的花瓶/人脸剪影，配色为暖色调的奶油、赤陶与鼠尾草绿。"
  },
  "searchTerms": [
    "Gestalt",
    "contrast",
    "visual hierarchy",
    "focus",
    "whitespace"
  ]
}