把浏览器操作变成一张带编号的截图:ClickTrek 让工作流文档不再痛苦
一张截图,看清所有步骤
大多数工作流截屏工具会为每次点击生成一张独立图片。一个十步的操作,变成十张图。读的人需要来回翻,步骤之间的空间关系完全丢失。
ClickTrek 反过来做:它只抓取页面一次,然后把所有步骤标注——编号、箭头、标签——叠加到这一张背景图上。导出时合成一张完整的工作流截图。
如果整个操作发生在同一个页面或同一块 UI 区域内,读者一眼就能看到每个步骤的上下文。步骤 3 指向步骤 4,步骤 4 指向步骤 5,全在一张图上,不用切换。
如果操作跨越多个页面,ClickTrek 会在页面变化时重新抓取背景——每个页面上下文一张标注图,而不是每次点击一张。而且你可以在每次截图前自定义起始编号,让编号在所有截图中连续。比如第一页抓步骤 1–5,第二页从 6 开始,第三页从 11 开始。把它们拼在一起,读起来就是一条没有中断的工作流,即使每张图是分开抓的。
这是刻意的设计选择,不是缺陷。更少的图片,更多的上下文,加上连贯的编号系统。
这次更新了什么
撤销和重做
上线以来被要求最多的功能。如果你在截图中点错了——点了不该点的元素、不小心双击、或者误触了导航链接——不用从头再来。撤销会移除最后一步标记,重做把它加回来。整个截图会话中都可以使用。
马赛克遮挡(Pro)
导出前可以在敏感内容(账户信息、用户数据、账单页面、内部仪表盘)上绘制并压平马赛克遮挡框。遮挡直接压进下载的 PNG 里,不需要用外部图片编辑器。
这是之前团队在内部 SOP 和 bug 报告中使用 ClickTrek 的主要障碍。现在扩展内部全搞定。
高清 2x 导出(Pro)
在页面尺寸允许时,以双倍分辨率导出。适合把带标注的截图放进演示文稿、入职门户或打印文档——这些地方标记的清晰度很重要。
自定义起始编号
每次 ClickTrek 截图生成一张带标注的图片。对于跨多个页面的工作流,你需要分别截图——每个页面上下文一次。自定义起始编号就把它们串起来。
每次截图前,你可以把第一步标记设为任意数字。第一次从 1 开始,第二次从 7 开始,第三次从 12 开始——随工作流需要。当你把截图在文档或 SOP 中并排放置时,编号是连续的,工作流读起来像一次连续过程。
不需要手动重新编号,不需要事后回去编辑标记。设好数字,截图,导出,继续。
标记颜色预设(Pro)
选择标记颜色以匹配你的品牌或内部文档系统。让一系列工作流导图在外观上保持一致的风格。
页脚文字(Pro)
在每张导出的底部加一行文字——团队名称、文档版本、URL 或内部参考编号。大批量生产文档时,少了一件需要手动添加的事。
谁在用
- QA 和支持团队 —— 带标注的 bug 报告,精确的点击路径。在 Jira 工单里放一张带编号的截图,比写一段复现步骤更清楚。
- 运营和培训团队 —— 基于浏览器的 SOP 和入职指南。自定义步骤编号让跨页面的流程文档变得可控。
- 向非技术角色交接的开发者 —— 向客户或项目经理展示工作流,不再假设他们能看懂文字说明。
- 任何在写内部文档的人 —— 马赛克遮挡功能让包含真实用户或账户数据的页面也能用,之前需要在中途切换到另一个工具。
没有截图上传 —— 一切都在本地
ClickTrek 在浏览器中完成截图和处理。工作流截图、点击位置、标签、马赛克数据和导出的 PNG 文件永远不会离开你的设备。没有后端接收你的屏幕内容。
专业版授权通过托管服务管理设备数量,支付走 Stripe 托管的结账流程。这两个服务都不会从 ClickTrek 接收截图数据。
对于记录敏感内部工作流的团队,这一点最重要。
免费版 vs 专业版
- 免费版包含所有核心功能:编号步骤标记、方向箭头、可选标签、自定义起始编号、撤销/重做、切换箭头显示、导出前预览,但导出的 PNG 上带有 ClickTrek 水印。
- 专业版去除水印,并增加高清 2× 导出、马赛克遮挡、标记颜色预设、页脚文字,以及最多 3 台设备激活。
安装
从 Chrome 网上应用店免费安装,无需注册账号。
如果你遇到不按预期工作的情况,或某种工作流类型支持得不够好,我会阅读每一条评论并直接回复反馈。
送给所有写过“点击右上角的那个按钮”之后,立刻希望自己能直接展示给他们看的人。
