FRONTEND MOTION GOVERNANCE

规范与准则区

这部分只记录可执行规则,不做概念堆砌。目标是让每个新页面在“好看”和“可维护”之间有统一判断标准。

Narrative First

  • - 动效必须回答“为什么现在动”
  • - 关键内容优先稳定展示,动效做辅助
  • - 先保证阅读流畅,再做视觉强化

Apply · 所有介绍页 / 案例页的首要准则

Performance Guardrail

  • - 优先 transform / opacity
  • - 滚动监听使用 RAF 节流
  • - 持续动画控制密度,避免 GPU 长时间高压

Apply · Landing / 大量卡片页面

Accessibility Baseline

  • - 必须支持 prefers-reduced-motion
  • - 动效关闭后信息结构不丢失
  • - 颜色和对比度满足基础可读性

Apply · 全站统一要求

Consistency by Tokens

  • - 时长、位移、缓动统一 token 管理
  • - 同类组件共享同一交互反馈曲线
  • - 新动效先放实验站,再推广到业务站

Apply · 跨站点动效复用

REVIEW CHECKLIST
  • 动效是否明确服务一个阅读/理解目标?
  • 去掉动画后,信息是否仍完整可读?
  • 滚动和 hover 动效是否过密导致噪音?
  • 移动端是否降低了持续背景动画?
  • 是否有统一 token 而不是硬编码参数?
评审顺序:Narrative → Accessibility → Performance → Visual Polish
NEXT ACTION

先挑一个模板落地,再按这套 checklist 调整。模板入口都在独立链接,便于你后续指定“按某模板改造”。

OPEN TEMPLATE INDEX