Visily 教程：从截图到可点击的三屏预约原型

完成一个预约三屏原型

用一张虚构预约页截图做第一屏，在 Visily 里补上核对和确认两屏。最终可从选时段走到确认，也能从核对回到选择。步骤依据官方文档，示例数据与检查项为手写。

准备截图和验收脚本

用自己制作的截图，去掉姓名、电话、内部链接和账号信息。选取一个清晰的窗口范围，保留页面标题、时段列表和主按钮。原图单独保存，便于对照导入结果。示例用虚构的两个时间，评审时无需连接真实预约服务。

A 选择时段：10:00、14:30
B 核对预约：显示示例时段，提供「返回修改」和「确认」
C 预约确认：显示示例成功状态，提供「回到开始」

导入并检查元素

打开 Visily 画布，使用 Screenshot to Design 工作流导入截图。转换后先改标题，再移动按钮，最后复制一行时段。如果文字和背景合成一块，就手动重建这一小块。可暂时隐藏装饰图，优先保证时段、按钮和状态文案能独立修改。截图转换说明

补齐页面并手动连线

将三个画面分别命名，保留同一组基本间距和按钮层级。切换到 Prototype 模式，选中要触发动作的元素，拖连接器到目标画面，再检查触发和动作设置。先做 A 到 B，再做 B 到 C。随后补上 B 返回 A 和 C 回到 A。若要用 AI 批量连线，请先保留已连好的版本，再检查自动连接有没有覆盖手动设置。手动连线 · AI 连线说明

从预览里走两遍

从正确的起点开始，一遍只走主流程，另一遍专门点返回。不要靠画布位置推断目标页，实际点击后看标题和按钮是否符合预期。复用画面时容易让按钮仍指向旧版本，应在预览中检查。需要给同事查看时，先用相同访问角色确认入口可开，确认后再分发链接。

[ ] A 点击继续进入 B，看到所选示例时段
[ ] B 点击返回进入 A，可重新选择
[ ] B 点击确认进入 C，出现清楚的完成提示
[ ] C 可回到 A，其他可见按钮也逐项点过
[ ] 评审者可从分享入口打开正确起点

常见问题和交付边界

如果点不到按钮，回画布检查是否选中了真正的触发元素。如果跳错屏，检查连接器与复制出来的画面是否仍指向原稿。若要保留真实输入并根据选择动态改变结果，需要加上可验证的行为实现。交接到 Figma 或导出代码之前，先查当前套餐，再让接收者打开一个小文件确认格式、图层与操作要求。代码导出

相关内容

Visily · 2026 年 AI 线框图与交互原型工具推荐 · Visily vs Uizard：截图转可编辑设计稿怎么选？ · Visily vs Figma Make：流程评审和功能原型怎么选？