Apple HIG: Layout and Navigation Components
使用 HIG 导航模式设计自适应 Apple 应用布局
为多 Apple 平台构建应用需要理解复杂的导航模式和布局适配。本技能提供 Apple 官方人机界面指南,涵盖侧边栏、分割视图、标签栏等,确保您的应用遵循平台规范。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“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 了解替代模式。
安全审计
安全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.
质量评分
你能构建什么
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 空间规范