用途
Image Gallery 是一个用于展示和浏览图片集合的 UX 模式。它的目标是帮助团队创建一种可靠的方式，让用户浏览多张相关图片时不丢失方向感、上下文或性能。资料指出，该模式在团队需要作品集与画廊页面时最为有用。
适用场景
资料明确列出以下使用时机：
- 作品集与画廊页面
- 产品图片集合
- 文档截图与操作演示（walkthroughs）
不适用场景
资料同时给出应避免使用的情况：
- 如果实际上不需要完整的媒体处理能力，应使用更简单的图片、链接或文件输入。
- 当浏览器原生行为已足够完成任务时，避免使用复杂的自定义控件。
- 不要假设网络密集型媒体适合所有受众或场景。
实现流程
资料给出的实现工作流为：
- 在复制示例之前，先确认该模式与问题及约束条件相匹配。
- 从 references/pattern.md 中的结构与示例入手，然后选择最小的可行变体。
- 在叠加视觉打磨之前，先应用无障碍、性能与交互护栏。
- 使用测试指引，在键盘、屏幕阅读器、响应式与失败场景下验证行为。
无障碍护栏
键盘交互
- 验证仅用键盘即可完成图片画廊的操作。
- 当模式打开、更新或显示额外 UI 时，保持焦点顺序合乎逻辑。
- 保持可见的焦点状态，且在高倍缩放时仍然可读。
屏幕阅读器支持
- 优先使用语义元素，仅在语义本身不足时才添加 ARIA。
- 在正确的位置、以正确的礼貌程度播报状态变化，例如错误、加载或完成。
- 在有用时，通过 aria-describedby 或结构化标题连接标签、提示与状态文本。
视觉无障碍
- 不要仅依靠颜色来传达严重程度、完成状态或选中状态。
常见错误
把媒体仅当作装饰
问题：当设计假设媒体只是视觉点缀时，重要的上传与播放流程会出问题。 修复方式：把状态、元数据与控件设计为该模式的一等组成部分，而不是事后添加的覆盖层。
跳过回退行为
问题：不同设备支持不同的编解码器、采集流程与带宽条件。 修复方式：为不支持的 API、低数据条件与加载失败规划优雅的回退方案。
遗忘无障碍要素
问题：当缺少字幕、文字稿、替代文本或可见状态时，媒体模式会迅速变得具有排他性。 修复方式：把替代访问路径视为核心体验的一部分，而不是上线后的打磨项。
相关模式
- https://uxpatterns.dev/patterns/content-management/carousel
- https://uxpatterns.dev/patterns/content-management/modal
- https://uxpatterns.dev/patterns/media/image-upload
更多细节
完整的实现细节、示例与测试说明，请参见 references/pattern.md。
模式页面：https://uxpatterns.dev/patterns/media/image-gallery