前言

诚如昨日拙作《【设计前沿】iOS 26 设计：用户体验设计专业角度怎么看？》所论，纵使 iOS 26 Beta 版本的评价呈现两极分化，但其蕴含的颠覆性设计理念与令人惊艳的细节雕琢，实则正悄然引领着设计的浪潮。这背后，折射出的是苹果设计师们对数字生命本质的深刻理解与对未来趋势的精准拿捏。

尤其值得称道的是其对细节的极致追求。全新的设计语言，绝非简单的视觉翻新，它致力于构建数字世界与现实世界之间令人惊艳的映射与联动。

而一众设计师们和开发者们也在开始探索利用各种工具，探索如何实现风格，大有不加入就落后的意思🤣。 今天就整理一下ios26发布后，大家如何各显神通，制作液态玻璃效果（Liquid Glass ）的。

Figma实现

Figma效果1

@bnj 使用Figma的径向蒙版 + 模糊 + 纹理，只做了类似的效果。

Figma文件：https://www.figma.com/community/file/1514353062669723333

Figma效果2

@eliteskylu 也只做了一个版本，同时给出了教程。

他的教程步骤如下：

第一步

换一个圆角矩形的Framer。

第二步

添加一些属性，如描边和阴影。

第三步

真正施展魔法的时刻，关键在于纹理和模糊效果的恰当运用。

第四步

现在您可以在里面添加任何您想要的内容。

Figma源文件：https://www.figma.com/design/x9OCRHwdoaUpr0IgTGHzAj/Apple-s-Liquid-Glass-Effect?node-id=1-83&t=ZzKY1gZFZG6YJhm3-0

但是虽然效果不错，但毕竟不是反映物理的折射，所以玻璃的效果还是差强人意。

前端实现

@Luke 用css和svg方式，还原了液体玻璃风格，效果和性能俱佳。

他开源了代码：https://github.com/lucasromerodb/liquid-glass-effect-macos

Webgl实现

要模拟物理详细，webgl是一个很好的技术方案。 @endlesstools使用扭曲和变形特效，效果不错。

Web3D

@luisfraguada 用threejs 模拟了不同ior和扭曲情况下的效果，虽然没有放出成品，但是用这个具备物理引擎的技术，可以轻松还原液体玻璃效果。

软件支持

一众新设计软件也放出了效果。

Framer

@victoria_framer 花了一个小时做了个效果，可以在网页直接交互。

Rive APP

@javoliver88 用Rive APP制作了这个效果，玻璃很通透，可以直接互动，非常酷！

AI辅助设计

使用ComfyUI实现

严格来讲，这还不是液体玻璃，是我之前根据wwdc2025刚放出海报时，训练了一个模型，根据其风格做的图标。

ComfyUI工作流截图，其实使用flux+controlnet控制，然后再低降噪重绘而成。

LoRA模型地址：https://www.liblib.art/modelinfo/b08ee39717714402ac50fca95dd4ea4f?from=personal_page&versionUuid=71fe54311b4b4eefb0f0f2fc7edefc0d

使用gpt-4o-image

钞能力下，就更简单，画这类型的图标，可以说轻而易举，但是可控性稍差点。这块由于太多网友分享了，就不再赘述。

这是之前我用Figma接入gpt的视频。

所以，设计师们，别观望了！行动起来，探索新风格趋势吧！

想获取更多 AI 辅助设计和设计灵感趋势？ 欢迎关注我的公众号（设计小站）：sjxz00。