关于 GitHub Docs 中的屏幕截图
添加屏幕截图有其优缺点。屏幕截图使文章更易于视觉扫描，并使说明更容易理解，尤其是对于阅读有困难的人来说。当提供替代文本时，屏幕截图可以帮助盲人和低视力用户与有视力的人员进行协作。
另一方面，截图会让视力正常的用户享有特权，增加文章的长度和加载时间，并增加需要维护的内容量。当截图以与读者使用的像素尺寸和缩放比例不同的尺寸捕获时，可能会造成混淆。
因此，我们只在满足我们的包含标准的情况下，才会在 GitHub 文档中添加截图。
包含截图的标准
当用户界面 (UI) 的某个元素难以找到时，使用截图来补充文本说明。
- 该元素很小或视觉上不明显。
- 该元素并非立即可见。例如，该元素包含在下拉菜单中。
- 界面有多个相互竞争的选择，可能会造成混淆。
不要在文本本身就很清晰的步骤中使用截图，也不要使用截图来显示代码命令或输出。
包含标准的示例
为了帮助您确定是否添加特定截图，请考虑以下符合和不符合我们包含标准的截图示例。
符合标准的截图
以下截图符合我们的包含标准。
UI 元素很小或视觉上不明显
存储库社交媒体预览图像的编辑按钮很小，视觉上也不显眼。它可能很难在其他存储库设置中找到。
截图还提供了所需纵横比的视觉参考。
UI 元素并非立即可见
克隆 gist 的选项包含在标有“嵌入”的下拉菜单中。
截图有助于在菜单中找到正确的选项，该选项在打开下拉菜单之前不可见。
界面有多个选择，可能会造成混淆
存储库主页面上有三个元素可以解释为“设置”： “设置”选项卡、右侧边栏“关于”部分的齿轮图标以及通过个人资料图片访问的帐户设置。
截图有助于找到正确的选项。
不符合标准的截图
以下截图不符合我们的包含标准。
UI 元素很容易找到
“创建存储库”按钮通过大小、颜色和位置在视觉上很突出。竞争选择很少。
文本说明足以帮助用户完成该步骤。
UI 选项很少，而且简单直观
简单直观的选项，例如选中或取消选中复选框，不需要视觉辅助。
文本说明足以帮助用户完成该步骤。
在截图中包含复选框下方完整的文本句子还有两个无障碍方面的影响。
- 对于视力较低的用户来说，句子很难阅读，因为它很小，而且不像 HTML 文本那样清晰。
- 使用屏幕阅读器的人无法访问这些信息，因为它不符合 alt 文本的字符限制。在说明中包含文本可以解决这个问题，但会显得过于冗长。
截图要求
除了包含标准外，截图还必须满足以下要求。
技术规格
- PNG 文件格式
- 仅限静态图像（不包括 GIF）
- 144 dpi
- 全栏图像宽度为 750–1000 像素
- 文件大小不超过 250 KB
- 描述性文件名，例如
gist-embed-link.png而不是right_side_page_03.png
无障碍性
为了满足更多用户的需求，截图必须
- 在操作步骤中附带完整的说明，不要完全以视觉形式传达信息。
- 与界面本身一样，具有完全的对比度，没有任何内容被遮挡或降低不透明度或颜色对比度。
- 具有描述图像内容及其突出显示外观（如果有）的 alt 文本。有关更多信息，请参阅“样式指南”。
- 清晰明了，文本和 UI 元素尽可能清晰易读。
视觉风格
- 显示一个 UI 元素，周围有足够的上下文，帮助人们了解如何在屏幕上找到该元素。
- 通过调整浏览器窗口大小以达到最佳效果来减少负空间。
- 尽可能显示浅色主题的界面。
- 如果您的用户名和头像出现，请将它们替换为 @octocat 的用户名和 头像。使用浏览器中的开发者工具将您的用户名替换为
@octocat，并将您的头像 URL 替换为https://avatars.githubusercontent.com/u/583231?v=4。 - 不要包含光标。
下拉菜单的视觉风格
如果显示下拉菜单的主要目的是帮助读者找到菜单本身，请显示关闭的菜单。
如果显示下拉菜单的主要目的是帮助读者区分菜单中的选项，请显示打开的菜单。捕获没有焦点（光标或悬停状态）的打开菜单。显示具有白色背景的菜单项可确保与深橙色轮廓（如果存在）形成对比。
在屏幕截图中突出显示元素
要突出显示屏幕截图中的特定 UI 元素，请使用我们为 Snagit 提供的特殊主题，在元素周围应用对比色描边。
描边颜色为 Primer 设计系统 中的 fg.severe（十六进制 #BC4C00 或 RGB 188、76、0）。这种深橙色在白色和黑色背景上都具有良好的颜色对比度。要检查其他背景颜色的对比度，请使用 颜色对比度分析器。
将 GitHub Docs 主题导入 Snagit
-
要下载 Snagit 主题，请导航到
snagit-theme-github-docs.snagtheme（位于github/docs存储库中），然后单击 .
-
打开 Snagit，然后选择形状工具。
-
在“快速样式”下，选择导入。
-
从计算机的文件中选择 Snagit 主题。这将安装形状预设。
-
可选地，要将主题添加到您的收藏夹，请为深橙色矩形加星。
向屏幕截图添加突出显示
-
在 Snagit 中打开屏幕截图。
-
要设置像素深度（分辨率）和像素宽度，请在图像画布下方打开“调整图像大小”对话框。
- 像素深度：144dpi（相当于 Snagit for Mac 上的“2x”）
- 像素宽度：最大 1000 像素
注意：在 Windows 上，您可能需要选择高级来更改分辨率。确保使用重采样已禁用。
-
在 Shapes 侧边栏中打开 GitHub Docs 主题，选择深橙色矩形。
-
在图像上拖放以创建矩形。
-
通过拖动边缘调整矩形的高度和宽度。不要调整圆角，应保持为 4 像素。调整 UI 元素和描边之间的间距，使其约为描边本身的宽度。
-
将图像导出为 PNG 格式。
注意：Snagit 中的错误可能会损坏圆角，导致矩形变成椭圆形。如果发生这种情况，请删除并重新安装 GitHub Docs 主题（Windows 和 Mac），或单击并拖动形状右上角的黄色点以将圆角重置为 4 像素（仅限 Mac）。
替换屏幕截图
替换现有图像时，最佳做法是保留图像的文件名。
如果必须更改图像文件名，请在存储库中搜索该图像的其他引用，并将所有引用更新为原始文件名。
如果图像用于已弃用的 GitHub Enterprise Server 文档版本，请不要更改文件名。
Markdown 内容中的图像版本控制
某些图像适用于所有 GitHub 计划（GitHub Free、GitHub Pro、GitHub Team、GitHub Enterprise Cloud 和 GitHub Enterprise Server）。在这种情况下，不需要进行版本控制。
当图像在不同计划之间存在差异，或在 GitHub Enterprise Server 的较新版本中发生更改时，需要使用 Liquid 条件语句对图像进行版本控制。您可能需要在最初创建内容时添加此版本控制，或者您可能需要在更新内容以进行功能更新或 GitHub Enterprise Server 版本更新时添加此版本控制。
图像位置
图像位于 /assets/images 目录中。此目录包含一些子目录，可用于按计划和版本号组织内容。
| 目录 | 用法 |
|---|---|
/assets/images | 不特定于任何 GitHub Enterprise 产品的图像。 |
/assets/images/enterprise/enterprise-server | 适用于所有 GitHub Enterprise Server (GHES) 版本的图像，或适用于当前版本和未来版本的图像。 |
/assets/images/enterprise/<release number>，例如 /assets/images/enterprise/3.0/ | 当图像在新的 GHES 版本中发生更改时，将新图像添加到原始位置，并将旧图像移动到与图像适用的最新版本相对应的目录。 |
示例：图像在不同计划之间存在差异
当计划之间存在差异时，您可以使用 Liquid 条件语句对两个图像进行版本控制。
{% ifversion fpt or ghec %}
{% else %}
{% endif %}
示例：图像在新的 GitHub Enterprise Server 版本中更新
如果图像将在 GitHub Enterprise Server 3.10 中更改，并且更新后的图像将用于所有未来版本的 GitHub Enterprise Server，请将现有图像移至 /assets/images/enterprise/3.10，然后将新图像添加到原始位置 /assets/images/enterprise/foo/bar.png。
您的 Liquid 条件语句将如下所示
{% ifversion fpt or ghec %}
{% elsif ghes < 3.10 %}
{% else %}
{% endif %}
当 3.10 版本弃用时，/assets/images/enterprise/3.10 目录将被删除。
编号的版本目录应包含仅适用于该版本号或适用于该版本号及更早版本的图像。例如，/assets/images/enterprise/2.22 中的图像应包含仅适用于 2.22 或 2.22 及更早版本的图像。