使用全新设计系统构建 SwiftUI App

大家好 我叫 Franck 是 SwiftUI 团队的一名工程师 在这个视频中 你将了解如何 用新的设计系统构建一个出色的 App iOS 26 和 macOS Tahoe 对 App 的外观和风格 以及系统体验进行了重大更新 这些更新围绕的核心是 一种用于控件和导航元素的 全新自适应材质 名为 Liquid Glass 它受玻璃光学特性和液体流动性 的启发 旨在打造一种轻盈且富有动态感的 材质 帮助提升各类组件中底层内容的 视觉表现力 在你滚动浏览内容时 玻璃材质会自适应下面的内容 从浅色变为深色 所有平台的外观焕然一新 控件在交互期间显得栩栩如生 现在 诸如开关、 分段选择器

以及滑块 等控件在交互期间会变为 液态玻璃 打造出一种赏心悦目的精彩体验！ 这些更新适用于你的 App 运行所在的所有平台 请观看“了解 Liquid Glass” 以便深入了解 这个全新材质的设计 然后 观看“了解全新设计系统” 以便了解与新设计有关的最佳实践 有时在生活中 要想思路清晰 并专注于真正重要的事情 你可能需要重塑自我 从宏观角度看待问题 今天 我将把这个理念应用于 “Landmarks”App 这是 Apple 开发者网站上 提供的示例项目 我将展示所有 Apple 平台通用的 全新设计系统的各个元素 通过采用全新 API 我会让 “Landmarks”App 的布局更加 清晰并突出重点 当你使用 Xcode 26 SDK 构建 App 时 你会注意到整个 UI 的变化 首先 我将介绍“TabView”和 “NavigationSplitView”等 结构化 App 组件的更新 然后 我将介绍工具栏的 新外观和行为 接下来 我将分享搜索体验方面的 更新 这些更新提升了一致性和易用性 随后 我将展示 Liquid Glass 如何让控件栩栩如生 最后 我将介绍如何在你自己的 自定 UI 元素中 采用玻璃材质

你会自动获得这五个方面的改进 还会获得新的 API 来帮助你进一步自定体验 App 结构是指一系列 API 它们定义了用户如何浏览你的 App

这些 API 包括 “NavigationSplitView”、 “TabView”和表单等 视图和修饰符 这些成员中的每一个都针对 新的设计系统进行了优化 “NavigationSplitView”用于浏览 一个明确定义的层次结构 这个结构中可能包含很多根类别

它们现在有一个 Liquid Glass 边栏 漂浮在内容的上方 “Landmarks”中这个令人叹为观止 的主页横幅体现了这一点 粉色花朵在边栏的映衬下 折射出迷人的光彩 但无论边栏效果有多炫酷 “Landmarks”团队奔赴所有这些 梦幻之地并精心拍摄出壮观的图片 绝不是为了让这些照片看起来 好像被裁切过！ 利用新的 “backgroundExtensionEffect” 修饰符 视图可以扩展到安全区域 的外部 而不会裁剪其中的内容

如果我将边栏暂时隐藏 你会看到它的后面发生了什么 图像在安全区域之外被镜像 并进行了模糊化处理 图案已扩展并且图案的 所有内容均保持可见状态 全新设计让检查器大放异彩 呈现出更多的 Liquid Glass 效果 检查器在“Landmarks”中 位于边栏的对面 它以更微妙的分层来托管内容 这会将检查器与相关选择项相关联

“TabViews”提供了持久的顶层导航 它们让各种可能的操作一目了然 并优化了在不同部分之间切换的体验 同时还能保持每个部分内的上下文

在新的设计系统中 iPhone 上的 标签栏会悬浮在内容上方 并且可以配置为在滚动时最小化 这可以让 App 的内容成为 用户关注的焦点

要采用这一行为 请使用 “tabBarMinimizeBehavior”修饰符 在这个示例中 “TV”App 使用了 “onScrollDown”行为

使用这个配置后 当沿着相反方向滚动时 标签栏会重新展开

