从模糊需求到动效规格

“高级”“有重量”“丝滑”描述的是感受，却没有说明界面里发生了什么。规格工作的第一步是追问可观察的事件：谁触发了变化，哪个对象改变，用户在变化前后分别能看见什么，结果需要被理解多久。比如“卡片出来时有一个动作再慢慢停下来”，可以拆成卡片从触发器附近进入、先快速到达、末段减速、最终边界与标题保持清晰。这样团队讨论的是状态和节奏，不会停留在每个人心里不同的审美词。

用前后状态命名也能识别缺失信息。一个发布按钮常常至少有草稿、发布中、已发布、发布失败四种状态；如果需求只写“点击后播一个成功动画”，它遗漏了等待、失败和重复点击。把状态列成表后，每一行都有可见文案、允许操作、无障碍通知和视觉线索。规格因此从一个效果说明变成一份小型行为契约，开发可以据此搭建状态机，测试也能据此设计断言。

状态图回答“允许从哪里到哪里”，节拍表回答“在什么时间让什么被看见”。两者分开能避免一个常见问题：看起来很顺的时间线无法处理用户中途点击、网络变慢或请求失败。先画出合法转换，例如 Draft → Publishing → Published，Publishing 也可以回到 Failed；再为每条转换写关键节拍，例如 0ms 锁定按钮并确认输入、80ms 显示处理中、服务端返回后切换最终状态。节拍只描述需要被感知的节点，避免把每一帧都写进文档。

节拍的数量应随信息复杂度增加，而非随装饰欲增加。保存确认可能只需要“按下—处理中—已保存”三个节点；审批请求需要额外展示审批人队列，因为用户要理解系统正在等待谁。对于多个元素，明确谁先变化、谁跟随、谁保持静止。静止经常是重要的设计选择：它给用户提供锚点，让新增内容、结果数字或状态标签有地方可以被比较。一个好的规格会写出应当保持不动的内容。

空间规格至少包括来源、目的地、距离和层级。来源告诉用户变化为何发生在这里；目的地告诉用户结果属于哪里；距离决定动作是否会抢走注意力；层级决定覆盖、推开还是并列。把“从左边滑进来”换成“从当前筛选器下方进入结果区域，位移不超过 16px，结果计数保持原位”，开发就能判断使用 transform、插入新行还是替换现有内容，设计也能判断动作是否仍遵循界面结构。

时间规格要同时写时长和关系。单个数值如 240ms 只能说明一段变化有多长，不能说明按钮和状态标签是否同步、列表是否在结果落定后再出现、失败是否应打断进行中提示。写成“按钮反馈 120ms；状态文案在 80ms 后出现；成功结果在请求完成时切换；后续记录延迟 60ms”会更清晰。再补上曲线的职责：ease-out 用于明确落点，spring 用于连续输入或可中断对象。曲线名称只是实现选择，用户感知到的是抵达、停顿和衔接。

动效规格常在成功路径结束，这会让真正上线后的边界情况临时拼凑。每个进行中状态都要回答：用户再次点击会怎样，离开页面会怎样，网络超时会怎样，返回的数据过期会怎样。对于可取消请求，取消后的视觉状态应回到一个明确起点；对于不可取消请求，按钮和文案要说明正在完成什么。失败状态必须保留原始输入或可恢复上下文，避免用户既看见失败又失去之前填的内容。

低动态规则同样属于状态定义。写“减少动效”不够，需要说明哪些信号保留、哪些位移缩短、哪些循环停止、焦点如何管理。对发布流程而言，低动态版本仍然保留按钮状态、发布结果和记录插入，只移除沿路径移动和装饰性旋转。把这条规则写进每个关键转换，研发就不会把它视为发布前的附加修补。它也会让默认路径更清楚，因为团队被迫说明每一段动画实际在传递什么。

一份可交接的规格应让没有参与讨论的人也能复现判断。开头写场景、目标用户和成功标准；中间给出状态图、节拍、空间关系和参数范围；结尾列出失败、撤销、低动态和验收方法。附上一个静态图或可交互原型会帮助沟通，但图本身无法替代文字，因为测试需要知道何时断言、开发需要知道数据何时更新、内容设计需要知道文案如何变化。文字、图解和代码片段共同构成一个可追溯的决定。

验收语句要可观察。与其写“感觉顺滑”，可以写“点击发布后 120ms 内出现进行中状态；完成后按钮、状态标记和时间线记录在同一轮状态更新中变为已发布；低动态模式没有超过 1px 的装饰性位移；失败时标题、正文和重试入口仍保留”。这样的标准既允许设计保有判断空间，也能让自动化测试和人工评审围绕同一组事实工作。规格因此会反哺内容库：每一份经过验证的场景都可能成为新的 Product Moment。