SuperAPI AI 工具集

hig-components-layout

设计与创作

查看项目

更新于 10-15 14:22

技能介绍

用途

该技能用于在设计与开发 Apple 平台应用时,依据 Apple Human Interface Guidelines(HIG)处理布局与导航组件相关问题。当用户询问侧边栏、分栏视图、标签栏、标签视图等布局与导航组件时,可调用此技能获取规范化的设计建议与实现方向。

主要能力

技能覆盖以下布局与导航组件主题,每个主题对应一份参考文档:

  • 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 在窗口上使用装饰件;其他平台用工具栏。

使用方式

技能在提问前会先检查 .claude/apple-design-context.md,复用已有上下文,只询问尚未覆盖的信息。

技能会提出以下问题以明确需求:

  • 应用的信息架构是什么?(分区、层级深度、顶层类别?)
  • 有多少个顶层分区?
  • 面向哪些平台?
  • 是否需要在 iPad 上支持多任务?
  • 使用 SwiftUI 还是 UIKit?

技能的输出格式包括:

  • 推荐导航模式,并说明其与应用信息架构的匹配理由。
  • 从根容器向下的布局层级(例如 TabView > NavigationSplitView > List > Detail)。
  • 面向目标平台与尺寸类的平台适配方案。
  • 每次过渡时的尺寸类行为。

适用场景

适用于为 iPhone、iPad、Mac、visionOS 设计或实现布局与导航结构的场景,包括选择导航模式、规划布局层级、处理屏幕尺寸适配、支持 iPad 多任务(Split View、Slide Over、Stage Manager)、维护 visionOS 空间一致性、以及确保无障碍与动态字体支持。

关键原则

  • 层级化组织:从宽泛类别到具体细节,侧边栏用于顶层分区,列表用于可浏览项,详情视图用于单项内容。
  • 使用标准导航模式:标签栏用于同级分区间的扁平导航(iPhone),侧边栏用于深层级导航(iPad、Mac),模式需匹配信息架构与平台。
  • 适配屏幕尺寸:iPad 三栏在 iPhone 上折叠为单栏,使用尺寸类和自适应 API(NavigationSplitView)自动适配。
  • 支持 iPad 多任务:优雅响应 Split View、Slide Over 和 Stage Manager,在每个分屏比例和尺寸类过渡下测试。
  • 保持 visionOS 空间一致性:窗口、体积和装饰件位于共享空间,位置可预测,装饰件用于工具栏和控件且不遮挡内容。
  • 滚动视图用于溢出内容:为离散内容单元启用分页,适当支持下拉刷新,尊重安全区域。
  • 保持导航可预测:用户应始终知道所在位置、如何到达、如何返回,使用返回按钮、面包屑和清晰的分区标题。
  • 优先使用系统组件:UINavigationController、UISplitViewController、NavigationSplitView 和 TabView 提供内置自适应、无障碍和状态恢复。

布局适配检查清单

  • 紧凑宽度(iPhone 竖屏):导航是否折叠为单堆栈?标签栏是否可见?
  • 常规宽度(iPad 横屏、Mac):导航是否展开为侧边栏 + 详情?空间利用是否良好?
  • 多任务(iPad):是否在每个分屏比例下适配?在 Slide Over 中是否可用?
  • 无障碍:是否在所有尺寸下支持动态字体?VoiceOver 顺序是否合理?
  • 方向:内容是否在竖屏与横屏间重排?
  • visionOS:窗口位置是否符合人体工学?装饰件是否可访问?深度是否有意义?

限制

该技能聚焦于 Apple HIG 的布局与导航组件规范,不涉及其他平台的设计规范。具体实现细节需结合 SwiftUI 或 UIKit 的官方文档。相关技能包括 hig-foundations(布局间距、边距、安全区域、对齐)、hig-platforms(平台特定导航惯例)、hig-patterns(多任务、全屏、启动模式)、hig-components-content(布局容器内展示的内容)。