{
  "_description": "Generated from data/ — edit the sources, not this file. The agent access guide explains the evidence boundary of every field.",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "en",
  "id": "figure-ground",
  "name": {
    "zh": "图形与背景",
    "en": "Figure–Ground"
  },
  "page": "https://designvocabulary.com/en/entries/figure-ground/",
  "self": "https://designvocabulary.com/en/entries/figure-ground.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/figure-ground.json",
    "en": "https://designvocabulary.com/en/entries/figure-ground.json"
  },
  "site": {
    "catalogSchemaVersion": "0.1.0",
    "entries": 158,
    "index": "https://designvocabulary.com/en/entries/index.json",
    "query": "https://designvocabulary.com/api/query?lang=en",
    "guide": "https://designvocabulary.com/en/agents/",
    "llms": "https://designvocabulary.com/llms.txt"
  },
  "provenance": {
    "sourceBacked": [
      "entry.definition"
    ],
    "editorial": [
      "entry.boundary",
      "entry.signature",
      "entry.when",
      "entry.when_not",
      "entry.tradeoff",
      "entry.comparison",
      "entry.rules",
      "entry.relations",
      "entry.implementationNote",
      "entry.principle"
    ],
    "scope": "Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.",
    "editorialStatus": "drafted",
    "specimenData": "fictional",
    "specimenNote": "Original fictional specimens. Definitions cite sources; usage advice and recipes are editorial.",
    "sources": [
      {
        "id": "nng-figure-ground",
        "url": "https://www.nngroup.com/videos/figure-ground-gestalt/",
        "title": "NN/g · Figure/Ground: Gestalt Principle for User Interface Design",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260916040138/https://www.nngroup.com/videos/figure-ground-gestalt/",
          "capturedAt": "2026-09-16T04:01:38Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/videos/figure-ground-gestalt/"
        }
      },
      {
        "id": "ixdf-gestalt-principles",
        "url": "https://www.interaction-design.org/literature/topics/gestalt-principles",
        "title": "Interaction Design Foundation · Gestalt Principles",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260302072928/https://www.interaction-design.org/literature/topics/gestalt-principles",
          "capturedAt": "2026-03-02T07:29:28Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.interaction-design.org/literature/topics/gestalt-principles"
        }
      },
      {
        "id": "smashing-gestalt-principles",
        "url": "https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/",
        "title": "Smashing Magazine · Design Principles: Visual Perception And The Principles Of Gestalt",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915180846/https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/",
          "capturedAt": "2026-09-15T18:08:46Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/"
        }
      }
    ],
    "lists": [
      {
        "id": "P-C",
        "edition": "classic",
        "seat": 4,
        "origin": "issue-1-ledger",
        "page": "https://designvocabulary.com/en/lists/P-C/",
        "json": "https://designvocabulary.com/en/lists/P-C.json"
      }
    ],
    "ordered": false,
    "listDisclaimer": "Seat numbers are editorial positions, not scores, rankings, or popularity measurements. A list that is not filled is left as it is."
  },
  "entry": {
    "id": "figure-ground",
    "type": "principle",
    "name": {
      "zh": "图形与背景",
      "en": "Figure–Ground"
    },
    "aliases": [
      "Figure-Ground",
      "图底关系",
      "图形背景原则"
    ],
    "granularity": "component",
    "intents": [
      "organize-content",
      "reduce-complexity"
    ],
    "tags": [
      "Gestalt",
      "contrast",
      "visual hierarchy",
      "focus",
      "whitespace"
    ],
    "definition": "The eye automatically splits a scene into a focal figure and the ground that supports it; stronger contrast, size, and edge cues make that separation more stable.",
    "boundary": "Figure-ground works through contrast, size, edge, and depth cues, a different mechanism from proximity (which groups by distance) or similarity (which groups by shared attributes); whether the actual contrast ratio is sufficient is a separate, quantitative legibility check that this entry describes only in passing and does not cover.",
    "signature": [
      "The primary content or action has clearly higher contrast, size, or elevation",
      "Background elements have reduced contrast or are blurred to recede",
      "The figure has a crisp edge so viewers don't have to guess where to focus"
    ],
    "when": [
      "The primary action or core content needs to be recognized as the focal point immediately",
      "An overlay (modal, drawer, toast) needs a clear front-to-back relationship with the main content"
    ],
    "when_not": [
      "Using figure-ground to imply a grouping relationship that doesn't actually exist (use proximity or similarity instead)",
      "Using a reversible figure-ground illusion (like the classic vase/faces image) in a functional UI, leaving users unsure where to focus"
    ],
    "tradeoff": "Stronger figure contrast speeds up focus recognition, but overusing high contrast or heavy shadows makes an interface feel heavy and can undermine the legibility of secondary content.",
    "comparison": {
      "focus": "What should currently be perceived as the foreground focus, and what recedes into the background",
      "mechanism": "Contrast, size, edge clarity, and elevation (shadow/scrim) cues working together",
      "cost": "Requires ongoing maintenance of foreground-background contrast so overlays don't compete with the main content for focus"
    },
    "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": "Users perceive interface elements that stand apart from the background as things to focus on or interact with.",
        "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": "The figure-ground relationship is usually stable but can be designed to be unstable (as in the vase/faces illusion), and the principle is a distinct grouping mechanism from proximity and similarity.",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.interaction-design.org/literature/topics/gestalt-principles",
          "status": "available",
          "checkedAt": "2026-09-23T12:06:46.734Z",
          "jobId": "spn2-fca606d2c17132695574266e9759dc9805cadef9",
          "url": "https://web.archive.org/web/20260302072928/https://www.interaction-design.org/literature/topics/gestalt-principles",
          "timestamp": "20260302072928"
        }
      },
      {
        "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": "Viewers first split a composition into a figure (the focal element) and ground (what the figure rests on), reinforced by cues such as area and convexity.",
        "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": "Both are Gestalt grouping/perceptual principles",
        "reason": "Proximity groups by distance, while figure-ground separates foreground from background using contrast, size, and edges; the mechanisms differ but the two are often discussed together.",
        "basis": "editorial"
      },
      {
        "target": "modal-dialog",
        "kind": "informs",
        "condition": "An overlay needs a clear front-to-back relationship with the main content",
        "reason": "A dimmed backdrop is itself an application of figure-ground: it makes the overlay content the figure and pushes the original page into the ground.",
        "basis": "editorial"
      },
      {
        "target": "glassmorphism",
        "kind": "conflicts_when",
        "condition": "A translucent frosted layer reduces the contrast between foreground and background",
        "reason": "Glassmorphism lets the background show through and weakens foreground-background contrast, which can conflict with the clear separation figure-ground calls for.",
        "basis": "editorial"
      }
    ],
    "rules": [
      {
        "when": "Presenting the primary action or core content",
        "instruction": "Make it read as the figure through contrast, size, or elevation (shadow/lift), not through decorative effects alone.",
        "strength": "must",
        "basis": "editorial"
      },
      {
        "when": "Using a modal or a dimmed backdrop",
        "instruction": "Keep a clear figure-ground separation between the foreground and the dimmed background instead of letting them compete for focus.",
        "strength": "recommend",
        "basis": "editorial"
      },
      {
        "when": "Using decorative patterns or illustrations in a functional UI",
        "instruction": "Avoid reversible, ambiguous figure-ground patterns that could leave users unsure of the visual focus.",
        "strength": "recommend",
        "basis": "editorial"
      }
    ],
    "principle": {
      "evidenceType": "A design interpretation of a Gestalt perceptual principle",
      "limit": "This entry does not measure whether a specific contrast ratio meets a legibility threshold, and does not prescribe universal pixel or color values; quantitative contrast checking is a separate topic."
    },
    "demo": null,
    "version": "0.1.0",
    "editorialStatus": "drafted",
    "requirements": [],
    "demoCapabilities": [],
    "implementationNote": "No operable specimen yet; the illustration is editorial, meant to convey the concept, and does not represent a verified implementation. Contrast, elevation cues, and accessibility behavior still need to be verified in a real interface before use in a product.",
    "image": {
      "src": "/images/figure-ground.webp",
      "alt": "A fictional FIELDNOTES interface with one card clearly lifted above a slightly dimmed background, crisp edges, and a classic vase/faces silhouette hinted at in a corner ornament, in a warm palette of cream, terracotta, and sage."
    },
    "searchTerms": [
      "格式塔",
      "对比",
      "视觉层级",
      "焦点",
      "留白"
    ]
  }
}