Apple HIG: Content Components
自信地设计 Apple UI 组件
难以实现符合 Apple 平台原生感觉的图表、集合或内容展示?此技能提供权威的人机界面指南,帮助您构建可访问的、适应平台的组件,遵循 Apple 的设计原则。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“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。
安全审计
安全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).
质量评分
你能构建什么
构建数据仪表板的 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)提供内置的无障碍和平台适配时,避免从头开始实现自定义组件
- 不要跳过空状态 - 空白屏幕会使用户感到困惑;为如何填充空集合或数据显示提供有意义的指导