Narrative First
- - 动效必须回答“为什么现在动”
- - 关键内容优先稳定展示，动效做辅助
- - 先保证阅读流畅，再做视觉强化
Apply · 所有介绍页 / 案例页的首要准则
FRONTEND MOTION GOVERNANCE
规范与准则区
这部分只记录可执行规则，不做概念堆砌。目标是让每个新页面在“好看”和“可维护”之间有统一判断标准。
Performance Guardrail
- - 优先 transform / opacity
- - 滚动监听使用 RAF 节流
- - 持续动画控制密度，避免 GPU 长时间高压
Apply · Landing / 大量卡片页面
Accessibility Baseline
- - 必须支持 prefers-reduced-motion
- - 动效关闭后信息结构不丢失
- - 颜色和对比度满足基础可读性
Apply · 全站统一要求
Consistency by Tokens
- - 时长、位移、缓动统一 token 管理
- - 同类组件共享同一交互反馈曲线
- - 新动效先放实验站，再推广到业务站
Apply · 跨站点动效复用
REFERENCE SOURCES
REVIEW CHECKLIST
- 动效是否明确服务一个阅读/理解目标？
- 去掉动画后，信息是否仍完整可读？
- 滚动和 hover 动效是否过密导致噪音？
- 移动端是否降低了持续背景动画？
- 是否有统一 token 而不是硬编码参数？
评审顺序：Narrative → Accessibility → Performance → Visual Polish
NEXT ACTION
先挑一个模板落地，再按这套 checklist 调整。模板入口都在独立链接，便于你后续指定“按某模板改造”。
OPEN TEMPLATE INDEX