ipados-design-guidelines

iPadOS 设计指南

遵循 Apple 人机界面指南构建 iPad 原生应用的全面规则。iPad 并不是大屏 iPhone——它需要自适应布局、多任务支持、指针交互、键盘快捷键，以及应用间拖放。这些规则在 iOS 模式的基础上，针对更大、功能更强的画布进行了扩展。

---

1. 响应式布局（关键）

1.1 使用自适应尺寸类别

iPad 有两种水平尺寸类别：常规（全屏、大尺寸分屏）和紧凑（滑动浮窗、窄分屏）。两种类别都要进行设计。切勿将尺寸写死。

struct AdaptiveView: View {
    @Environment(\.horizontalSizeClass) var sizeClass

    var body: some View {
        if sizeClass == .regular {
            TwoColumnLayout()
        } else {
            StackedLayout()
        }
    }
}

1.2 不要放大 iPhone UI

iPad 布局必须专门设计。将 iPhone 布局拉伸到 13" 显示屏上会浪费空间，而且显得不协调。在常规宽度下，使用多栏布局、主从模式，并提高信息密度。

1.3 支持所有 iPad 屏幕尺寸

适配所有尺寸：iPad Mini（8.3"）、iPad（11"）、iPad Air（11"/13"）和 iPad Pro（11"/13"）。使用能重新分配内容而非单纯放大内容的灵活布局。

1.4 常规宽度下采用分栏布局

在常规宽度下，将内容组织成多个栏。最常见的是两栏（侧边栏 + 详情）。对于层级较深的内容，可采用三栏（侧边栏 + 列表 + 详情）。在大屏上避免使用单栏全宽布局。

struct ThreeColumnLayout: View {
    var body: some View {
        NavigationSplitView {
            SidebarView()
        } content: {
            ContentListView()
        } detail: {
            DetailView()
        }
    }
}

1.5 遵守安全区域

iPad 的安全区域与 iPhone 不同。旧款 iPad 没有主屏幕指示器。iPad 横屏和竖屏时的边距也不同。始终使用 safeAreaInset，切勿为刘海或指示器写死内边距。

1.6 支持两种屏幕方向

iPad 应用必须在横屏和竖屏下都能良好运行。横屏是提高生产力时的主要方向，竖屏则常用于阅读。根据屏幕方向调整栏数和布局密度。

---

2. 多任务处理（关键）

2.1 支持 Split View

你的应用必须在 Split View 的 1/3、1/2 和 2/3 屏幕宽度下正常运行。在 1/3 宽度下，应用会采用紧凑水平尺寸类别。无论分屏比例如何，内容都必须保持可用。

2.2 支持 Slide Over

Slide Over 会在右侧边缘以紧凑宽度的浮层形式显示应用，其行为类似 iPhone 宽度的应用。确保所有功能在这种窄屏模式下都能访问。

2.3 处理 Stage Manager

Stage Manager 支持自由调整窗口大小，并同时显示多个窗口。你的应用必须：

• 流畅地调整到任意尺寸
• 支持多个场景（窗口）显示不同内容
• 不要假定尺寸或宽高比固定

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        // Support multiple windows
        WindowGroup("Detail", for: Item.ID.self) { $itemId in
            DetailView(itemId: itemId)
        }
    }
}

2.4 切勿假定应用全屏运行

应用可能直接以 Split View 或 Stage Manager 模式启动。在设置、引导或任何工作流中，都不要依赖全屏尺寸。请在所有可能的尺寸下测试应用。

2.5 平滑处理尺寸变化

用户通过多任务功能调整窗口大小时，应平滑地为布局变化添加动画。在尺寸变化过程中保留滚动位置、选择状态和用户上下文。调整大小时切勿重新加载内容。

2.6 支持多个场景

使用 UIScene / SwiftUI WindowGroup，让用户能够打开应用的多个实例，并在其中显示不同内容。每个场景彼此独立。支持 NSUserActivity 以恢复状态。

---

3. 导航（关键）

3.1 使用侧边栏进行主要导航

在常规宽度下，用侧边栏替代 iPhone 标签栏。侧边栏可容纳更多导航项、支持分组，在 iPad 上也更符合原生体验。

