Back to Details

hig-components-content

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Apple HIG: Content Components

Apple HIG：内容组件

Check for 
.claude/apple-design-context.md
before asking questions. Use existing context and only ask for information not already covered.
提问前请查阅
.claude/apple-design-context.md
文件。请利用已有上下文，仅询问未涵盖的信息。

Key Principles

核心原则

  1. Adapt to different sizes and contexts. Content components must work across screen sizes, orientations, and multitasking configurations. Use Auto Layout and size classes.
  2. Make content accessible. Charts need audio graph support. Images need alt text. Collections need proper VoiceOver navigation order. All content components need labels and descriptions.
  3. Maintain visual hierarchy. Use spacing, sizing, and grouping to establish clear information hierarchy. Primary content should be visually prominent.
  4. Use system components first. Evaluate UICollectionView, SwiftUI Charts, WKWebView before building custom. System components come with built-in accessibility and platform adaptation.
  5. Respect platform conventions. A collection on tvOS uses large lockups with parallax. The same collection on iOS uses compact cells with touch targets. On visionOS, content gains depth and hover effects.
  6. Handle empty states. Show a meaningful empty state with guidance on how to populate it, not a blank screen.
  7. Optimize for performance. Use lazy loading, cell reuse, pagination, and prefetching for large datasets.
  1. 适配不同尺寸与使用场景。内容组件需适配不同屏幕尺寸、方向及多任务配置。请使用Auto Layout和size classes。
  2. 确保内容可访问性。图表需支持音频图表功能。图片需添加替代文本。集合类组件需设置正确的VoiceOver导航顺序。所有内容组件都需要标签和描述。
  3. 维持视觉层级。通过间距、尺寸和分组建立清晰的信息层级。主要内容应在视觉上突出显示。
  4. 优先使用系统组件。在构建自定义组件前，请先评估UICollectionView、SwiftUI Charts、WKWebView。系统组件内置了可访问性支持和平台适配能力。
  5. 遵循平台惯例。tvOS上的集合组件使用带视差效果的大型锁定布局。iOS上的同类型集合组件则使用带触摸目标的紧凑单元格。在visionOS上，内容需具备深度感和悬停效果。
  6. 处理空状态。显示有意义的空状态提示，并说明如何填充内容，而非仅展示空白屏幕。
  7. 优化性能。对于大型数据集，请使用懒加载、单元格复用、分页和预加载机制。

Reference Index

参考索引

ReferenceTopicKey content
charts.mdChartsSwift Charts, bar/line/area/point marks, chart accessibility, audio graphs
collections.mdCollectionsGrid/list layouts, compositional layout, selection, reordering, diffable data sources
image-views.mdImage ViewsAspect ratio handling, content modes, SF Symbol images, accessibility
image-wells.mdImage WellsDrag-and-drop image selection, macOS-specific, placeholder content
color-wells.mdColor WellsColor selection UI, system color picker, custom color spaces
web-views.mdWeb ViewsWKWebView, SFSafariViewController, navigation controls, content restrictions
activity-views.mdActivity ViewsShare sheets, activity items, custom activities, action extensions
lockups.mdLockupsImage+text elements, tvOS card layouts, focus effects, shelf layouts
参考文档主题核心内容
charts.md图表Swift Charts，柱状图/折线图/面积图/散点图标记，图表可访问性，音频图表
collections.md集合组件网格/列表布局，组合式布局，选择、重排序功能，差分数据源
image-views.md图片视图宽高比处理，内容模式，SF Symbol图片，可访问性
image-wells.md图片选择框拖拽式图片选择，macOS专属功能，占位内容
color-wells.md颜色选择框颜色选择UI，系统颜色选择器，自定义色彩空间
web-views.md网页视图WKWebView，SFSafariViewController，导航控件，内容限制
activity-views.md活动视图分享面板，活动项，自定义活动，动作扩展
lockups.md锁定布局图片+文本元素，tvOS卡片布局，焦点效果，货架布局

Component Selection Guide

组件选择指南

Content NeedRecommended ComponentPlatform Notes
Visualizing quantitative dataCharts (Swift Charts)iOS 16+, macOS 13+, watchOS 9+
Browsing a grid or list of itemsCollection ViewCompositional layout for complex arrangements
Displaying a single imageImage ViewSupport aspect ratio fitting; provide accessibility description
Selecting an image via drag or browseImage WellmacOS primarily; use image pickers on iOS
Selecting a colorColor WellTriggers system color picker; macOS, iOS 14+
Showing web content inlineWeb View (WKWebView)Use SFSafariViewController for external browsing
Sharing content to other appsActivity ViewSystem share sheet with configurable activity types
Content card (image + text)LockupPrimarily tvOS; adaptable to other platforms
内容需求推荐组件平台说明
可视化量化数据Charts (Swift Charts)iOS 16+, macOS 13+, watchOS 9+
浏览网格或列表类内容Collection View复杂布局可使用组合式布局
展示单张图片Image View支持宽高比适配；需提供可访问性描述
通过拖拽或浏览选择图片Image Well主要适用于macOS；iOS请使用图片选择器
选择颜色Color Well触发系统颜色选择器；支持macOS、iOS 14+
内嵌展示网页内容Web View (WKWebView)外部浏览请使用SFSafariViewController
向其他应用分享内容Activity View可配置活动类型的系统分享面板
内容卡片（图片+文本）Lockup主要适用于tvOS；可适配其他平台

Output Format

输出格式

  1. Component recommendation with rationale, referencing the relevant HIG reference file.
  2. Configuration guidance -- key properties and setup.
  3. Accessibility requirements for the recommended component.
  4. Platform-specific notes for targeted platforms.
  1. 组件推荐及理由，需引用相关的HIG参考文档。
  2. 配置指南——关键属性与设置方法。
  3. 推荐组件的可访问性要求。
  4. 针对目标平台的特定说明。

Questions to Ask

待确认问题

  1. What type of content? (Quantitative data, images, web content, browsable collection, share action?)
  2. Which platforms?
  3. Static or dynamic content?
  4. How much content? (Few items vs hundreds/thousands affects component choice and optimization.)
  1. 内容类型是什么？（量化数据、图片、网页内容、可浏览集合、分享操作？）
  2. 目标平台有哪些？
  3. 内容是静态还是动态的？
  4. 内容量有多少？（少量条目 vs 成百上千条会影响组件选择和优化方案。）

Related Skills

相关技能

  • hig-foundations -- Color, typography, accessibility, and image guidelines
  • hig-patterns -- Data visualization, sharing, and loading patterns
  • hig-components-layout -- Structural containers (scroll views, lists, split views) hosting content
  • hig-platforms -- Platform-specific component behavior (lockups on tvOS, web views on macOS)
Built by Raintree Technology · More developer tools
  • hig-foundations —— 颜色、排版、可访问性及图片相关指南
  • hig-patterns —— 数据可视化、分享及加载模式
  • hig-components-layout —— 承载内容的结构化容器（滚动视图、列表、拆分视图）
  • hig-platforms —— 平台特定的组件行为（tvOS上的锁定布局、macOS上的网页视图）
由Raintree Technology开发 · 更多开发者工具

When to Use

使用场景

This skill is applicable to execute the workflow or actions described in the overview.
当需要执行概述中描述的工作流或操作时，适用本技能。