如果你在 2025 年后打开过任何一款新发布的应用或操作系统，你一定见过它——那种像磨砂玻璃一样半透明的界面，背景的色块在面板下若隐若现，光影在边缘处微妙地流转。它不像传统扁平设计那样生硬，也不像拟物设计那样沉重。它轻盈、通透，仿佛有一层液态的光在界面中流动。
这就是液体玻璃设计（Liquid Glass Design）——过去两年间席卷 UI/UX 领域的最强视觉风潮。而这场风潮的源头，可以清晰地追溯到一家公司：Apple。
从 macOS Big Sur 的半透明菜单栏，到 iOS 的逐步渗透，到 visionOS 中漂浮在空间里的玻璃窗口，再到 WWDC 2026 上 iOS 26 的全面爆发——Apple 用六年时间，系统性地将”玻璃”从一个装饰性的视觉技巧，提升为贯穿其全部操作系统的一级设计语言。今天互联网上每一块毛玻璃面板、每一个 backdrop-filter 的模糊参数，或多或少都在回应 Apple 最初提出的那个问题：如果界面不是画在屏幕上的，而是浮在现实之上的，它应该长什么样？
什么是液体玻璃设计？
液体玻璃设计并非一个严格的术语，而是设计社区对一类视觉语言的统称。它的核心特征可以归纳为三点：半透明、深度感、动态光影。
与传统的”毛玻璃效果”（Frosted Glass）不同，液体玻璃更强调材质的”厚度”和”折射”。想象一块冰——毛玻璃是冰的表面被磨砂处理后的样子，而液体玻璃是冰的内部，你能看到光线在其中弯折、散射，看到背后的物体被扭曲但又不至于完全模糊。它是一种有体积的透明。
谁点燃了这场风潮：Apple 的系统性材质革命
液体玻璃设计不是一夜之间冒出来的。但如果要为它找一个最重要的推手，答案毫无争议：Apple。
这是一场横跨五年的、系统性的材质实验。让我们按时间线梳理 Apple 是如何一步步把”玻璃”从点缀变成主角的。
2020 · macOS Big Sur：玻璃的宣言
Big Sur 是 Apple 设计史上一个分水岭式的版本。在那之前，macOS 的视觉语言已经十年未变。Big Sur 一次性引入了大量半透明元素：菜单栏变成了半透明的毛玻璃，Dock 栏悬浮在桌面之上，Finder 侧边栏透着底层壁纸的色彩。这不是零散的装饰——这是一份明确的设计宣言：透明度不再是点缀，而是系统视觉层级的骨架。
2021–2025 · iOS 持续演化：玻璃渗透每一个角落
iOS 的玻璃化是一个渐进但不可逆的过程。从 iOS 15 的 Safari 半透明标签栏，到 iOS 16 的锁屏深度效果（让时间数字”浮”在壁纸人物之前），再到 iOS 17 的联系人海报和 StandBy 模式的磨砂时钟——每一次迭代都在把玻璃材质推向更核心的位置。到了 iOS 18，控制中心已经完全采用了可调整透明度的磨砂面板，用户甚至可以在设置中自定义玻璃的”厚度”。
2026 · iOS 26：玻璃的全面爆发
如果说之前五年是量变，iOS 26 就是质变。
在 WWDC 2026 上，Apple 展示了自 iOS 7 扁平化改革以来最大规模的一次视觉重构。iOS 26 将 visionOS 的玻璃材质语言完整地移植到了 iPhone 上——通知不再是卡片，而是一块块浮在壁纸上方的半透明玻璃面板；设置、音乐、信息等系统应用的背景全部采用了多层玻璃叠加，每一层都有独立的模糊半径和折射参数；控制中心的亮度与音量滑块更是被设计成真正的”玻璃柱体”，手指滑动时，光线的折射角度随之实时变化。
更关键的是，Apple 在 iOS 26 中首次向第三方开发者开放了系统级玻璃材质 API（GlassMaterialKit）。开发者不再需要自己模拟 blur 和 transparency——只需调用一个 SwiftUI 修饰符 .glassMaterial(.regular)，就能获得与系统原生完全一致的、动态适应背景环境的玻璃面板。这一举动意味着液体玻璃设计从”Apple 独享的设计语言”变成了整个 iOS 生态的默认视觉标准。
iOS 26 是液体玻璃风潮真正的爆发点。因为 iPhone 的用户基数——全球超过 15 亿台活跃设备——决定了任何在 iOS 上成为默认语言的设计风格，都会在几个月内变成全球设计行业的通用语法。WWDC 2026 主题演讲结束后的 24 小时内，Figma 社区中标记为”iOS 26 Glass”的模板数量暴增了 400%。
2023–2025 · visionOS：玻璃的终极形态
如果说 macOS 和 iOS 是把玻璃贴在屏幕上，visionOS 就是把屏幕本身变成了玻璃。在 visionOS 中，每一个窗口都是一块浮在物理空间中的半透明玻璃板——它透出你身后的墙壁、家具、光线。Apple 将其官方命名为“玻璃材质”（Glass Material），并赋予了它全新的能力：根据环境光动态调整亮度和色温，从不同角度观看时呈现不同的折射。这不是 UI 效果，这是将光学物理引入了界面设计。
visionOS 的玻璃材质是整个液体玻璃风潮的定调之作。它向整个设计行业宣告了一件事：玻璃不是一种风格，而是一种空间逻辑。不久之后，从 Figma 的社区模板到 Web 端的设计系统，各行各业的玻璃设计几乎都在向 visionOS 的视觉规范靠拢。
跟随者与放大器
Apple 定义了语言，其他玩家则在各自的领域将其放大。
Microsoft 的 Fluent Design 是另一个值得尊敬的探索者。早在 2017 年，微软就推出了 Acrylic（亚克力）材质，Windows 11 中的 Mica 材质进一步细化了透明度层级。但有趣的是，Fluent Design 的玻璃更多停留在系统 Chrome 层面（标题栏、侧边栏），而没有像 Apple 那样将玻璃作为内容容器本身的基础材质。两者的区别类似于：微软用玻璃做画框，Apple 用玻璃做画布。
Web 端则是这场风潮的最大受益者。CSS backdrop-filter 属性的全面普及（2022 年后所有主流浏览器完美支持）让前端开发者可以用几行代码实现毛玻璃效果。技术门槛的消失直接引爆了设计民主化——从个人博客到 SaaS 产品，玻璃面板无处不在。但追根溯源，Web 端大规模采用玻璃效果的时间点，恰好紧随 Apple 在 WWDC 上展示 visionOS 之后。这不是巧合。
为什么是”液体”？
命名从来不是小事。为什么不是”深度玻璃”或”3D 玻璃”，而是”液体玻璃”？
这个”液体”不是指材质真的在流动，而是指光在材质中的行为方式变得像液体一样动态。传统设计中，一个按钮的颜色是固定的。但在液体玻璃设计中，同一个按钮出现在不同的背景上时，它的颜色、透明度、甚至边缘的发散方式都会微妙地变化。它不是静态的，而是在”适应”它的环境。
这种动态适应背后是实时环境采样技术。visionOS 的窗口会读取其背后物理环境的平均亮度和色温，然后实时调整自身材质参数。在 Web 端，类似的效果通过 CSS 的 color-mix()、oklch() 色彩空间配合 backdrop-filter 来实现。界面不再是画在屏幕上的，而是长在屏幕上的——它和背景的关系是动态的、有机的。
这正是”液体”一词的妙处：它描述的是一种会呼吸的设计。
技术基石：三行 CSS 撬动的美学革命
在 CSS 层面，液体玻璃效果的核心通常只需要三个属性：
.glass-panel {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
}短短三行，但其中蕴含了液体玻璃的全部设计哲学：
- background: rgba(255,255,255,0.15) —— 极低透明度的白色底色，提供材质的”实体感”。如果没有这层底色，纯 blur 会显得像一块脏玻璃。
- backdrop-filter: blur(20px) saturate(180%) —— 对背后内容进行高斯模糊并提升饱和度。saturate 参数是点睛之笔：它让透过的颜色更鲜艳，避免了纯模糊带来的”灰蒙蒙”观感。
- border: 1px solid rgba(…) —— 极细的半透明边框，定义了玻璃面板的边缘。没有这条边，面板会”消散”在背景中。
更高级的实现还会加入多层 box-shadow 来模拟玻璃的厚度感——内阴影制造折射，外阴影制造悬浮。配合 @supports (backdrop-filter: blur()) 做优雅降级，即使在老旧浏览器上也能保持可用的视觉效果。
设计实践：不是所有透明都叫液体玻璃
风潮之下，我们也看到了大量滥用。有些设计师把 backdrop-filter: blur() 往任何元素上随意一套，结果界面变成了一个模糊的万花筒——文字看不清，层次理不顺，用户只想关掉页面。
好的液体玻璃设计遵循几条铁律：
第一，透明要有梯度。不是所有玻璃面板都应该同样透明。最顶层的弹窗可以做到 80% 的透明度，但底层的内容卡片应该只有 30%。这种透明度梯度制造了空间感——用户不需要任何视觉提示就能感知到哪个元素离自己更”近”。
第二，给文字足够的安全区。玻璃面板上的文字必须有足够的对比度。常用的手法包括：在文字下方垫一层极浅的纯色底（text-shadow background）、使用稍粗的字重、或者在全透明面板上使用深色文字而非白色。
第三，让边缘说话。玻璃材质的边界是它唯一”确认自己存在”的地方。一条 1px 的半透明白色描边，或者角落处微妙的高光渐变，这些细节让玻璃从”看不见的东西”变成了”刚刚好能看见的东西”。
第四，尊重无障碍。对于有视力障碍的用户，过度模糊的界面可能是灾难。始终为 prefers-reduced-transparency 媒体查询提供降级方案，确保在减少透明度的系统设置下，界面仍然清晰可用。
从趋势到标准：液体玻璃的未来
2025 年末，W3C 的 CSS 工作组开始讨论将更高级的材质效果标准化。提案中包括 material-filter 属性——一个设想中的原生 CSS 属性，能够一站式实现模糊、折射、色散和光影偏移。如果这个提案落地，液体玻璃设计将从”技巧”变成”基础设施”。
与此同时，Apple 在 WWDC 2025 上展示了 visionOS 3 的全新材质系统，引入了动态折射（Dynamic Refraction）——玻璃面板不再只是模糊背景，而是像真实玻璃一样根据视角改变折射角度。虽然这项技术目前依赖 visionOS 的深度传感器，但它在交互设计领域投下了一颗重磅炸弹。
在 Web 端，Chrome 团队正在实验 backdrop-filter: glass() 的原生实现，预计在 2026 年底进入 Origin Trial。如果顺利，未来前端开发者不再需要手动组合 blur + saturate + shadow，浏览器引擎将直接在 GPU 层面完成玻璃材质的渲染，性能提升可达 3-5 倍。
这不仅仅是一种风格
回顾设计史，每一个时代的标志性视觉语言都折射了那个时代的技术条件和审美焦虑。拟物设计对应的是触屏时代的黎明——人们需要用熟悉的物理隐喻来理解这个全新的玻璃板。扁平设计对应的是信息爆炸——当内容太多，装饰就成了负担。
而液体玻璃设计，对应的也许是虚实融合的时代焦虑。当数字界面越来越多地叠加在物理世界上（AR/VR），当”屏幕”这个概念本身开始溶解，我们需要一种视觉语言来表达”这里有一个界面，但它尊重你背后的世界”。它不是一堵墙，而是一扇窗。一片冰。一道可以看穿但不能穿透的光。
在整个行业中，只有 Apple 真正从操作系统层面完成了这场材质革命。这不是给旧界面套一层 blur 的 CSS 属性——这是从 macOS 到 iOS 再到 visionOS，一套自上而下的、跨越桌面、移动和空间计算的设计哲学重塑。Apple 做的不是”用了玻璃效果”，而是“让玻璃成为设计本身”。这是引领者和跟随者之间的本质区别。
当其他厂商还在争论”毛玻璃会不会影响可读性”的时候，Apple 已经在教十亿用户：越透明的，离你越近。
而今天你在任何网页、任何应用中看到的那层半透明的光，归根结底，都是同一束从 Cupertino 射出来的光。
（本文写于 2026 年 6 月，技术细节以当时最新标准为准。）
0 条评论