如何根据 Apple HIG 规范设计应用的布局与导航 #

解决 UI 设计不符合平台原生习惯的问题：通过引入 Apple 人机交互指南（HIG）的决策矩阵，让 AI 能够根据应用的信息架构，自动推荐最合适的导航模式（如 Tab Bar 或 Sidebar）及其在多设备间的适配方案。

为什么需要这个技能 #

在开发 Apple 生态应用时，开发者常面临“导航模式选择困难”。例如，在 iPhone 上习惯的底部 Tab Bar，在 iPad 或 Mac 上应当转化为 Sidebar 还是 Toolbar？如果处理不当，会导致应用在不同设备上显得违和，且增加用户的学习成本。

本技能为 AI 提供了一个结构化的决策框架，涵盖了从层级组织、屏幕尺寸适配到多任务处理（Multitasking）的所有核心原则，确保生成的 UI 方案不仅美观，而且符合 Apple 用户的直觉。

适用场景 #

• 产品原型设计阶段：需要决定应用是采用扁平化导航还是深层级导航。
• 多平台适配（Adaptive Layout）：将一个 iOS 应用扩展到 iPadOS 或 macOS 时，需要定义布局的坍缩与展开逻辑。
• visionOS 开发：在空间计算环境下设计窗口、体积（Volumes）及装饰物（Ornaments）的布局。
• 代码实现前评审：在编写 SwiftUI 或 UIKit 代码前，验证导航路径是否符合系统标准。

核心工作流 #

1. 分析信息架构：AI 会询问应用的顶层分类数量、层级深度以及目标平台。
2. 匹配导航模式：
   • 3-5 个同级板块 $\to$ 推荐 Tab Bar（iOS） $\to$ 适配为 Sidebar（iPad/Mac）。
   • 深层层级内容 $\to$ 推荐 Sidebar + NavigationSplitView。
   • 文件/文件夹树 $\to$ 推荐 Column View（Mac 风格）。
3. 规划适配逻辑：定义在不同尺寸类（Size Classes）下的行为，例如 iPad 的三栏布局如何在 iPhone 上坍缩为单栏堆栈。
4. 执行合规性检查：对照 Checklist 检查多任务处理（Slide Over）、动态类型（Dynamic Type）及安全区域（Safe Areas）的兼容性。

下载和安装 #

下载 hig-components-layout 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