VISUAL LANGUAGE / DESIGN GUIDE

玻璃拟态

Glassmorphism

半透明表面让背景透出,背景模糊把前后层次分开;描边与局部高光补充玻璃边缘。正文可读性取决于其后每一种背景,而不只是一张截图。

玻璃拟态设计指南

本站编写的设计取舍与实现建议;实例是说明用的界面方案,不是客户案例、官方截图或效果承诺。目录中的部分条目是交互策略、业务布局或平台设计系统,并非同一层级的视觉流派。

设计原理

半透明表面让背景透出,背景模糊把前后层次分开;描边与局部高光补充玻璃边缘。正文可读性取决于其后每一种背景,而不只是一张截图。

适用场景

图片背景上的短信息卡、浮动导航和少量覆盖层。

不适用与取舍

长篇阅读、复杂表格、背景频繁变化而无法控制对比的关键表单。

实现方法

用半透明背景配合 backdrop-filter,而非把整个容器设为透明;文字保持不透明。通过 @supports 提供实色回退,限制大面积叠层模糊,并检查最亮与最暗背景。

具体界面示例

相册页的工具条可透出照片,但输入框和错误信息使用更实的底色;关闭模糊后依然能读。

常见误区

透明度越低并不越像玻璃;重复叠加模糊会增加绘制成本,也可能使正文对比失控。

延伸阅读

下列技术规范或官方文档可用于核对实现;本站示例与设计取舍由本站编写。

继续比较

结合材料、布局或父子变体比较选择。

启用 JavaScript 可切换浅深色、收藏、使用组件演示并复制提示词。实例用于解释设计,不代表真实业务业绩。