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

大家好 我叫 Jeff Nadeau 是 Apple 的框架工程经理 你正在观看“使用全新 设计系统构建 AppKit App” macOS 的视觉系统全面焕新 采用全新材质和重新设计的控件 为 Mac App 的外观和风格 设立了基准 这个新设计系统的核心元素是 Liquid Glass 材质 它具有半透明质感 会反射和折射光线 使用户界面呈现立体感和动态效果 AppKit 提供了应用新设计系统 所需的一切工具 我将介绍框架的重要变化 概述 macOS Tahoe 中的新行为 以及可供使用的新 API 在应用新的设计语言时 你可以使用它们来进行精细调整 我将自顶向下地介绍这些变化 从 App 的基本结构组件开始 然后我将介绍滚动边缘效果 它可在无边滚动内容上方呈现信息 新设计系统还对控件的外观和布局 进行了重大更新 最后 我将深入介绍 Liquid Glass 材质、 它的工作原理 以及相关的 AppKit API 用于在自定 UI 元素中呈现玻璃质感 首先 我们来看 App 结构 新设计系统更新了 Mac 窗口的外观 窗口形状发生变化 主要结构区域采用玻璃材质 其中一个区域是工具栏 在新设计系统中 工具栏元素置于玻璃材质上 整个工具栏看起来悬浮在内容上方 增强了窗口内的层次感 玻璃还可将控件按逻辑分组 由于它们都代表单一操作 AppKit 会自动将多个工具栏按钮 组合到一块玻璃上 不同类型的控件被分隔到 各自的玻璃元素中 比如分段控件、弹出式按钮和 搜索控件 AppKit 根据每个项目的 控制视图类型 自动确定这个分组 要覆盖自动行为 使用 NSToolbarItemGroup 将项目组合到一起 或插入留白器来分隔项目 Liquid Glass 材质是自适应的 这意味着它会智能地对环境做出反应 改变自己的外观来匹配 下层内容的亮度 如果滚动的内容特别亮或特别暗 工具栏玻璃甚至会切换 浅色和深色外观 这种外观变化会传递给工具栏的内容 这使用的是 NSAppearance 系统 因此你为支持深色模式所创建的 任何元素都能正确适配 NSToolbar 会自动将玻璃材质放在 每个工具栏项目下层 但并不是每个项目都应该放在玻璃上 非交互式项目 比如自定标题和状态指示元素 应避免玻璃材质

一个例子是照片工具栏中的信息文本 如果使用玻璃材质背景 就会显得像一个按钮 你可以从 NSToolbarItem 移除玻璃材质 只需将 isBordered 属性设为 false 现在看起来好多了

对于其他工具栏项目 玻璃材质 还有一个好用的功能 那就是着色 使用 NSToolbarItem 新增的 样式属性 来指定突显样式 突显样式使用强调色为玻璃着色 适合用来展示状态或强调重要操作 要进一步自定义 突显工具栏项目的外观 使用 backgroundTintColor 属性 为玻璃选择特定颜色 引起用户对某个工具栏项目的注意 的另一种方法是徽章 使用 NSItemBadge API 来提示 工具栏项目导航到 新内容或待处理内容 例如 你可以使用徽章来提示 未读邮件的数量 或者有新通知 玻璃工具栏大概就是这样 接下来是窗口的主要内容 窗口通常采用分屏浏览布局 在新设计系统中 边栏显示为一块玻璃窗格 悬浮在窗口内容上方 检查器则是一块无边式玻璃区域 与内容在同一层 要在 App 中实现这个效果 请使用 NSSplitViewController 当你创建具有边栏或检查器行为的 分屏浏览项目时 AppKit 会自动向它们提供 相应的玻璃材质 由于边栏现在显示在玻璃上 就不再需要旧版边栏材质 如果你使用 NSVisualEffectView 来显示 边栏内的旧版材质 将会导致玻璃材质无法透过 你应该从视图层次中 移除这些视觉效果视图

