技术文档中使用截图的简明指南
浏览：0
巴克励步
我发现很多团队在做产品手册或帮助中心时，常常把截图当成“填充物”，要么截得太大让人找不到重点，要么截得太小完全没上下文。实际上，截图是技术文档里最直观的辅助手段，但用不好反而会降低效率。我自己在 Baklib 上搭建产品手册时，就总结了一套关于截图的“少即是多”原则——既不能没有，也不能泛滥。结合 Baklib 的富文本编辑器和多站点发布能力，你可以把截图和文字完美融合，让读者一眼看懂操作流程。今天
我发现很多团队在做产品手册或帮助中心时，常常把截图当成“填充物”，要么截得太大让人找不到重点，要么截得太小完全没上下文。实际上，截图是技术文档里最直观的辅助手段，但用不好反而会降低效率。我自己在 Baklib 上搭建产品手册时，就总结了一套关于截图的“少即是多”原则——既不能没有，也不能泛滥。结合 Baklib 的富文本编辑器和多站点发布能力，你可以把截图和文字完美融合，让读者一眼看懂操作流程。今天这篇指南，就是帮大家避开那些常见坑，真正用截图提升文档的可读性。
何时为技术文档截图
技术文档中截图的类型和数量取决于你的产品。一般来说，最好为多步骤流程或你想强调的新功能截取截图。
直接看例子。假设 Baklib 想向读者介绍文档共享功能的操作过程。该操作需要几次点击，因此最好识别出关键步骤并为其截图。仅展示最后一步是不够的。下面的截图就不行，因为读者不知道如何到达所示的状态。
来源：Baklib.com
💛🧡🧡客户评价：简单的用户友好设计 - 低代码定制 - 轻松更改网站外观和感觉的内容，同时我还可以了解我的网站页面在不断变化时的外观。 - 非常简单易用的网站建设工具
相反，应该截取一张能引导用户完成整个操作流程的、信息丰富的截图。在截图之前，我们可以写一段描述，引导用户点击代表更多选项的图标（⋮），在下拉菜单中找到“共享”选项。用带标注的截图补充描述（如下所示），可以消除任何歧义。
来源：Baklib.com
除了引导用户完成冗长流程，还应截图记录 UI 的变化。这可能意味着记录改动或添加新功能。截图 UI 变化在更新现有产品文档时尤其有用。如果用户已经熟悉产品，应该告知他们变化并提供相关截图，以便平稳过渡。我们在自己的产品更新日志中就是这样做的。
在上述图片中，你可以看到我们如何向 Baklib 支持的其他集成介绍 GitHub。为了让用户不必自己摸索新集成功能，我们包含了两张截图，展示了启用该功能的关键步骤。当然，我们并没有用截图堆满更新日志的每一步，因为技术文档需要干净且易于扫描。因此，只有截图对内容有价值时才应添加。下面我们来看看什么时候最好不加截图。
何时不需要截图
截图可以显著提升技术文档的质量，但前提是使用得当。你不希望文档中因过多截图而适得其反，因此当解读图片所需时间比阅读文字说明还长时，应避免添加截图。先看一个常见问题：只孤立截取一个按钮，读者应该点击它。
来源：Baklib.com
像上面这样的截图，并不能告诉你关于搜索功能的多少信息，也无法让你知道它在哪里。但即使是一张更好的截图也不适合这里。看看下面这张图就明白了。
来源：Baklib.com
你浪费了宝贵的 20 秒，只看到搜索按钮位于页面左上角。如果我们只用一句话就能更容易地传达这个信息。所以，如果截图不能提供有价值的信息，最好保持文档简洁。另一种不需要截图的情况是附上代码示例。如果你希望用户使用你的代码，为什么不直接帮他们一下，允许复制代码呢？应该使用代码块而不是截图。
你也不需要截取简单的图形元素，比如进度条、确认框和欢迎窗口。最后，不需要截取消息文本。如果你认为该消息在技术文档中很重要，最好直接粘贴在正文中。这样能提高内容的可访问性，让使用文字转语音工具的用户也能理解。
应该截取什么
创建高质量截图的黄金法则是：截取你展示的功能，并包含少量上下文。因此，你需要在提供背景的细节和避免过多干扰元素之间找到平衡。看看怎么做。如果一个 Microsoft Word 教程告诉你将文本分为两栏，并只提供一张只显示分栏选项的截图，你很可能不知道如何到达那个步骤。
来源：Microsoft Word
这就是为什么你应该尽量截取所展示功能周围的环境。下面是一张更好的截图。
来源：Microsoft Word
在这张图中，你可以看到需要转到工具栏，在布局部分找到分栏。然而，采用截然不同的方式截取元素也会让读者困惑。例如，截取整个屏幕会让读者不清楚你在指什么。
来源：Baklib.com
相反，你描述的功能应该是图片的焦点。总结一下：不要忘记在截图中包含足够的周围元素，以便用户能够定位该功能。
来源：Baklib.com
如果你的读者中有很多移动端用户，这一点尤其重要。让用户放大查看大截图并不是最佳用户体验，因此最好让截图中的重点一目了然。现在你已经掌握了一些好的截图实践，我们来看看哪些图片不应该出现在技术文档中。
不要截取什么
要充分利用截图，你必须知道有时少即是多。在本节中，我们将介绍截图中应忽略的元素以及应完全避免的截图类型。首先，请记住，截取公司内部信息可能导致安全漏洞。因此，在公开的技术文档中，最好将截图中的姓名模糊处理，或者使用虚拟账户展示产品。下面是一张来自 ChartHop 技术文档的优秀截图。
来源：ChartHop
ChartHop 是一款 HR 工具，其用户手册中关于员工档案的部分包含功能概览。可以看到，该公司使用了热门电视剧中的邮箱和员工姓名。这种方法可以防止敏感信息泄露。除了真实姓名，还应在技术文档截图中模糊处理服务器、域名和网络文件夹的名称。下图展示了电话解决方案 CallerDesk 在描述添加成员到呼叫组时如何模糊处理电话号码。
来源：CallerDesk
接下来，安装步骤也是截图不适合技术文档空间的另一个领域。如果用户只需要多次点击“下一步”，为如此简单的步骤添加截图只会让文档变得杂乱。最后，如果你的产品容易变化且需要大量技术文档维护，请记住，不稳定的界面不是好的截图候选对象。更新技术文档可能是一个漫长的过程，重新截图也无济于事。因此，最好避免为仍在开发中的功能截图。
在截图中高亮什么
当涉及在截图中高亮信息时，规则相当简单：为了最大化截图的效率，你必须让读者清楚他们在看什么。在重要信息周围放置标注框，有助于将读者的注意力引向兴趣点。如果你描述的元素可能被另一个视觉上更突出的元素所掩盖时，这一点尤其有用。我们之前提到的 ChartHop 结合了框标注和调暗截图中的无关部分以减少干扰。
来源：ChartHop
在上图中，你可以清楚地看到个人资料编辑是截图的焦点，如果没有高亮，这一点就不会这么明显。此外，请记住，并非每个步骤都需要截图。使用 Baklib 的编辑器可以轻松添加标注和调整图片大小，让截图更高效。