struct AppNavigation: View {
    @State private var selection: NavigationItem? = .inbox

    var body: some View {
        NavigationSplitView {
            List(selection: $selection) {
                Section("Main") {
                    Label("Inbox", systemImage: "tray")
                        .tag(NavigationItem.inbox)
                    Label("Drafts", systemImage: "doc")
                        .tag(NavigationItem.drafts)
                    Label("Sent", systemImage: "paperplane")
                        .tag(NavigationItem.sent)
                }
                Section("Labels") {
                    // Dynamic sections
                }
            }
            .navigationTitle("Mail")
        } detail: {
            DetailView(for: selection)
        }
    }
}

3.2 自动将标签栏转换为侧边栏

采用 .sidebarAdaptable 样式的 SwiftUI TabView 会在常规宽度下自动转换为侧边栏。使用这种方式，可无缝适配 iPhone 和 iPad。

TabView {
    Tab("Home", systemImage: "house") { HomeView() }
    Tab("Search", systemImage: "magnifyingglass") { SearchView() }
    Tab("Profile", systemImage: "person") { ProfileView() }
}
.tabViewStyle(.sidebarAdaptable)

3.3 复杂层级使用三栏布局

当信息架构包含三个层级（类别 > 列表 > 详情）时，使用三栏 NavigationSplitView。例如：邮件（账户 > 邮件 > 邮件内容）、文件管理器和设置。

3.4 顶部工具栏

在 iPad 上，工具栏位于屏幕顶部的导航栏区域，而不是像 iPhone 上那样位于底部。将上下文操作放在 .toolbar 中，并使用合适的 placement。

.toolbar {
    ToolbarItemGroup(placement: .primaryAction) {
        Button("Compose", systemImage: "square.and.pencil") { }
    }
    ToolbarItemGroup(placement: .secondaryAction) {
        Button("Archive", systemImage: "archivebox") { }
        Button("Delete", systemImage: "trash") { }
    }
}

3.5 详情视图不应为空

当列表或侧边栏中未选中任何项目时，应在详情区域显示有意义的空状态。使用带有图标和说明文字的占位内容，而不是空白屏幕。

3.6 在大画布导航中减少记忆负担

在尺寸变化和场景切换时，保留并显示侧边栏选择、搜索词和展开状态。在多列布局中，用户应能根据屏幕上的结构继续操作，而不必依赖记忆。

---

4. 指针与触控板（高）

4.1 为交互元素添加悬停效果

所有可点按的元素都应响应指针悬停。系统会为标准控件自动提供悬停效果。对于自定义视图，请使用 .hoverEffect()。

Button("Action") { }
    .hoverEffect(.highlight)  // Subtle highlight on hover

// Custom hover effect
MyCustomView()
    .hoverEffect(.lift)  // Lifts and adds shadow

4.2 按钮的指针磁吸效果

指针应吸附到（被吸引至）按钮边界。标准 UIKit/SwiftUI 按钮会自动实现此效果。对于自定义点击区域，请使用 .contentShape() 确保指针区域与可点按区域一致。

4.3 支持右键上下文菜单

右键（次要点击）应显示上下文菜单。使用 .contextMenu，它会自动同时支持长按（触控）和右键（指针）。

Text(item.title)
    .contextMenu {
        Button("Copy", systemImage: "doc.on.doc") { }
        Button("Share", systemImage: "square.and.arrow.up") { }
        Divider()
        Button("Delete", systemImage: "trash", role: .destructive) { }
    }

4.4 触控板滚动行为

支持双指滚动和惯性滚动。在合适的场景下支持捏合缩放。遵循滚动方向偏好。对于自定义滚动视图，请确保触控板手势与触控手势配合时感觉自然。

4.5 自定义内容区域中的光标

根据上下文更改光标外观。文本区域显示 I 形光标。链接显示手形指针。调整大小的手柄显示调整大小光标。可拖动项目显示抓取光标。

4.6 由指针驱动的拖放

指针用户希望通过点击并拖动来重新排列、选择和移动内容。结合 Shift-点击和 Cmd-点击支持多选。

---

5. 键盘（高）

5.1 为所有主要操作提供 Cmd+键快捷键

