利用视觉效果提升您的知识库文章。添加屏幕截图可以阐明复杂的概念并简化说明，为用户提供直观的界面元素视图。本指南将向您展示如何清晰有效地整合图像，从而增强内容清晰度和读者参与度。

在计算机或移动设备上创建屏幕截图

要了解如何为知识库创建屏幕截图以及可以使用哪些编辑工具，请参阅 指导您进行屏幕截图。

向知识库文章添加图像和屏幕截图

将图像上传到媒体文件库

1. 导航到 媒体文件库。
2. 点击右下角的 上传 按钮。
3. 上传对话框随即打开。点击 浏览… 按钮浏览您电脑上的文件，并选择您想要上传的图片。
4. 选择图片后，会出现一个对话框提示您输入图片的标题和描述。填写这些详细信息后，点击 上传 按钮即可完成上传。

直接从文章编辑器上传图片

如果您正在编辑文章并需要添加图片，您也可以直接从工具栏上传：

1. 首先创建新文章或编辑现有文章。
2. 在文章编辑器中，单击工具栏上的 插入媒体 按钮。

   

   • 此操作将打开 插入媒体 对话框。
3. 在出现的对话框底部，选择 上传媒体 按钮继续。
4. 在 上传 对话框中，单击 浏览... 按钮浏览计算机的文件并选择要上传的图像。
5. 选择图片后，会出现一个对话框提示您输入图片的标题和描述。填写这些详细信息后，点击 上传 按钮即可完成上传。

在文章中添加图片

1. 首先创建新文章或编辑现有文章。
2. 找到并单击工具栏上的 插入媒体 按钮。
3. 从图库中，选择您想要添加的图像，然后单击 插入媒体 将其嵌入到文章中。

有效使用内嵌图像

将内嵌屏幕截图直接嵌入知识库文章中，可以直观地展示按钮和菜单等界面元素，从而提升清晰度和导航体验。这种方法可以精简文章，通过减少图片和文字的数量，使其更易于理解，并通过简洁、相关的视觉效果直接引导用户浏览界面。 优化内联图像集成的指南：

• 优先考虑清晰度： 使用内联图像，以精准的视觉呈现方式替代文本提示。重点展示菜单和按钮等可交互元素，确保这些图像与用户直接相关，并方便用户快速识别和互动。
• 策略性排版： 将截图插入至相关文字旁边，使操作说明与视觉引导无缝结合，有助于用户更直观地理解步骤，避免在冗长的描述中迷失方向。
• 尺寸很重要： 选择内联图片时，最大高度应为 16 像素。这可确保视觉效果信息丰富且不显眼，从而为浏览内容的用户提供更简洁、更易用的布局。

有效使用图像进行分步说明

在知识库文章的句子之间嵌入屏幕截图，可以直观地演示操作或任务，弥合文本说明与实际应用之间的差距。这种方法通过展示流程的关键步骤，增强了用户的理解力和参与度，使文章更具互动性，也更易于读者理解。 分步说明中优化图像使用的指南包括：

• 选择性使用： 仅对真正需要视觉辅助的概念添加屏幕截图。避免过度使用，以免造成混乱。
• 直接关联：选择与附带文本直接相关的屏幕截图，确保每个图像都清楚地说明所描述的操作或任务。
• 逻辑顺序： 屏幕截图的排列应遵循自然的步骤推进，以反映用户的实际体验。这种时间顺序有助于形成逻辑流程，方便读者轻松理解分步指南。
• 准确性是关键： 确保屏幕截图准确呈现用户在屏幕上看到的内容。鉴于不同操作系统的显示效果可能有所不同，请相应地调整屏幕截图。有关为 Windows、Mac 和 Linux 用户定制屏幕截图的指导，请参阅指南 如何使用For语句。

示例

让我们保持简单!

• 如果将图像放置在一行文本中（内嵌图像），则其高度不应超过 16 像素。
• 如果您在一组步骤或列表（无论有序或无序）中的两个句子之间放置图片，则应使用分号分隔。图片前后无需换行。

内联图像的标记

内联图像的 维基标记 如下所示：

这是文本，后面跟着 [[Image:The Image]]，这是文本的延续。

内联图像示例

这是一段文本。我们在中间插入了 Firefox 菜单按钮的内联图片 。之后，我们添加了其他文本。

操作步骤中标记图像的示例

“用分号分隔图像”的 维基标记 如下所示：

# 这是一个步骤.
#;[[Image:The Image]]
# 这是下一个步骤.


操作步骤中插图的示例

这是一个包含较长文本和较长图像的示例：

1. 这是一个步骤。这里还有一些额外的文字，以便您可以看到它们在图片上方显示的样子。

   

2. 这是下一步，添加了额外的文字，以便您可以看到它们在图像下方的样子。

知识库指南

如果您有兴趣了解有关编写和编辑知识库文章的更多信息，请参阅 此处 的指南。