# 液态玻璃（Liquid Glass）

镜语 · 版式与界面 / 材质与质感

- 别名：Liquid Glass、iOS 26 风格、液体玻璃、苹果新玻璃
- 口语：「iOS 26 那种水滴一样的玻璃按钮」「底栏像一块会折射的玻璃」「玻璃边缘会把后面的东西弯过去」
- 一句话：Apple 2025 年推出的界面材质：边缘折射、高光流动，控件浮在内容之上
- 是什么：液态玻璃（Liquid Glass）是 Apple 2025 年在 iOS 26、macOS Tahoe 等系统中推出的界面材质。它像一块有厚度的透镜：边缘把后面的内容折射弯曲，表面高光随动作流动，颜色从下面的内容中取得；工具栏和标签栏浮在内容上方，内容可以在它下面滚过
- 缺了就不像：边缘折射弯曲背景；流动的边缘高光；控件浮在内容之上
- 加了更像：胶囊形标签栏；会形变的选中水滴；随内容取色
- 适合用在：仿 iOS 26 的 App 界面、视频里的手机屏幕录制和样机；照片、地图、视频为主的界面，让控件浮在内容上又不完全挡住；和毛玻璃界面并排讲解苹果设计语言的变化
- 看哪里：上下滚动照片，看底部胶囊标签栏：照片经过时，栏的边缘会把画面放大、弯曲（Chrome 类浏览器能看到折射，其他浏览器只显示模糊）。点不同标签，选中的那颗「水滴」会滑过去并在途中拉长；按钮边缘有一圈亮边和内侧高光，像真的玻璃厚度
- 注意：它是给控件和导航层用的材质，不要把整块正文都做成液态玻璃；内容很花时文字可读性会下降，系统会自动加深或调整色调；自己实现时需要同样的保护；不要把普通 backdrop-filter 模糊称为液态玻璃，缺少折射与动态高光就只是毛玻璃
- 描述示例：做一个 Apple 液态玻璃风格（Liquid Glass，iOS 26）的照片主页：照片全屏铺满并可滚动，控件浮在内容之上；底部是一条胶囊形标签栏，像一块透明厚玻璃——轻微模糊、边缘把下面的画面折射放大，顶部和左上边缘有亮白高光，内侧有细微暗边；选中标签是一颗会滑动、拉伸的玻璃水滴；顶部按钮是圆形玻璃按钮；材质颜色随下面的照片变化，整体通透、湿润、有厚度
- 易混：
  - [玻璃拟态](https://idea.ameng.dev/terms/glassmorphism.md)：毛玻璃是平的模糊层；液态玻璃有透镜厚度，边缘会折射和反光
  - [拟物化](https://idea.ameng.dev/terms/skeuomorphism.md)：液态玻璃模仿的是光学性质，而不是具体物件的外观
- 相关：[弥散渐变](https://idea.ameng.dev/terms/mesh-gradient.md)、[水面倒影](https://idea.ameng.dev/terms/reflection.md)、[置换扭曲](https://idea.ameng.dev/terms/displacement-map.md)

## 来源与延伸阅读

- [Apple Developer · Liquid Glass 技术概览](https://developer.apple.com/documentation/technologyoverviews/liquid-glass)
- [Apple Newsroom · 2025 年新软件设计发布](https://www.apple.com/newsroom/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/)
- [Apple HIG · Materials](https://developer.apple.com/design/human-interface-guidelines/materials)

网页版（含演示）：https://idea.ameng.dev/terms/liquid-glass