图片库：排序、说明文字与移动端规则

图片库将多张相关的静态图片组合成一个有序的编辑单元。顺序是意义的一部分：读者应当理解这些图片为何放在一起、每张图片贡献了什么，以及从项目1到项目2代表的是时间、优先级、视角，还是简单的浏览顺序。

此示例使用了编辑网格，因为三个视图同等重要，且无需隐藏任何项目即可完整展示。顺序从识别开始，然后是两个状况检查。说明文字阐明了每张视图证明的内容，而非仅仅重复"连接器图片"。

为什么这个元素很重要

人们审视一组图片的方式与看待一堆零散图片不同。可见的边界和精心设计的顺序告诉读者，这些图片共同回答了一个更大的问题。整体视图建立方向感，然后细节图片减少不确定性。这种递进关系让读者无需自行打开不相关的图片、记住它们的位置并独自构建其中的关联。

排序控制着预期。按时间顺序排列的图集承诺了变化；产品图集承诺了整体概览、比例、功能、变体和状况。按文件名或上传顺序排列可能使重要证据显得次要，或暗示一个并不存在的叙事结构。

机器可提取性是指软件能够独立提取图片库而不丢失图片之间关系的能力。机器可以识别单独的图片文件，但无法安全地推断它们是替代关系、步骤关系、证据关系还是装饰关系。图片库标题、声明的排序逻辑、稳定的项目位置、独立的替代文本和可见的说明文字以文本形式提供了这种关系。相同的字段可以为搜索索引、内容清单、无障碍检查和结构化数据提供信息，而无需依赖计算机视觉。

共同的元素编写规则 规定了类型化元素的优先级、可移植指令和正文映射。本页面在图片库特定项目数量限制、排序、说明文字和移动端行为方面具有优先权。当此元素的用途适用时，不要使用散乱的图片或通用滑块来模仿图库。

何时使用

当两个或多个图片是同级关系、共同回答一个问题比单独呈现效果更好时，使用图片库。每张图片必须提供独特的视角、状态、阶段、细节或示例。典型案例包括产品视图、前后对比证据、简短的过程序列、地点定位、设计作品集，或支持单个评测结论的多个细节。

对每个项目应用移除测试。如果移除一张图片不会改变读者能够判断、验证或理解的任何内容，则将其从集合中删除。图片库不是存放所有可用素材的存储空间。

相似但不同的情况需要使用不同的元素：

• 当一张图片承载了要点且正文对其进行解释时，使用单张图片区域或图片框。
• 当读者需要在一张界面截图中定位多个控件时，使用带注释的截图 。不要将一个屏幕拆分为一个由未解释裁剪区域组成的图库。
• 当读者需要在多个选项之间比较重复属性时，使用对比表格。图片可以支持决策，但不能替代文本标准。
• 当操作步骤是主要内容时，使用步骤列表。图库可以展示结果状态，但不能将必要的操作说明转化为说明文字。
• 当每个卡片包含价格、库存、评分和操作按钮时，使用产品滑块。图库包含图片，而非可购买实体。
• 当图片支持不同章节且没有有意义的共同顺序时，使用独立的图片区域。

放置位置

将图片库紧跟在陈述该组图片所要回答问题的段落之后。产品状况图库跟随在状况声明之后；案例研究序列跟随在干预措施之后；地点图库跟随在到达信息之后。

将图库标题、可选的介绍文字、所有项目、说明文字、署名信息和控件保持在同一个语义容器中。不要在项目之间插入正文、广告、行动号召或分页符。当说明文字不能完全承载信息时，在图库之后提供解读或下一步决策。

图库不得紧邻另一个图库、视频、大表格、全宽图表、图片框或不相关的行动号召。在密集的可视单元之间添加解释性正文，或将真正同级的元素合并。

不要将图库放在步骤、列表项、标注、表格单元格、手风琴菜单、可点击卡片或另一个图库内部。切勿将声明与其来源分开，或将警告与其所限制的操作分开。将首屏留给直接回答，除非图片本身就是答案。

