沉浸式酒店列表
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
沉浸式列表由一系列内容和预览
所选内容。它会在更大的视口中显示内容。
资源
亮点
- 动态内容预览。当用户浏览
预览区域会自动更新
当前聚焦的项。
- 沉浸式列表组件的视口比
便于用户查看和欣赏
聚焦项的视觉细节。
- 沉浸式列表可提供相关的背景信息
有助于用户做出明智的决定,
用户也就离开了网站
- 沉浸式列表组件使用渐进式披露方式来
会更详细地了解用户所浏览的内容,从而降低
并维持用户互动度
- 沉浸式列表组件可确保整个应用中互动的一致性,
为用户提供熟悉且可预测的体验。
解剖学
- 图片背景
- 内容块
- 卡片对准焦点
- 内容网格
- 影片效果纱罩
- 海报
- 背景颜色
规格
行为
当您在“沉浸式”列表中的卡片之间切换时,
所选卡片会逐渐在后台显示
当沉浸式列表获得焦点时,其高度会增加以显示
其他信息,如背景标题和
如以下视频所示。
用法
如果您想吸引用户关注精选内容或
推广内容,例如新上线的内容、热门节目或独家内容
标题。更大的视口和动态预览
展示这些高优先级商品的方式。
图片显示
- 卡片焦点:当用户在轮播界面中导航时,
聚焦卡片在视觉上进行了强调,使用边框将卡片放大 1.1,
以及其他视觉提示作为高度来指示其选择。确保内容
焦点所在的卡片缩略图内的标题清晰
更清晰可见且更便于阅读
- 背景图片:当卡片获得焦点时,对应的背景
让图片显示在较大的视口中我们推荐使用此背景
图片质量很好,而且具有视觉吸引力,
为内容营造一个引人入胜的背景
合成
check_circle
正确做法
请对拍摄对象进行缩放并使其与右上角对齐,营造出影院级的体验。
cancel
错误做法
避免使用会剪裁掉内容下方的正文的全屏剪裁。
确保将图片用作全景列表组件中的背景
确保图片尺寸合适,不模糊
失真或失真
宽高比
请尽可能对背景图片使用 16:9 的宽高比,
具有视觉吸引力且一致的布局。
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2024-08-19。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2024-08-19\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2024-08-19。"]]