最近新开一个WWDC2025系列，把2025新特性整理出来，后续再填充使用实操。这篇写液态玻璃，作为苹果新一代UI设计，其设计了一种新型视觉材质，这种材质通过光学透镜效应来表现层级分离和元素边界。
Meet Liquid Glass
WWDC 2025《Meet Liquid Glass》内容总结
1. 引入与背景
- Liquid Glass 定义：Apple 新一代数字“元材料（meta-material）”，不是单纯模拟物理玻璃，而是通过动态折射、弯曲和塑形光线来呈现流体化、轻盈的界面体验。
- 设计演进脉络：从 Mac OS X 的 Aqua → iOS 7 的实时模糊 → iPhone X 的流体交互 → Dynamic Island 的柔性形态 → visionOS 的沉浸式界面 → 最终形成 Liquid Glass。
2. 视觉与动态特性
Lensing 光学透镜效应
- 通过光线的弯折与聚焦，而不是模糊和散射，来表现层级分离。
- 内容能透过材质清晰显示，同时界面元素具备清晰边界和视觉重量感。
- 元素的显隐不再依赖渐隐，而是通过动态调节光折射来实现“流动”过渡。
流体与交互性
- Liquid Glass 具备液态般的柔韧性：点击、滑动时，界面立即产生光效反馈，像“液体受触摸激活”。
- 交互时 UI 元素可短暂“浮起”，保持静止时则安静不打扰。
- 动画与光效结合，增强了界面“活着”的感觉。
3. 自适应与环境感知
动态环境适配
- 玻璃层实时根据背景动态调整阴影、色调和透明度，确保内容与控件始终清晰可读。
- 可自动在浅色与深色之间切换。
- 元素在扩展（如菜单、侧边栏）时，光效变得更厚重：更深的阴影、更明显的折射。
多平台统一
- 在 iPhone、iPad、Mac 等平台上保持一致的“悬浮层”语言。
- 侧边栏和标签栏通过 Liquid Glass 形成统一的导航体验。
- 支持滚动边缘效果（scroll edge effects），当内容滚动时自动淡出或变暗，保证分层感和可读性。
4. 结构与分层设计
- 分层系统：高光层、阴影层、环境光反射层等多层共同工作。
- 环境响应：设备运动、周围内容颜色会影响光效与材质表现。
- 自动行为：例如窗口失焦时，Liquid Glass 会“退后”以引导用户注意焦点区域。
5. 使用原则与变体
设计规范
- Liquid Glass 应主要用于 导航层和悬浮控件，避免滥用。
- 禁止“玻璃叠玻璃”，避免层级混乱。
- 上层元素可使用透明或活力填充（vibrancy），而不是再次套用 Liquid Glass。
两种变体
- Regular：具备完整自适应与光效，通用型，推荐大多数场景。
- Clear：透明度更高，不具备自适应；适合媒体内容丰富的背景，需要额外调暗层以保证可读性。
6. 色彩与可读性
- Liquid Glass 提供内置的 Tinting（着色）机制：根据背景自动调节色彩亮度与饱和度，保持物理真实感和对比度。
- Tinting 应用于关键元素（如主按钮），而不是全部控件。
- 文本与图标会随背景自动切换浅色/深色。
7. 可访问性支持
- Reduced Transparency：更磨砂化，遮挡更多背景。
- Increased Contrast：采用高对比黑白加描边。
- Reduced Motion：降低动态效果，禁用弹性特性。
- 所有无障碍功能系统级别生效时，Liquid Glass 自动适配。
8. 总结
Liquid Glass 不仅是视觉更新，而是 Apple 跨平台统一设计语言 的新基石：
- 视觉上：轻盈、流体、光学真实。
- 交互上：即时响应、动态反馈。
- 设计上：层级清晰、跨平台统一、适配环境。
- 目标：让软件体验更沉浸、更有机，更贴近用户直觉。
Liquid Glass 开发者实操总结
1. 开发者需要理解的核心定位
- Liquid Glass ≠ 单纯视觉效果
它是 Apple 提供的一种 系统级材质（Material） ，和UIBlurEffect、Material.regular一样，但更动态和智能。 - 跨平台统一 API：iOS 26、iPadOS 26、macOS 26、visionOS 2 都内置支持，开发者无需额外实现复杂的光学效果。
2. SwiftUI 中的用法
基础应用
在 SwiftUI 里，Liquid Glass 会作为新的 Material 类型 提供：
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
// 背景内容
Image("background")
.resizable()
.scaledToFill()
.ignoresSafeArea()
// 使用 Liquid Glass 包裹的控件
VStack {
Text("Hello, Liquid Glass!")
.font(.title)
.padding()
.background(.liquidGlassRegular) // 新增材质类型
.clipShape(RoundedRectangle(cornerRadius: 16))
}
}
}
}
变体选择
.liquidGlassRegular→ 自适应型，推荐大多数情况.liquidGlassClear→ 更透明，适合媒体背景，但需注意文字可读性
3. UIKit 中的用法
UIKit 会在 UIBlurEffect.Style 或 UIMaterial API 基础上新增 Liquid Glass：
import UIKit
let glassView = UIVisualEffectView(effect: UIBlurEffect(style: .liquidGlassRegular))
glassView.frame = CGRect(x: 20, y: 50, width: 200, height: 100)
let label = UILabel(frame: glassView.bounds)
label.text = "Liquid Glass"
label.textAlignment = .center
glassView.contentView.addSubview(label)
view.addSubview(glassView)
⚠️ Apple 强调 避免“玻璃叠玻璃” （即在 Liquid Glass 上再叠一层 Liquid Glass），否则会造成视觉混乱。
4. 最佳实践（根据 Apple HIG）
- 适用场景：导航栏、Tab 栏、侧边栏、浮动按钮、菜单等 悬浮在内容之上的层。
- 避免场景：内容层（如 TableView/List），否则会干扰层级关系。
- 色彩使用：通过内置
tint而不是background(Color)，这样可以保持动态的光学真实感。 - 无障碍兼容：自动支持系统的“减少透明度”、“增加对比度”、“减少动态效果”。
5. UI/UX 设计要点
- 自然过渡：出现/消失不再是淡入淡出，而是通过调节光折射来实现，开发者不需要自己实现过渡动画。
- 触控反馈：点击时会触发光效“能量波”，建议在交互关键点（按钮、菜单）使用 Liquid Glass。
- 跨平台一致性：iPhone、iPad、Mac 都有相同的材质语言，开发时保持一致体验。
6. 未来展望
Liquid Glass 将成为 Apple 新一代界面基石，类似 iOS 7 引入毛玻璃。对于开发者来说：
- 短期：更新现有导航栏、菜单、悬浮控件时，可以直接替换为 Liquid Glass。
- 中期：为多平台 App 构建统一 UI，减少分别适配的工作量。
- 长期：结合 SwiftUI 与 RealityKit，Liquid Glass 可能成为 visionOS 沉浸式 UI 的核心材质。
