Interaction is about behavior
Information architecture decides where things sit; interaction decides how users move across them — what a click does, what happens next, what to do on error.
- 界面画出来了，但一交给别人做，细节全靠问
- 做出来能跑，一到边界情况就露馅：超长文本、必填没填、网络断了
- 让 AI 照着截图做，它只还原了长相，行为全是它自己猜的
A prototype shows what the information and features look like, but not "how to use it." What happens when a button is pressed, when it is disabled, how many characters an input accepts — none of that is in the picture. If you do not write it down, the person building it can only guess.
What it covers
| 这一块 | 要说清楚什么 |
|---|---|
| 页面流程 | 页面之间怎么跳、跳转条件是什么、从哪进来又怎么回去 |
| 内容布局 | 每页有哪些模块、各模块的内容形式、不同状态下显示什么，以及字段说明（是否必填、类型、长度、默认值、提示文字） |
| 操作与反馈 | 每个元素能被怎么操作、操作后系统给什么反馈、有什么限制条件、错误操作怎么处理 |
Seven things to spell out
When annotating a prototype, these seven are the ones worth writing. Cover them all and the build will not drift, no matter who picks it up.
| 类型 | 例子 |
|---|---|
| 词语概念 | 自造的词要解释。「快捷入口是一个用于快速访问常用功能的按钮，点它直接跳到指定页面」 |
| 设备差异 | 「底部导航栏在 iOS 上用固定标签样式，Android 上用滑动标签样式」 |
| 字符限制 | 「昵称限 10 个字符以内，只能包含字母、数字和下划线」 |
| 元件类型与优先级 | 「评论内容是多行文本，优先级高，需要突出显示」。单行还是多行、输入框还是搜索框，都要写 |
| 操作结果 | 「点击点赞后按钮变为已点赞状态，点赞数加一」 |
| 页面状态 | 「购物车有三种状态：空、有商品、异常」 |
| 必填必选 | 「用户名、密码、邮箱为必填，填完才能进入下一步」 |
One more that is easy to forget: while drawing, keep the loop closed. Every screen must explain how you arrive and how you leave. Dead ends are invisible at prototype stage — after launch, the only way out is to quit and start over.
A note for AI
Put these seven into the spec and the AI no longer has to guess the behavior.
做这个页面：[页面名和用途] 界面结构：[描述，或附截图] 交互规则，请严格按下面执行，不要自行发挥： - 字符限制：[每个输入项的长度和允许字符] - 元件类型：[单行/多行、输入框/搜索框/下拉] - 操作结果：[点击每个按钮之后分别发生什么] - 页面状态：[列出所有状态及各自的触发条件] - 必填必选：[哪些必填，未填时按钮是什么状态] - 入口与返回：[从哪进来，怎么回去] 另外： - 颜色、字号、间距按项目现有设计系统，不要新造。 - 上面没写到的行为，先问我，不要自己决定。 - 实现完成后，逐条对照上面的规则做一次自检， 告诉我哪几条你确认做到了、哪几条有偏差。
The last step is a cheap acceptance check: ask it to report against the checklist itself. Faster than clicking through each one.