每个主要操作都必须有键盘快捷键。以下标准快捷键为必需项：

快捷键	操作
Cmd+N	新建项目
Cmd+F	查找/搜索
Cmd+S	保存
Cmd+Z	撤销
Cmd+Shift+Z	重做
Cmd+C/V/X	复制/粘贴/剪切
Cmd+A	全选
Cmd+P	打印
Cmd+W	关闭窗口/标签页
Cmd+,	设置/偏好设置
Delete	删除所选项目

Button("New Document") { createDocument() }
    .keyboardShortcut("n", modifiers: .command)

5.2 通过按住 Cmd 显示浮层来提升可发现性

用户按住 Cmd 键时，iPadOS 会显示快捷键浮层。使用 .keyboardShortcut() 注册所有快捷键，以便它们显示在此浮层中。按逻辑对相关快捷键进行分组。

5.3 使用 Tab 键在字段间导航

支持使用 Tab 在表单字段和可聚焦元素之间向前移动，使用 Shift+Tab 向后移动。使用 .focusable() 和 @FocusState 管理键盘焦点顺序。

struct FormView: View {
    @FocusState private var focusedField: Field?

    var body: some View {
        Form {
            TextField("Name", text: $name)
                .focused($focusedField, equals: .name)
            TextField("Email", text: $email)
                .focused($focusedField, equals: .email)
            TextField("Phone", text: $phone)
                .focused($focusedField, equals: .phone)
        }
    }
}

5.4 切勿覆盖系统快捷键

不要占用系统保留的快捷键：Cmd+H（主屏幕）、Cmd+Tab（应用切换器）、Cmd+Space（Spotlight）以及地球键组合。这些快捷键无法正常工作，还会造成困惑。

5.5 检测硬件键盘

连接硬件键盘时调整 UI。隐藏屏幕键盘快捷栏。显示针对键盘优化的控件。使用 GCKeyboard 或跟踪键盘的显示状态来检测当前状态。

5.6 方向键导航

支持使用方向键在列表、网格和集合中导航。结合 Shift 进行多选。这对注重效率的应用至关重要。

5.7 快捷键必须易于发现

不要依赖用户记忆快捷键的用法。通过按住 Cmd 显示的浮层、菜单标签和可见的焦点移动来展示命令，让用户通过辨认和反复使用来熟悉快捷键。

---

6. Apple Pencil（中）

6.1 支持随手写

iPadOS 会自动将任何标准文本字段中的手写内容转换为文本。不要停用随手写。对于自定义文本输入，请采用 UIScribbleInteraction。测试所有文本输入位置，确保随手写均可正常使用。

6.2 轻点两下切换工具

Apple Pencil 2 及后续型号支持轻点两下切换工具（例如，从笔切换到橡皮擦）。如果你的应用有绘图工具，请实现 UIPencilInteraction 代理来处理轻点两下操作。

6.3 绘图压力和倾斜感应

对于绘图应用，请响应 Apple Pencil 触摸事件中的 force（压力）和 altitudeAngle/azimuthAngle（倾斜）。利用这些属性调整线条宽度、不透明度或阴影。

6.4 悬停检测（M2 及更新型号的 Pencil）

支持悬停功能的 Apple Pencil（M2 iPad Pro 及后续型号）可在 Pencil 触碰屏幕之前提供位置数据。利用此功能实现预览效果、工具大小指示器和更高的精确度。

