hig-components-content

Apple HIG：内容组件

在提问前先检查 .claude/apple-design-context.md。使用已有上下文，只询问尚未涵盖的信息。

核心原则

1. 适配不同尺寸和场景。 内容组件必须能在各种屏幕尺寸、方向和 multitasking 配置下正常工作。使用 Auto Layout 和 size class。

2. 让内容可访问。 图表需要支持音频图。图像需要替代文本。集合需要正确的 VoiceOver 导航顺序。所有内容组件都需要标签和描述。

3. 保持视觉层级。 使用间距、尺寸和分组来建立清晰的信息层级。主要内容应在视觉上突出。

4. 优先使用系统组件。 在构建自定义组件之前，先评估 UICollectionView、SwiftUI Charts、WKWebView。系统组件自带无障碍支持和平台适配能力。

5. 尊重平台惯例。 tvOS 上的集合使用带视差效果的大尺寸卡片。同样的集合在 iOS 上使用紧凑单元格和触摸目标。在 visionOS 上，内容会获得深度和悬停效果。

6. 处理空状态。 展示有意义的空状态，并给出如何填充内容的指引，而不是一片空白屏幕。

7. 为性能而优化。 对大数据集使用懒加载、单元格复用、分页和预取。

参考索引

参考	主题	关键内容
charts.md	图表	Swift Charts、柱状/折线/面积/散点标记、图表无障碍、音频图
collections.md	集合	网格/列表布局、组合式布局、选择、重排序、可差分数据源
image-views.md	图像视图	宽高比处理、内容模式、SF Symbol 图像、无障碍
image-wells.md	图像池	拖放式图像选择、macOS 专属、占位内容
color-wells.md	颜色池	颜色选择 UI、系统颜色选择器、自定义色彩空间
web-views.md	Web 视图	WKWebView、SFSafariViewController、导航控件、内容限制
activity-views.md	活动视图	分享表单、活动项、自定义活动、操作扩展
lockups.md	卡片组合	图像+文字元素、tvOS 卡片布局、焦点效果、货架布局

组件选择指南

内容需求	推荐组件	平台说明
可视化定量数据	图表（Swift Charts）	iOS 16+、macOS 13+、watchOS 9+
浏览网格或列表中的项目	集合视图	复杂排布使用组合式布局
显示单张图像	图像视图	支持宽高比适配；提供无障碍描述
通过拖放或浏览选择图像	图像池	主要用于 macOS；在 iOS 上使用图像选择器
选择颜色	颜色池	触发系统颜色选择器；macOS、iOS 14+
内联展示 Web 内容	Web 视图（WKWebView）	外部浏览使用 SFSafariViewController
将内容分享到其他 App	活动视图	带可配置活动类型的系统分享表单
内容卡片（图像 + 文字）	卡片组合	主要用于 tvOS；可适配其他平台

输出格式

1. 组件推荐及理由，并引用相关的 HIG 参考文件。
2. 配置指引 —— 关键属性和设置。
3. 无障碍要求，针对所推荐的组件。
4. 平台专属说明，针对目标平台。

需要询问的问题

1. 内容类型是什么？（定量数据、图像、Web 内容、可浏览的集合、分享操作？）
2. 面向哪些平台？
3. 内容是静态还是动态？
4. 内容量有多大？（少量项目还是成百上千，会影响组件选择和优化方式。）

相关技能

• hig-foundations -- 颜色、排版、无障碍设计和图像指南
• hig-patterns -- 数据可视化、共享和加载模式
• hig-components-layout -- 承载内容的结构容器（滚动视图、列表、分栏视图）
• hig-platforms -- 特定平台的组件行为（tvOS 上的锁定标识、macOS 上的网页视图）

---

由 Raintree Technology 构建 · 更多开发者工具