玻璃拟态
Glassmorphism
初级通用玻璃拟态（Glassmorphism）是一种让界面元素呈现半透明玻璃质感的设计风格，常结合背景模糊、细边框和阴影。它能让浮在内容之上的卡片显出层次，又保留一点背景氛围，比如图片上方的音乐播放面板。
你可能会说：「我想让图片上的信息卡片像半透明玻璃一样浮起来，还能隐约看到后面的颜色。」
动手看看音乐 App 的正在播放卡片
卡片样式
玻璃拟态的三件套：半透明底色、背后内容被模糊、一圈亮色细边。卡片像一块磨砂玻璃浮在彩色背景上。
要点玻璃拟态靠什么形成层次？
- 1
透出背景但不直接叠字
你可以把卡片想成隔着一层玻璃看背景：背景的颜色能透出来，细节却被模糊处理。因为细节会干扰阅读，所以只有降低背景干扰，前景文字才站得住。
- 2
用边缘和阴影交代位置
半透明卡片容易和背景融在一起。给它轻微的边框、阴影和圆角，用户才更容易看出卡片的范围，以及它位于背景前面，而不是背景本身的一部分。
- 3
根据背景检查文字对比
同一张玻璃卡片放在深色照片和浅色照片上，文字可能一处清楚、一处难读。我们要用实际页面背景检查文字和控件；必要时提高卡片底色的不透明度，而不是只追求更透。
容易混淆的地方
玻璃拟态是一套呈现层次的视觉做法，毛玻璃只是其中常用的背景模糊效果；给一个区域加模糊，不等于整页都用了玻璃拟态。它也不同于新拟态：新拟态主要靠同色系的明暗阴影，让控件看起来从底板凸起或凹下，通常不强调透出背后的内容。
什么时候用
适合用
- 做音乐 App 的播放浮层时，背景是专辑封面，你想保留封面的色彩，同时让控制区与封面分开。
- 做产品官网的首屏时，背景有渐变或图片，你想用少量半透明信息卡片建立前后层次。
- 做 AI 工具的侧边浮动面板时，你希望用户还能感知下方页面，但能清楚找到面板边界。
不适合用
- 做需要长时间阅读的文档编辑器时，正文区更适合稳定的实色背景，减少背景变化对阅读的干扰。
- 做数据密集的财务表格时，单元格和数字更需要清晰区隔，可以用实色、边框和间距组织信息。
- 做必须在各种用户图片上显示的操作按钮时，若无法控制背景，优先用对比稳定的实色按钮。
练一练选一个答案，看看解释
你在做一个以照片为背景的旅行 App，想把地点名称和操作按钮放在照片上的信息卡片里。哪种方案最符合玻璃拟态，也照顾到了可读性？
让 AI 帮你做复制给 AI Agent 直接用
请把旅行 App 照片上的信息卡片做成玻璃拟态：使用半透明底色和背景模糊，配合轻微边框与阴影。保留照片色彩，但确保地点名称和按钮在深浅不同的照片上都清楚；如果对比不足，优先提高卡片底色的不透明度。