设计

玻璃拟态Glassmorphism

你可能会说

半透明的磨砂玻璃块，后面隐约透出背景那种。

玻璃拟态是一种用半透明和背景模糊表现前后层次的视觉风格它常在导航、浮层和展示页面中配合边界高光与柔和阴影使用。文字对比度要先于材质效果，并为低性能或不支持滤镜的设备准备实色背景。
NOW PLAYING

After the rain

Arlo Parks · Softly

1:423:56
设计原则 · Principles
  • 先确认背后有可感知的内容：半透明和模糊共同建立材质，但参数要按背景现场调试
  • 细描边可以模拟边缘高光：颜色、粗细和透明度跟随明暗主题，不必固定为 1px 白线
  • 透明度、边界和阴影共同表达层级：近层通常更清楚，远层可以更弱
  • 背景只需提供足够变化：图片、渐变或普通内容都可以，关键是模糊后仍不干扰文字
  • 用实色或 tint 保证对比：深浅和透明度由文字颜色、背景与对比测试决定

什么时候用

  • 音乐和视频界面的控制层，需要保留背景联系
    正在播放 ▶
  • 仪表盘浮层，用材质表达前后关系
    浮层卡片
  • 展示型登录页，但表单边界必须清楚
    登 录
  • 作品集和主题页面，局部增加轻盈层次

什么时候不用

  • 把长篇正文直接放在复杂模糊背景上
  • 没有层级需求时仍让所有区域变成玻璃
  • 大面积持续模糊，却没有测试目标设备性能
    低性能设备上的全屏模糊会影响滚动和动效
  • 背景过透，导致文字和边界难以识别
    文字对比不足
组成结构 · Anatomy
鲜艳背景+ 半透明底色+ blur 模糊+ 半透白描边= 悬浮软阴影
背后需要有可感知的明暗或色彩变化，模糊后仍不能干扰前景
透明度按主题和对比度调整；完全不透明时看不到背后的模糊
blur 数值按组件尺寸和背景复杂度调试，并提供无滤镜回退
细描边可增强材质边界，颜色和强度要适配明暗主题
投影可以把浮层从背景中托起，但不要求使用彩色或固定范围
AI 提示词 · Prompt

做一个音乐活动的报名页，在有层次的背景上放置半透明信息面板。活动时间、地点、票价和报名按钮必须清楚可辨；玻璃效果不能降低可读性。活动信息只用我提供的资料，缺少的先标“待补充”，不要自行生成。

典型使用场景
音乐播放器玻璃卡

左右滑动查看完整示例

夜航星 Night Voyager
不才 · 我的三体
1:24
3:12
⏮▶⏭
随机 歌词 电台
渐变底登录页

左右滑动查看完整示例

欢迎回来
登录你的 Aurora 账号
you@example.com
••••••••
登 录
还没有账号？免费注册 →
玻璃拟态仪表盘

左右滑动查看完整示例

Pulse 数据台 本周 ⌄
活跃用户
示例
说明统计口径
转化率
示例
说明统计口径
营收
示例
说明统计口径
近 7 日访问趋势
iOS 式控制中心

左右滑动查看完整示例

飞行
Wi-Fi
蓝牙
勿扰
亮度
音量
延伸阅读 · 权威出处
backdrop-filterMDN ↗