GPT中文小秘书挑几下就能开工
我积分

画组件交互流程图

关于「画组件交互流程图」:能拿到什么、要点选什么、怎么办

说一句组件状态,3 分钟拿到清晰的状态流转图。为前端组件状态流转(如加载中、提交失败、成功跳转)生成可读性强的交互流程图;不提供代码实现,不替代技术评审。

能拿到什么

  • 推荐:一张清晰的状态流转图 PNG,节点和箭头标注完整(横向流程图,圆角矩形节点,箭头连接,错误路径标红,成功路径标绿),约 3 分钟
  • 旗舰:标准状态流转图、精简主路径图、异常分支特写图、带注释说明版

要你点选的几项

画面主体、用在哪、参考图(选填)、风格、色调、画面比例、要几版/要什么变体。多数点一下就行,没选的按常见情况替你定,交付时说清哪几项是按默认的。

怎么办

  1. 说清组件有哪些状态和跳转
  2. 选风格、色调和画面比例
  3. 选要几版变体
  4. 生成流程图并下载

别人还这样说

  • 这个按钮点完没反馈,得画个状态流转图给产品看
  • 帮我画个表单提交的流程图,用Mermaid代码或者图片都行。
直接说你要办的事。下面是别人怎么办的,点任何一项就换成你自己的。左边是别人怎么办的,右边是你的,点一项就开始改。
示范 · 别人这样说

「表单校验失败后怎么回退?先画个图对齐下」

替他选了:产品需求对齐 · 极简线框 · 红绿状态色 · 宽屏16:9 · 标准版(含所有状态)

按示范选好的 点一项就变成你的

你的成品会在这里出现
示例成品 · 不是你的按示范写的,看个样子
画面主体:横向流程图,从左到右依次为「空闲态→点击触发→发送请求→loading态→成功跳转首页 / 失败弹Toast / 可取消」,带箭头连接线与状态标签;背景纯白,节点用圆角矩形,错误路径标红,成功路径标绿,字体清晰无衬线。

GPT中文 也可能出错,成品请自己核对关键数字和事实。条款 · 隐私