结构

结构是语义层面的。网格列数、缩略图尺寸、阴影、圆角和动画属于渲染层，而非内容模型。

1. 图库容器： 将标题、描述、项目和控件组合在一个可访问的名称之下。
2. 图库标题： 用3-10个词陈述共同的主题或问题。
3. 介绍文字： 可选地用一个句子解释顺序或检查任务。
4. 有序项目： 无论桌面端布局如何，保持稳定的源顺序。
5. 图片： 使用已有的、权利清晰的素材，具有原始宽度和高度。
6. 替代文本： 描述该图片在集合中的用途，而非复制其说明文字。
7. 说明文字： 标识视图并解释其独特的贡献。
8. 署名信息： 在需要时提供创作者、来源或许可信息。
9. 控制按钮： 对于交互式图库，可见的按钮支持指针、键盘、开关和触摸输入。
10. 位置指示器： 当某些项目被隐藏时，以文本形式显示"2/5"。
11. 移动端顺序： 与DOM顺序、编号、键盘顺序和预期的叙事顺序一致。

设计示例

选择保持关系最完整且交互性最弱的变体。每个变体都以文本形式保持完整的说明文字可用，并在每个断点处使用相同的源顺序。

编辑网格

对2-6张权重相同且可以同时显示的图片使用网格。桌面端可以使用两列或三列。移动端折叠为一列；切勿将三张图片缩小到无法阅读的缩略图。

顺序条带

对具有明确时间或空间顺序的3-8张图片使用条带布局。在窄屏上，只有当存在可见的控制按钮、位置指示器、键盘操作以及堆叠的非JavaScript备用方案时，才可以变成水平滚动区域。切勿将滑动作为唯一的导航方式。

对比对

恰好使用两张图片进行前后对比、原版与修订版对比，或需要同时判断的两个视点。使用持久的文本标签，而不仅仅是颜色或位置。移动端将项目1堆叠在项目2之上，并在图片旁边重复标签。

主图加细节视图

当一张整体视图锚定整个集合、其余图片回答不同的检查问题时，对3-12张产品或实物视图使用此布局。选择缩略图必须更新主图的替代文本、说明文字、位置和声明的状态。每张图片在无需JavaScript的情况下都可以访问。

移动端堆叠默认

只要交互性不会实质性改善理解，就使用堆叠列表。它是编辑类内容的默认方式，因为所有项目和说明文字仍然可见、可链接、可打印和可阅读，无需手势操作。

参数

合约存储编辑含义和资产元数据。布局令牌、列宽、间距、控制图标、过渡持续时间和断点属于渲染层。

对于证据、含义随顺序变化的场景、对比标签和可见的权利信息，说明文字是必填项。产品角度图片只有在替代文本和上下文足以区分视图时才可以省略说明文字。mobile=scroll仅对带有必需控制按钮的strip或primary-details布局有效。

语法和代码示例

所有映射都保持相同的标题、顺序、项目字段和备用方案。在生产环境中，必须在文件存在之前拒绝示例路径。

可移植Markdown指令

:::image-gallery{layout=grid mobile=stack orderedBy=viewpoint}
## 确认产品状况的三个视图

:::gallery-item{src="/cdn-assets/examples/connector-overview.webp" alt="Complete black industrial connector on a neutral surface, oriented with its locking tab facing upward" width=1600 height=1200}
**1. 整体视图。** 完整的连接器展示了形状、比例和方向。
:::

:::gallery-item{src="/cdn-assets/examples/connector-lock.webp" alt="Close view of the connector showing an intact raised locking tab with no visible crack" width=1600 height=1200}
**2. 锁定卡扣。** 特写视图确认固定夹完好无损。
:::
:::

第一个标题成为title；每个项目正文成为其说明文字。源顺序是规范性的，因此瀑布流布局不得重新排序项目来填补空白。

Hugo短代码映射

{{< image-gallery layout="grid" mobile="stack" orderedBy="viewpoint" >}}
## 确认产品状况的三个视图