// UIKit hover support via UIHoverGestureRecognizer
let hoverRecognizer = UIHoverGestureRecognizer(target: self, action: #selector(pencilHoverChanged(_:)))
hoverRecognizer.allowedTouchTypes = [NSNumber(value: UITouch.TouchType.pencil.rawValue)]
canvas.addGestureRecognizer(hoverRecognizer)

@objc func pencilHoverChanged(_ hover: UIHoverGestureRecognizer) {
    let location = hover.location(in: canvas)
    showBrushPreview(at: location)
}

6.5 集成 PencilKit

对于笔记和批注，请使用 PencilKit 中的 PKCanvasView。它开箱即用地提供完整的绘图体验，包括工具选取器、撤销和墨迹识别。

import PencilKit

struct DrawingView: UIViewRepresentable {
    @Binding var canvasView: PKCanvasView

    func makeUIView(context: Context) -> PKCanvasView {
        canvasView.tool = PKInkingTool(.pen, color: .black, width: 5)
        canvasView.drawingPolicy = .anyInput
        return canvasView
    }
}

---

7. 拖放（高）

7.1 跨应用拖放是基本需求

iPad 用户期望能在应用之间拖动内容。请支持将内容拖出（作为源）和将内容拖入（作为目标）。这是 iPad 的核心交互方式。

// As drag source
Text(item.title)
    .draggable(item.title)

// As drop destination
DropTarget()
    .dropDestination(for: String.self) { items, location in
        handleDrop(items)
        return true
    }

7.2 多项拖动

用户可以先拿起一项，然后轻点其他项目将其添加到拖动内容中。提供多个 NSItemProvider 项目以支持多项拖动。在拖动预览上显示项目数量徽标。

7.3 悬停触发交互

拖动经过导航元素（文件夹、标签页、侧边栏项目）时，短暂停留以“弹开”该目标。在导航容器上实现悬停触发，以启用深层放置目标。

7.4 拖放的视觉反馈

提供清晰的视觉状态：

• 提起：拖动开始时，项目带阴影提起
• 移动：拖动悬停在有效目标上时，目标高亮显示
• 放下：在放置位置显示插入动画
• 取消：项目以动画方式返回原位

7.5 支持通用控制

通用控制允许用户在 iPad 和 Mac 之间拖动内容。如果你的应用通过标准 NSItemProvider 和 UTTypes 支持拖放，通用控制会自动生效。

7.6 使用放置代理实现自定义行为

使用 DropDelegate 精细控制放置行为，包括验证放置内容、在列表中重新排序以及处理放置位置。

struct ReorderDropDelegate: DropDelegate {
    let item: Item
    @Binding var items: [Item]
    @Binding var draggedItem: Item?

    func performDrop(info: DropInfo) -> Bool {
        draggedItem = nil
        return true
    }

    func dropEntered(info: DropInfo) {
        guard let draggedItem,
              let fromIndex = items.firstIndex(of: draggedItem),
              let toIndex = items.firstIndex(of: item) else { return }
        withAnimation {
            items.move(fromOffsets: IndexSet(integer: fromIndex),
                      toOffset: toIndex > fromIndex ? toIndex + 1 : toIndex)
        }
    }
}

---

8. 外接显示器（中）

8.1 提供扩展内容，而非仅镜像

连接外接显示器时，应显示互补内容，而不是重复显示 iPad 屏幕。演示文稿、参考资料或扩展视图应显示在外接显示器上，而控制项保留在 iPad 上。

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        // Additional scene for external display
        WindowGroup(id: "presentation") {
            PresentationView()
        }
    }
}

8.2 处理显示器的连接和断开

通过 SceneDelegate 中的 UIWindowScene 事件，或监听 UIScene 会话通知（UIApplication.didConnectSceneSessionNotification / UIApplication.didDisconnectSceneSessionNotification），观察外接显示器的生命周期。平稳切换——如果外接显示器在演示过程中断开连接，应将内容移回 iPad 屏幕，且不丢失数据。

// SceneDelegate: detect when a scene (external display window) connects or disconnects
func scene(_ scene: UIScene,
           willConnectTo session: UISceneSession,
           options connectionOptions: UIScene.ConnectionOptions) {
    guard let windowScene = scene as? UIWindowScene else { return }
    configureExternalDisplay(for: windowScene)
}

func sceneDidDisconnect(_ scene: UIScene) {
    restoreContentToiPad()
}

8.3 支持外接显示器的完整分辨率

使用外接显示器的完整分辨率和宽高比。不要为内容添加上下或左右黑边。在 iOS 16 及更新版本的多场景环境中，UIScreen.main 已弃用——请通过 UIWindowScene.coordinateSpace.bounds 和 UIWindowScene.screen.scale 查询已连接的显示器，或在 SwiftUI 中使用 @Environment(\.displayScale)。

---

9. 无障碍功能（关键）

**影响：**关键

规则 9.1：为所有交互元素设置 VoiceOver 标签

