随着行业老大哥苹果IOS 26系统的更新，它推出的一项令人惊艳的液态玻璃（Liquid Glass）效果，已在UI设计领域掀起了一波新的设计趋势，越来越多的设计师都开始尝试学习并使用这种设计风格将其呈现在自己的作品中。
之前，UI设计师想要在UI界面中设计这种风格，还需要叠加多个图层且效果还不是很好，今天这篇文章将为你分享什么是液态玻璃，并介绍如何使用Pixso进行液态玻璃设计，助你轻松设计出高质感的UI界面。
1. 什么是液态玻璃效果
液态玻璃效果通过高度透明的毛玻璃材质，结合动态模糊和光影渲染，让界面元素随着滚动和点击等交互而实时变化，从而模拟出真实世界中玻璃材质的光学特性，呈现出物理世界的真实感。具体来说，液态玻璃有以下几个特性：
- 实时响应：随着用户操作，玻璃背景的透明度、反射与折射等效果会智能调整，呈现出流动般的质感。
- 半透明玻璃质感：像玻璃覆盖在内容上，带着轻盈的深度感，界面与内容能自然透出，而不是简单的叠加模糊滤镜，从而增强界面层次与通透性。
- 内容清晰易读：信息传达是第一位，采用动态对比度、智能景深和内容感知模糊等方式，确保文本和关键控件都清晰易读。
2. 如何使用Pixso制作液态玻璃风格
了解了什么是液态玻璃效果，下面Pixso设计师就为大家分享一下，通过Pixso设计工具来快速实现这种效果的方法，详细步骤如下：
第一步：注册并登录Pixso
Pixso是专业的产品设计协作一体化UI/UX设计工具，可在线免费使用，它提供了强大的UI设计功能，可帮助UI设计师快速设计想要的UI界面，以下是Pixso的功能特性：
- 实时协作：Pixso支持多人实时在线编辑同一设计文件，大大提升团队的沟通效率
- UI/UX设计：Pixso提供了UI/UX设计常用的矢量设计工具与交互动效功能，可帮助设计师高效完成UI界面设计与原型制作
- 组件库：Pixso团队成员可共享组件库资源，同步更新，更好的确保设计风格一致性，提升团队工作效率
- 无缝交付：通过Pixso设计的界面可以直接通过链接分享给开发人员快速查看标注，Pixso还提供MCP对接常用的AI工具，实现设计到代码的自动化生成
- AI生成UI界面：Pixso提供的AI工具，可帮助设计师在几分钟内快速生成多个设计方案，寻找设计灵感
第二步：新建Pixso文件
登录Pixso账号后，点击“新建设计文件”按钮，新建一个Pixso账号。
第三步：添加UI背景图片
在Pixso的画布中，直接拖入你需要设计的UI界面的背景图片，以便更好的呈现出液态玻璃效果。
第四步：新建容器
使用Pixso顶部的容器工具，快捷键【A,F】新建一个大小如262x82的容器，并设置填充颜色为#FFFFFF,透明度30%。最后，将图标放置在容器上方，如上图所示。
第五步：添加液态玻璃效果
选中你新建的容器图层，然后在右侧效果属性面板，新建一个“液态玻璃”效果，如上图所示，就可以创建出液态玻璃质感的UI元素效果了。Pixso的液态玻璃效果的参数较多，理解各个参数的作用，可以更快速的创建出满意的效果，以下是各液态玻璃设计的参数详解：
- 光源角度/亮度：光线投射到容器上的方向（高光在容器上的着重点）以及高光强度
- 均匀光照：光线均匀投射在容器上（容器外框上的亮度是均匀的）
- 折射：控制光线沿着容器外框边缘弯曲的方式。折射值越高，就会越明显地扭曲周围的元素
- 深度：改变玻璃材质的厚度外观，以在外框边缘提供更明显的边缘效果
- 色散：增加色散，在外框边缘添加一丝色差效果。与折射结合搭配使用效果更明显
- 模糊：调整液态玻璃框中的背景模糊程度，使玻璃元素在繁杂背景中更加突出，从而提供更好的对比效果
- 亮度：调整液态玻璃效果的整体明亮程度，影响整体光感
- 饱和度：控制液态玻璃效果的色彩强度，可营造鲜艳或柔和的视觉效果
3. 使用Pixso进行液态玻璃设计的注意事项
除了理解液态玻璃的参数，在使用Pixso的液态玻璃效果时，还要注意以下几点液态玻璃教程的重点：
- Pixso的液态玻璃效果暂时只可以给容器、容器组件、实例以及组件集添加，不能用于矢量图层或文本图层
- 无法导出为SVG
- 圆角半径必须一致，不能用在混合角半径
- 液态玻璃效果不重叠
- 暂时不能在原型演示中使用
总结
以上就是本次Pixso设计师为你分享的关于液态玻璃设计风格的全部内容了，可以预见未来这种设计风格将为UI界面带来更加全新的质感和交互体验。作为UI设计师，尽早掌握这种风格的制作，将其应用于自己的设计作品，提升视觉吸引力是非常必要的，👉立即体验Pixso，让设计更加智能高效！
