交互式教程制作台

把截图做成一步步可点击的教程,导出独立 HTML 文件。

添加截图,写好每步说明,标出点击位置。预览后下载 HTML,或保存项目以后继续编辑。

0 / 0拖动圆点,或用方向键调整位置。

添加截图开始制作,也可以先试试示例。

点击数字圆点,进入下一步。

修改仅在当前页面保留;保存项目后可继续编辑。
使用说明

交互式教程制作台

把截图做成一步步可点击的教程,导出独立 HTML 文件。

操作步骤

  1. 通过以下入口提供原始输入:添加截图。
  2. 设置:教程标题 / 步骤标题 / 操作说明 / 水平位置 % / 垂直位置 %。对照下方参数说明,选择符合当前任务的选项。
  3. 执行:成品预览。复制、下载或用于其他场景前,先检查结果。
  4. 添加截图,写好每步说明,标出点击位置。预览后下载 HTML,或保存项目以后继续编辑。

参数怎么选

选项取舍与影响
水平位置 %分享 HTML 前,预览每一步并点击标记。标记偏位时,调整它在当前截图中的百分比位置。除教程外也保存可编辑项目;HTML 是浏览用输出。
下载 HTML / 保存项目最多 20 步;静态 PNG、JPEG、WebP 单图 8 MB、合计 40 MB,单图 1600 万像素、单边 8192 像素。项目文件最多 58 MB。暂不支持录屏、自动拆分步骤或自动翻译文字。

示例与预期结果

试试三步 JSON 示例:加载示例数据、格式化、复制结果。导出的 HTML 内置三张截图,断网也能查看。

失败后怎么办

  • 最多 20 步;静态 PNG、JPEG、WebP 单图 8 MB、合计 40 MB,单图 1600 万像素、单边 8192 像素。项目文件最多 58 MB。暂不支持录屏、自动拆分步骤或自动翻译文字。
  • 分享 HTML 前,预览每一步并点击标记。标记偏位时,调整它在当前截图中的百分比位置。除教程外也保存可编辑项目;HTML 是浏览用输出。
  • 图片被拒绝时,同时检查解码后的像素尺寸和文件体积。从原应用导出受支持的静态图片,减少像素后重试;修改扩展名不会转换格式。

限制和取消

最多 20 步;静态 PNG、JPEG、WebP 单图 8 MB、合计 40 MB,单图 1600 万像素、单边 8192 像素。项目文件最多 58 MB。暂不支持录屏、自动拆分步骤或自动翻译文字。