苹果液态玻璃的前端UI的人机交互设计

Apple 在 6 月的 WWDC 2025 期间推出了 液态玻璃 效果还挺好的，根据开发文档的描述，简单来说就是一种动态界面材质，融合玻璃的光学特性与流体感。

站在 2026 年，不同于 2025 年苹果激进的选择把所有按钮替换成液态玻璃，经过正式发布后广泛的讨论，在液态玻璃下文字展示不清，苹果设计师又做了一些选择性替换，还增加了 Liquid Glass 的选项，透明 和 色调（色调可增加不透明度，并添加更多对比度） 。

液态玻璃最明显的就是，给页面分层，让你明显知道使用液态玻璃的组件是在上方，跟下面的背景是分开

我个人翻看了一下开发文档，和推荐的新设计 Discover how apps are using the new design and Liquid Glass - Design - Apple Developer

现在两种按钮都在用，之前的风格我称为 毛玻璃（背景加高斯模糊）。

• 毛玻璃，跟随页面滚动的，卡片内容显示 backdrop-filter: blur(5px);
• 液态玻璃，是固定在页面不随下面的内容滚动，一些切换按钮
  • 增加了显示内容，一部分原本被遮挡的内容也被显示出来了

这个博客有动态展示效果，但是用到了 chrome 的新 api，所以只能在电脑端显示，使用 CSS 和 SVG 实现苹果液态玻璃效果 | 刘念的个人博客