玻璃拟态Glassmorphism
设计风格用半透明和背景模糊表现前后层次
玻璃拟态通过半透明底色、背景模糊和边界高光形成材质感，适合导航、浮层和展示页面。使用时要先保证文字对比度，并为低性能或不支持滤镜的设备准备实色回退。
After the rain
Arlo Parks · Softly
1:423:56
设计原则 · Principles
- 先确认背后有可感知的内容：半透明和模糊共同建立材质，但参数要按背景现场调试① 背景有内容② 底色半透明③ blur 到位
- 细描边可以模拟边缘高光：颜色、粗细和透明度跟随明暗主题，不必固定为 1px 白线
- 透明度、边界和阴影共同表达层级：近层通常更清楚，远层可以更弱
- 背景只需提供足够变化：图片、渐变或普通内容都可以，关键是模糊后仍不干扰文字
- 用实色或 tint 保证对比：深浅和透明度由文字颜色、背景与对比测试决定加深 tint 托住字 ✓太透看不清 ✗
什么时候用
- 音乐和视频界面的控制层，需要保留背景联系正在播放 ▶
- 仪表盘浮层，用材质表达前后关系浮层卡片
- 展示型登录页，但表单边界必须清楚登 录
- 作品集和主题页面，局部增加轻盈层次
什么时候不用
- 把长篇正文直接放在复杂模糊背景上
- 没有层级需求时仍让所有区域变成玻璃
- 大面积持续模糊，却没有测试目标设备性能低端机 + 全屏 blur = 卡成 PPT
- 背景过透，导致文字和边界难以识别白字快看不见了
组成结构 · Anatomy
鲜艳背景+
半透明底色+
blur 模糊+
半透白描边=
悬浮软阴影
1背景内容Backdrop背后需要有可感知的明暗或色彩变化，模糊后仍不能干扰前景
2半透明底色Tint透明度按主题和对比度调整；完全不透明时看不到背后的模糊
3背景模糊blur()blur 数值按组件尺寸和背景复杂度调试，并提供无滤镜回退
4边缘高光Edge Light细描边可增强材质边界，颜色和强度要适配明暗主题
5悬浮软阴影Shadow投影可以把浮层从背景中托起，但不要求使用彩色或固定范围
AI 提示词 · Prompt
玻璃拟态界面，鲜艳渐变背景，半透明卡片，backdrop blur 背景模糊，1px 半透明白描边，彩色软阴影，glassmorphism UI, vivid gradient background, translucent cards, backdrop-filter blur, 1px semi-transparent white border, soft colorful shadows典型使用场景
音乐播放器玻璃卡
渐变底登录页
玻璃拟态仪表盘
iOS 式控制中心