沉浸式列表

沉浸式列表是内容行和所选项目预览的组合。它以更大的视窗呈现内容。

资源

类型	链接	状态
设计	设计来源 (Figma)	可用
实现	示例	N/A

亮点

• 动态内容预览。当用户浏览内容行时，预览区域会自动更新以显示当前聚焦的项目。
• 沉浸式列表组件以更大的视窗显示内容，使用户更容易查看和欣赏聚焦项目的视觉细节。
• 沉浸式列表提供有关聚焦项目的相关和上下文信息，帮助用户在不离开浏览体验的情况下做出明智的决定。
• 沉浸式列表组件使用渐进式公开，随着用户导航，揭示有关内容的更多详细信息，从而减少认知负荷并保持用户参与。
• 沉浸式列表组件确保应用程序中一致的交互，为用户提供熟悉且可预测的体验。

解剖结构

1. 图像背景
2. 内容块
3. 卡片聚焦
4. 内容网格

1. 电影式遮罩
2. 海报
3. 背景颜色

规格

行为

在沉浸式列表中导航卡片时，所选卡片的详细信息会逐渐在背景中显示。

当沉浸式列表处于焦点时，它的高度会增加，以显示其他信息，例如背景标题和描述，如下面的视频所示。

使用

当您想要突出显示特色或推广内容（例如新发布的节目、热门节目或独家内容）时，请使用沉浸式轮播。更大的视窗和动态预览提供了展示这些高优先级项目的引人注目的方式。

图像显示

1. **卡片焦点**：当用户浏览轮播时，聚焦的卡片会以视觉方式突出显示，将卡片缩放 1.1 倍，使用边框和其他视觉提示作为高程来指示其选择。确保聚焦卡片缩略图内的内容标题清晰可见且易于阅读。
2. **背景图像**：当卡片处于焦点时，更大的视窗中会显示相应的背景图像。我们建议此背景图像是高质量且视觉吸引人的，因为它为内容提供沉浸式和引人入胜的背景。

构图

为了确保用作沉浸式列表组件背景的图像看起来不错，请确保适当缩放它们，以确保它们不会模糊或失真。

纵横比

尽可能使用 16:9 的纵横比作为背景图像，以确保视觉上吸引人且一致的布局。