跳至内容

如何保持截图文档与产品同步

在界面变化后维护截图文档,包括负责人指定、版本记录、变更审查、受影响步骤替换和审查触发条件。

9 分钟阅读工作流程作者:Temposhot Team

截图文档会随每次发布逐步过时。按钮改名、菜单移动或主题变更,都会让指南看起来不对,即使步骤本身仍然有效。读者会因此逐渐不再信任这份文档。

本文介绍一套维护流程:每份指南由谁负责、什么情况触发审查,以及如何在 Mac 上使用 Temposhot 只替换有变化的页面。

全文以一个示例贯穿。示例是一本 40 页的管理员指南,对应的 Web 产品每 6 周发布一次版本。4.3 版本将一个按钮改名,在一个对话框中增加一个字段,并移动了一个侧边栏项目。指南需要在发布日之前与之保持一致。

四个数字:管理员指南共 40 页,产品每 6 周发布一次,4.3 版本影响 7 页,更新并复查这些页面约需 35 分钟。

指定负责人和已验证版本

每份指南都需要一位明确的负责人。通常是负责相应功能的人员或团队。多人共同负责往往意味着没有人会去更新。

在封面或第一页记录以下信息:

  • Owner: 人员或团队名称。
  • Verified version: 截图对应的产品版本或发布日期。
  • Last verified: 有人按照指南完整操作一遍的日期。

“已验证”指有人使用该指南完成了任务,而不是有人看过它。

将记录放在读者能看到的位置

已验证版本应记录在指南本身中,而不只存放在跟踪表格里。读者如果使用 4.1 版本打开标注为 4.3 的指南,就能立即理解界面为何不同。支持人员在排查不一致问题前,也可以先询问版本号。

在 Temposhot 中,Document 的第一页可以把这份记录写在 Page title 和 Description 中。开启 Cover page 的 PDF 导出会以文档标题和步骤数开头,因此标题如 “Admin guide, verified on 4.3” 会在封面上显示版本号。修改封面设置属于 PDF 自定义,需要 Temposhot Pro;默认设置已包含封面页。

按负责人拆分长指南

示例中的 40 页管理员指南涵盖成员、角色、账单和审计日志。四个领域通常对应四位负责人。每个章节由一位负责人负责,比 40 页由一人负责更有效,因为账单团队会最先发现账单相关的变化。

表格列出四个指南章节的页码和负责人:成员 1 至 14 页,角色 15 至 22 页,账单 23 至 32 页,审计日志 33 至 40 页。

章节负责人只对自己负责的页面签字确认。指南负责人收集全部四份确认后,再更新已验证版本。

将产品变更作为审查触发条件

仅依靠定期审查会发现问题太晚。应将审查与改变界面的事件绑定:

触发条件发现人处理方式
发布说明中提到指南中的某个界面文档负责人发布前检查受影响的指南
标签或菜单项被改名产品或设计在指南中搜索旧标签
主题或布局重新设计设计计划完整重新截图
支持人员报告不一致支持在下一个工作日内修复
一个季度没有任何触发文档负责人抽查使用最多的指南

请产品团队为改变可见界面的发布项添加标签。仅这一项习惯就能使大部分触发条件自动生效。

将审查安排在 6 周发布周期内

产品每 6 周发布一次,文档工作有固定的时间段。发布前数天,界面会在预发布构建上冻结,此前截取的截图仍可能变化。在冻结后的构建上截图,并在发布日前导出,可以使指南与产品保持一致。

从第 1 周到发布日的时间线:第 1 至 4 周标记界面变更,第 5 周映射受影响页面,在预发布构建上重新截图,测试指南,发布日导出 PDF 并替换所有已发布副本。

过早截图是这个周期中最常见的错误。如果冻结之后标签又发生变化,同样的页面就需要再次重新截图。

使用数据稳定的预发布账户

在数据不会在版本之间变化的账户上重新截图。相同的三名测试成员、相同的发票编号和相同的套餐名称,能使新截图与未变化的页面保持一致。即使界面完全相同,使用不同示例数据截取的页面与旧页面放在一起也会显得不协调。

处理支持人员报告的不一致

