{
  "_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": "similarity",
  "name": {
    "zh": "相似律",
    "en": "Similarity"
  },
  "page": "https://designvocabulary.com/en/entries/similarity/",
  "self": "https://designvocabulary.com/en/entries/similarity.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/similarity.json",
    "en": "https://designvocabulary.com/en/entries/similarity.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-similarity",
        "url": "https://www.nngroup.com/articles/gestalt-similarity/",
        "title": "NN/g · Similarity Principle in Visual Design",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915181904/https://www.nngroup.com/articles/gestalt-similarity/",
          "capturedAt": "2026-09-15T18:19:04Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/gestalt-similarity/"
        }
      },
      {
        "id": "ixdf-gestalt",
        "url": "https://ixdf.org/literature/topics/gestalt-principles",
        "title": "IxDF · What are the Gestalt Principles?",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260901022728/https://ixdf.org/literature/topics/gestalt-principles",
          "capturedAt": "2026-09-01T02:27:28Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://ixdf.org/literature/topics/gestalt-principles"
        }
      },
      {
        "id": "smashing-gestalt",
        "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": 3,
        "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": "similarity",
    "type": "principle",
    "name": {
      "zh": "相似律",
      "en": "Similarity"
    },
    "aliases": [
      "Gestalt Similarity",
      "Law of Similarity",
      "相似原则",
      "相似性原则"
    ],
    "granularity": "component",
    "intents": [
      "organize-content",
      "reduce-complexity"
    ],
    "tags": [
      "grouping",
      "visual attributes",
      "Gestalt",
      "consistency",
      "visual relationships"
    ],
    "definition": "Elements that share visual characteristics such as color, shape, or size tend to be perceived as a related group, even when they are not positioned next to each other.",
    "boundary": "Similarity groups by visual attributes, not by distance. It is often overpowered by proximity or common region, and it does not replace semantic labels, headings, or accessible grouping information.",
    "signature": [
      "Elements of the same kind share color, shape, or size",
      "Elements of different kinds differ clearly in at least one attribute",
      "An element that breaks the similarity becomes a focal point"
    ],
    "when": [
      "Actions or content of the same kind are spread across locations and need a cross-region relationship",
      "Links, buttons, tags, or other same-function elements should be recognizable at a glance",
      "A single key action needs emphasis through deliberate difference"
    ],
    "when_not": [
      "Using the same styling to suggest a functional relationship that does not exist",
      "Applying the interactive color to non-interactive decorative elements",
      "Distinguishing groups by color alone without a second cue such as shape or text"
    ],
    "tradeoff": "Visual consistency conveys relationships across locations, but excessive similarity makes unrelated elements read as one group and weakens elements that need emphasis.",
    "comparison": {
      "focus": "Which elements belong to the same function or category",
      "mechanism": "Shared visual attributes influence perceived grouping",
      "cost": "Requires a consistently maintained attribute system and backup cues for color"
    },
    "sources": [
      {
        "id": "nng-similarity",
        "title": "NN/g · Similarity Principle in Visual Design",
        "url": "https://www.nngroup.com/articles/gestalt-similarity/",
        "claim": "Elements sharing visual characteristics are perceived as more related; color, shape, and size are the main similarity cues, and similarity is often overpowered by proximity or common region.",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/gestalt-similarity/",
          "status": "available",
          "checkedAt": "2026-09-15T18:16:37.904Z",
          "jobId": "spn2-86531ce9f6d3d10485b70771380897121c6bc99c",
          "url": "https://web.archive.org/web/20260915181904/https://www.nngroup.com/articles/gestalt-similarity/",
          "timestamp": "20260915181904"
        }
      },
      {
        "id": "ixdf-gestalt",
        "title": "IxDF · What are the Gestalt Principles?",
        "url": "https://ixdf.org/literature/topics/gestalt-principles",
        "claim": "Elements that share superficial characteristics (shape, color, size) are perceived as grouped; similarity can be deliberately broken to emphasize a call to action.",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://ixdf.org/literature/topics/gestalt-principles",
          "status": "available",
          "checkedAt": "2026-09-22T15:07:02.892Z",
          "jobId": "spn2-73fe8a649c9ddc92338f9f7177e4ee0255676b89",
          "url": "https://web.archive.org/web/20260901022728/https://ixdf.org/literature/topics/gestalt-principles",
          "timestamp": "20260901022728"
        }
      },
      {
        "id": "smashing-gestalt",
        "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": "Similarity characteristics include color, shape, size, and texture; dissimilarity can serve as a focal point for emphasis.",
        "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": "Using both distance and visual attributes to express grouping",
        "reason": "Proximity relies on distance while similarity relies on shared attributes; when they conflict, distance usually wins, so the cues should agree.",
        "basis": "editorial"
      },
      {
        "target": "swiss",
        "kind": "composes_with",
        "condition": "A typographic system uses consistent sizes and colors to express hierarchy",
        "reason": "Consistent text styling lets same-level content be recognized across pages.",
        "basis": "editorial"
      },
      {
        "target": "inclusive-design",
        "kind": "informs",
        "condition": "Grouping cues depend on color",
        "reason": "Color similarity can fail for people with color vision differences and needs a shape or text backup.",
        "basis": "editorial"
      }
    ],
    "rules": [
      {
        "when": "Using color to express grouping or interactivity",
        "instruction": "Do not rely on color alone; provide a second cue such as shape, an icon, or text.",
        "strength": "must",
        "basis": "editorial"
      },
      {
        "when": "Defining styles for elements with the same function",
        "instruction": "Give them consistent visual attributes, and avoid reusing that style for elements with a different function.",
        "strength": "recommend",
        "basis": "editorial"
      }
    ],
    "principle": {
      "evidenceType": "A design interpretation of a perceptual principle",
      "limit": "This entry does not measure the grouping strength of each attribute or prescribe specific color or size values."
    },
    "demo": null,
    "version": "0.1.0",
    "editorialStatus": "drafted",
    "requirements": [],
    "demoCapabilities": [],
    "implementationNote": "This entry has no interactive specimen yet; the illustration is an editorial sketch, and product use still requires verifying semantic grouping and accessibility annotations.",
    "image": {
      "src": "/images/similarity.webp",
      "alt": "An evenly spaced grid of circles and squares where elements of the same color or shape read as a group even though they are not adjacent."
    },
    "searchTerms": [
      "分组",
      "视觉属性",
      "格式塔",
      "一致性",
      "视觉关系"
    ]
  }
}