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