玻璃拟态

本词条尚无可操作示例；插画为编辑示意，应用到产品时仍须验证对比度与可读性。

{
  "tokens": {
    "surface": "rgba(255, 250, 240, 0.55)",
    "ink": "#18231f",
    "accent": "#c9713d",
    "radiusPx": 16,
    "shadow": "0 8px 24px rgba(24, 35, 31, 0.12)"
  },
  "tokenScope": "本样例配方；实际面板还需配合背景模糊与浅色描边，且需按真实背景验证对比度。"
}

{
  "id": "glassmorphism",
  "type": "visual",
  "name": {
    "zh": "玻璃拟态",
    "en": "Glassmorphism"
  },
  "aliases": [
    "Glass UI",
    "毛玻璃风格",
    "Frosted Glass",
    "磨砂玻璃"
  ],
  "granularity": "experience",
  "intents": [
    "express-brand",
    "organize-content"
  ],
  "tags": [
    "半透明",
    "背景模糊",
    "层次",
    "毛玻璃",
    "对比度"
  ],
  "definition": "利用不同程度的半透明与背景模糊，让前景元素像磨砂玻璃一样浮于背景之上，从而建立前后层次的视觉风格。",
  "boundary": "指一类视觉风格，不指某一平台的实现。Apple 的 Liquid Glass 是系统级材料的一个平台案例，不等同整个 Apple 设计系统；其他平台的半透明材料也不在此拆分为独立风格。仅让面板半透明而不做背景处理，不足以构成此风格。",
  "signature": [
    "半透明前景面板透出被模糊的背景",
    "细而浅色的描边或渐变勾勒面板边缘",
    "多层叠放形成可感知的前后深度"
  ],
  "when": [
    "需要在保留背景语境的同时突出浮层、卡片或控件",
    "品牌希望表达轻盈、精致或与平台材料一致的质感",
    "背景相对简单，能够控制透出的颜色与细节"
  ],
  "when_not": [
    "面板下方是内容多变、颜色复杂的背景，文字对比度难以保证",
    "目标设备或运行环境不能稳定渲染背景模糊",
    "把每个层级都做成玻璃，以致前后关系反而模糊"
  ],
  "tradeoff": "能表达深度和轻盈感，但可读性依赖背景与模糊程度，且实时模糊有性能与兼容性成本。",
  "comparison": {
    "focus": "透过材料感知层次",
    "mechanism": "半透明、背景模糊、浅色描边",
    "cost": "需要持续验证对比度与渲染表现"
  },
  "sources": [
    {
      "id": "glass-nng",
      "title": "Nielsen Norman Group · Glassmorphism: Definition and Best Practices",
      "url": "https://www.nngroup.com/articles/glassmorphism/",
      "claim": "该文将玻璃拟态定义为利用不同程度的半透明制造前后景深度、模仿磨砂玻璃的视觉风格，并提醒复杂背景上的文字对比度与无障碍风险；本词条定义据此转述。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/glassmorphism/",
        "status": "available",
        "checkedAt": "2026-09-15T18:04:28.921Z",
        "jobId": "spn2-1d93eb418c7469100a6e9ad4baf020ae2908ea3d",
        "url": "https://web.archive.org/web/20260915180514/https://www.nngroup.com/articles/glassmorphism/",
        "timestamp": "20260915180514"
      }
    },
    {
      "id": "glass-apple-liquid-glass",
      "title": "Apple Newsroom · Apple introduces a delightful and elegant new software design",
      "url": "https://www.apple.com/newsroom/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/",
      "claim": "2025 年 6 月 9 日的公告将 Liquid Glass 描述为一种半透明材料，会反射与折射周围内容并随环境自适应，覆盖 iOS 26 等多个平台；此处仅作为平台材料案例，不代表整个系统。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.apple.com/newsroom/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/",
        "status": "available",
        "checkedAt": "2026-09-15T18:04:28.923Z",
        "jobId": "spn2-bfdf8aa2acc5bb0f68c0aa9ba74c3de587c0b3ad",
        "url": "https://web.archive.org/web/20260915180455/https://www.apple.com/newsroom/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/",
        "timestamp": "20260915180455"
      }
    },
    {
      "id": "glass-mdn-backdrop-filter",
      "title": "MDN · backdrop-filter",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter",
      "claim": "该文档说明 backdrop-filter 对元素后方区域施加模糊等效果，且元素或其背景需要透明或半透明才能看到效果；这是网页实现此风格的常见机制说明，不是风格定义。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter",
        "status": "available",
        "checkedAt": "2026-09-15T18:05:14.008Z",
        "jobId": "spn2-c8134e941f9adf6fff989823d8ad09e97500e144",
        "url": "https://web.archive.org/web/20260915180558/https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter",
        "timestamp": "20260915180558"
      }
    }
  ],
  "relations": [
    {
      "target": "neo-brutalism",
      "kind": "alternative",
      "condition": "选择同一产品的主视觉语言",
      "reason": "一个以柔和的透明层次表达深度，一个以硬描边和色块表达直接感，通常不宜混用。",
      "basis": "editorial"
    },
    {
      "target": "bento",
      "kind": "composes_with",
      "condition": "以卡片网格组织内容且卡片需要浮于背景之上",
      "reason": "布局决定卡片的位置与大小，玻璃材质只决定卡片的表面质感，两者可独立选择。",
      "basis": "editorial"
    },
    {
      "target": "inclusive-design",
      "kind": "conflicts_when",
      "condition": "半透明层上的文字未按最不利背景验证对比度，或未响应用户减少透明度的系统设置",
      "reason": "低视力用户依赖稳定的对比度；材质效果不应以牺牲可读性为代价。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "文字或图标放在半透明背景上",
      "instruction": "按背景可能出现的最不利颜色验证对比度，必要时提高面板不透明度、加深模糊或增加遮罩，而不是只在示例背景上检查一次。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "应用到多平台或性能受限的设备",
      "instruction": "为不支持背景模糊或用户开启减少透明度的环境准备不透明回退样式，并限制同屏玻璃层的数量。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "visual": {
    "tokens": {
      "surface": "rgba(255, 250, 240, 0.55)",
      "ink": "#18231f",
      "accent": "#c9713d",
      "radiusPx": 16,
      "shadow": "0 8px 24px rgba(24, 35, 31, 0.12)"
    },
    "tokenScope": "本样例配方；实际面板还需配合背景模糊与浅色描边，且需按真实背景验证对比度。"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意，应用到产品时仍须验证对比度与可读性。",
  "image": {
    "src": "/images/glassmorphism.webp",
    "alt": "一组磨砂半透明的玻璃卡片浮在柔和模糊的彩色背景上，边缘带有细细的浅色描边，示意玻璃拟态的层次感。"
  },
  "searchTerms": [
    "translucency",
    "background blur",
    "depth",
    "frosted glass",
    "contrast"
  ]
}