每个按钮、控件和交互元素都必须有含义明确的无障碍标签。仅包含图标的工具栏项目和自定义视图必须使用 .accessibilityLabel()。

正确：

Button(action: compose) {
    Image(systemName: "square.and.pencil")
}
.accessibilityLabel("Compose new message")

错误：

Button(action: compose) {
    Image(systemName: "square.and.pencil")
}
// VoiceOver reads "square.and.pencil" — meaningless to users

规则 9.2：支持动态字体，包括辅助功能字号

使用语义化文本样式（title、body、caption），让文本随用户偏好的字号缩放。在 iPad 更大的画布中，切勿限制字号或禁用缩放。测试最大 5 档辅助功能字号。

Text("Section Header")
    .font(.headline)  // Scales with Dynamic Type automatically

规则 9.3：指针辅助功能——悬停不能是唯一提示

悬停状态（.hoverEffect）可以增强指针输入体验，但不能作为交互性的唯一提示。确保所有交互元素也能通过颜色、形状或标签来区分，以便 VoiceOver 用户和仅使用键盘的用户识别。

规则 9.4：完整键盘访问与焦点路由

启用完整键盘访问后，Tab 必须按逻辑顺序在所有交互元素间移动焦点。在分屏视图和多窗口布局中，焦点不得移出到隐藏或被遮挡的窗口。使用 @FocusState 和 .focusable() 控制键盘焦点图。

struct FormView: View {
    @FocusState private var focusedField: Field?

    var body: some View {
        VStack {
            TextField("Name", text: $name)
                .focused($focusedField, equals: .name)
            TextField("Email", text: $email)
                .focused($focusedField, equals: .email)
        }
    }
}

规则 9.5：分屏视图中的 VoiceOver——分离焦点上下文

在分屏视图中，每个应用都有自己的 VoiceOver 焦点上下文。应用不得假设自己占据整个屏幕。确保 VoiceOver 即使在 1/3 或 1/2 分屏宽度下，也能浏览整个可见界面。不要将可操作内容隐藏在可见区域之外，同时又将其保留在辅助功能树中。

规则 9.6：响应粗体文本

用户在“设置”中启用粗体文本后，自定义渲染的文本必须随之调整。SwiftUI 文本样式会自动处理。UIKit 代码必须检查 UIAccessibility.isBoldTextEnabled，或在 SwiftUI 中使用 @Environment(\.legibilityWeight)。

正确：

// SwiftUI — handled automatically for standard text styles
Text("Section Header")
    .font(.headline)

// SwiftUI — custom rendering respects legibilityWeight
@Environment(\.legibilityWeight) var legibilityWeight

var body: some View {
    Text("Custom Label")
        .fontWeight(legibilityWeight == .bold ? .bold : .regular)
}

错误：

// Hardcoded weight ignores Bold Text preference
label.font = UIFont.systemFont(ofSize: 17, weight: .regular)
// Missing: re-query font when UIAccessibility.boldTextStatusDidChangeNotification fires

规则 9.7：响应增强对比度

用户在“设置”中启用增强对比度后，自定义颜色必须提供对比度更高的变体。在 SwiftUI 中使用 @Environment(\.colorSchemeContrast)，或在 UIKit 中使用 UIAccessibility.isDarkerSystemColorsEnabled。

正确：

// SwiftUI
@Environment(\.colorSchemeContrast) var contrast

var separatorColor: Color {
    contrast == .increased ? Color.primary : Color.secondary
}

// UIKit
let useHighContrast = UIAccessibility.isDarkerSystemColorsEnabled
let borderColor: UIColor = useHighContrast ? .label : .separator

错误：

// Static color ignores Increase Contrast setting
let borderColor = UIColor.separator // Always low-contrast; ignores user preference

---

评估清单

使用此清单验证应用是否已适配 iPad：

布局与多任务处理

• 应用使用基于 horizontalSizeClass 的自适应布局
• 已测试所有分屏视图比例（1/3、1/2、2/3）
• 已在滑动覆盖（紧凑宽度）中测试
• 台前调度：可流畅调整至任意尺寸
• 支持多个场景/窗口
• 纵向和横向两种方向均可正常使用
• 任何尺寸下均无内容裁切
• 所有 iPad 型号均正确处理安全区域

