扁平化设计

本词条尚无可操作示例；插画为编辑示意。应用到产品时仍须在真实页面上验证可交互元素是否足够醒目，必要时补充深度线索。

{
  "tokens": {
    "surface": "#f4efe4",
    "ink": "#2b3a3a",
    "accent": "#c9713d",
    "radiusPx": 6,
    "shadow": "none"
  },
  "tokenScope": "本样例配方；Flat 2.0 变体可加入极浅的阴影，但需按产品实际验证可点击性提示。"
}

{
  "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"
  ]
}