智能动效检查：AI 可以看节奏，但标准要由人定义

智能动效检查：AI 可以看节奏，但标准要由人定义

一、动效好不好，不能只凭感觉判断

界面动效的价值在于解释状态变化、建立层级关系和降低操作突兀感。可如果动效过多、过慢或方向混乱，就会让页面显得拖沓。AI 可以帮助分析动效视频或代码，指出时长、路径、遮挡和节奏问题，但前提是我们先定义评审标准。

“这个动画不够高级”很难被模型执行，也很难被工程修复。更好的表达是：弹窗进入时间是否超过 220ms，列表重排是否造成布局跳动，hover 动效是否影响点击区域，骨架屏是否和真实内容尺寸一致。把审美拆成可检查项，AI 才能参与评审。

二、评审流程：从录屏到问题清单

flowchart TD A[交互录屏] --> B[关键帧抽取] B --> C[AI 观察描述] C --> D[规则清单比对] D --> E[问题分级] E --> F[研发修复] F --> G[二次验证]

评审动效时，建议准备三类材料：交互录屏、动效参数和设计规范。录屏让模型观察真实表现，参数让模型知道实现方式，规范让模型判断是否符合标准。如果只给录屏，模型可能只能给主观评价；如果只给代码，又看不到真实渲染效果。

问题分级也很重要。阻塞级问题包括动效导致按钮不可点击、焦点丢失、页面闪烁和内容遮挡。主要问题包括节奏过慢、布局跳动、方向不一致。次要问题包括缓动曲线不够统一、细节反馈略弱。不同等级决定修复优先级。

三、规则示例：用参数描述节奏

下面是一份简化的动效检查配置。它可以成为 AI 评审 Prompt 的输入，也可以让自动化脚本读取。

motion_review: duration: hover: [80, 160] modal_enter: [160, 240] modal_exit: [100, 180] page_transition: [180, 320] easing: enter: "cubic-bezier(0.16, 1, 0.3, 1)" exit: "cubic-bezier(0.7, 0, 0.84, 0)" checks: - "no layout shift during transition" - "focus remains visible" - "reduced motion fallback exists"

参数不是越精细越好。早期可以先统一时长范围、缓动曲线和可访问性兜底。等设计系统成熟后，再为抽屉、弹窗、Toast、列表重排和页面切换分别定义动效模式。动效规范应该像色彩和字号一样可复用。

代码层面也要支持降级。用户开启减少动态效果时，页面应缩短或关闭非必要动画。AI 评审可以提醒是否存在prefers-reduced-motion，但最终要由 CSS 或组件库实现。

四、落地细节：动效要服务信息，不要抢戏

动效方向应符合空间关系。抽屉从右侧打开，关闭时也应回到右侧；下拉菜单从触发点附近展开，不应从页面中心飘出。方向错乱会破坏用户对界面结构的理解。AI 评审可以帮助发现这些不一致，但规范里要先定义空间语义。

性能也要检查。优先使用 transform 和 opacity，避免频繁触发布局和重绘。列表动画不要让每一项都做复杂阴影变化，移动端尤其要克制。动效再漂亮，如果滚动掉帧，就会损害体验。

最后要用真实数据测试。空白 demo 中的动效通常很顺，一旦列表有 200 条、图片未加载、网络变慢，动画节奏就会变化。动效评审应包含加载态、空态、错误态和长内容场景，不能只看理想路径。

五、总结

AI 可以帮助观察和整理动效问题，但动效标准必须由团队定义。把时长、缓动、方向、性能和可访问性写成规则，再让 AI 生成问题清单，才能让“感觉不对”变成可执行修复。