由于边栏玻璃看起来悬浮在窗口上 它可以显示在相邻分屏内容的上层 这个效果很适合某些类型的内容 包括：水平滚动的内容、 侧拉显示轻扫操作的列表项目、 地图或电影海报等丰富内容 它们可以扩展到边栏区域中 要允许分屏浏览内容显示在边栏下层 automaticallyAdjustsSafeAreaInsets 属性应设置为 true 请对需要扩展到边栏下层的内容 设置这个属性 而不是对边栏本身 当这个属性为 true 时 NSSplitView 会将对应项目的边框 扩展到边栏下层 然后应用安全区布局参考线 帮助你在未遮挡区域中放置内容 照片或插画等丰富内容 充分展现了 边栏中悬浮玻璃材质的 精美质感 但我们一般不希望 通过遮挡部分内容来获得这种效果 这张 App Store 海报在全屏显示时 效果十分惊艳 但它并不包含任何额外的负空间 来为边栏留出位置 隐藏边栏便可看到背后的玄机 虚化的部分是海报的镜像内容 它扩展了海报的显示尺寸 我们并没有真的遮挡海报的任何内容 AppKit 提供了一个新的 API 来实现这个效果

叫做 NSBackgroundExtensionView 这个视图通过使用安全区 将内容放置在视图的未遮挡部分 同时使用视觉效果将内容扩展到全屏 为此 创建一个 NSBackgroundExtensionView 使它铺满分屏浏览项目的整个区域 为它分配一个 ContentView 这个视图被放在安全区 避开悬浮边栏 这样就好了 背景扩展视图将自动创建 内容视图的副本 来填充安全区以外的空间 悬浮边栏和工具栏 展示了新设计系统的一个重要元素： 同心 每个元素都具有一定的曲度 并整齐地嵌套在容器的圆角半径内 在这里 容器是窗口本身 这种关系是双向的 在新的设计系统中 窗口的圆角半径变得更大 更圆润 不同的窗口样式对应不同的圆角半径 带有工具栏的窗口现在 使用更大的半径 与它包裹着的玻璃工具栏元素同心 半径会缩放以匹配工具栏的尺寸 只带有标题栏的窗口仍使用 较小的圆角半径 紧凑地包裹着窗口控件 更大的圆角使窗口显得更柔和 同心嵌套的布局营造出优雅之感 但它们也可能会裁剪 靠近窗口边缘的内容 要放置嵌套在圆角中的内容 请使用新的 NSView.LayoutRegion API 布局区域描述视图中的一块区域 比如安全区 但内置了避开角等功能 你可以根据圆角的尺寸 水平或垂直地 嵌入一个区域 我将解释这个 API 的用法 你可以获取一个区域 它可以是安全区 或具有标准布局边距的区域 区域包括角适配 可以向这个区域应用水平或垂直嵌入 从布局区域 使用 layoutGuide 方法 以获取参考线来应用自动布局约束 你也可以获取区域的原始几何形状 格式可以是边缘嵌入 或它当前的矩形

我们通过示例来看看 新 API 的实际效果 我的“新建文件夹”按钮 跟这个圆角重叠了 我想把它限制在一个 可以避免重叠的区域 因此在 updateConstraints 方法中 我获取安全区的布局参考线 包括水平角适配 这个布局参考线 与典型的安全区布局参考线一样 但它在圆角的边缘上 包括一个额外的嵌入

然后我创建一些布局约束 将按钮的几何形状 关联到安全区参考线 只需要几行代码 现在我的按钮就放到了 圆角旁边一个合适的位置 接下来 我将介绍滚动边缘效果 新设计系统鼓励无边展示滚动内容 并让 Liquid Glass 元素悬浮在顶层 为了区分玻璃和内容 系统在两者重叠的区域 应用一种视觉效果 这个效果有两种变体： 一种是软边缘样式 它逐渐透明并使内容虚化 另一种是硬边缘样式 它使用更不透明的背景 更明显地区分内容和悬浮元素

对于可滚动内容 滚动边缘效果在 NSScrollView 中 滚动视图会根据悬浮在表层的内容 决定效果的大小和形状 随着悬浮元素出现和消失 效果会自动适应 滚动边缘效果自动应用于 工具栏项目、 标题栏补充视图以及 分屏浏览项目补充视图的下层 新推出的分屏浏览项目补充视图 与标题栏补充视图很相似 但它在分屏浏览控制器中 只横跨一个分屏 可以放在分屏的顶部或底部边缘 要添加分屏浏览项目补充视图 创建 NSSplitViewItemAccessoryViewController 将它附加到分屏浏览项目 可以使用 addTopAlignedAccessoryViewController 或 addBottomAlignedAccessoryViewController 方法 分屏浏览项目补充视图 以及标题栏补充视图 是将悬浮内容纳入滚动边缘效果的 最好方式 它们会影响效果的大小和形状 它们插入内容安全区 使内容布局更简洁 控件是所有设计系统不可或缺的元素 这也是我个人最喜欢的元素 macOS Tahoe 中的控件呈现全新形象 新设计系统使不同硬件系统具有更强 的相似性 更像同一个系列的产品 统一了 macOS、iOS 和 iPadOS 中 各种元素的外观 比如按钮、切换开关和滑块 这些变化精心加以实施 保留了 Mac 控件应有的特点和功能