导航

• 常规宽度下显示侧边栏
• 紧凑宽度下使用标签栏
• 未选择内容时，详情视图显示占位内容
• 工具栏项目放在顶部，而非底部
• 适用时使用三栏布局

指针与触控板

• 所有交互元素均有悬停效果
• 提供右键上下文菜单
• 指针光标会根据内容调整（例如，文本使用 I 形光标）
• 点击并拖动可用于重新排序

键盘

• 所有主要操作均有 Cmd+按键快捷键
• 快捷键会显示在按住 Cmd 时出现的浮层中
• Tab 键可在表单字段间导航
• 不与系统快捷键冲突
• 方向键可浏览列表和网格
• Return/Enter 可触发默认操作

Apple Pencil

• 所有文本字段均支持随手写
• 绘图应用支持压力和倾斜
• 已处理轻点两下交互（如适用）

拖放

• 内容可拖出到其他应用
• 可从其他应用拖入内容
• 支持拖动多个项目
• 所有拖动状态均有视觉反馈

外接显示器

• 显示扩展内容（而非仅镜像）
• 能妥善处理连接/断开连接

无障碍

• 为所有仅含图标的按钮和自定义交互元素添加 VoiceOver 标签
• 文本使用语义化的文字样式，并随动态字体大小缩放（包括无障碍字体大小）
• 通过完整键盘访问可使用所有功能（Tab 导航、合理的焦点顺序）
• 交互元素不能仅依靠悬停状态来区分
• 在所有分屏宽度下，VoiceOver 都能正确导航
• 遵循粗体文本偏好设置（SwiftUI 会自动处理；UIKit 检查 UIAccessibility.isBoldTextEnabled）
• 遵循增强对比度偏好设置（自定义颜色通过 colorSchemeContrast 或 isDarkerSystemColorsEnabled 提供高对比度变体）

---

反模式

请勿：放大 iPhone 布局

将单列 iPhone 界面拉伸以填满 iPad 屏幕会浪费空间、显得敷衍，并带来糟糕的体验。请始终针对更大的画布重新设计。

请勿：禁用多任务处理

切勿选择退出多任务处理支持。用户期望每款应用都能在分屏和悬浮窗口中运行。要求全屏会妨碍 iPad 工作流。

请勿：忽略键盘

许多 iPad 用户配有妙控键盘或智能键盘。没有键盘快捷键的应用会迫使用户不断伸手触碰屏幕。请为所有常用操作提供快捷键。

请勿：在常规宽度下使用 iPhone 风格的底部标签栏

底部标签栏会浪费 iPad 的垂直空间，也显得格格不入。在常规宽度下，请改用侧边栏导航。SwiftUI 会通过 .sidebarAdaptable 自动完成此操作。

请勿：将弹出框显示为全屏工作表

在 iPad 上，弹出框应锚定到其来源元素，作为浮动面板显示。仅在沉浸式内容或确实需要全屏的流程中使用全屏工作表。避免将所有内容都显示为工作表的 iPhone 模式。

请勿：忽略指针悬停状态

缺少悬停效果会让使用触控板时的应用显得故障。用户无法判断哪些元素可交互。请始终为自定义交互元素添加悬停反馈。

请勿：硬编码尺寸

切勿根据特定 iPad 机型硬编码宽度、高度或位置。请使用 Auto Layout 约束、SwiftUI 灵活框架和 GeometryReader 实现动态尺寸。

请勿：忘记拖放

在 iPad 上，应用间拖放是核心工作流。不支持拖放会让应用成为内容流转的死胡同。至少应支持拖入和拖出文本、图像和 URL。

请勿：覆盖系统键盘快捷键

占用 Cmd+H、Cmd+Tab、Cmd+Space 或 Globe 快捷键不会生效，还会让期待系统行为的用户感到困惑。分配快捷键前，请先查看 Apple 的保留快捷键列表。

请勿：展示没有滚动功能的密集内容

iPad 大屏幕容易让设计人员想要一次展示所有内容。当内容超出可视区域时，仍应允许滚动。切勿为了避免滚动而截断内容。