设计新动态

一句话判断

如果你只做一件事：升级 SDK，让系统控件自动获得 Liquid Glass 效果，其他的适配可以慢慢来。

这场 Session 讲了什么

iOS 7 那年我们把拟物化（Skeuomorphism）扔掉了，换来了扁平设计。十年后 Apple 往回走了一步——不是回到拟物，而是给扁平的界面加了一层物理质感。Liquid Glass 是这套新视觉语言的核心：控件不再是贴在内容上面的一张半透明贴纸，它会根据底下内容的颜色和亮度实时调整折射效果。你打开一个浅色背景的页面，导航栏会泛出冷调光泽；切到深色内容，它跟着变暖。这种动态响应让界面层级感更”物理”了，但也意味着你以前写的那些自定义半透明控件可能需要重新审视。

图标系统也跟着变了。以前你交一张 1024x1024 的图就完事，现在 Apple 想让你交”结构”——前景、背景、高光分层，系统自己组合出亮色、暗色、Tinted、Liquid Glass 四种模式下的最终样子。Icon Composer 是配合这个思路出的工具，设计师和开发者在 Xcode 里就能完成图标的新风格适配，不用再为每种模式各导一套图。

SF Symbols 7 带来了 Variable Color 动画，简单说就是图标可以”动着表达状态”了。一个下载图标能用颜色渐变显示进度，一个 Wi-Fi 图标能用逐层着色表示正在连接。这类微交互以前要么自己写动画，要么找 Lottie，现在用系统符号就能搞定，而且和周围控件的视觉语言天然统一。

值得深挖的点

Liquid Glass 到底改变了什么

表面上看，Liquid Glass 就是把 Blur（毛玻璃）换成了更好看的折射效果。但仔细想，这改变了用户对”层级”的感知方式。

旧方案里，一个浮在列表上方的导航栏，用户靠模糊程度和透明度来判断”这个东西在上面”。这是一种平面化的暗示——两张纸叠在一起，上面那张半透明。Liquid Glass 换了一种物理隐喻：一束光穿过玻璃，折射出下面的颜色。层次感更强，但也更依赖下方内容的质量。

Trade-off 在于：如果你的页面背景是纯白或纯黑，折射效果几乎没有可折射的内容，控件会退化成一种”带光泽的半透明”——和旧方案差别不大，甚至可能因为光泽纹理显得多余。反过来，如果你的背景是复杂的彩色图片，折射效果会非常出彩，但也可能干扰内容阅读。Apple 的解决方案是系统级的自动调整，但这个”自动”不一定永远符合你的设计意图。

对开发者的实际影响是：系统控件（Tab Bar、Navigation Bar、Toolbar）会自动适配，你什么都不用做。但如果你自己用 .ultraThinMaterial 或 UIVisualEffectView 实现了自定义浮层，升级后可能会发现和系统控件的视觉风格不一致。这种不一致会让用户觉得你的 App “哪里怪怪的”，但又说不上来。

多层图标架构的取舍

分层图标的好处很明确：你维护一套素材，系统帮你生成四种外观模式的渲染结果。代价是什么？首先是工作流的变化——设计师需要从”出一张终稿图”变成”拆分图层并理解每层的语义”。Icon Composer 降低了门槛，但团队协作流程需要调整。

其次是控制力的让渡。以前你可以在深色模式下对图标做精细调整，比如把某个线条加粗、把某个颜色换成更亮的替代色。现在系统自动合成，你只能在”分层素材”这个粒度上做干预。对于品牌标识要求极高的应用——比如金融类 App 的 Logo——这种自动合成不一定能满足要求。Apple 留了手动覆盖的后路，但那意味着你要为每种模式单独出图，分层的红利就没了。

最后是包体积。分层素材理论上比四张独立图片更小（因为层可以复用），但如果你的应用已经有大量图片资源，多出来的图层定义文件也需要评估。

代码片段

// 场景：让系统控件自动获得 Liquid Glass 效果
// 做法：什么都不做。升级到 iOS 19 SDK，系统控件自动适配。
// 坑：如果你之前用 .background(.ultraThinMaterial) 自定义了浮层，
// 它不会自动切换到 Liquid Glass 风格，需要改用系统提供的材质 API。
NavigationStack {
    List(items) { item in
        ItemRow(item: item)
    }
    .navigationTitle("我的应用")
}

// 场景：用 Variable Color 动画表达网络状态
import SwiftUI

struct NetworkStatusView: View {
    @State private var isConnected = false

    var body: some View {
        Image(systemName: "wifi")
            .symbolEffect(
                .variableColor.iterative,  // 逐层着色，适合"进行中"
                isActive: isConnected
            )
            .font(.system(size: 48))
            .onTapGesture { isConnected.toggle() }
    }
}
// 坑：iterative 是逐层循环着色，cumulative 是逐层累积着色。
// 选错了视觉含义会完全不同——iterative 像"扫描"，cumulative 像"加载"。

// 场景：检查当前是否在 Liquid Glass 环境下运行
// 用于决定自定义控件的渲染策略
import SwiftUI

struct AdaptiveOverlay: View {
    @Environment(\.displayScale) var displayScale

    var body: some View {
        // 优先使用系统材质，它会自动跟随 Liquid Glass 风格
        RoundedRectangle(cornerRadius: 12)
            .fill(.regularMaterial)  // 而非 .ultraThinMaterial 或自定义颜色
            .overlay(Text("浮层内容"))
    }
}
// 坑：.regularMaterial 在 Liquid Glass 下会自动调整折射参数，
// 但自定义 Color + opacity 的组合不会。

最佳实践

先把 Xcode 升级到最新版本，编译跑一遍，看看系统控件自动变成什么样。大概率会觉得”还不错”，然后会发现几个自定义控件和新风格格格不入。

第二步，把所有 .ultraThinMaterial、.thinMaterial 这类手动材质的用法过一遍，判断它们是否可以换成系统控件的默认行为。很多时候当初用自定义材质是因为系统控件不够灵活，但现在 Apple 的控件能力在增强，也许可以少写点自定义代码。

图标的事建议缓一缓。除非 App 正好要发新版，否则没有必要为了 Liquid Glass 专门重做图标。等 Icon Composer 的工作流稳定了，设计师熟悉分层逻辑了，再统一迁移也不迟。先让系统控件的变化覆盖大部分视觉更新，用户感知到的是”这个 App 跟着系统一起变新了”，而不是”怎么图标和界面风格不搭”。

不要试图关闭 Liquid Glass 效果来保持旧外观。用户升级系统后，所有原生 App 都是新风格，如果 App 还在用旧风格，反而显得突兀。

还有什么值得关注

• SF Symbols 7 的符号库又扩充了一批，如果你之前用自定义图标替代系统符号，值得重新检查一遍是否有现成的了。
• Icon Composer 现在内置于 Xcode，设计师可以直接在开发环境里预览图标在不同模式下的效果，省掉了来回导图的沟通成本。
• Design System Framework 统一了色彩、排版、间距的 API 命名，第三方应用接入系统视觉一致性变得更容易，但这也意味着”故意不一样”的设计选择会更显眼。