macOS 控件有多种标准尺寸可选 从迷你一直到大号 这些尺寸可以建立 不同的控件密度 和层次结构 macOS Tahoe 中新增了一个尺寸 超大号 用于强调最重要的操作 超大号尺寸非常适合用来 强调 App 中最醒目的操作 也就是用户打开 App 后 想要完成的操作 比如在媒体播放器中设置播放顺序 或者在通讯 App 中拨打电话 除了新增一个尺寸 我们还借此机会重新调整了 控件的高度

与之前的 macOS 版本相比 迷你、小号和中号控件变高了一点 使控件标签周围有更大的留白 并增加了点击目标的大小 为了适应不同的控件高度 请使用自动布局 避免对控件的高度进行硬编码 为了与现有的高密度布局兼容 比如复杂的检查器和弹出窗口 AppKit 提供了一个 API 用于请求与之前的 Mac OS 版本 相匹配的控件尺寸 使用 NSView 新增的 prefersCompactControlSizeMetrics 属性 这个属性在视图层次下继承 设置为 true 时 AppKit 控件将恢复到 与之前的 macOS 版本兼容的大小 新设计系统还引入了 一些新的控件形状 迷你到中号尺寸保留了圆角矩形 可以使控件在水平方向上 显得更紧凑 大号和超大号尺寸两端变圆 变成胶囊形状 利用了所有额外的空间 为了在自定设计中使元素保持同心 你可以覆盖控件的首选形状 在这个例子中 我构建了一个自定弹框 用于进行拼写检查 我用的是中号控件 弹框的容器是胶囊形的 而内含的控件是圆角矩形 看起来很不协调 这种情况很适合使用新的 borderShaped 属性来处理 这个 API 可让你覆盖按钮、 弹出式按钮和分段控件的形状

通过覆盖这些控件的原有形状 改为使用胶囊形状 它们现在优雅地嵌入自定容器里

除了形状 你还可以 使用新的玻璃边框样式 自定义按钮的材质 这个边框样式使用 Liquid Glass 材质 替换标准按钮背景 适合需要悬浮在其他内容上的按钮 玻璃边框样式与现有的 bezelColor 属性兼容 这个属性使用提供的颜色为玻璃着色 新设计系统还在 AppKit 中引入了 控件突显的概念 通过改变按钮的突显程度 你可以控制它的着色颜色所具有的 视重水平 这样 你可以向按钮添加颜色 而不会压制同一界面中 具有更高突显程度的按钮 比如默认按钮 这种方法用于破坏性按钮 独特的红色清晰地表明 操作具有破坏性 但它的突显程度不会超过附近的控件

着色突显类型有四种情况： automatic 表示控件选择的突显级别 应该适配控件的样式和配置 none 表示最浅的着色颜色或不着色 secondary 表示比较柔和地 应用着色颜色 primary 表示应用最醒目的着色颜色

要为按钮应用较低突显程度的着色 将 tintProminence 属性 设为 secondary 默认情况下 这将使用强调色显示 在这个例子中 我对“播放”按钮 的处理方式稍有不同 因为我希望将它作为默认按钮 所以我让回车键具有同样功能 这确保按钮以可预测的方式响应键盘 由于它是默认按钮 它将自动应用 最醒目的着色级别

tintProminence 也可用于滑块 tintProminence API 允许你选择 滑块移动轨道是否填充强调色 设置为 none 的滑块将避免填充轨道 设置为 secondary 或 primary 的 滑块将填充轨道 滑块填充在 macOS Tahoe 中还学到 一个小技巧 它可以将自己锚定在移动轨道上的 任何位置 而不仅仅是最左端 使用新的 neutralValue 属性 设置一个值作为移动轨道填充的锚点 在这个播放倍速控件的示例中 我已将 neutralValue 设置为 1x 这样 当播放速度调慢 或调快时 填充的蓝色可以传达 所选值与默认值之间差异 新设计系统也对菜单进行了升级 将外观全面焕新 并极大丰富了 图标的使用

