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. 确保内容可访问性：图表需支持音频图表功能；图片需添加替代文本（alt text）；集合视图需设置合理的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
内容需求推荐组件平台说明
量化数据可视化图表（Swift Charts）iOS 16+、macOS 13+、watchOS 9+
浏览项目网格或列表集合视图（Collection View）复杂布局可使用组合布局
展示单张图片图像视图（Image View）支持宽高比适配；需提供无障碍描述
通过拖放或浏览选择图像图像选择框（Image Well）主要用于macOS；iOS请使用图像选择器
选择颜色颜色选择器（Color Well）触发系统颜色选择器；支持macOS、iOS 14+
内联展示网页内容网页视图（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开发 · 更多开发者工具