Apple 在 WWDC25 公布了 Liquid Glass 与 Xcode 26 beta。首批 iOS 26 和 SwiftUI 新 API 仍处于 beta,名称、行为、可用性与视觉细节都可能变化。适合做的是理解设计层级并建立可回退的实验分支,而不是立刻承诺生产界面的最终像素。

玻璃是功能层,不是背景纹理

Liquid Glass 最适合导航、工具栏和浮动控制等交互层。内容仍应保持清晰,让图片、文字和数据成为视觉主体。如果每张卡片、每一行列表和每个背景都叠加玻璃,层级会消失,透明与模糊也会增加阅读负担。

迁移时先让系统组件自然采用新设计。NavigationStack、toolbar、sheet 和标准按钮包含平台已经处理的形状、动画与可访问性。只有自定义控制确实需要与这些层级一致时,才添加玻璃效果。

struct AddButton: View {
    let action: () -> Void

    var body: some View {
        if #available(iOS 26.0, *) {
            Button(action: action) {
                Label("Add", systemImage: "plus")
                    .padding(.horizontal, 16)
                    .padding(.vertical, 10)
            }
            .glassEffect(.regular.interactive(), in: .capsule)
        } else {
            Button(action: action) {
                Label("Add", systemImage: "plus")
                    .padding(.horizontal, 16)
                    .padding(.vertical, 10)
            }
            .background(.thinMaterial, in: Capsule())
        }
    }
}

可用性分支让同一功能保留旧系统实现。不要用版本字符串或设备型号猜测能力,交给 #available。在 beta 期间还应把新外观放进容易移除的组件边界,API 若调整不会扩散到所有页面。

先删除旧装饰

直接在旧卡片上加玻璃通常会得到双重阴影、边框和材料。先审视已有背景、圆角、描边和自定义 toolbar:哪些是为了弥补旧系统层级,哪些代表品牌或业务状态?删除冗余装饰后再应用新材料,比继续叠加 modifier 更容易得到清楚结果。

玻璃后面的内容会影响对比度,因此不能只在一张静态浅色背景上检查。测试照片、滚动内容、浅色和深色模式,以及“增强对比度”“降低透明度”。文本和图标必须在最差背景上仍然可识别。颜色不应成为唯一状态提示。

动画服务于连续性

Liquid Glass 的形态变化可以帮助用户理解一个控制如何移动或展开,但不应成为每次操作的表演。保持稳定身份,避免同时改变位置、尺寸、颜色和层级。开启“降低动态效果”后检查替代过渡,确保功能不依赖大范围形变才能被理解。

性能也需要真机验证。多层模糊、滚动内容和持续动画组合时,模拟器的结果不足以代表设备。用 Instruments 观察卡顿与能耗,再决定是否减少玻璃区域或动画频率,不要提前宣称新材料“没有性能成本”。

建立可回退的迁移顺序

建议从一个次要页面开始:先升级 Xcode 26 beta 并保留可构建分支;使用系统导航和 toolbar;删除重复装饰;只为一个自定义交互层增加玻璃;完成 VoiceOver、动态字体、对比度、减少透明度与减少动态效果测试;最后才扩大范围。

Liquid Glass 的首要问题不是“哪个 modifier 能让界面发亮”,而是“哪些元素属于持久内容,哪些属于浮在内容之上的操作”。先回答层级问题,再选择材料,SwiftUI 界面才会在新设计中保持清楚而不是变得透明。