菜单栏菜单和上下文菜单 现在都使用图标 来代表重要操作 在菜单的每个部分中 图标形成一列 可以轻松地一眼识别 在菜单中添加清晰可辨的符号 可帮助用户快速 在菜单中找到最重要的操作

“了解全新设计系统”视频 详细介绍了 如何为菜单项选择符号 别忘了观看 最后 将 Liquid Glass 元素 融入你的 App 中 在将 Liquid Glass 材质集成到 自定 UI 元素中之前 你应该了解 这种新材质背后的设计意图

Liquid Glass 元素 悬浮在 UI 的顶层 将控件和导航提升到 一个单独的功能层中 考虑到这一点 请仅将 Liquid Glass 材质 用于 App 中最重要的元素 也就是层次中最顶层的控件 Freeform 的内联编辑控件 是一个很好的例子 它们悬浮在内容上方 而不是位于同一层 Liquid Glass 材质看起来美观大方

要对内容应用玻璃材质 请使用 NSGlassEffectView API 设置 contentView 允许 AppKit 应用所有必要的视觉处理 确保当玻璃随周围环境动态变化时 你的内容仍然清晰可辨 因此 请避免将 NSGlassEffectView 作为子视图放在内容下方 你可以使用 cornerRadius 和 tintColor 属性 自定义玻璃的外观 我将通过一个示例来说明 如何为现有元素使用 NSGlassEffectView

在这个例子中我有一个健身 App 它可显示每日训练数据 并有一个自定义控件 用于选择锻炼类型 我使用水平 NSStackView 来显示这些元素 这是 UI 的突显部分 所以我将对这两部分都应用玻璃材质 采用 Liquid Glass 材质只需要 新增几行代码 首先 为想要展示的每个玻璃元素 创建 NSGlassEffectView 并将每个元素的 contentView 属性 设为所需的视图 GlassEffectView 使用自动布局 将它的几何形状关联到 contentView 所以你不必担心同步问题

然后将玻璃效果视图放入视图层次中 在本例中 我更新了堆栈视图 以换入新的玻璃效果视图 如果你有多个离得很近的玻璃形状 使用 NSGlassEffectContainerView 将它们组合到一起 玻璃效果容器视图 可将多个玻璃元素组合起来 应用同样的渲染效果 这有几个好处

首先 同一组中的玻璃元素 可以流动地融入和分离 这使用的是液体视觉效果 邻近的玻璃形状 基于 spacing 属性的值融合到一起 NSGlassEffectContainerView 提供这个属性

其次 玻璃的自适应外观 会应用于分组中的所有元素 当底层内容变化时 可确保组合元素保持一致的外观 此外 分组对于保证视觉正确性 十分重要 Liquid Glass 材质会 反射和折射光线 并从附近的内容拾取颜色

为了创建这种效果 玻璃材质对自己周围区域的内容 进行采样 但如果采样区域包含另一个玻璃元素 会发生什么情况？ 玻璃元素无法直接 对另一个玻璃元素采样 在这种情况下 将无法获得一致的视觉结果 使用玻璃效果容器可让这些元素 共享采样区域 这不仅可以提供更一致的视觉结果 还能提高玻璃效果的性能 因为整个分组只需要一个采样通道

回头看之前的示例 这两个玻璃效果属于同一个逻辑分组 所以它们需要装在同一个 玻璃效果容器中 设置容器很简单 在这个例子中 我创建一个 NSGlassEffectContainerView 并将堆栈视图设为它的 contentView 容器和它的内容视图也共同受约束 这使用自动布局实现 因此我可以干净利落地将这个容器 插入现有布局 Liquid Glass 材质是一个强大的 工具 可提升 App 重要控件的层级 并使内容能够无缝地从边到边滚动 通过这种绝佳的设计方法 你可以突显 App 的独特功能

接下来应该怎么做呢？ 首先 使用 Xcode 26 构建 App 许多新的设计功能立即可用 充分利用悬浮玻璃工具栏和边栏 尽可能采用无边风格展示内容 然后 适配新的控件大小 检查 App 中是否有硬编码控件高度 或不灵活的布局约束 使用符号图标优化菜单操作视觉 确认界面中的重要元素 使用 Liquid Glass 材质 将它们提升到一个单独的视觉层级 感谢观看 也衷心感谢大家制作了 优质的 Mac App