现在 假设你的 App 有更多 想要随时可用的控件 比如“音乐”中的这个播放视图

使用“tabViewBottomAccessory” 修饰符在标签栏上方放置一个视图 这会充分利用标签栏的折叠行为 所提供的额外空间

在你的补充视图内部 读取环境中的“ tabViewBottomAccessoryPlacement ” 然后 调整当补充视图折叠到标签栏 区域中时所关联的补充视图内容

好了 我刚刚展示了采用新设计的 “Landmarks”有多美观 我还分享了几种采用 “基于 TabView”的 App 的方法 接下来 我将介绍表单！ 创建新的地标集合时 会展示一个由地标选项组成的表单 在 iOS 26 上 默认会嵌入部分高度 表单并使用 Liquid Glass 背景

当高度较小时 底部边缘会向内收缩 嵌套在显示屏的弧形边缘内

在过渡到全高表单时 玻璃材质背景会逐渐过渡 变得不透明并锚定在屏幕边缘 如果你使用 “presentationBackground”修饰符 将自定背景应用于表单 请考虑将它移除 让新的材质精彩呈现

表单也可以直接从 触发它们的按钮中变形呈现 要使展示内容从源视图中变形呈现 应使展示工具栏项目成为 导航缩放过渡的源 并将表单内容标记为过渡的目标

和表单一样 菜单、提醒和 弹出窗口等展示元素会 顺畅地从 Liquid Glass 控件中 流出 并将焦点从它们的操作吸引到 展示的内容上

在新设计中 对话框也会自动从触发它们的按钮中 变形呈现

我们的 App 结构已经很出彩 接下来我们将介绍工具栏！ 在新设计中 工具栏项目放置在 Liquid Glass 表面上 这个表面会悬浮在你的 App 内容上 并自适应它下方的内容 工具栏项目会自动分组 当我使用 Xcode 26 构建“Landmarks”App 时 我的自定工具栏项目被分组在一起 并与系统提供的 返回按钮分开放置

我想强调的是 “收藏”和 “添加到收藏”按钮 是相关的操作 因此 我使用了具有固定间距 的新“ToolbarSpacer”API 以便将它们划分到单独的组中

这提供了清晰的视觉效果 表明分组操作是相关的 而像共享链接和检查器 这类被分开的操作 则具有不同的行为 “ToolbarSpacer”还可用于创建 在工具栏项目之间扩展的灵活空间

“邮件”App 使用这项技术来 创建左对齐的筛选项目 以及包含搜索和撰写项目的 右对齐组

有些工具栏项目无需这种视觉分组 比如“图书”中显示我头像的 这个项目 应用“sharedBackgroundVisibility ”修饰符 以将项目划分到自己的组 而不显示背景

在“Landmarks”App 中 我添加了一项功能 让朋友能够对我的地标集合做出反应 我希望当有新的反应时 在我的 通知项目上 添加一个指示符 我不想错过那个令人心花怒放的 外部认可

通过在工具栏项目上使用 badge 修饰符 只需一行代码就能 获得令人欢欣鼓舞的认可！

我将“badge”修饰符 应用于工具栏项目的内容 以显示这个指示符 除了对工具栏中的项目 进行分组和标记外 新设计还引入了其他一些变化 图标在更多地方使用单色渲染 包括在工具栏中

单色调色板会减少视觉干扰 强调 App 的内容并 确保内容清晰可读

你仍可以使用“.tint()”修饰符 为图标着色 但这样做是为了传达特定含义 比如行动指引或下一步操作的指引 而不仅仅是为了提供视觉效果

在新设计中 自动的 “滚动边缘效果” 会确保控件清晰可辨

这是一个应用于系统工具栏下内容的 细微模糊和淡入淡出效果 如果你的 App 在工具栏项目的后面 有任何额外的背景或变暗效果 请务必将它们移除 以免造成干扰

