关于
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）。
- 平台适配，跨平台说明。