What's new in iPad app design
Design 进阶 20m

iPad 应用设计的新变化

What's new in iPad app design

2022年6月6日

在 Apple 官方观看视频

一句话判断

iPadOS 16 的设计更新直指桌面级生产力——如果你的 iPad 应用还在用 iPhone 思路做工具栏和导航，现在是时候重想了。

这场 Session 讲了什么

iPadOS 16 带来了 Stage Manager、外接显示器支持和 Display Zoom，iPad 的屏幕使用方式正在向桌面靠拢。Session 从文档编辑和内容浏览两类场景出发，介绍了八项具体的 UI 改进：

工具栏（Toolbar）：新布局将标题左对齐，中间区域展示常用操作按钮。支持自定义——用户可以增删和重排中间区域的按钮。相关操作可以分组，空间不足时自动折叠。

**文档菜单（Document Menu）：**新的标题区域整合了文档级操作（复制、重命名、移动、导出、打印）。这是一个标准化的文档操作入口。

编辑菜单（Edit Menu）：触摸时横向滚动展示，指针模式下纵向展示完整列表。自定义操作要紧挨着相关的系统操作分组。

查找替换（Find & Replace）：系统集成到键盘中，支持短语匹配和全部替换。连接硬件键盘时以紧凑面板形式出现在应用上方。

导航、搜索、表格和选择也在浏览类场景中得到了增强，支持更复杂的交互模式。

值得深挖的点

工具栏的三段式布局（leading / center / trailing）是这次设计更新的核心框架。Leading 放导航按钮和文档标题，Center 放常用操作，Trailing 放检查器按钮和溢出菜单。关键细节是：窗口缩小时 Center 区域的按钮会自动收入溢出菜单，只有 Leading 和 Trailing 会保留。所以真正重要的按钮要放在 Trailing。

可定制工具栏的边界设计得很克制。只有 Center 区域的按钮可以被用户自定义，Leading 和 Trailing 区域固定不动。这保证了导航和核心功能始终可达，同时给高级用户留出了个性化空间。

Edit Menu 的双模式设计反映了 iPad 输入方式的多样性。触摸场景下用户习惯横向滑动浏览，空间占用小；指针场景下纵向列表信息密度更高。你的自定义操作要在两种布局下都合理分组。

代码片段

工具栏项目分组：

// 将相关操作组织为工具栏组
let insertGroup = UIBarButtonItemGroup(
    representativeItem: nil,
    items: [
        UIBarButtonItem(image: UIImage(systemName: "table"), ...),
        UIBarButtonItem(image: UIImage(systemName: "chart.bar"), ...),
        UIBarButtonItem(image: UIImage(systemName: "photo"), ...),
    ]
)
// 空间不足时自动折叠为一个 "+" 按钮

启用工具栏自定义：

// UIKit 中启用工具栏自定义
if let windowScene = view.window?.windowScene {
    let toolbar = windowScene.titlebar?.toolbar
    toolbar?.allowsUserCustomization = true
    // 中心区域的按钮可以被用户增删重排
}

文档菜单中的标准操作：

// UIDocument 的标准操作会自动出现在文档菜单中
// 包括：复制、重命名、移动、导出、打印
// 自定义操作也添加到这里
UIDocumentMenuAction(identifier: "com.example.customAction") { document in
    // 执行自定义文档操作
}

最佳实践

  • 重要按钮放 Trailing 区域：窗口缩小时 Center 会消失，Trailing 不会
  • 操作分组要语义清晰：插入类操作放一组，格式类操作放另一组
  • Edit Menu 保留系统操作：剪切、复制、粘贴是底线，不要移除
  • 自定义操作靠近相关系统操作：格式化选项紧挨着加粗斜体，用户找得到
  • Find & Replace 放在溢出菜单和键盘快捷键中：提供多个入口，不要只靠 Cmd+F

还有什么值得关注

  • Stage Manager 改变了窗口尺寸的多样性，工具栏的自适应逻辑需要覆盖更小的窗口尺寸
  • 外接显示器意味着你的应用可能显示在 4K 甚至 5K 分辨率下，图片和 UI 资源要做好准备
  • Session 的示例来自 Pages 和 Keynote，这两个应用是目前 iPadOS 桌面化设计的标杆
  • 表格选择（Table Selection）支持行、列和不连续区域选择，电子表格类应用应该关注
WWDC 2022