首页路线 5 · 设计创意 › 任务卡 5.4 交互原型:把设计思路快速可视化

任务卡 5.4 交互原型:把设计思路快速可视化

进阶 前置:任务卡 5.3 UI 界面设计:用自然语言描述 APP 界面 适用版本:WorkBuddy Desktop 1.0+ 更新:2026-08-31 交付:交互原型:把设计思路快速可视化

① 看结果:做完你手里会多出这个

这张卡做完,你会得到一份「交互原型:把设计思路快速可视化」的可交付产物。先看成品长什么样,再倒推做法:

产物预览 · 交互原型:把设计思路快速可视化

交互原型:把设计思路快速可视化(完成后你手里的样子)

你脑子里有个产品想法,想快速做个原型给同事看,证明思路可行。但画原型要开 Axure、拖组件、连跳转……太慢了。用 WorkBuddy,把你的页面和跳转逻辑用大白话说出来,它帮你快速可视化,几分钟就有个能讲的原型。

要点 1:1. 基础原型描述——做完这一步,你会得到「1. 基础原型描述」对应的可查看产物或结果。

要点 2:2. 补充交互状态——做完这一步,你会得到「2. 补充交互状态」对应的可查看产物或结果。

要点 3:3. 完整流程串联——做完这一步,你会得到「3. 完整流程串联」对应的可查看产物或结果。

这就是「跟着任务链走完」能拿到的成品。接下来倒推它怎么做出来的。

② 拆思路:这条任务链为什么这么下

做出上面的结果,靠的是一条 4 步任务链。看懂每一步的意图,你就能自己「出题」了:

#Prompt / 操作原文意图(为什么这么写)
1 帮我画一个登录注册的原型流程:包含 3 个页面——1. 启动页(Logo + "开始体验"按钮)2. 登录页(账号密码输入 + 登录按钮)3. 首页(欢迎语 + 功能入口)。标出页面之间的跳转箭头 主指令:说清「要什么 + 范围 + 约束」,AI 才知道交付标准,模板越具体产出越精准
2 给登录页补充交互状态:1. 输入框聚焦时边框变蓝 2. 登录按钮点击后显示 loading 3. 登录失败弹出错误提示。用文字说明每个状态的触发条件 这一步在补充关键上下文或提出明确交付要求,让 AI 基于前面的内容继续,而不是重新开始
3 把整个流程串起来:启动页点击"开始体验"→ 登录页 → 登录成功跳首页,登录失败停在登录页并提示错误。画一张流程图,标出每个步骤和分支 这一步在补充关键上下文或提出明确交付要求,让 AI 基于前面的内容继续,而不是重新开始
4 再补充一个分支:用户没有账号时,登录页底部加一个"去注册"入口,点击跳到注册页(手机号 + 验证码 + 下一步),注册成功也跳首页 这一步在补充关键上下文或提出明确交付要求,让 AI 基于前面的内容继续,而不是重新开始

③ 跟练回放:照着走一遍

下面是这段任务在 WorkBuddy 里的完整回放。点「下一步」逐步展开,把每条 Prompt 复制到你的 WorkBuddy 里跟练。

💡 小贴士:先画页面再连流程:先把每个页面长什么样描述清楚,再说页面之间怎么跳转。
💡 小贴士:标注交互触发条件:说清楚"点击什么按钮""在什么状态下"触发跳转,逻辑更清晰。
💡 小贴士:画出分支逻辑:成功/失败、登录/未登录这些分支要单独描述,别只画理想路径。
💡 小贴士:一张图说清楚:让 AI 画成流程图或线框图,一眼就能讲明白整体思路。

④ 变式挑战:换个场景,你会不会

任务:把上面的任务链换到你的场景

把模板里 带下划线的词换成你自己的话题,在 WorkBuddy 里跑通:

帮我画一个登录注册的原型流程:包含 3 个页面——1. 启动页(Logo + "开始体验"按钮)2. 登录页(账号密码输入 + 登录按钮)3. 首页(欢迎语 + 功能入口)。你的场景标出页面之间的跳转箭头

检查点:① 只改内容、结构照抄;② 每一条都等 AI 回复后再发下一条;③ 至少追问一次「把 X 改成 Y」,确认 AI 是基于上文修改而非重新开始。

⑤ 交付自检:证明你真的会了

对照你手里的产物,勾选完成项

🎉 本卡完成!进度 +1(学习徽章联动已在路上)