液态玻璃UI设计教程：从原理到实操，手把手教你完整流程

现在国内外各大UI设计网站都充满了一种“液态玻璃”的全新材质效果，很多小伙伴经常在设计交流群里发问，

放到几年前，想在UI界面里做出这种带物理折射和色散的高逼真材质，太折腾了。但现在的UI设计工具不用那么复杂，今天干脆把踩过的坑和实操步骤整理出来，需要的直接拿去用。

很多人第一眼看到液态玻璃，可能会觉得：这不就是前些年流行的毛玻璃吗？先说明，它跟毛玻璃还真不太一样。

毛玻璃其实大家都用过，本质就是一层背景模糊+透明叠加，看起来有点磨砂质感，但细看其实挺平的。

但

的核心是物理世界的真实感：

它不是简单盖一层效果，是会跟着背景变化，比如滚动页面的时候，里面的图像是会“动”的，有点像真实玻璃那种折射感。有些效果边缘还会泛出一层微微的红蓝色光晕（有点像相机镜头的紫边）。这种光学质感才让它既有厚度又不显笨重。而且如果有文字和控件，依然清晰可见，不会糊成一团。

很多设计师还在手动叠内阴影、外发光、背景模糊、不规则渐变形状遮罩……其实现在不用这么麻烦，UI设计工具就可以轻松实现。最近发现

上线了液态玻璃效果功能，算是把这一套复杂效果做了封装。以前要叠很多层，现在基本一个效果就能出结果，调参空间也还可以，用来快速出稿确实省时间。

下面直接走一遍实际操作，手把手教你怎么做出一张液态玻璃 UI 卡片。

这步很关键的，做玻璃材质，背景一定要花哨一点，对比度高点或者带点3D元素。如果背景纯色或者太素，玻璃根本折射不出什么东西，看起来就干瘪瘪的。

在画布里拖入一张色彩丰富、带有未来感或3D元素的背景图。

踩坑预警：这个载体必须是“容器”（就是Frame/画板，快捷键是A或者F）。别随手画个矩形去加效果，没用的。建好容器后，圆角拉一下，把底色设成纯白（#FFFFFF），透明度先降到30%左右放着。你可以顺手把图标或文字排版上去。

选中刚刚画好的容器，在右侧的属性面板，在【效果】那里点个加号，下拉菜单里直接选「液态玻璃」。到这一步，基本的水晶雏形就出来了，可以点击调整参数。

液态玻璃效果的参数非常专业，不同参数稍微动一点，出来的质感差别会很大。它里面的滑块稍微调一下，感觉完全不一样，分享几个技巧：

除了这几个，还有光源角度和亮度，以及剩下的模糊、亮度和饱和度都比较好理解了。你可以通过光源角度或者亮度调整高光打在玻璃上的位置，再配合背景模糊，把后面的杂乱元素压下去。总之，这些参数只要稍微调一调就好了！你可以多试几次就知道效果了。

这也是刚出来的功能，实操下来有发现几个小限制，顺便给大家避个坑：

还有落地的话目前肯定没法直接导代码，还是得切个PNG或者WebP给开发，或者让前端用特定的CSS/WebGL来实现。

好了，这篇实操记录就分享到这。

从多年前的拟物到扁平化，新拟态到毛玻璃，再到如今的液态玻璃设计，我们都知道，设计趋势是流动变化的。如果你是刚接触液态玻璃设计，可以先用这种方式跑一遍流程，比自己堆效果要高效很多。至少目前用这种方式，应付绝大多数UI场景的液态玻璃需求完全够用了。