支持人员经常会发现发布说明遗漏的变化。“指南中显示了一个我找不到的按钮”这类工单,在任何人重新截图前需要三项信息:指南名称、页码和客户使用的产品版本。缺少版本号时,使用 4.1 的客户可能会触发对已经适用于 4.3 的指南进行更新。

为支持团队提供包含这三项字段的简短模板。在当前版本上确认的不一致进入下一个工作日处理;旧版本上的不一致则转入下文的归档判断。

将变更映射到受影响的步骤

重新截图前,需要确定哪些页面显示了变化的界面。库存清单可以加快这一过程:

指南显示的界面已验证版本负责人
邀请团队成员成员、Invite 对话框4.2团队管理员
导出发票账单、发票列表4.1财务

当某次发布改变了 Invite 对话框时,库存清单会列出对应的一份指南和需要检查的页面。没有清单时,就需要逐一打开每份指南。

示例:4.3 版本

4.3 版本包含三项可见变化。成员页的 Add member 按钮改名为 Invite。Invite 对话框新增 Role 字段。Invoices 项从账户菜单移至账单侧边栏。

库存清单将这些变化映射到 40 页中的 7 页:

4.3 版本的变化显示该变化的页面重新截图方式
Add member 改名为 Invite第 6 页(成员列表)、第 14 页(摘要页)对成员页使用 Action Capture
Invite 对话框新增 Role 字段第 7、8、9 页(Invite 对话框、角色选择、确认页)对邀请流程使用 Action Capture
Invoices 移至账单侧边栏第 27、28 页(导航和发票列表)对账单路径使用 Action Capture

其余 33 页保持不变。这些页面的截图已与 4.3 版本一致,重新截图只会增加工作量,而不会改变读者看到的内容。

使用 Compare Images 查找视觉差异

发布说明不会列出每一个像素的变化。间距变化、新图标或按钮颜色改变都可能被遗漏。对于发布说明未提及的页面,对同一界面重新截取一张图,并与导出的页面图片进行比较。

Compare Images 以滑动、淡入淡出、并排或像素差异视图显示两个版本。差异视图会高亮变化的区域,便于发现移动的控件。该功能在浏览器中运行,可用于快速检查清单中标记为未变化的 33 页。

流程图:标记为界面变更的发布项,经过按界面名称查找清单、对邻近页面进行 Compare Images 检查、列出 7 个待重新截图的页面,最后为每条变更路径运行一次 Action Capture。

只替换受影响的步骤

为一个变化的对话框重新截取整份指南既浪费时间,也容易引入新错误。应只替换变化的页面。

  1. 打开 Document

    按 Command+4,打开指南的 Document。

  2. 截取新画面

    打开 Pages 面板中的添加菜单,选择 Capture new images…,再选择 Action Capture。只执行变化的步骤,然后选择 Finish capture。新页面会返回编辑器,并可插入到当前页面之后。

  3. 移动并删除

    在 Pages 面板中拖动新页面到正确位置,或使用 Move up 和 Move down。对过时的页面使用 Delete page。

  4. 沿用标题和标记

    删除旧页面前,先复制其标题和说明。使用 Command+C 和 Command+V 复制标注,然后调整位置。

  5. 重新导出

    选择 Export PDF,或使用 More export formats。导出结果反映当前的页面顺序、取景和标注。

页面与导入指南介绍如何从截图、图片和 Capture History 添加页面。

重新运行 Action Capture 或从 Capture History 添加

有两种方式可将新页面加入 Document。Capture new images… 在 Document 内运行一次截取,并在运行结束时添加截图帧。Add from Capture History… 从已存在的会话导入截图帧,例如同事在预发布 Mac 上完成的一次运行。

两种添加替换页面的方式对比:Capture new images 在 Document 内运行 Action Capture,Add from Capture History 从更早的会话导入截图帧,并可逐帧选择。

示例中,邀请流程直接重新截取。账单路径前一天已在预发布环境中截取,因此它的 2 个帧通过 Add from Capture History… 添加。选择器可展开该会话,只勾选所需的 2 个帧。

邀请流程重新截取的操作方法

邀请流程共 5 次点击:Invite、邮箱字段、Role 菜单、Admin 选项和 Send invite。5 个步骤在免费版 Action Capture 每次运行 5 步的限制之内。更长的路径需要 Temposhot Pro,或拆分为两次运行。

