交互与动效审查

为什么界面审查总抓不到要害

PR 里改动了一个按钮样式，审查者说「看起来不太对」，但说不出差在哪。落地页加了一段动效，上线后发现加载态缺失、点击后两百毫秒内没有任何反馈，用户以为没点上。这类问题的共同点是：界面能跑，但交互不成立。

纯人工 review 容易滑向主观审美——「不够高级」「再精致一点」这类反馈没有改法。同时，设计师和工程师之间的语言也不统一：设计师关心空间节奏和状态完整性，工程师关心代码成本和会不会引入 CLS。结果是同一份改动，两边各改各的。

Design Interaction Review 想填的就是这个缺口。它给 Agent 一套结构化的审查清单，把「好不好用」拆成可以逐项核对的检查点，而不是一句感觉。

它怎么工作

核心是六个审查透镜，按固定顺序逐项过。审查不是重新设计，而是定位问题到具体组件，并给出可执行的修法。

• 层级与间距：相关元素是否成组，间距是否遵循 4/8 点网格节奏，padding 有没有过紧或过空。完成标准是列出组件名加相对像素关系。
• 状态：每个可交互控件查 default / hover / active / focus / disabled / loading / empty / error 八态。输出必须是缺态列表，不允许「只有 default 态」的控件留在报告里。
• 动效：每个动画要能回答「目的是引导注意还是空间连续」这一句话。交互反馈时长控制在 150–300ms 区间，大转场可放宽，同时必须能被 prefers-reduced-motion 降级。
• 反馈：点击后 100–200ms 内有没有可见反馈，失败路径是否可恢复，危险操作是否可撤销。
• 可访问性：对比度、焦点环可见性、按钮的 accessible name，以及「不只靠颜色传达错误」。
• UI 文案：按钮是动词结果导向，空状态给出下一步动作。

输出统一区分 P0 / P1 严重级别，并单独列「已做好」的项。这一点是刻意的：只挑刺的报告容易被整个驳回，标出做对的部分才能让改动方知道哪些地方不需要动。

内部还有一份验证清单做自检——六个透镜都过一遍、问题可定位到组件、有严重级别、危险操作有确认建议。四项缺一就不算完成。

适用边界

它只审 UI 与交互层。纯后端变更、没有界面改动的 PR 直接跳过，用这套清单去审 API 属于误用。

几个高频翻车点值得留意：动效如果触发布局位移，会产生 CLS 式跳动，这类问题在 Motion 透镜里会被标出来，但修法需要回到布局方案而不是调动画时长；移动端触控热区小于 44px 也属于常被漏掉的项。

另外，报告本身只是输入。P0 级别的缺态问题需要工程侧补状态机和组件变体，清单能给出处和修法，但不会替你改代码。