SuperAPI AI 工具集

hig-components-content

设计与创作

查看项目

更新于 10-15 18:08

技能介绍

用途

该技能用于在涉及 Apple 平台内容展示组件时提供设计指导。当用户询问“图表组件”“集合视图”“图像视图”等内容展示相关问题时,可依据 Apple 人机界面指南(HIG)给出建议。技能说明在提问前应先检查 .claude/apple-design-context.md,优先使用已有上下文,只询问尚未覆盖的信息。

主要能力

技能围绕内容展示组件提供以下指导:

  • 图表(Charts):Swift Charts、柱状/折线/面积/点标记、图表无障碍、音频图。
  • 集合(Collections):网格/列表布局、组合式布局、选择、重排序、可差分数据源。
  • 图像视图(Image Views):宽高比处理、内容模式、SF Symbol 图像、无障碍。
  • 图像井(Image Wells):拖放式图像选择、macOS 专用、占位内容。
  • 颜色井(Color Wells):颜色选择 UI、系统颜色选择器、自定义色彩空间。
  • 网页视图(Web Views):WKWebView、SFSafariViewController、导航控件、内容限制。
  • 活动视图(Activity Views):分享面板、活动项、自定义活动、操作扩展。
  • 锁定视图(Lockups):图像+文字元素、tvOS 卡片布局、焦点效果、货架布局。

技能还提供组件选择指南,按内容需求推荐组件并注明平台说明,例如:可视化定量数据推荐图表(iOS 16+、macOS 13+、watchOS 9+);浏览网格或列表推荐集合视图;展示单张图像推荐图像视图;通过拖放或浏览选择图像推荐图像井(主要用于 macOS);选择颜色推荐颜色井(macOS、iOS 14+);内联展示网页内容推荐 WKWebView;向其他应用分享内容推荐活动视图;内容卡片(图像+文字)推荐锁定视图(主要用于 tvOS)。

使用方式

技能以参考文件索引的形式组织内容,每个主题对应一个参考文件(如 charts.md、collections.md 等)。输出格式建议包含:组件推荐及理由(引用相关 HIG 参考文件)、配置指导(关键属性与设置)、推荐组件的无障碍要求、目标平台的平台特定说明。

技能建议在提供指导前询问以下问题:内容类型是什么(定量数据、图像、网页内容、可浏览集合、分享操作)?面向哪些平台?内容是静态还是动态?内容量有多大(少量项目还是成百上千,会影响组件选择与优化)?

适用场景

适用于在 Apple 平台(iOS、macOS、watchOS、tvOS、visionOS)上设计或评审内容展示界面的场景,包括选择图表、集合、图像、网页、分享等组件的决策,以及无障碍、平台适配和性能优化方面的咨询。

关键原则

  • 适配不同尺寸与场景:内容组件须跨屏幕尺寸、方向和分屏配置工作,使用 Auto Layout 和尺寸类。
  • 保证内容可访问:图表需音频图支持,图像需替代文本,集合需正确的 VoiceOver 导航顺序,所有内容组件需标签和描述。
  • 维持视觉层级:通过间距、尺寸和分组建立清晰的信息层级,主要内容应视觉突出。
  • 优先使用系统组件:在构建自定义组件前评估 UICollectionView、SwiftUI Charts、WKWebView,系统组件自带无障碍和平台适配。
  • 尊重平台惯例:tvOS 上的集合使用带视差的大尺寸锁定视图,iOS 上同一集合使用紧凑单元格与触摸目标,visionOS 上内容获得深度和悬停效果。
  • 处理空状态:显示有意义的空状态并给出填充指引,而非空白屏幕。
  • 优化性能:对大数据集使用懒加载、单元格复用、分页和预取。

限制

资料未提供该技能的具体安装命令、收费方式、价格、平台支持范围或实际使用效果等信息,暂未提供。相关技能包括 hig-foundations(颜色、排版、无障碍和图像指南)、hig-patterns(数据可视化、分享和加载模式)、hig-components-layout(承载内容的结构容器,如滚动视图、列表、分栏视图)、hig-platforms(平台特定组件行为,如 tvOS 上的锁定视图、macOS 上的网页视图)。