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

更新你的 appkit app，以便充分利用全新设计系统。我们将深入探索标签视图、分屏浏览、栏、演示文稿、搜索和控制项等方面的主要变化，并向你展示如何在自定 ui 中使用 liquid glass。为了充分从这个视频中获益，建议你先观看“了解全新设计系统”以获取一般性设计指导。

视频地址

此文章由AI生成，可能存在错误，如有问题，请联系djs66256@163.com

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

引言

macOS 迎来了一次重大的视觉系统革新，全新设计系统为 Mac 应用带来了崭新的外观标准。Apple 框架工程经理 Jeff Nadeau 在 WWDC 2025 的演讲中详细介绍了如何利用这个新设计系统更新 AppKit 应用。此次变革的核心在于 Liquid Glass 材质的引入，它为界面元素带来了立体感和动态效果。

设计系统概述

新设计系统带来了全方位的视觉更新，主要包括以下特点：

• 采用 Liquid Glass 材质，具有半透明特性
• 能够反射和折射光线，创造立体效果
• AppKit 提供了完整的工具支持
• 涵盖了窗口结构、控件样式等多个方面

应用结构设计

窗口外观更新

新设计系统对 Mac 窗口的外观进行了重新设计：

1. 窗口形状变化：采用了全新的几何形状设计
2. 材质应用：主要结构区域使用玻璃材质
3. 层级增强：工具栏元素悬浮于玻璃材质上，增强视觉层次

工具栏设计技巧

工具栏控件的分组逻辑也得到了改进：

• 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 为控件带来了多项新特性：

1. 尺寸变化：

   • 新增超大尺寸(强调主要操作)
   • 调整各尺寸高度(增大点击区域)
   • prefersCompactControlSizeMetrics 兼容旧版布局

2. 形状变化：

   • 迷你至中号：圆角矩形
   • 大号和超大号：胶囊形状
   • 使用 borderShaped 属性自定义形状

3. 玻璃边框样式：

   • 使用 Liquid Glass 替代标准按钮背景
   • 兼容 bezelColor 着色属性

4. 突出等级系统：

   • 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

实施建议与总结

为了帮助开发者顺利过渡到新设计系统，演讲中提出了以下实施步骤：

1. 使用 Xcode 26 构建应用
2. 采用悬浮玻璃工具栏和边栏
3. 转向无边内容展示风格
4. 适配新控件尺寸
5. 检查硬编码高度问题
6. 使用符号图标优化菜单
7. 为重要元素应用 Liquid Glass

新设计系统为 macOS 应用带来了全新的视觉体验，通过 Liquid Glass 材质和各种优化设计，开发者可以为用户创造更加精美、现代的界面效果。遵循这些设计原则和技术指导，将使应用完美融入 macOS 的视觉生态系统。

相关视频

了解 Liquid Glass
了解全新设计系统

文档

采用 Liquid Glass
人机界面指南：macOS 设计