智能动效检查：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 生成问题清单才能让“感觉不对”变成可执行修复。