给 AI 生成的界面定动效规则

1. 先按频率决定

频率比品味更能决定动效预算：

• 键盘触发或每分钟多次（命令面板、快捷键）：不加动效；
• 每天很多次（悬停、列表导航、筛选）：只做颜色、透明度或下划线变化，140 毫秒以内，不要位移、倾斜或滑动；
• 偶尔出现（菜单、对话框、提示条、抽屉）：标准的 150–300 毫秒进入，退出更短；
• 很少或第一次（引导、完成任务、庆祝）：可以更有表现力。

2. 写进代码的规则

这些是技能里 motion-rules.md 的要点：

• 用户触发的反馈不超过 300 毫秒；按下反馈 100–160 毫秒；
• 时长和曲线放进 :root 上的变量，处处使用，不手写；
• 不要从 scale(0) 出现，从 scale(0.95)–scale(0.98) 加透明度 0 开始；
• 只动画 transform、opacity 和颜色，永远不写 transition: all，把属性写出来；
• 能重复触发的东西用 transition（可以从当前位置转向），只触发一次的挂载才用关键帧；
• 悬停动效放进 @media (hover: hover) and (pointer: fine)，触屏上点一下会误触发悬停。

阅读完整规则 →

3. 减弱动效不等于全部关掉

去掉位移、缩放、视差、自动播放视频和循环效果，保留解释状态的反馈：透明度和颜色变化、焦点样式、进度，以及对话框的淡入。把所有时长设成 0.01 毫秒会连这些反馈一起去掉，所以更好的做法是限定哪些属性可以过渡。

4. 我们检查过什么，没检查什么

2026-11-09，我们用 Claude Code 在一个烘焙店页面上跑了一次带动效要求的任务（一次运行，一个 Agent，一个模型）。技能按路由读到了 motion-rules.md，三个方向都通过了五项静态文本检查：没有 transition: all，没有从 scale(0) 开始，悬停位移只出现在 (hover: hover) 里，有动效的地方都有 prefers-reduced-motion 规则，并且确实有动效。同一次运行里质量扫描报了一个误报，已修复。

这不能证明是这些规则带来了这个结果：没有去掉规则文件的对照运行，一次运行也分不清文件和模型本身的习惯。这些检查只看文本，不检验动效好不好看、节奏对不对、是否流畅，那次记录里也没有人打开预览。

阅读这次运行的记录 →