VOCABULARY / 词条

玻璃拟态

Glassmorphism

加入比较＋

视觉风格粒度：整体体验glassmorphism · v0.1.0

利用不同程度的半透明与背景模糊，让前景元素像磨砂玻璃一样浮于背景之上，从而建立前后层次的视觉风格。

一组磨砂半透明的玻璃卡片浮在柔和模糊的彩色背景上，边缘带有细细的浅色描边，示意玻璃拟态的层次感。

识别特征

半透明前景面板透出被模糊的背景
细而浅色的描边或渐变勾勒面板边缘
多层叠放形成可感知的前后深度

概念边界

指一类视觉风格，不指某一平台的实现。Apple 的 Liquid Glass 是系统级材料的一个平台案例，不等同整个 Apple 设计系统；其他平台的半透明材料也不在此拆分为独立风格。仅让面板半透明而不做背景处理，不足以构成此风格。

什么时候考虑它

需要在保留背景语境的同时突出浮层、卡片或控件
品牌希望表达轻盈、精致或与平台材料一致的质感
背景相对简单，能够控制透出的颜色与细节

什么时候慎用

面板下方是内容多变、颜色复杂的背景，文字对比度难以保证
目标设备或运行环境不能稳定渲染背景模糊
把每个层级都做成玻璃，以致前后关系反而模糊

取舍

能表达深度和轻盈感，但可读性依赖背景与模糊程度，且实时模糊有性能与兼容性成本。

条件规则 · 编辑建议

当文字或图标放在半透明背景上必须按背景可能出现的最不利颜色验证对比度，必要时提高面板不透明度、加深模糊或增加遮罩，而不是只在示例背景上检查一次。

当应用到多平台或性能受限的设备建议为不支持背景模糊或用户开启减少透明度的环境准备不透明回退样式，并限制同屏玻璃层的数量。

来源与支持范围

Nielsen Norman Group · Glassmorphism: Definition and Best Practices ↗

该文将玻璃拟态定义为利用不同程度的半透明制造前后景深度、模仿磨砂玻璃的视觉风格，并提醒复杂背景上的文字对比度与无障碍风险；本词条定义据此转述。

检索日期：2026-09-15

Apple Newsroom · Apple introduces a delightful and elegant new software design ↗

2025 年 6 月 9 日的公告将 Liquid Glass 描述为一种半透明材料，会反射与折射周围内容并随环境自适应，覆盖 iOS 26 等多个平台；此处仅作为平台材料案例，不代表整个系统。

检索日期：2026-09-15

MDN · backdrop-filter ↗

该文档说明 backdrop-filter 对元素后方区域施加模糊等效果，且元素或其背景需要透明或半透明才能看到效果；这是网页实现此风格的常见机制说明，不是风格定义。

检索日期：2026-09-15

定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。

类型扩展与实现说明

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

{
  "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": "本样例配方；实际面板还需配合背景模糊与浅色描边，且需按真实背景验证对比度。"
}

打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段，并附上来源、存档与编辑声明。

玻璃拟态

识别特征

概念边界

什么时候考虑它

什么时候慎用

取舍

条件规则 · 编辑建议

相关词条

来源与支持范围