{{< gallery-item src="/cdn-assets/examples/connector-overview.webp" alt="Complete black industrial connector on a neutral surface, oriented with its locking tab facing upward" width="1600" height="1200" >}}
**1. 整体视图。** 完整的连接器展示了形状、比例和方向。
{{< /gallery-item >}}

{{< gallery-item src="/cdn-assets/examples/connector-lock.webp" alt="Close view of the connector showing an intact raised locking tab with no visible crack" width="1600" height="1200" >}}
**2. 锁定卡扣。** 特写视图确认固定夹完好无损。
{{< /gallery-item >}}
{{< /image-gallery >}}

此适配器规范并非已注册的短代码。在获得批准之前，请使用源顺序中的语义figure元素，不要引用缺失的资产。

WordPress块

<!-- wp:amicited/image-gallery {"layout":"grid","mobile":"stack","orderedBy":"viewpoint"} -->
<section aria-labelledby="condition-gallery">
  <h2 id="condition-gallery">确认产品状况的三个视图</h2>
  <ol>
    <li><figure><img src="connector-overview.webp" width="1600" height="1200" alt="Complete black industrial connector on a neutral surface, oriented with its locking tab facing upward"><figcaption><strong>整体视图。</strong> 完整的连接器展示了形状、比例和方向。</figcaption></figure></li>
    <li><figure><img src="connector-lock.webp" width="1600" height="1200" alt="Close view of the connector showing an intact raised locking tab with no visible crack"><figcaption><strong>锁定卡扣。</strong> 特写视图确认固定夹完好无损。</figcaption></figure></li>
  </ol>
</section>
<!-- /wp:amicited/image-gallery -->

WordPress实现可以使用原生Gallery块，前提是它保留了每个项目的替代文本、说明文字、原始尺寸、源顺序和可访问的组名称。将一系列背景图片样式化并不满足合约要求。

示例

良好：每个视图解决了不同的不确定性

二手设备状况——检查顺序

1. 整体设备： 确认身份并显示外壳完整。
2. 铭牌： 以清晰可读的焦点确认具体型号和额定电压。
3. 电源连接器： 显示直立的针脚和完好的锁定卡扣。
4. 磨损面： 显示最深的可见划痕，旁边有尺子提供比例参考。

这遵循了买家的检查逻辑。每个说明文字都是可验证的，尺子防止特写镜头夸大损坏程度，移动端堆叠保持了顺序。

不良：用作素材转储的轮播

我们最新的活动 十二张几乎相同的舞台照片，没有说明文字，每四秒自动切换。导航仅在悬停时出现。移动版显示裁剪后的中心切片，仅支持滑动手势。

既没有成员关系的理由，也没有顺序的理由。十二个文件名对屏幕阅读器毫无意义；自动切换阻止了仔细查看；仅悬停可见的控件排除了键盘和触摸用户；仅滑动导航隐藏了访问入口；裁剪可能移除主体。选择几张讲述明确故事的画面，编写不同的替代文本和说明文字，停止自动运动，并默认使用移动端堆叠。

Schema标记和无障碍

图库不会自动获得特殊的搜索待遇。仅标记可见页面和资产支持的关系。有意义的图片可以映射到ImageObject，包含稳定的contentUrl、说明文字、创作者或署名文本、许可信息以及在已知情况下的代表性标识。明确排序的图库可以映射到ItemList，使用与源顺序匹配的position值。产品视图可以填充父级Product.image属性。不要为装饰性图片创建实体，不要编造许可信息，也不要声称每张图片都具有代表性。

在需要时，使用<figure>元素内的原生<img>元素，配合可见的<figcaption>。通过其标题为区域命名。使用<ol>或等效的位置语义保持有序关系；视觉布局永远不能覆盖DOM顺序。

替代文本描述每张图片在此集合中的用途。不应以"图片为"开头，不得逐字重复说明文字，也不得描述与决策无关的细节。同一物体的两张照片需要不同的替代文本，因为每张的目的不同。仅当图片真正冗余且移除后不会丢失证据时，才使用alt=""。

