
关于
Apple 人机界面指南中的布局和导航组件。
name: hig-components-layout description: Apple Human Interface Guidelines 布局和导航组件指南。 risk: unknown source: community date_added: '2026-02-27'
Apple HIG:布局与导航组件
在提问之前,请先检查 .claude/apple-design-context.md。使用现有上下文,仅询问尚未涵盖的信息。
核心原则
-
按层级组织。 从宽泛类别到具体细节构建信息结构。侧边栏用于顶级分区,列表用于可浏览项目,详情视图用于单个内容。
-
使用标准导航模式。 Tab Bar 用于对等分区之间的扁平导航(iPhone)。侧边栏用于深层级导航(iPad、Mac)。根据信息架构和平台匹配相应模式。
-
适配屏幕尺寸。 iPad 上的三栏布局在 iPhone 上折叠为单栏。使用 size classes 和自适应 API(NavigationSplitView)实现自动适配。
-
支持 iPad 多任务。 优雅响应 Split View、Slide Over 和 Stage Manager。在每种分屏比例和 size class 转换下进行测试。
-
在 visionOS 上保持空间一致性。 共享空间中的窗口、体积和装饰件。位置可预测。使用 ornaments 放置工具栏和控件,避免遮挡内容。
-
使用滚动视图处理溢出内容。 为离散内容单元启用分页。适当支持下拉刷新。遵守安全区域。
-
保持导航可预测。 用户应始终知道自己在哪里、如何到达这里以及如何返回。使用返回按钮、面包屑和清晰的分区标题。
-
优先使用系统组件。 UINavigationController、UISplitViewController、NavigationSplitView 和 TabView 提供内置的自适应性、无障碍性和状态恢复。
参考索引
| 参考文件 | 主题 | 关键内容 | |---|---|---| | sidebars.md | 侧边栏 | 源列表、选择状态、可折叠分区、iPad/Mac 模式 | | column-views.md | 列视图 | Finder 风格浏览、通过列逐步展开 | | outline-views.md | 大纲视图 | 可展开层级、展开三角形、树结构 | | split-views.md | 分栏视图 | 两栏/三栏布局、NavigationSplitView、自适应折叠 | | tab-views.md | 标签视图 | 分段标签、页面式标签、macOS 标签分组 | | tab-bars.md | 标签栏 | 底部标签栏(iOS)、角标计数、最大标签数 | | scroll-views.md | 滚动视图 | 分页、滚动指示器、内容边距、下拉刷新 | | windows.md | 窗口 | macOS/visionOS 窗口管理、尺寸、全屏、恢复 | | panels.md | 面板 | 检查器面板、实用面板、浮动面板、macOS 惯例 | | lists-and-tables.md | 列表与表格 | Plain/Grouped/Inset-Grouped 样式、滑动操作、分区标题 | | boxes.md | 容器 | 内容分组容器、带标签容器、macOS 分组 | | ornaments.md | 装饰件 | visionOS 工具栏附件、定位、可见性 |
导航模式选择
| 应用结构 | 推荐模式 | 平台适配 |
|---|---|---|
| 3-5 个对等顶级分区 | Tab Bar | iPhone:底部标签栏。iPad:侧边栏(.sidebarAdaptable,iPadOS 18+)。Mac:侧边栏或工具栏标签 |
| 深层级内容 | 侧边栏 + NavigationSplitView | iPhone:单栏堆栈。iPad:两栏/三栏。Mac:完整多栏 |
| 深层文件/文件夹树 | 列视图 | Mac:Finder 风格。iPad:可适配。iPhone:推送导航 |
| 带详情的扁平列表 | 分栏视图(两栏) | iPhone:推入/弹出堆栈。iPad/Mac:主栏 + 详情栏 |
| 带检查器的文档型应用 | 窗口 + 面板 | Mac:主窗口带检查器。iPad:Sheet 或 Popover |
| 带工具的空间应用 | 窗口 + 装饰件 | visionOS:窗口上的装饰件。其他平台:工具栏 |
布局适配检查清单
- [ ] 紧凑宽度(iPhone 竖屏): 导航折叠为单栈?标签栏可见?
- [ ] 常规宽度(iPad 横屏、Mac): 导航展开为侧边栏 + 详情?空间利用合理?
- [ ] 多任务(iPad): 在每种分屏比例下适配?在 Slide Over 中正常工作?
- [ ] 无障碍: 支持所有尺寸的 Dynamic Type?VoiceOver 顺序合理?
- [ ] 方向: 内容在竖屏和横屏之间重新排列?
- [ ] visionOS: 窗口位置符合人体工学?装饰件可访问?深度有意义?
输出格式
- 推荐的导航模式,附带针对应用信息架构的理由。
- 布局层级,从根容器向下(例如 TabView > NavigationSplitView > List > Detail)。
- 平台适配,跨平台说明。