展现形式 · 概念
Media Gallery:多视角媒体浏览
说明 Media Gallery 如何组织同一对象的图片与视频,并处理缩略图、替代文本、比例、键盘操作、延迟加载和单媒体退化。
Media Gallery 组织同一对象的多个图片、视频或其他媒体视角,通常包含主媒体、缩略图或序列控制。它的核心是帮助理解对象,而不是展示一组互不相关的视觉素材。
适合与不适合
适合商品多角度、细节、尺寸、使用过程或同一案例的相关媒体。不适合多个独立对象的发现入口;那类集合更适合 Grid 或 Cards。只有一张媒体时不需要图库控制。
优点与缺点
| 优点 | 缺点 |
|---|---|
| 集中提供同一对象的多视角证据 | 大量媒体会增加加载和处理成本 |
| 主媒体与缩略图便于定位细节 | 缩略图过小或无标签时难以区分 |
| 可混合图片、视频和三维内容 | 不同比例会造成布局移动和裁切 |
| 能保留页面其他信息的上下文 | 全屏、缩放和视频引入复杂焦点状态 |
内容与选择要求
每项媒体都应有独立信息职责,删除重复或纯装饰视角。默认主媒体应最能帮助完成当前判断,而不是机械采用上传顺序。缩略图需要让用户预判目标;视频提供封面、时长、字幕和播放条件。
响应式与无障碍
根据媒体用途提供简洁文本替代;功能型图片描述动作,装饰图使用空替代文本。缩略图和前后控制必须可用键盘,选中状态不能只靠边框颜色。放大或全屏若使用 Modal,应遵守对话框焦点规则。小屏保证主媒体完整可见,并提供不依赖滑动的控制。
性能与退化
优先加载主媒体,其余按实际浏览延迟加载,同时保存宽高比避免布局移动。零项显示文字说明或移除图库;一项静态展示;视频失败时保留封面、说明和替代访问方式。无 JavaScript 时提供主媒体和可访问的静态链接列表。
发布前检查
- 每项媒体是否增加新的判断信息?
- 默认主媒体是否符合当前任务?
- 替代文本是否按用途而非文件名编写?
- 缩略图、视频、缩放和全屏能否用键盘操作?
- 慢网、媒体失败和单项状态是否可用?
固定版本主题实现
- Dawn 商品媒体、Horizon 媒体放大与热点:两个主题的商品媒体画廊、放大、视频与 3D 实现。
固定基线为 Dawn v15.3.0 与 Horizon 4.2.0;结论限于这两个提交,均为静态源码分析,未运行验证。