重新截取运行的设置面板:截取目标为 Specific Window,捕获每次鼠标点击开启,外部点击捕获关闭,解析被点击元素开启,点击区域标记为 Circle,尺寸为 Medium。

使用与原始运行相同的目标类型和相同的标记样式。如果指南中第 6 至 9 页使用圆形标记,其余页面使用矩形标记,即使每一步都正确,看起来也像是被打过补丁。

保持窗口尺寸一致

Specific Window 目标会以截取时窗口的当前尺寸进行截图。如果原始页面截图时浏览器窗口宽度为 1440 像素,重新截图前应将窗口调整为相同宽度。宽度不同会改变页面布局和文字大小,使新页面与 33 个未变化的页面不一致。

Screenshot Resolution Checker 显示导出页面图片的像素尺寸。检查一张旧页面和一张新页面,宽度应一致。

复查文字、标注和隐私

新截图常会影响其周围的内容:

  • 标题中包含旧标签,例如按钮已改为 Invite,标题却仍写着“选择 Add member”。
  • 箭头和标记指向空白处。
  • 取景裁掉了移动后的控件。
  • 新页面显示了旧页面没有的数据,例如带有姓名的新侧边栏。

在 Action Capture 页面上重新应用 Focus on action,其他页面则使用 Custom 取景。使用 Blur(快捷键 B,Pro 功能)模糊新的个人数据。

在每个页面中搜索旧标签

被改名的控件通常不只出现在显示它的页面中。示例中,“Add member”出现在第 6 页和第 14 页的标题中,同时也出现在第 3 页的说明中,该说明解释了如何找到成员页。在 Page Inspector 中阅读每个页面的 Page title 和 Description,列出旧标签出现的所有位置,并在同一次编辑中全部修正。

替换页面的检查清单:标题使用新标签 Invite,说明与新的 Role 字段一致,点击标记位于被点击的控件上,取景级别与相邻页面一致,没有可见的新个人信息。

与相邻页面保持相同取景

Action Capture 页面支持五种取景级别:Wide、Relaxed、Balanced、Close 和 Tight。如果第 5 页和第 10 页使用 Balanced,则第 6 至 9 页也应设为 Balanced。取景级别混用会使缩放在页面之间跳动,读者会将其视为错误。

在页面上按 F 打开取景编辑器。如果手动裁剪出错,Reset to action 会围绕点击位置重新生成自动取景。

替换页面时使用的快捷键列表:Command+4 打开 Documents,F 打开取景,B 添加模糊,M 添加点击标记,Command+C 和 Command+V 复制粘贴标注,Command+Z 撤销。

测试完整指南

使用测试账户,在当前版本上从第一页到最终结果完整操作一遍。替换后的页面仍可能破坏操作流程,例如变更同时移动了后续步骤。

只有在此测试通过后,才更新 Verified version 和 Last verified 日期。

示例中测试发现的问题

在 4.3 的示例中,端到端测试发现了页面审查遗漏的一个问题。第 10 页在发送邀请后仍写着“关闭对话框”,但 4.3 版本会自动关闭对话框。第 10 页的截图本身仍然正确,因此清单和 Compare Images 都没有标记它,只有按步骤操作才能发现。

修正说明后,从第 5 页开始重新测试。如果第一处变化之前的页面未改变,从变化前一页开始的局部重新测试即已足够。

选择测试人员

重新截图页面的人是最不适合测试的人,因为他们已经知道每个控件的位置。应由未参与的章节负责人或支持团队成员,以客户的视角阅读指南。示例中,安全小组负责人测试了成员章节,约 10 分钟内发现了第 10 页的问题。

把导出的 PDF 交给测试人员,而不是编辑器中的 Document。这样测试覆盖的是读者实际收到的文件,包括页面顺序、封面和图片质量。

热修复后重新测试

两个版本之间的热修复可能会在没有发布说明的情况下改变标签。如果在 6 周周期内支持人员报告不一致,应重复同样的步骤:在库存清单中找到页面,替换页面,并从变更前一页开始进行局部测试。在 Verified version 字段中添加热修复版本号,例如 4.3.1。

仅在读者需要历史时归档

