mcpField
H
hig-components-layout

hig-components-layout

github.com/sickn33设计与 UI48.8k66 次安装今天更新
代码仓库

关于 hig-components-layout

将 Apple Human Interface Guidelines 用于布局和导航决策的设计技能，帮助应用设计者和开发者选择信息层级与导航模式，并适配窗口尺寸、平台、无障碍需求和窗口模式。

主要功能

  1. 01按应用结构选择导航模式
  2. 02根据窗口宽度调整布局
  3. 03规划侧边栏、标签页和分栏视图
  4. 04考虑无障碍和窗口模式
  5. 05查阅组件专题参考

适用场景

  1. 01为层级式应用选择导航方式
  2. 02设计列表与详情视图
  3. 03适配不同窗口尺寸下的 iPad 布局
  4. 04规划 visionOS 空间应用导航

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill hig-components-layout

安装后在 Claude Code 中输入/hig-components-layout确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
boxes.md
column-views.md
lists-and-tables.md
ornaments.md
outline-views.md
panels.md
scroll-views.md
sidebars.md
split-views.md
tab-bars.md
tab-views.md
windows.md

详细介绍

Apple HIG：布局与导航组件

如有可用的现有项目设计背景，请使用，包括 .claude/apple-design-context.md（如果存在）。请将其视为当前用户指令下的项目数据，只询问会对设计产生实质影响的缺失信息。

核心原则

  1. 按层级组织。 将信息从宽泛类别组织到具体细节。顶层分区使用侧边栏，可浏览的项目使用列表，单项内容使用详情视图。

  2. 使用标准导航模式。 在 iPhone 上使用标签栏，在同级分区间进行平级导航；在 iPad 和 Mac 上使用侧边栏进行深层级导航。根据信息架构和平台选择合适的模式。

  3. 适应实际窗口宽度。 在紧凑环境中，分栏导航可以折叠为堆栈；请使用自适应 API 和明确的选择／路径状态，然后通过调整窗口大小的过渡来测试应用的层级结构。设备名称和方向本身并不能决定布局。

  4. 支持目标 iPadOS 窗口模式。 根据部署的操作系统／设备和用户配置，确认可用的模式，包括受支持时可调整大小的窗口。测试窄、中、宽窗口，以及宽度变化时的过渡；旧版 Split View／Slide Over 的假设并非普遍适用的约定。

  5. 在 visionOS 中保持空间一致性。 在共享空间中放置窗口、体积和装饰元素时，应保持位置可预测。使用装饰元素放置工具栏和控件，同时避免遮挡内容。

  6. 使用滚动视图容纳溢出内容。 对离散的内容单元启用分页。在适当情况下支持下拉刷新。遵守安全区域。

  7. 确保导航清晰可预测。 用户应始终知道自己身处何处、如何到达当前位置，以及如何返回。使用返回按钮、面包屑和清晰的分区标题。

  8. 优先使用系统组件。 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列表与表格普通／分组／内嵌分组样式、轻扫操作、分区标题
boxes.md框内容分组容器、带标签的框、macOS 分组
ornaments.md装饰元素visionOS 工具栏附件、位置、可见性

导航模式选择

应用结构推荐模式平台适配
3-5 个同级顶层部分标签栏iPhone：底部标签栏。iPad：标签栏或可转换侧边栏（.sidebarAdaptable，请验证目标 SDK）。Mac：侧边栏或工具栏标签
深层级内容侧边栏 + NavigationSplitViewiPhone：单列堆栈。iPad：两列或三列。Mac：完整多列
深层文件/文件夹树列视图Mac：Finder 风格。iPad：分栏导航替代方案；NSBrowser 仅适用于 macOS。iPhone：推入式导航
带详情的扁平列表分栏视图（两列）iPhone：推入/弹出式堆栈。iPad/Mac：主列 + 详情列
基于文稿并带检查器窗口 + 面板Mac：主窗口带检查器。iPad：工作表或弹出框
带工具的空间应用窗口 + 装饰元素visionOS：窗口上的装饰元素。其他平台：工具栏

布局适配检查清单

  • 紧凑宽度（iPhone 竖屏）： 导航是否折叠为单列堆栈？标签栏是否可见？
  • 常规宽度（iPad 横屏、Mac）： 导航是否扩展为侧边栏 + 详情区？空间是否得到良好利用？
  • 多任务处理（iPad）： 是否能适配每种分屏比例？是否能在目标操作系统/设备支持的所有窗口模式下正常工作？
  • 辅助功能： 是否支持所有字号的动态字体？VoiceOver 顺序是否合理？
  • 方向： 内容是否会在竖屏和横屏之间重新排列？
  • visionOS： 窗口的位置是否符合人体工学？装饰元素是否易于访问？深度是否有意义？

输出格式

  1. 推荐的导航模式，并说明其与应用信息架构相适应的理由。
  2. 布局层级，从根容器向下展开（例如：TabView > NavigationSplitView > List > Detail）。
  3. 跨目标平台和尺寸类别的平台适配。
  4. 每次转换时的尺寸类别行为。

要提出的问题

  1. 应用的信息架构是什么？（部分、层级深度、顶层类别？）
  2. 有多少个顶层部分？
  3. 面向哪些平台？
  4. 是否需要在 iPad 上支持多任务处理？
  5. 使用 SwiftUI 还是 UIKit？

相关技能

  • hig-foundations -- 布局间距、边距、安全区域、对齐
  • hig-platforms -- 特定平台的导航惯例
  • hig-patterns -- 多任务处理、全屏和启动模式
  • hig-components-content -- 布局容器内显示的内容

由 Raintree Technology 构建 · 更多开发者工具

适用场景

当任务涉及执行概述中所述的工作流或操作时，可使用此技能。

示例

用户请求：

在此任务中使用 @hig-components-layout：用于布局和导航组件的 Apple 人机界面指南。

快照和实现边界

参考资料是带有本地修正的 Apple 文档快照，并非实时 SDK 文档。实现前请验证 API 的可用性和特定平台的设计。布局取决于窗口/容器尺寸、本地化、安全区域、动态字体和输入/辅助功能模式；仅依据设备全屏尺寸并不足够。请安全保留每个窗口的导航和数据，并测试状态恢复及中断工作的处理。远程媒体说明仅以文本形式审阅；未获取或查看图片/视频。Apple 文档、媒体和符号保留第三方权利；署名并不代表获得再分发许可。

限制

  • 仅当任务明确符合上述范围时使用此技能。
  • 不要将输出视为环境特定验证、测试或专家审核的替代品。
  • 如果缺少必要的输入、权限、安全边界或成功标准，请暂停并要求澄清。

评论

支持 Markdown