技能 Apple HIG: Content Components
📦

Apple HIG: Content Components

安全

自信地设计 Apple UI 组件

难以实现符合 Apple 平台原生感觉的图表、集合或内容展示?此技能提供权威的人机界面指南,帮助您构建可访问的、适应平台的组件,遵循 Apple 的设计原则。

支持: Claude Codex Code(CC)
🥉 73 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“Apple HIG: Content Components”。 I need to display stock price data over time in an iOS app. What chart type should I use?

预期结果:

对于随时间变化的股票价格数据,请使用带折线标记的折线图。折线标记非常适合显示数值如何随时间变化,并帮助人们可视化趋势。配置动态 Y 轴范围,使数据填充绘图区域,并确保为每个数据点提供无障碍标签。考虑添加音频图表支持,以便 VoiceOver 用户能够听到趋势。有关完整的实现细节,请参考 charts.md。

正在使用“Apple HIG: Content Components”。 How do I implement a collection view for tvOS?

预期结果:

在 tvOS 上,集合使用带有视差效果和货架布局的大型锁定卡片。焦点管理至关重要 - 项目在获得焦点时应缩放并产生深度感。使用 UICollectionView 与组合布局,并确保您的焦点引擎遵循预期的导航模式。锁定卡片通常包含带有文本叠加的图像。有关 tvOS 特定模式,请参阅 lockups.md;有关布局配置,请参阅 collections.md。

安全审计

安全
v1 • 2/25/2026

Documentation-only skill containing Apple Human Interface Guidelines in Markdown format. No executable code, no runtime behavior, and no security risks. All static analysis findings are false positives from Markdown content (inline code blocks, documentation URLs, and legitimate UI terminology).

8
已扫描文件
587
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude

质量评分

45
架构
100
可维护性
87
内容
50
社区
100
安全
65
规范符合性

你能构建什么

构建数据仪表板的 iOS 开发者

一位 iOS 开发者需要在图表中显示健身追踪数据。此技能帮助他们选择柱状图和折线图标记、配置坐标轴范围,并实现音频图表无障碍功能。

创建 tvOS 界面的 UI/UX 设计师

一位设计师正在为 Apple TV 构建媒体浏览应用。此技能提供针对 tvOS 的锁定卡片组件、焦点效果和货架布局的指导。

确保无障碍的跨平台开发者

一位开发者需要确保其集合视图在所有 Apple 平台上与 VoiceOver 和切换控制正常配合使用。此技能提供无障碍要求和测试指导。

试试这些提示

组件选择
我需要在 [platform] 应用中显示 [content type]。我应该使用什么组件,为什么?
无障碍实现
如何使 [component] 对 VoiceOver 用户无障碍?我需要什么标签和描述?
平台特定行为
[component] 在 [platform] 与 [other platform] 上的行为有何不同?我需要做哪些适配?
配置和最佳实践
我应该为 [component] 配置哪些关键属性?有哪些性能和无障碍最佳实践?

最佳实践

  • 在提问之前,务必检查 `.claude/apple-design-context.md` 中的现有设计上下文 - 此技能建立在基础颜色、排版和无障碍指南之上
  • 尽早考虑平台特定的行为 - 在 iOS 上有效的集合可能需要针对 tvOS(锁定卡片)或 visionOS(深度和悬停效果)进行重大适配
  • 从开始就设计无障碍功能 - 图表需要音频图表支持,图像需要替代文本,所有组件都需要适当的 VoiceOver 标签

避免

  • 不要仅根据视觉外观选择组件 - 始终考虑无障碍要求、平台约定和数据特征
  • 当系统组件(Swift Charts、UICollectionView、WKWebView)提供内置的无障碍和平台适配时,避免从头开始实现自定义组件
  • 不要跳过空状态 - 空白屏幕会使用户感到困惑;为如何填充空集合或数据显示提供有意义的指导

常见问题

集合视图和表视图有什么区别?
集合视图使用组合布局支持复杂的网格和自定义布局,而表视图仅限于单列列表。对网格、嵌套网格和多列布局使用集合。对简单列表使用表。两者都支持可差异化数据源和延迟加载以提高性能。
我应该使用 WKWebView 还是 SFSafariViewController?
当您需要在应用界面内内联显示 Web 内容并控制导航体验时,请使用 WKWebView。对于外部 Web 浏览,请使用 SFSafariViewController - 它提供熟悉的 Safari 界面,具有阅读模式、自动填充和共享功能。
如何在图表中选择柱状、折线和点标记?
使用柱状标记来比较跨类别的值或显示整体的各个部分。当值表示连续变化时,使用折线标记显示随时间的趋势。使用点标记来描绘单独的不同值并显示两个数据属性之间的关系。
什么是锁定卡片,何时应该使用它?
锁定卡片是结合图像和文本的内容卡片,通常用于媒体浏览。锁定卡片主要用于 tvOS,在那里它们以带有视差效果的卡片形式出现。在其他平台上,您可以调整锁定卡片模式以用于类似的卡片布局。在显示可浏览的媒体内容(如电影、电视节目或产品)时使用锁定卡片。
我需要支持所有提到的 Apple 平台吗?
不需要 - 仅支持您的应用所定位的平台。但请注意,如果您以后扩展到其他平台,组件行为可能会有很大差异。例如,为 iOS 触摸交互优化的集合需要针对 tvOS 焦点导航或 visionOS 深度效果进行��量更改。
图表需要实现的最小无障碍功能是什么?
每个图表都需要描述其目的和结构的无障碍标签。为交互式标记或有意义的一组标记提供单独的标签。支持音频图表,为 VoiceOver 用户提供数据趋势的听觉表示。隐藏辅助技术的可见轴标签,因为 VoiceOver 通过标签报告值。有关完整要求,请参阅 charts.md。