关卡 5.4

🔄 交互原型:把设计思路快速可视化

不会 Axure?用自然语言描述页面和跳转逻辑,WorkBuddy 帮你快速画出能讲的原型流程

🎯 场景导入

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

📋 学习目标

  • 学会用自然语言描述交互原型和页面跳转
  • 掌握原型描述的关键要素(页面/流程/交互/状态)
  • 学会把设计思路快速可视化呈现

📖 分步操作

1. 基础原型描述
帮我画一个登录注册的原型流程:包含 3 个页面——1. 启动页(Logo + "开始体验"按钮)2. 登录页(账号密码输入 + 登录按钮)3. 首页(欢迎语 + 功能入口)。标出页面之间的跳转箭头
2. 补充交互状态
给登录页补充交互状态:1. 输入框聚焦时边框变蓝 2. 登录按钮点击后显示 loading 3. 登录失败弹出错误提示。用文字说明每个状态的触发条件
3. 完整流程串联
把整个流程串起来:启动页点击"开始体验"→ 登录页 → 登录成功跳首页,登录失败停在登录页并提示错误。画一张流程图,标出每个步骤和分支
4. 补充异常路径
再补充一个分支:用户没有账号时,登录页底部加一个"去注册"入口,点击跳到注册页(手机号 + 验证码 + 下一步),注册成功也跳首页

✍️ 跟练 Prompt

假设你要做一个"电商下单"的原型流程。请写出你的原型设计 Prompt

💡 小贴士

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

🧪 自测题

1. 描述交互原型时,哪种做法最有助于可视化?