更新你的 appkit app，以便充分利用全新设计系统。我们将深入探索标签视图、分屏浏览、栏、演示文稿、搜索和控制项等方面的主要变化，并向你展示如何在自定 ui 中使用 liquid glass。为了充分从这个视频中获益，建议你先观看“了解全新设计系统”以获取一般性设计指导。
此文章由AI生成，可能存在错误，如有问题，请联系djs66256@163.com
使用全新设计系统构建 AppKit 应用
引言
macOS 迎来了一次重大的视觉系统革新，全新设计系统为 Mac 应用带来了崭新的外观标准。Apple 框架工程经理 Jeff Nadeau 在 WWDC 2025 的演讲中详细介绍了如何利用这个新设计系统更新 AppKit 应用。此次变革的核心在于 Liquid Glass 材质的引入，它为界面元素带来了立体感和动态效果。
设计系统概述
新设计系统带来了全方位的视觉更新，主要包括以下特点：
- 采用 Liquid Glass 材质，具有半透明特性
- 能够反射和折射光线，创造立体效果
- AppKit 提供了完整的工具支持
- 涵盖了窗口结构、控件样式等多个方面
应用结构设计
窗口外观更新
新设计系统对 Mac 窗口的外观进行了重新设计：
- 窗口形状变化：采用了全新的几何形状设计
- 材质应用：主要结构区域使用玻璃材质
- 层级增强：工具栏元素悬浮于玻璃材质上，增强视觉层次
工具栏设计技巧
工具栏控件的分组逻辑也得到了改进：
- AppKit 会自动将同类工具栏按钮组合到同一玻璃块中
- 不同类型控件(如分段控件、弹出按钮)会自动分隔显示
- 开发者可以使用 NSToolbarItemGroup 手动分组或插入留白器进行分隔
Liquid Glass 具有自适应特性：
- 智能调整以匹配下层内容亮度
- 工具栏玻璃会自动在深浅色外观间切换
- 通过 NSAppearance 系统实现内容适配
// 移除工具栏项玻璃材质
toolbarItem.isBordered = false
// 使用强调色为玻璃着色
toolbarItem.style = .prominent
// 使用特定颜色为玻璃着色
toolbarItem.backgroundTintColor = .systemGreen
工具栏徽章系统
新设计系统引入了丰富的徽章样式：
// 数字徽章
NSItemBadge.count(4)
// 文字徽章
NSItemBadge.text("New")
// 指示器徽章
NSItemBadge.indicator
分屏浏览布局优化
边栏和检查器区域的设计有了显著变化：
- 边栏显示为悬浮玻璃窗格
- 检查器为无边玻璃区域
- 使用 NSSplitViewController 自动获得玻璃材质
适合悬浮显示的内容类型包括：
- 水平滚动内容
- 支持轻扫操作的列表
- 地图/电影海报等丰富内容
// 允许内容扩展到边栏下方
splitViewItem.automaticallyAdjustsSafeAreaInsets = true
窗口圆角处理
窗口圆角半径也有了调整：
- 带工具栏的窗口使用更大圆角半径
- 仅标题栏的窗口保持较小圆角半径
- 使用 NSView.LayoutRegion 避免内容被圆角裁剪
// 避开窗口角落
func updateConstraints() {
guard !installedButtonConstraints else { return }
let safeArea = layoutGuide(for: .safeArea(cornerAdaptation: .horizontal))
NSLayoutConstraint.activate([
safeArea.leadingAnchor.constraint(equalTo: button.leadingAnchor),
safeArea.trailingAnchor.constraint(greaterThanOrEqualTo: button.trailingAnchor),
safeArea.bottomAnchor.constraint(equalTo: button.bottomAnchor)
])
installedButtonConstraints = true
}
滚动边缘效果
新系统鼓励无边滚动内容设计：
- 软边缘样式：渐变透明+内容虚化
- 硬边缘样式：不透明背景+明显区分
分屏浏览项目补充视图：
- 类似标题栏补充视图，但局限于单个分屏
- 可置于分屏顶部或底部边缘
添加方法：
- addTopAlignedAccessoryViewController
- addBottomAlignedAccessoryViewController
控件更新与改进
macOS Tahoe 为控件带来了多项新特性：
尺寸变化：
- 新增超大尺寸(强调主要操作)
- 调整各尺寸高度(增大点击区域)
- prefersCompactControlSizeMetrics 兼容旧版布局
形状变化：
- 迷你至中号：圆角矩形
- 大号和超大号：胶囊形状
- 使用 borderShaped 属性自定义形状
玻璃边框样式：
- 使用 Liquid Glass 替代标准按钮背景
- 兼容 bezelColor 着色属性
突出等级系统：
- none：不着色/最浅
- secondary：柔和着色
- primary：最醒目着色
- automatic：自动选择
// 为随机播放和排队按钮设置次级突出
shuffleButton.tintProminence = .secondary
playNextButton.tintProminence = .secondary
// 默认按钮自动使用主要突出
playButton.keyEquivalent = "\r"
其他控件改进：
- 滑块增加 neutralValue 设置填充锚点
- 支持轨道强调色填充
- 菜单全面更新外观，增加图标使用
Liquid Glass 材质应用
设计意图
Liquid Glass 材质的设计原则：
- 悬浮在 UI 顶层
- 仅用于最重要的元素
- 提升控件和导航层级
实现方法
使用 NSGlassEffectView 的要点：
- 设置 contentView 显示内容
- 避免作为子视图置于内容下方
- 使用 cornerRadius 和 tintColor 自定义外观
// 采用 NSGlassEffectView
let userInfoView = UserInfoView()
let activityPickerView = ActivityPickerView()
let userInfoGlass = NSGlassEffectView()
userInfoGlass.contentView = userInfoView
let activityPickerGlass = NSGlassEffectView()
activityPickerGlass.contentView = activityPickerView
let stack = NSStackView(views: [userInfoGlass,
activityPickerGlass])
stack.orientation = .horizontal
NSGlassEffectContainerView 的优势：
- 统一组内元素视觉效果
- 支持液体融合效果
- 确保采样区域一致
- 提升渲染性能
// 采用玻璃效果容器视图
let userInfoView = UserInfoView()
let activityPickerView = ActivityPickerView()
let userInfoGlass = NSGlassEffectView()
userInfoGlass.contentView = userInfoView
userInfoGlass.cornerRadius = 999
let activityPickerGlass = NSGlassEffectView()
activityPickerGlass.contentView = activityPickerView
activityPickerGlass.cornerRadius = 999
let stack = NSStackView(views: [userInfoGlass,
activityPickerGlass])
stack.orientation = .horizontal
let glassContainer = NSGlassEffectContainerView()
glassContainer.contentView = stack
实施建议与总结
为了帮助开发者顺利过渡到新设计系统，演讲中提出了以下实施步骤：
- 使用 Xcode 26 构建应用
- 采用悬浮玻璃工具栏和边栏
- 转向无边内容展示风格
- 适配新控件尺寸
- 检查硬编码高度问题
- 使用符号图标优化菜单
- 为重要元素应用 Liquid Glass
新设计系统为 macOS 应用带来了全新的视觉体验，通过 Liquid Glass 材质和各种优化设计，开发者可以为用户创造更加精美、现代的界面效果。遵循这些设计原则和技术指导，将使应用完美融入 macOS 的视觉生态系统。