前几天，苹果在 WWDC 2025 上发布了全新的设计语言：“Liquid Glass 液态玻璃UI”，这是自 iOS 7 以来最大规模的 UI 升级。

这个液态玻璃的视觉效果，简单来说就是通过模拟真实玻璃的光学特性——光线的折射、反射，还有那种半透明的质感，让整个界面看起来更通透，层次感也更强。就像我们小时候透过玻璃杯底看世界的那种感觉，但是做到了手机界面上。

不过，这种半透明玻璃风格，也确实是个有争议的设计。有人觉得质感爆表、科技感满满，也有人吐槽它牺牲了信息可读性，甚至怀疑苹果是不是想用这种高耗 GPU 效果来「逼你换新机」。

但不管你怎么看，这套视觉风格确实有它的魅力。

Liquid Glass React

一个开源项目，让你也能拥有 Liquid Glass 效果

就在 WWDC 发布后没几天，GitHub 上就冒出一个叫 Liquid Glass React 的开源项目，短短三天就拿到了 1.5K Star。

项目作者是 Vercel 的前工程师 Max Rovensky，实现了一个完整的苹果液态玻璃 UI 效果复刻，而且支持 React 项目一键接入。几个组件就能做出类似苹果官网那种动态光影折射、玻璃边缘弯曲、甚至“冰霜级别”的磨砂玻璃特效。

它的重点是——不仅好看，还真能用。

来看下效果演示

• 光线会根据你的鼠标移动方向发生折射、变化；

• 卡片、按钮等组件边缘会有动态弯曲的视觉反馈；

• 支持弹性、色差、饱和度、圆角等参数调节；

• 比起一些 Canvas 黑魔法，这个效果流畅、简单、可控。

这种交互的“质感”，不是传统 UI 能轻易做出来的。

效果演示：https://liquid-glass.maxrovensky.com/

安装使用

如果你也想在自己的项目里试试这个效果，接入方法非常简单：

首先安装依赖：

npm install liquid-glass-react

然后就可以直接使用了：

import LiquidGlass from 'liquid-glass-react'
​
function App() {
  return (
    <LiquidGlass>
      <div className="p-6">
        <h2>Your content here</h2>
        <p>This will have the liquid glass effect</p>
      </div>
    </LiquidGlass>
  )
}

如果想要更精细的控制，还可以调整各种参数：

<LiquidGlass
  displacementScale={64}
  blurAmount={0.1}
  saturation={130}
  aberrationIntensity={2}
  elasticity={0.35}
  cornerRadius={100}
  padding="8px 16px"
  onClick={() => console.log('Button clicked!')}
>
  <span className="text-white font-medium">Click Me</span>
</LiquidGlass>

项目地址：https://github.com/rdev/liquid-glass-react

总结

苹果每次发布新设计，总会引发争议，但也总会带来一波「设计风潮」的连锁反应。

但是作为产品经理，我也必须考虑实用性的问题。可读性差、资源消耗大这些问题确实存在，对于一些需要高效操作的场景可能并不适合。

不过有了 Liquid Glass React 这样的开源项目，我们至少有了更多的选择空间。可以在合适的场景下使用这种效果来提升用户体验，而不必等苹果的官方支持。

说不定，未来的网页设计真的会朝着这种更加沉浸式、更接近物理世界的方向发展。毕竟，用户对于视觉体验的要求只会越来越高，而技术的发展也让这些曾经只存在于科幻电影中的效果变成了现实。

你觉得这种"液态玻璃"设计是未来趋势还是昙花一现？欢迎在评论区和我分享你的看法！