沉浸式列表由所选项的行内容和预览组成。它在较大的视口中呈现内容。
资源
| 类型 | 关联 | 状态 |
|---|---|---|
| 设计 | 设计源代码 (Figma) | 可用 |
| 实现 | Jetpack Compose | 可用 |
亮点
- 动态内容预览。当用户浏览内容行时，预览区域会自动更新以显示当前聚焦的项。
- 沉浸式列表组件具有更大的视口来显示内容，使用户能够更轻松地查看和欣赏聚焦项的视觉细节。
- 沉浸式列表可提供有关所关注项的相关信息和上下文信息，帮助用户在不离开浏览体验的情况下做出明智的决策。
- 沉浸式列表组件使用渐进式披露方式，在用户浏览内容时显示更多详细信息，从而减少认知负荷并保持用户互动。
- 沉浸式列表组件可确保在整个应用中实现一致的互动，为用户提供熟悉且可预测的体验。
解剖学
- 图片背景
- 内容块
- 焦点置于卡片
- 内容网格
- 电影纱罩
- 海报
- 背景颜色
规格
行为
在沉浸式列表中的卡片之间导航时，所选卡片的详细信息会在后台逐步显示。
当沉浸式列表获得焦点时，其高度会增加以显示其他信息，如背景标题和说明，如以下视频所示。
用法
如果您想吸引人们关注精选或推广内容（如新上线的内容、热门节目或独家标题），请使用沉浸式轮播界面。更大的视口和动态预览可让您以引人注目的方式展示这些高优先级项目。
图片显示
- 卡片焦点：当用户浏览轮播界面时，获得焦点的卡片会在视觉上突出显示，将卡片缩放 1.1、使用边框和其他视觉提示作为高度来指示其选择。确保聚焦的卡片缩略图中的内容标题清晰可见且更易于阅读。
- 背景图片：当某个卡片获得焦点时，系统会在较大的视口中显示相应的背景图片。我们建议您使用这种具有视觉吸引力的优质背景图片，因为它能够为内容提供沉浸式且引人入胜的背景。
合成
正确做法
调整拍摄正文的比例并将其与右上角对齐，打造出影院般的观看体验。
错误做法
避免使用全屏剪裁功能，因为这会剪裁掉内容下方的主题。
为了确保沉浸式列表组件中用作背景的图片能够正常显示，请务必适当地缩放图片，以免模糊或失真。
宽高比
尽可能为背景图片使用 16:9 的宽高比，以确保视觉吸引力和一致的布局。
