hig-components-layout

Name: hig-components-layout
Author: raintree-technology

github.com/raintree-technology设计与 UI148702 次安装6 天前更新

代码仓库

关于 hig-components-layout

一项用于选择和适配 Apple 平台布局与导航组件的设计技能，帮助开发者按层级组织信息，并考虑屏幕尺寸、多任务处理和平台惯例。

主要功能

01导航模式选择指导
02适配不同屏幕尺寸的布局
03iPad 多任务处理考量
04visionOS 空间布局指导
05布局组件参考索引

适用场景

01按应用结构选择导航方式
02将 iPhone 布局适配到 iPad
03规划分栏视图与尺寸变化行为

安装

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

$npx skills add https://github.com/raintree-technology/hig-doctor --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。使用已有上下文，只询问尚未涵盖的信息。

关键原则

按层级组织。 将信息从宽泛的类别结构化到具体的细节。顶层分区使用边栏，可浏览的条目使用列表，单个内容使用详情视图。
使用标准导航模式。 同级分区之间的扁平导航使用标签栏（iPhone）。深层层级导航使用边栏（iPad、Mac）。让模式与信息架构和平台相匹配。
适应屏幕尺寸。 iPad 上的三栏布局在 iPhone 上折叠为单栏。使用尺寸类和自适应 API（NavigationSplitView）实现自动适应。
在 iPad 上支持多任务。 优雅地响应 Split View、Slide Over 和 Stage Manager。在每种分屏比例和尺寸类过渡下进行测试。
在 visionOS 上保持空间一致性。 窗口、体积和装饰物位于共享空间。以可预测的方式定位。使用装饰物承载工具栏和控件，而不遮挡内容。
对溢出内容使用滚动视图。 为离散内容单元启用分页。在适当之处支持下拉刷新。尊重安全区域。
保持导航可预测。 用户应始终知道自己在哪里、如何到达那里，以及如何返回。使用返回按钮、面包屑和清晰的分区标题。
优先使用系统组件。 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`，iPadOS 18+）。Mac：侧边栏或工具栏标签
深层级内容	侧边栏 + NavigationSplitView	iPhone：单列堆栈。iPad：双列或三列。Mac：完整多列布局
深层文件/文件夹树	分栏视图	Mac：Finder 风格。iPad：自适应。iPhone：推入式导航
带详情的扁平列表	分栏视图（两列）	iPhone：推入/弹出式堆栈。iPad/Mac：主列 + 详情列
基于文档且带检查器的应用	窗口 + 面板	Mac：带检查器的主窗口。iPad：工作表或弹出框
带工具的空间应用	窗口 + 装饰元素	visionOS：窗口上的装饰元素。其他平台：工具栏

布局适配清单

紧凑宽度（iPhone 竖屏）： 导航会折叠为单个堆栈吗？标签栏是否可见？
常规宽度（iPad 横屏、Mac）： 导航会扩展为侧边栏 + 详情视图吗？空间是否得到充分利用？
多任务处理（iPad）： 能否适配所有分屏比例？在 Slide Over 中能否正常使用？
无障碍功能： 是否支持所有字号的动态字体？VoiceOver 顺序是否合理？
方向： 内容能否在竖屏和横屏之间重新排列？
visionOS： 窗口位置是否符合人体工学？装饰元素是否易于访问？深度是否有意义？

输出格式

推荐的导航模式，并说明其与应用信息架构相匹配的理由。
布局层级，从根容器开始逐层列出（例如，TabView > NavigationSplitView > List > Detail）。
平台适配，涵盖目标平台和尺寸类别。
各尺寸类别转换时的行为。

要提出的问题

应用的信息架构是什么？（分区、层级深度、顶层类别？）
有多少个顶层分区？
目标平台有哪些？
是否需要在 iPad 上支持多任务处理？
使用 SwiftUI 还是 UIKit？