Huxzhi

Huxzhi

不是工具难用,不是方法难学,而是不知道去向何方

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

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

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

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

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

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

  • 毛玻璃,跟随页面滚动的,卡片内容显示
  • 液态玻璃,是固定在页面不随下面的内容滚动,一些切换按钮
    • 增加了显示内容,一部分原本被遮挡的内容也被显示出来了

部分引用:使用 CSS 和 SVG 实现苹果液态玻璃效果 | 刘念的个人博客