沉浸式酒店列表

沉浸式列表包含一行内容以及所选项预览。它能以较大的视口呈现内容。

资源

类型	链接	状态
设计	设计源代码 (Figma)	可用
实施步骤	Jetpack Compose	可用

亮点

• 动态内容预览。当用户浏览内容行时，预览区域会自动更新，以显示当前获得焦点的项。
• 沉浸式列表组件具有较大的视口来显示内容，可让用户更轻松地查看和欣赏所聚焦项的视觉细节。
• 沉浸式列表可提供有关所关注项的相关上下文信息，帮助用户在不离开浏览体验的情况下做出明智的决策。
• 沉浸式列表组件采用渐进式披露方式，在用户浏览内容时揭示更多有关内容的细节，从而减少认知负荷并保持用户互动。
• 沉浸式列表组件可确保在整个应用中实现一致的互动，从而为用户提供熟悉且可预测的体验。

解剖学

1. 图片背景
2. 内容块
3. 卡片在焦点上
4. 内容网格

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

规格

行为

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

当沉浸感列表获得焦点时，其高度会增加以显示更多信息，例如背景标题和说明，如以下视频所示。

用法

如果您希望吸引用户关注精选或推广内容（例如新发布的内容、热门节目或独家标题），请使用沉浸式轮播界面。较大的视口和动态预览可为展示这些高优先级项目提供一种引人注目的方式。

图片显示

1. 卡片聚焦：当用户浏览轮播界面时，聚焦的卡片将在视觉上突出显示，将卡片缩放 1.1，使用边框和其他视觉提示作为高度来指示其选择。确保聚焦卡片的缩略图中的内容标题清晰可见且易于阅读。
2. 背景图片：当卡片获得焦点时，较大的视口中会显示相应的背景图片。我们建议您使用优质且具有视觉吸引力的背景图片，因为它可以为内容提供引人入胜的沉浸式背景。

合成

为了确保沉浸列表组件中用作背景的图片美观，一定要适当地缩放图片，以免它们模糊或失真。

宽高比

尽可能为背景图片使用 16:9 的宽高比，以确保布局具有视觉吸引力和一致性。