WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Build a SwiftUI app with the new design system

Build a SwiftUI app with the new design system

SwiftUIDesign
观看原视频

Highlight

这是一个 Code-along 类型的实操 Session，带着开发者从零搭建一个适配 Liquid Glass 新设计系统的 SwiftUI app，重点放在落地步骤而非设计理念。

核心内容

每年 WWDC 之后，团队里总有人接到任务：把现有 SwiftUI app 升级到新版系统的视觉语言。过去几年，这种升级多半意味着改一堆颜色、调一堆间距、读一遍 Human Interface Guidelines，工作量大但成就感低。2025 年的 Liquid Glass 设计系统对开发者更友好——大部分标准控件会自动获得新外观，但要把 app 完整调到一致水平，仍然要懂得新增的 modifier 和材质规则。

这个 Session 把这个升级过程拆成了 Code-along 形式：一边讲一边写。从一个普通 SwiftUI app 出发，逐步引入新设计系统中的关键能力——导航结构、工具栏、控件、自定义视图的玻璃材质适配、跨平台一致性。配套资源里包含一个完整的 Landmarks 示例工程，可以对照着看每一步改了哪里。它解决的痛点是「文档零散、不知道从哪下手」：用一个完整 app 把所有要点串成顺序，开发者跟一遍就能在自己项目里复刻。

详细内容

Session 配套的官方资源是开发者跟做这个 Code-along 的主要参考。三份资源各司其职：

  • 《Adopting Liquid Glass》：技术综述，讲清楚新设计语言对 app 整体结构的影响。
  • 《Applying Liquid Glass to custom views》：自定义视图如何套上新材质，避免硬编码颜色翻车。
  • 《Landmarks: Building an app with Liquid Glass》：完整可下载示例工程，对应 Code-along 的最终产物。

Code-along 的推荐做法是：先把示例工程跑起来，对照视频每一段的 timestamp 翻到对应代码位置，看 Apple 工程师在那一刻改了哪一行。这种「看视频→翻代码→在自己 app 里复刻」的循环，比单纯读文档高效得多。

由于本 Session 偏 Design 与流程演示，技术 API 的细节集中在姊妹 Session 323（Build a SwiftUI app with the new design）中，那里给出了 28 段官方代码片段，覆盖 Segmented Picker、Inspector、Tab bar 折叠、自定义玻璃材质等典型场景。建议把 402 当成「带读员」，把 323 当成「API 手册」搭配看。

核心启发

  • 做什么：把现有 SwiftUI app 用 Xcode 26 重新构建一次，记录哪些视图自动获得新外观、哪些需要手动适配
    • 为什么值得做：90% 的 Liquid Glass 效果对标准控件免费，先看默认结果能省下大量返工时间
    • 怎么开始：开一个 feature branch，仅替换 Xcode 版本和 deployment target，不动业务代码，截屏对比
  • 做什么：建立 semantic color 审计清单，把项目里所有硬编码 Color(red:green:blue:) 改成 .primary / .secondary / .tint 等语义色
    • 为什么值得做：Clear 与 Tinted 等新外观下，硬编码颜色对比度无法保证，semantic color 由系统自动调节
    • 怎么开始：用 Xcode 的搜索规则匹配所有 Color(red:、UIColor(red:，按视图归类，一次替换一个屏幕
  • 做什么：在 PR 模板里加一条「六种外观模式截图」检查项，覆盖 Light/Dark/Clear light/Clear dark/Tinted light/Tinted dark
    • 为什么值得做：Liquid Glass 的视觉效果对外观切换敏感，单一模式通过不代表全模式通过
    • 怎么开始：用 SwiftUI Preview 的 preferredColorScheme 与外观切换 API 写一个 PreviewProvider 模板，团队复用
  • 做什么：跟着 Landmarks 示例工程逐章重做一遍，把每章对应的 modifier 和资源记到团队 wiki
    • 为什么值得做：示例工程把分散在多个 Session 的 API 串成完整 app，是新手最快的入口
    • 怎么开始：从 Apple 文档下载 Landmarks 工程，按 Code-along 章节顺序对照视频逐段复现

关联 Session

评论

GitHub Issues · utterances