大多数读者只需要当前指南。如果仍有人在使用旧产品版本,例如使用长期发布版本的客户,或者法规要求保留记录,则应保留旧版本。

归档时,应在文件名和封面中明确标注旧版本,例如 invite-teammate_v4.1_archived.pdf。Documents 和 Capture History 保存在 Mac 本地,因此应将导出的归档文件保存到共享存储中,而不是只依赖这台 Mac。删除 Action Capture 的工作内容可能会同时删除其 Document,因此在指南下线前应保留源 Document。

导出文件的文件夹结构

固定的文件夹结构能让当前文件易于查找。在 Settings > General 中将 Export path 设为指南的工作文件夹,然后把完成的文件移动到对应位置。

文件树:admin-guide 文件夹下包含 current 文件夹(内有 4.3 版 PDF 和 PNG 页面)以及 archive 文件夹(内有标记为 archived 的 4.2 和 4.1 版 PDF)。

只有 current 文件夹会从帮助中心或内部网站链接。归档文件仍可供使用旧版本的客户访问,但不会被无意中打开。

管理 Capture History 的保留数量

Capture History 默认保留 30 个会话,可在 Settings > History 中设置 1 至 500 之间的上限。如果一个团队每 6 周为多份指南重新截图,几个周期内就可能达到 30 个会话。Document 会保存每张图片的副本,因此删除旧会话不会损坏指南,但用于后续复用的原始截图帧会被删除。

使用此记录跟踪维护情况

在电子表格或文档工具中,每份指南保留一行记录:

  • 指南名称和文件位置。
  • 负责人。
  • 显示的界面。
  • 已验证版本和最近验证日期。
  • 支持人员或读者报告的未解决问题。
  • 下一次计划抽查的时间。

每周简短检查一次此列表,能在变化较小时发现问题。每年一次的集中清理则是在读者已经遇到问题之后才发现。

4.3 版本发布后的示例记录

字段值
指南管理员指南,current/admin-guide_v4.3.pdf
负责人文档负责人,以及四位章节负责人
显示的界面成员、Invite 对话框、角色、账单、发票、审计日志
已验证版本4.3,于发布日验证
未解决问题无
下一次抽查4.4 版本,6 周后

让截图更持久的习惯

有些截图在每次发布时都会失效,有些则可以长期保持有效。两者的差别主要在于取景的紧凑程度和显示的数据。

做与不做列表:做法是将每页取景到该步骤使用的面板,并使用稳定的测试数据;不做是在画面中保留日期或通知数量,截取整个屏幕,或仅通过颜色或位置描述控件。

常见问题

截图文档应多久审查一次?

每次发布改变其显示的界面后都应审查一次。对于没有其他触发条件的指南,还应按固定间隔抽查,例如每季度一次。

如何减少截图失效的频率?

使用 Framing 将截图裁剪到相关面板,避免在截图中包含日期和姓名,并在文字中写明控件名称,使读者在出现轻微的样式变化时仍能跟随操作。

界面重新设计后是否需要重新截取整份指南?

对于完整的布局或主题变更,需要。对于控件改名或位置移动,只替换受影响的页面即可。

重新导出 Document 会覆盖旧 PDF 吗?

不会。如果 Export path 中已存在同名文件,Temposhot 会在新文件名中添加编号。应先移动或重命名旧文件,或手动替换已发布的副本。

能否更新由手动截图制作的指南页面?

可以。使用 Upload images… 添加新的图片文件,或使用 Capture new images… 进行截取。无论来源如何,Document 都以相同方式处理每个页面;只有 Action Capture 页面具有点击位置,可使用 Focus on action。

与完整重新截取相比,部分更新需要多长时间?

在 40 页的示例中,替换 7 个页面并复查约需 35 分钟。完整重新截取还需要重新输入或检查 40 个标题和说明,并在每个页面上重新应用标注,耗时是部分更新的数倍。

将点击转换为清晰的分步指南

Action Capture 只重新截取变化的步骤,并将其添加到现有 Document 中。下载 Temposhot,并先从最早的已验证版本开始更新指南。

maintenancedocumentationscreenshotsreview

本文使用的术语: visual documentation

把重复性截图整理为成品

Temposhot 可按定时或每次点击进行截图,并将结果导出为 PDF、图片、ZIP 或 MP4。

相关文章