Sammenlign revisioner

利用视觉效果提升您的知识库贡献。了解如何有效地将图像融入您的文章。

利用视觉效果提升您的知识库文章。添加屏幕截图可以阐明复杂的概念并简化说明，为用户提供直观的界面元素视图。本指南将向您展示如何清晰有效地整合图像，从而增强内容清晰度和读者参与度。 __TOC__ =在计算机或移动设备上创建屏幕截图= 要了解如何为知识库创建屏幕截图以及可以使用哪些编辑工具，请参阅 [[How to make screenshots]]。 =向知识库文章添加图像和屏幕截图= ==将图像上传到媒体文件库== # 导航到 [/gallery/images 媒体文件库]。 #点击右下角的 {button 上传} 按钮。 #上传对话框随即打开。点击 {button 浏览…} 按钮浏览您电脑上的文件，并选择您想要上传的图片。 #选择图片后，会出现一个对话框提示您输入图片的标题和描述。填写这些详细信息后，点击 {button 上传} 按钮即可完成上传。 {note}请记住，您为图片提供的描述将作为替代文本提供给依赖屏幕阅读器的用户，从而增强可访问性和对内容的理解。{/note} ==直接从文章编辑器上传图片== 如果您正在编辑文章并需要添加图片，您也可以直接从工具栏上传： # 首先创建新文章或编辑现有文章。 # 在文章编辑器中，单击工具栏上的 插入媒体 [[Image:Insert media toolbar button|width=30]] 按钮。 #;[[Image:KBEditorToolbar-InsertMedia|width=400]] #* 此操作将打开 插入媒体 对话框。 # 在出现的对话框底部，选择 {button 上传媒体} 按钮继续。 # 在 上传 对话框中，单击 {button 浏览...} 按钮浏览计算机的文件并选择要上传的图像。 # 选择图片后，会出现一个对话框提示您输入图片的标题和描述。填写这些详细信息后，点击 {button 上传} 按钮即可完成上传。 ==在文章中添加图片== # 首先创建新文章或编辑现有文章。 # 找到并单击工具栏上的 插入媒体 [[Image:Insert media toolbar button|width=30]] 按钮。 # 从图库中，选择您想要添加的图像，然后单击 {button 插入媒体} 将其嵌入到文章中。 ;[[Image:Insert media E]] =有效使用内嵌图像= 将内嵌屏幕截图直接嵌入知识库文章中，可以直观地展示按钮和菜单等界面元素，从而提升清晰度和导航体验。这种方法可以精简文章，通过减少图片和文字的数量，使其更易于理解，并通过简洁、相关的视觉效果直接引导用户浏览界面。 优化内联图像集成的指南： *'''优先考虑清晰度：''' 使用内联图像，以精准的视觉呈现方式替代文本提示。重点展示菜单和按钮等可交互元素，确保这些图像与用户直接相关，并方便用户快速识别和互动。 *'''策略性排版'''： 将截图插入至相关文字旁边，使操作说明与视觉引导无缝结合，有助于用户更直观地理解步骤，避免在冗长的描述中迷失方向。 *'''尺寸很重要：''' 选择内联图片时，最大高度应为 16 像素。这可确保视觉效果信息丰富且不显眼，从而为浏览内容的用户提供更简洁、更易用的布局。 =有效使用图像进行分步说明= 在知识库文章的句子之间嵌入屏幕截图，可以直观地演示操作或任务，弥合文本说明与实际应用之间的差距。这种方法通过展示流程的关键步骤，增强了用户的理解力和参与度，使文章更具互动性，也更易于读者理解。 分步说明中优化图像使用的指南包括： *'''选择性使用：''' 仅对真正需要视觉辅助的概念添加屏幕截图。避免过度使用，以免造成混乱。 *'''直接关联：'''选择与附带文本直接相关的屏幕截图，确保每个图像都清楚地说明所描述的操作或任务。 *'''逻辑顺序：''' 屏幕截图的排列应遵循自然的步骤推进，以反映用户的实际体验。这种时间顺序有助于形成逻辑流程，方便读者轻松理解分步指南。 *'''准确性是关键：''' 确保屏幕截图准确呈现用户在屏幕上看到的内容。鉴于不同操作系统的显示效果可能有所不同，请相应地调整屏幕截图。有关为 Windows、Mac 和 Linux 用户定制屏幕截图的指导，请参阅指南 [[How to use "For" tags]]。 =示例= '''让我们保持简单!''' *如果将图像放置在一行文本中（内嵌图像），则其高度不应超过 16 像素。 *如果您在一组步骤或列表（无论有序或无序）中的两个句子之间放置图片，则应使用分号分隔。图片前后无需换行。 ==内联图像的标记== 内联图像的 [[Markup chart|维基标记]] 如下所示：<br><br> <code> <nowiki>这是文本，后面跟着 [[Image:The Image]]，这是文本的延续。</nowiki> </code> ==内联图像示例== 这是一段文本。我们在中间插入了 Firefox 菜单按钮的内联图片 [[Image:Menu hamburguer button]]。之后，我们添加了其他文本。 ==操作步骤中标记图像的示例== “用分号分隔图像”的 [[Markup chart|维基标记]] 如下所示：<br><br> <code> <nowiki>#</nowiki> 这是一个步骤.<br> <nowiki>#;</nowiki><nowiki>[[</nowiki>Image:The Image<nowiki>]]</nowiki><br> <nowiki>#</nowiki> 这是下一个步骤.<br> </code> ==操作步骤中插图的示例== 这是一个包含较长文本和较长图像的示例： # 这是一个步骤。这里还有一些额外的文字，以便您可以看到它们在图片上方显示的样子。 #;[[Image:Protection panel|width=400]] # 这是下一步，添加了额外的文字，以便您可以看到它们在图像下方的样子。 = 知识库指南 = 如果您有兴趣了解有关编写和编辑知识库文章的更多信息，请参阅 [https://support.mozilla.org/zh-CN/products/contributor/kb 此处] 的指南。