EN
展现形式 · 概念

Media Gallery:多视角媒体浏览

说明 Media Gallery 如何组织同一对象的图片与视频,并处理缩略图、替代文本、比例、键盘操作、延迟加载和单媒体退化。

Media Gallery 组织同一对象的多个图片、视频或其他媒体视角,通常包含主媒体、缩略图或序列控制。它的核心是帮助理解对象,而不是展示一组互不相关的视觉素材。

适合与不适合

适合商品多角度、细节、尺寸、使用过程或同一案例的相关媒体。不适合多个独立对象的发现入口;那类集合更适合 Grid 或 Cards。只有一张媒体时不需要图库控制。

优点与缺点

优点缺点
集中提供同一对象的多视角证据大量媒体会增加加载和处理成本
主媒体与缩略图便于定位细节缩略图过小或无标签时难以区分
可混合图片、视频和三维内容不同比例会造成布局移动和裁切
能保留页面其他信息的上下文全屏、缩放和视频引入复杂焦点状态

内容与选择要求

每项媒体都应有独立信息职责,删除重复或纯装饰视角。默认主媒体应最能帮助完成当前判断,而不是机械采用上传顺序。缩略图需要让用户预判目标;视频提供封面、时长、字幕和播放条件。

响应式与无障碍

根据媒体用途提供简洁文本替代;功能型图片描述动作,装饰图使用空替代文本。缩略图和前后控制必须可用键盘,选中状态不能只靠边框颜色。放大或全屏若使用 Modal,应遵守对话框焦点规则。小屏保证主媒体完整可见,并提供不依赖滑动的控制。

性能与退化

优先加载主媒体,其余按实际浏览延迟加载,同时保存宽高比避免布局移动。零项显示文字说明或移除图库;一项静态展示;视频失败时保留封面、说明和替代访问方式。无 JavaScript 时提供主媒体和可访问的静态链接列表。

发布前检查

  • 每项媒体是否增加新的判断信息?
  • 默认主媒体是否符合当前任务?
  • 替代文本是否按用途而非文件名编写?
  • 缩略图、视频、缩放和全屏能否用键盘操作?
  • 慢网、媒体失败和单项状态是否可用?

固定版本主题实现

固定基线为 Dawn v15.3.0 与 Horizon 4.2.0;结论限于这两个提交,均为静态源码分析,未运行验证。