Get to know the new design system
Design 入门 0m

认识全新的设计系统

Get to know the new design system

2025年6月9日

在 Apple 官方观看视频

一句话判断

如果你只打算看一场设计相关的 Session，看这场。它定义了 Liquid Glass 在整个系统中的行为规范——不只是图标，而是导航栏、工具栏、控件、字体全部在变。

这场 Session 讲了什么

这是 WWDC 2025 设计语言更新的全景概述。Liquid Glass 不是图标专属特效，而是贯穿整个 Apple 平台的新材质系统。

Session 356 “Get to know the new design system” 是这一场的前导（讲系统级设计更新），而这场 363 更深入地讲解了开发者在自己的 app 中如何落地新设计语言——包括导航栏的半透明处理、工具栏的玻璃质感、控件的高光反馈、以及字体排版在新材质上的可读性处理。

核心理念：Liquid Glass 让 UI 元素获得了类似真实玻璃的光学行为——边缘高光、环境光反射、轻微的景深感。但 Apple 同时强调：内容优先，材质为内容服务而非抢夺注意力。

值得深挖的点

UIKit 和 SwiftUI 的适配策略不同

如果你的 app 主要基于 UIKit，系统控件会自动获得 Liquid Glass 效果，但自定义控件需要手动适配。SwiftUI 侧则更无缝——新的 modifier 和 style 会自动应用玻璃效果。

导航栏的透明度革命

新设计中导航栏默认更加透明，背景内容会透过玻璃材质隐约可见。这意味着你不能再假设导航栏下方有不透明的遮挡——列表项、图片、渐变背景都会和导航栏产生视觉交互。

控件的 specular highlight 反馈

按钮和交互控件在点击时会有 specular highlight 的动态反馈，类似 visionOS 中的交互效果。这不是纯装饰——它提供了物理层面的交互确认感。

可读性是硬约束

Liquid Glass 很好看，但 Apple 反复强调可读性。新系统内置了动态对比度调整机制，确保文字在玻璃材质上仍然清晰。开发者不需要自己处理模糊遮罩，但需要注意文字颜色和层级。

代码片段

// SwiftUI 中获取新设计系统效果——大多数情况下无需额外代码
// 系统控件自动适配 Liquid Glass

// 如果需要微调导航栏透明度
.toolbarBackground(.visible, for: .navigationBar)
.toolbarBackground(.ultraThinMaterial, for: .navigationBar)

// 自定义控件使用 Material 背景
.background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 12))

// 确保文字在玻璃材质上可读
.foregroundStyle(.primary) // 系统会自动调整对比度

最佳实践

  1. 不要手动模拟 Liquid Glass。用系统提供的 Material 和 modifier，不要自己用 Core Animation 搞毛玻璃——系统的实现考虑了性能、可读性和动态适配
  2. 在所有六种外观模式下测试你的 app。尤其是 Clear 和 Tinted 模式，它们可能暴露你 UI 中依赖背景不透明度的设计假设
  3. 关注导航栏下方的内容。新设计中导航栏更透明了，如果你的列表或滚动视图在导航栏下方有重要内容，需要确保它们的组合效果可读
  4. 不要抗拒变化，但也不必全盘接受。如果你的 app 有强烈的设计个性，可以在保持系统控件 Liquid Glass 效果的同时，自定义区域保留自己的风格

还有什么值得关注

  • Session 356 “Get to know the new design system” 是必看的前导 Session，讲的是整个系统的架构变化
  • Session 359 “Design foundations from idea to interface” 聚焦设计方法论
  • Apple 今年更新了所有第一方 app 的设计——从这些更新中可以学到很多实战适配技巧
  • Liquid Glass 在 visionOS 上已经存在一段时间了，2025 年是推广到全平台。如果你做过 visionOS 开发，很多概念是相通的
  • 这次设计更新的力度堪比 iOS 7 的扁平化革命，但策略不同——不是推翻重来，而是在保留信息层级的基础上增加材质维度
Design