技能 Apple HIG: Layout and Navigation Components
📦

Apple HIG: Layout and Navigation Components

安全

使用 HIG 导航模式设计自适应 Apple 应用布局

为多 Apple 平台构建应用需要理解复杂的导航模式和布局适配。本技能提供 Apple 官方人机界面指南,涵盖侧边栏、分割视图、标签栏等,确保您的应用遵循平台规范。

支持: Claude Codex Code(CC)
🥉 73 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“Apple HIG: Layout and Navigation Components”。 我正在构建一个带有检查器面板的文档编辑器。我应该使用侧边栏还是面板?

预期结果:

对于带检查器的文档编辑器,在 macOS 上使用面板(而非侧边栏)。侧边栏用于各部分之间的主要导航,而面板用于补充主要内容的次要控件和属性。在 iPad 上,将检查器呈现为弹出框或工作表。参考:panels.md 了解检查器模式,sidebars.md 了解主要导航模式。

正在使用“Apple HIG: Layout and Navigation Components”。 如果我有 6 个顶层部分,如何处理标签栏?

预期结果:

iOS 标签栏最多支持 5 个可见标签。有 6 个部分时,使用"更多"标签来容纳额外部分。不过,请考虑 6 个顶层部分是否意味着可以通过侧边栏(iPad)或嵌套导航来重构结构。对于 iPadOS 18+,使用 .sidebarAdaptable 在 iPad 上自动显示侧边栏,在 iPhone 上显示标签栏。参考:tab-bars.md 了解标签数量指导,sidebars.md 了解替代模式。

安全审计

安全
v1 • 2/25/2026

This skill contains only documentation markdown files referencing Apple Human Interface Guidelines. All 768 static analysis findings are false positives: backtick patterns are markdown code blocks with API names, URLs link to official Apple Developer documentation, and cryptographic/C2 keywords are spurious text matches in design documentation. No executable code, network calls, or system commands present.

12
已扫描文件
1,169
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude

质量评分

45
架构
100
可维护性
87
内容
50
社区
100
安全
65
规范符合性

你能构建什么

iOS 应用导航设计

一位开发者的首个 iPad 应用需要在标签栏和侧边栏之间做出导航选择。本技能解释何时使用每种模式,以及 NavigationSplitView 如何在不同尺寸类别间适配。

跨平台布局策略

一个团队要在 iPhone、iPad 和 Mac 上发布应用,需要统一的导航策略。本技能提供适配检查清单和模式选择表,帮助规划响应式布局。

visionOS 空间布局

开发首个 visionOS 应用的开发者需要理解窗口、体量和装饰元素。本技能解释空间定位和装饰元素附着模式。

试试这些提示

基础导航模式选择
我正在构建一个包含 4 个主要部分的应用:主页、搜索、文库和设置。iPhone 和 iPad 应该分别使用哪种导航模式?
自适应布局指导
我的应用在 iPad 上使用三栏布局,但在 iPhone 上显示有问题。我应该如何使用 NavigationSplitView 来适配?
平台特定规范
高级多任务支持
我的 iPad 应用需要支持分屏视图、滑动悬浮和 Stage Manager。我应该测试哪些尺寸类别转换,以及如何处理它们?

最佳实践

  • 提问前始终检查是否已存在 apple-design-context.md - 优先使用已有信息
  • 使导航模式与信息架构深度匹配:扁平结构使用标签栏,深层层级使用侧边栏
  • 在每个尺寸类别转换和 iPad 多任务比例下测试布局适配

避免

  • 在 iPad 上使用标签栏处理深层层级,而侧边栏更为合适
  • 构建无法适配紧凑与常规尺寸类别的固定宽度布局
  • 针对 Apple Vision Pro 时忽略 visionOS 空间规范

常见问题

我应该何时使用侧边栏而非标签栏?
对于扁平导航的 3-5 个同级顶层部分使用标签栏(iPhone)。对于深层层级导航或较大部分数量时使用侧边栏(iPad、Mac)。iPadOS 18+ 支持 .sidebarAdaptable,可在 iPad 上自动显示侧边栏,在 iPhone 上显示标签栏。
如何让我的布局同时适用于 iPhone 和 iPad?
使用自适应组件如 NavigationSplitView 和 SizeClass 修饰符。首先为紧凑宽度(iPhone)设计,然后为常规宽度(iPad/Mac)扩展。在每个尺寸类别转换时测试,并使用技能中的适配检查清单。
标签栏中最多可以显示多少个标签?
iOS 标签栏最多显示 5 个标签。额外项目会进入"更多"部分。如果您需要超过 5 个顶层部分,请考虑使用侧边栏或嵌套导航层级来重构。
如何支持 iPad 多任务(分屏视图、滑动悬浮)?
从窄到宽测试应用的每个分割比例。确保内容适当重排,导航相应适配。使用自动布局(auto-layout)和尺寸类别,而非固定尺寸。参考:split-views.md 和 windows.md 了解多任务指导。
visionOS 中的装饰元素(ornaments)是什么?
装饰元素(Ornaments)是 visionOS 中附着于窗口的 UI 元素,用于工具栏和控件,不会遮挡内容。它们出现在窗口边缘(顶部、底部、前导、后随)。使用装饰元素放置持久性控件,同时保持主要内容可见。参考:ornaments.md。
我应该使用 SwiftUI 还是 UIKit 来实现导航组件?
SwiftUI 通过 NavigationSplitView、TabView 和 NavigationStack 提供内置自适应性,可自动处理尺寸类别变化。UIKit 需要更多手动工作,使用 UISplitViewController 和 UINavigationController。对于新应用,除非有特定的 UIKit 需求,否则优先选择 SwiftUI。