对于更细密且包含大量悬浮元素的 UI 比如“日历”App 中的 UI 请使用“scrollEdgeEffectStyle” 微调内容效果的清晰度

工具栏就介绍到这里 接下来 我将展示如何使用全新设计 打造精妙的搜索体验 所有平台的两个关键搜索模式 均有一些重大更新 “在工具栏中搜索”将搜索栏放在 屏幕底部 触手可及的地方 在 iPad 和 Mac 上 它显示在工具栏 的右上角 第二种模式是将搜索栏视为 多标签 App 中的专用页面 对于“Landmarks”App 我将搜索栏放在右上角 使用这种放置方式时 你应该让尽可能多的 App 内容 可以通过搜索获得

搜索栏显示在它自身的 Liquid Glass 表面上

轻点一下即可激活它并显示键盘 为了在“Landmarks”中实现这个 变体 我在 “NavigationSplitView”上应用 了“searchable”修饰符 在这里声明这个修饰符表示 搜索操作将应用于整个 “NavigationSplitView” 而不仅仅是某一列

在 iPhone 上 这个变体会自动进行调整 以在显示屏的底部显示搜索栏

根据设备大小、工具栏按钮的数量和 其他因素 系统可能会选择将搜索栏 最小化为一个工具栏按钮 就像这里的“邮件”中显示的那样

当我轻点这个按钮时 键盘上方会 显示一个全宽搜索栏

如果你想明确选择最小化行为 比如因为搜索并不是你 App 体验 的主要部分 请使用新的 “searchToolbarBehavior”修饰符

多标签 App 中的搜索通常在 专用搜索页面中完成 我们所有平台上的 App 均 使用这个模式 比如“健康”App 使用这个模式来 检查我的健身趋势

要在你的 App 中实现这个模式 请在 你的某个标签页上设置搜索角色 然后在你的 TabView 上 放置 searchable 修饰符

当某人选择这个标签时 搜索栏将取代标签栏 并将显示标签的内容

用户可与你的浏览建议进行交互 或轻点搜索栏以调出键盘 并继续使用特定搜索词

在 iPad 和 Mac 上 当有人选择搜索标签时 搜索栏会显示在 App 浏览建议的正上方 这些模式让你可以灵活自主地 控制 App 中的搜索体验！ 说到控制 接下来我将介绍 标准控件的更新 这一全新设计使不同平台的控件 比如按钮、滑块、菜单等 呈现出显著的家族相似特征

我将从按钮这一最常见控件的更新 开始说起 边框按钮现在默认具有胶囊形状 从而与新设计系统的弯曲角保持协调 macOS 上的超小号、小号和中号控件 保持圆角矩形形状 从而保持水平密度

通过现有的 buttonBorderShape 修饰符 你可以为任何大小指定形状

控件高度针对新设计进行了更新

macOS 上的大多数控件都 比以前略高一些 从而在控件标签周围提供 更多一点的留白 并增加点按目标的大小

为了与现有的高密度布局 (例如 复杂的检查器和弹出窗口) 兼容 可以将现有的“controlSize” 修饰符应用于单个控件 或一整套控件 对于最重要、最醒目的操作 新设计系统现在支持超大尺寸按钮 最后但同样重要的是 新的玻璃材质 和突出玻璃材质的按钮样式 将 Liquid Glass 融入你 App 中的 任何按钮 接下来我们将介绍滑块 它们也具备了一些新特性

它们现在支持刻度标记！ 在使用“step”参数初始化滑块时 刻度标记会自动显示

你甚至可以手动放置单个刻度标记

使用“ticks”闭包来指定它们 的位置 就像我在这里做的一样 在 60% 和 90% 处设置标记 滑块让你还可以将其轨道填充的 起始位置设定在特定位置 这对于处理那些可能会从非起始 默认值向左或向右调整的值 可能会很有用 比如在播放时选择 更快或更慢的速度值

使用“neutralValue”参数指定起点 不同平台的菜单具有新的设计和 更一致的布局 图标始终位于前缘 并且现在还在 macOS 上使用 使用 Label 或标准控件初始化程序 的同一 API 现在会在两个平台上实现同样的结果

