做产品 PMaker
原型图
上传文件
把文件拖到这里
开始
画出来只说明了「有什么」
加上交互说明
字符限制 文件名 ≤ 60 字
元件类型 多行文本,可换行
操作结果 点开始后按钮变灰,显示进度
页面状态 空 / 上传中 / 成功 / 失败
必填必选 未选文件时开始按钮不可点
这才说清了「怎么用」

同一个界面,左边只回答了有什么,右边才回答了怎么用。中间那段就是交互设计。

交互管的是行为

信息架构决定东西放在哪,交互决定用户在上面怎么动:点了什么、发生了什么、出错了怎么办。

你会遇到的现象
  • 界面画出来了,但一交给别人做,细节全靠问
  • 做出来能跑,一到边界情况就露馅:超长文本、必填没填、网络断了
  • 让 AI 照着截图做,它只还原了长相,行为全是它自己猜的

原型图能传达信息和功能长什么样,但传达不了「怎么用」。按钮点下去发生什么、什么时候不可点、输入框最多能填多少字,这些都不在画面里。你不写出来,做的人只能猜。

它管什么

这一块要说清楚什么
页面流程 页面之间怎么跳、跳转条件是什么、从哪进来又怎么回去
内容布局 每页有哪些模块、各模块的内容形式、不同状态下显示什么,以及字段说明(是否必填、类型、长度、默认值、提示文字)
操作与反馈 每个元素能被怎么操作、操作后系统给什么反馈、有什么限制条件、错误操作怎么处理
三块里最容易漏的是第二块的字段说明。字段长度和必填规则不写清楚,做出来的表单在真实数据面前一碰就碎。

七类要说清的事

在原型上做标注时,这七类最值得写。写全了,交给谁做都不会跑偏。

类型例子
词语概念自造的词要解释。「快捷入口是一个用于快速访问常用功能的按钮,点它直接跳到指定页面」
设备差异「底部导航栏在 iOS 上用固定标签样式,Android 上用滑动标签样式」
字符限制「昵称限 10 个字符以内,只能包含字母、数字和下划线」
元件类型与优先级「评论内容是多行文本,优先级高,需要突出显示」。单行还是多行、输入框还是搜索框,都要写
操作结果「点击点赞后按钮变为已点赞状态,点赞数加一」
页面状态「购物车有三种状态:空、有商品、异常」
必填必选「用户名、密码、邮箱为必填,填完才能进入下一步」
颜色、字号、间距、形状这些外观决策不用写在这里,交给视觉那一层处理。交互说明只管行为和规则。

还有一条容易忽略的:在画的过程中要形成闭环。每个页面都要能说清怎么进来、又怎么回去。断头路在原型阶段看不出来,上线之后用户只能退出重来。

给 AI 的话

把这七类写进需求,AI 就不用猜行为了。

PROMPT · 交互说明
做这个页面:[页面名和用途]

界面结构:[描述,或附截图]

交互规则,请严格按下面执行,不要自行发挥:
- 字符限制:[每个输入项的长度和允许字符]
- 元件类型:[单行/多行、输入框/搜索框/下拉]
- 操作结果:[点击每个按钮之后分别发生什么]
- 页面状态:[列出所有状态及各自的触发条件]
- 必填必选:[哪些必填,未填时按钮是什么状态]
- 入口与返回:[从哪进来,怎么回去]

另外:
- 颜色、字号、间距按项目现有设计系统,不要新造。
- 上面没写到的行为,先问我,不要自己决定。
- 实现完成后,逐条对照上面的规则做一次自检,
  告诉我哪几条你确认做到了、哪几条有偏差。

最后一条是低成本的验收。让它自己对照清单报告一遍,比你逐个点过去快。