交互式变体需要命名的上一步和下一步按钮、键盘激活、文本位置指示器以及变更后的状态公告。禁止自动切换。保持焦点在激活的控件上，并在无JavaScript、200%缩放及减少动效模式下保持内容可用。

编写规则

每个图库回答一个共同的问题。说明其存在的原因，然后按叙事、时间顺序、优先级、视角或对比进行排序——绝不能使用上传顺序。

• 常规图库使用2-8个项目；对比布局恰好使用2个；主产品/详情布局使用3-12个。
• 标题3-10个词，可选的介绍文字为一个句子，8-30个词。
• 说明文字控制在5-30个词。以视图、状态或项目标签开头（当这有助于快速浏览时），然后解释其贡献。
• 整个图集使用平行的说明文字结构。如果第一个以状态标签开头，其他的也应如此。
• 保持替代文本聚焦于非视觉读者从该特定画面中需要的内容；目标40-180个字符，绝不超过250个。
• 保持事实性和观察性的语气。说"密封圈平整贴合"，而不是"令人惊叹的密封圈看起来完美无缺"。
• 当时间、比例、裁剪、状态和来源限制了解读时，明确说明。
• 当外观作为证据时，使用相同的对比条件：同等的裁剪、角度、比例、光线和色彩处理。

切勿在项目说明文字中包含标题、段落、表格、操作说明列表、行动号召、表单、价格、评分、评价、可展开内容、视频、音频播放器或产品卡片。切勿将说明文字嵌入像素中，不要将颜色作为唯一标签，不要通过裁剪隐藏材质缺陷，不要暴露客户数据，也不要发布未确认使用权限的图片。

使用图片库的文章类型

下表对应postTypes前置元数据。包含意味着该文章类型可以在图片形成真实集合时使用图库；但这并不使该元素在每个页面上成为必选项。

QA检查清单

• 标题陈述了一个共同的问题或主题，每张图片贡献了不同的答案。
• 项目数量与所选变体匹配，且不包含冗余画面。
• orderedBy记录了可辩护的叙事、时间顺序、优先级、视角或对比顺序。
• 源顺序、视觉顺序、键盘顺序、屏幕阅读器顺序、编号顺序和移动端顺序全部一致。
• 在发布前，每个src都解析为一个现有且权利清晰的静态图片。
• 每张图片具有原始宽度和高度、有意的替代文本值以及有意义的裁剪。
• 证据、对比和有序项目具有简洁的可见说明文字，采用平行结构。
• 在需要时，署名信息和许可链接可见且准确。
• 对比图片使用同等的比例、角度、裁剪、光线和标签，除非明确说明了差异。
• 移动端使用可读的堆叠备用方案或完整的无障碍控制；滑动绝不是唯一的输入方式。
• 交互式变体具有可见的上一步和下一步按钮、文本位置指示器、键盘支持，且无自动切换。
• 图库在无JavaScript和200%缩放下正常工作，尊重减少动效设置，且不产生水平页面溢出。
• 首张重要图片未被延迟，后期加载状态被公告，预留空间防止布局偏移。
• 没有必要的操作说明、数字、警告、标签或结论仅存在于像素中。
• 图库不包含视频、产品卡片、表单、价格、评分、评价或行动号召。
• 结构化数据与可见顺序、说明文字、权利和实体关系匹配，不将装饰性内容当作内容处理。
• 可移植Markdown、Hugo和WordPress映射保持相同的字段、项目顺序和含义。

常见问题

Academy模板渲染本页面[[faq]]前置元数据中存储的五个已审阅问题。它们涵盖项目数量、移动端轮播、替代文本和说明文字、禁止的混合内容以及结构化数据。

成功意味着读者能够解释图片之间的关系以及每个项目的贡献。如果没有有意义的顺序、独特的说明文字和可访问的移动端路径，这个集合只是一个资产列表，而非图库。