除了 SwiftUI 控件进行了更新外 现在还提供了新的 API 用于针对新设计来更新你的控件

我们众多控件的边角都能与 它们的容器实现完美对齐 即使容器是 iPhone 也不例外！ 这称作“角同心性” 例如 位于表单底部的按钮 应该与表单的角落共享同一个角中心

要构建自动与容器保持同心性的视图 请使用同心矩形 将“containerConcentric”配置 传递给矩形的“corner”参数 这样一来 无论显示屏和窗口形状 如何变化 这个形状都会自动适配它的容器 采用新设计的最佳方式是使用 标准 App 结构、 工具栏、搜索栏位置和控件 但有时 你的 App 可能需要 更多一点的自定 接下来 我将介绍如何为你的 App 构建自定 Liquid Glass 元素 “地图”是这个使用场景的 一个典型例子 它的自定玻璃材质控件 优雅地悬浮在地图内容上

对于人们参观的每个地标 我将用类似的方式 向“Landmarks”App 中添加徽章 我们首先创建一个带有 Liquid Glass 效果的自定徽章视图

要为你的自定视图添加玻璃质感 请使用“glassEffect”修饰符 默认情况下 玻璃效果将应用于 内容后面的胶囊形状内 SwiftUI 会自动使用一种能 自适应调整的鲜艳文本颜色 以便在彩色的背景上 保持良好的可读性

通过向修饰符提供形状来自定 玻璃效果的形状

对于特别重要的视图 请使用“tint”修饰符

与工具栏按钮类似 请只使用这个修饰符来传达特定 含义 而不仅仅为了提升视觉效果

与玻璃效果中的文本一样 tint 也使用鲜艳的颜色 来自适应它背后的内容 在 iOS 上 对于自定控件或 具有交互式元素的容器 请将“interactive”修饰符 添加到玻璃效果 玻璃效果通过缩放、弹跳和闪烁 对用户互动做出响应反应 从而与工具栏按钮和滑块 提供的效果相得益彰 现在我们有了自定徽章 接下来我们 将把多个徽章组合在一起 以便它们彼此交互和融合 要组合多个玻璃元素 请使用 “GlassEffectContainer” 这样的分组对于实现正确的 视觉效果至关重要 玻璃材质会反射和折射光线 并从附近的内容中选择颜色 这种效果可通过从一个比自身更大的 区域中进行内容采样来实现

但玻璃效果彼此之间无法进行采样 因此 在不同的容器中拥有附近的 玻璃元素 将导致不一致的行为

使用玻璃容器会让这些元素 共享自己的采样区域 从而提供一致的视觉效果

在“Landmarks”App 中 使用 GlassEffectContainer 给徽章分组 当展开我的徽章时 我得到了这个 奇妙的流体变形效果

使用“glassEffectID”修饰符 将这些过渡添加到你自己的 玻璃容器中

为了配置这个容器 我首先声明一个本地名称空间 然后 我将这个名称空间 与我展开的徽章堆栈中的 每个玻璃效果元素相关联 并与我的切换按钮相关联 现在 当我再次轻点这个按钮时 奖励徽章被优雅地重新收起来

Liquid Glass 效果为你突出展示 重要功能提供了绝佳途径 能够助力你打造出 独具特色的精彩 App 希望你能喜欢这次对新设计和 Liquid Glass 应用的简要介绍 现在该轮到你大显身手了！ 请使用 Xcode 26 构建你的 App 并在此期间采用新的设计 我想你会体会到使用标准控件时 能自动获得的诸多优势

审核你的 App 流程 并确定是否有任何视图需要更改 尤其要注意表单和工具栏 后面那些 可以移除的背景颜色 最后 使用 Liquid Glass 打造 富有表现力的组件 真正让你的 App 脱颖而出 希望你在应用新设计的过程中 收获精彩满满的体验 继续散发你的光芒吧！