G13 · 动效审查

动效审查规范

动效哲学与产品哲学一致——克制、安静、够用。动效是辅助,不是表演。

动效禁则

以下四类动效在满意解全域一律禁止,无论首页、研习社还是驾驶舱。

🚫

禁弹跳

禁止 bounce / 回弹类缓动(如 cubic-bezier(0.34,1.56,0.64,1) 回弹)。元素到位即停,不做过冲回弹。

⚡

禁闪烁

禁止高频 opacity 闪烁、颜色频闪。单帧停留不得短于 0.1s,避免诱发光敏不适。

💥

禁爆炸弹窗

禁止全屏炸开 / 缩放冲击式弹窗。模态须淡入(opacity + translateY),且首屏不自动弹出。

🐌

禁过长动画

单次动画时长不超过 0.6s(入场可至 0.8s),循环动画周期 ≥ 4s,避免拖沓与注意力消耗。

总原则

所有动效须遵循 prefers-reduced-motion:用户开启"减少动态效果"时,动画时长降至 0.01ms 且只播一次。现有 index.html 已默认挂载该媒体查询,新增动效须兼容之。

现有 CSS 动画清单

来源:sri-design-system-v4.css 与 index.html 内联样式。状态列标注合规情况。

动画 / 过渡位置用途时长状态
transition: all .2sdesign-system · .btn / .sri-card按钮、卡片 hover 反馈0.2s✓ 合规
transition: border-color .2sdesign-system · .sri-input输入框聚焦边框0.2s✓ 合规
transition: width .1s lineardesign-system · .sri-progress-bar::after阅读进度条0.1s✓ 合规
.sri-btt 过渡design-system · .sri-btt返回顶部按钮显隐0.3s✓ 合规
@keyframes speedPulseindex.html · .hero-speed-*首屏速度线呼吸6-10s 循环✓ 合规
@keyframes nodeWake / nodePulseindex.html · .hero-nodeAI 节点唤醒 + 脉冲0.8s + 3s 循环✓ 合规
@keyframes lightBreatheindex.html · .hero-light破界光柱呼吸6s 循环✓ 合规
@keyframes fadeInindex.html · 多元素文字 / 品牌淡入0.4-0.5s✓ 合规
@keyframes fireIn / fireExtendindex.html · .hero-line1/2首屏主标题入场0.6-0.7s✓ 合规
@keyframes ctaPopindex.html · .hero-cta主 CTA 入场0.5s,含回弹⚠ 回弹缓动
@keyframes arrowBounceindex.html · .hero-arrow向下箭头提示2s 循环✓ 合规
@keyframes fadeStepconsult.html · .co-step表单步骤切换0.3s✓ 合规

整改建议

1. 替换 ctaPop 回弹缓动

  • 现状:@keyframes ctaPop 使用 cubic-bezier(0.34,1.56,0.64,1)(回弹),违反"禁弹跳"。
  • 建议:改为 cubic-bezier(0.22,1,0.36,1)(easeOutQuint,无回弹),或纯 ease-out。
  • 代码:animation: ctaPop 0.5s ease-out 2.1s forwards;

2. 限制首屏并发动画

  • 现状:首屏同时跑速度线、节点网络、光柱、标题入场共 5+ 组动画,移动端已通过 display:none 关闭部分。
  • 建议:桌面端也建议将"非核心装饰"动画(速度线)默认降透明度或延迟至首屏交互后,减少首屏 CPU 占用。

3. 统一过渡时长令牌

  • 现状:过渡时长散落 0.1s / 0.2s / 0.3s,未集中在设计系统 Token。
  • 建议:在 sri-design-system-v4.css 增加 --sri-dur-fast:.15s; --sri-dur-normal:.2s; --sri-dur-slow:.3s;,统一引用,避免魔法数字。

4. 新增动效审查清单

  • 任何新动效提交前自检:无弹跳 / 无闪烁 / 无爆炸弹窗 / 单次 ≤0.6s / 兼容 reduced-motion。
  • 循环动画(呼吸、脉冲)周期 ≥ 4s,且 opacity 峰值不超过 0.8,避免刺眼。

一句话准则

用户应该"感觉到顺畅",而不是"注意到动画"。动效的存在感越低,体验越高级。

满意,是最被低估的战略智慧