在线线框图制作平台

用三屏画清课程预约

下面是一个虚构的课程预约练习。先让用户完成“找到课程、确认时间、提交预约”这件事，再讨论颜色和图片。三张线框只保留内容层级、操作入口和结果反馈；示意图用于讲解结构，并非墨刀实测截图。

1. 课程列表1 / 3
   搜索课程名称
   摄影入门周六 14:00 · 90分钟可预约
   手机剪辑周日 10:00 · 60分钟可预约
   查看摄影入门
2. ‹ 课程详情2 / 3
   课程封面占位
   摄影入门
   学习取景与基础构图
   时间：周六 14:00—15:30
   地点：创意教室
   预约状态：有名额
   预约本场课程
3. 预约结果3 / 3
   ✓
   预约成功
   摄影入门
   周六 14:00—15:30
   创意教室
   请在课程开始前到达。
   返回课程列表

阅读顺序：课程列表 → 课程详情 → 预约结果。正式项目还需补齐无名额和提交失败等状态。

在墨刀中复现这条流程

1. 确定任务。以“预约一节有名额的课程”为目标，在墨刀原型中建立列表、详情、结果三页。
2. 摆出信息。拖入文本、矩形和按钮等组件，用字号、间距和灰阶区分课程名称、时间、状态与主操作。
3. 补全分支。复制详情页制作“名额已满”，复制结果页制作“提交失败”，分别提供换场次和重试入口。
4. 串起页面。将“查看课程”“预约”“返回”连接到对应页面，再检查失败分支能否回到可继续操作的位置。
5. 按任务评审。分享给同事，请对方不听讲解完成预约。记录找不到入口、误解时间或无法返回的位置，再调整布局。

按页面类型选模板

模板提供结构起点。先替换成真实业务内容，再检查每页是否有明确主操作，避免沿用无关栏目或缺失状态。

想系统梳理绘制方法，可继续阅读线框图制作教程；需要比较不同工具时，参考线框图工具选择指南。