{
  "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "zh-CN",
  "id": "flat-design",
  "name": {
    "zh": "扁平化设计",
    "en": "Flat Design"
  },
  "page": "https://designvocabulary.com/zh/entries/flat-design/",
  "self": "https://designvocabulary.com/zh/entries/flat-design.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/flat-design.json",
    "en": "https://designvocabulary.com/en/entries/flat-design.json"
  },
  "site": {
    "catalogSchemaVersion": "0.1.0",
    "entries": 158,
    "index": "https://designvocabulary.com/zh/entries/index.json",
    "query": "https://designvocabulary.com/api/query?lang=zh",
    "guide": "https://designvocabulary.com/zh/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.visual"
    ],
    "scope": "定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。",
    "editorialStatus": "drafted",
    "specimenData": "fictional",
    "specimenNote": "示例为原创虚构界面；定义附来源，用法与配方为编辑建议。",
    "sources": [
      {
        "id": "flat-nng-origins",
        "url": "https://www.nngroup.com/articles/flat-design/",
        "title": "Nielsen Norman Group · Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915183058/https://www.nngroup.com/articles/flat-design/",
          "capturedAt": "2026-09-15T18:30:58Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/flat-design/"
        }
      },
      {
        "id": "flat-nng-signifier-study",
        "url": "https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/",
        "title": "Nielsen Norman Group · Flat UI Elements Attract Less Attention and Cause Uncertainty",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915183104/https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/",
          "capturedAt": "2026-09-15T18:31:04Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/"
        }
      }
    ],
    "lists": [
      {
        "id": "V-C",
        "edition": "classic",
        "seat": 7,
        "origin": "issue-1-ledger",
        "page": "https://designvocabulary.com/zh/lists/V-C/",
        "json": "https://designvocabulary.com/zh/lists/V-C.json"
      }
    ],
    "ordered": false,
    "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。"
  },
  "entry": {
    "id": "flat-design",
    "type": "visual",
    "name": {
      "zh": "扁平化设计",
      "en": "Flat Design"
    },
    "aliases": [
      "Flat UI",
      "扁平风格",
      "Flat 2.0"
    ],
    "granularity": "experience",
    "intents": [
      "express-brand",
      "organize-content"
    ],
    "tags": [
      "无阴影",
      "纯色块",
      "几何图标",
      "可点击性",
      "极简"
    ],
    "definition": "以去除光泽、渐变、投影等模拟三维效果为特征的界面视觉风格，用纯色块、简单几何形状和排版本身表达界面元素。",
    "boundary": "扁平化设计描述的是“去掉模拟三维线索”这一视觉处理，不等同于瑞士国际主义——后者是一种以网格和排版为核心的设计传统，二者可以同时出现，也可以分别单独出现。它是对拟物化（用纹理和光影模仿现实物体）的反向选择；“Flat 2.0”或“半扁平”则在保持简洁的同时重新引入细微的阴影与层次，本词条把它视为扁平化的变体而非独立风格。",
    "signature": [
      "纯色填充的面和控件，没有渐变、纹理或光泽高光",
      "没有或几乎没有投影，元素靠颜色与留白而非立体感区分",
      "简化的几何图标与清晰排版承担大部分信息表达"
    ],
    "when": [
      "希望界面在多种屏幕尺寸和分辨率上保持干净、易缩放的观感",
      "品牌想表达现代、克制、“原生数字”的气质，而非模仿实体材质",
      "信息密度较低、布局遵循常见惯例，用户能凭位置与文案判断可交互元素"
    ],
    "when_not": [
      "页面信息密度高、可点击元素与静态文本混排，仅靠颜色难以区分",
      "目标用户不熟悉常见界面惯例，需要更强的可点击性提示",
      "为了追随潮流而移除全部可见提示，导致用户需要猜测哪里可以点击"
    ],
    "tradeoff": "视觉更简洁、易于适配和维护，但去掉立体线索后，按钮、链接等元素的可点击性提示减弱，需要用对比度、留白与惯例位置来补偿。",
    "comparison": {
      "focus": "去除模拟三维效果的简洁表面",
      "mechanism": "纯色块、几何形状、排版与留白",
      "cost": "可交互元素的辨识度需要额外设计来保证"
    },
    "sources": [
      {
        "id": "flat-nng-origins",
        "title": "Nielsen Norman Group · Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users",
        "url": "https://www.nngroup.com/articles/flat-design/",
        "claim": "该文（Kate Moran，2015-09-27）将扁平化定义为界面元素缺少光泽或三维视觉效果的风格，指出它移除了历史上用于提示可交互性的投影、渐变与高光，追溯到 Microsoft 的 Metro 语言和对拟物化的反动，并把重新引入细微阴影与层次的做法称为 Flat 2.0；本词条定义与边界据此转述。",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/flat-design/",
          "status": "available",
          "checkedAt": "2026-09-15T18:29:13.192Z",
          "jobId": "spn2-65e14e38bafbbcfc785ccbbbcf37a49a08a2e24b",
          "url": "https://web.archive.org/web/20260915183058/https://www.nngroup.com/articles/flat-design/",
          "timestamp": "20260915183058"
        }
      },
      {
        "id": "flat-nng-signifier-study",
        "title": "Nielsen Norman Group · Flat UI Elements Attract Less Attention and Cause Uncertainty",
        "url": "https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/",
        "claim": "该文（Kate Moran，2017-09-03）报告一项 71 人、9 个网站的眼动实验：与强提示版本相比，用户在弱可点击性提示版本上平均多花 22% 的查看时间、多 25% 的注视点，注视分布更分散；文章建议扁平界面依靠高对比、留白和惯例布局来弥补；本词条的规则与不适用条件据此提出。",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/",
          "status": "available",
          "checkedAt": "2026-09-15T18:29:13.194Z",
          "jobId": "spn2-24ca6d47f65ab5179310072e4a2ced15f8a22cc9",
          "url": "https://web.archive.org/web/20260915183104/https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/",
          "timestamp": "20260915183104"
        }
      }
    ],
    "relations": [
      {
        "target": "swiss",
        "kind": "related",
        "condition": "同一界面既采用网格排版体系又去除立体效果",
        "reason": "两者常被混称，但一个关心排版与网格秩序，一个关心是否保留三维线索，可独立取舍。",
        "basis": "editorial"
      },
      {
        "target": "glassmorphism",
        "kind": "alternative",
        "condition": "为同一产品选择主视觉语言",
        "reason": "玻璃拟态依靠半透明与模糊表达层次，扁平化则刻意去掉这类深度线索，通常不宜并存。",
        "basis": "editorial"
      },
      {
        "target": "recognition",
        "kind": "conflicts_when",
        "condition": "移除全部投影与描边后，可点击元素与静态文本外观一致",
        "reason": "用户需要凭可见提示辨认可操作对象，而不是靠记忆或猜测。",
        "basis": "editorial"
      }
    ],
    "rules": [
      {
        "when": "采用扁平化处理按钮、链接和输入框",
        "instruction": "可交互元素必须与静态元素在颜色、形状或位置上明确区分，不得让两者外观一致。",
        "strength": "must",
        "basis": "editorial"
      },
      {
        "when": "某个元素是否可点击存在歧义",
        "instruction": "重新引入细微的阴影、描边或底色等深度线索（Flat 2.0 做法），而不是坚持完全扁平。",
        "strength": "recommend",
        "basis": "editorial"
      },
      {
        "when": "页面信息密度较高",
        "instruction": "用足够的留白与对比度分隔可操作区域，并沿用用户熟悉的惯例位置。",
        "strength": "recommend",
        "basis": "editorial"
      }
    ],
    "visual": {
      "tokens": {
        "surface": "#f4efe4",
        "ink": "#2b3a3a",
        "accent": "#c9713d",
        "radiusPx": 6,
        "shadow": "none"
      },
      "tokenScope": "本样例配方；Flat 2.0 变体可加入极浅的阴影，但需按产品实际验证可点击性提示。"
    },
    "demo": null,
    "version": "0.1.0",
    "editorialStatus": "drafted",
    "requirements": [],
    "demoCapabilities": [],
    "implementationNote": "本词条尚无可操作示例；插画为编辑示意。应用到产品时仍须在真实页面上验证可交互元素是否足够醒目，必要时补充深度线索。",
    "image": {
      "src": "/images/flat-design.webp",
      "alt": "一个名为 FIELDNOTES 的虚构应用界面，由纯色块、几何图标和一个扁平按钮构成，没有渐变或阴影，示意扁平化设计。"
    },
    "searchTerms": [
      "no shadows",
      "solid color blocks",
      "geometric icons",
      "clickability",
      "minimal"
    ]
  }
}