当错误元素抢占注意力、重要内容被忽略或动画破坏视觉层级时…

适用于 UI/动画中用户看错元素、CTA 不突出、信息层级不清或动画干扰注意力时。

适用场景

解决思路

1. Staging：一次只让一个元素运动；对最重要的元素做动画，其他元素保持静止。
2. Timing：主内容使用更快动画；次要内容使用更慢动画或延迟；用速度暗示重要性。
3. Exaggeration：重要元素使用更夸张的动画；背景元素使用微妙的运动。
4. Anticipation：使用 anticipation（预备动作）引导注意力；在主动作前用小动作把视线吸引过去。
5. Appeal：让重要元素在视觉上最吸引人；让动画增强层级，而不是与层级冲突。
6. 一次只做一个动画——按顺序排列，不要并行化。
7. 按重要性错开——最重要的元素最先动画。
8. 减少装饰性运动——背景应保持平静。
9. 增加 CTA 动画对比——让 CTA 从周围环境中突出。
10. 用运动引导阅读顺序——从上到下、从左到右。
11. 检查用户最先看什么（可用眼动追踪或测试）。
12. 检查动画顺序是否匹配重要性层级。
13. 检查装饰性动画是否足够微妙。
14. 检查主 CTA 是否有最强运动。
15. 统计同时进行的动画数量（应为 1-2 个）。
16. 测试：隐藏动画——层级是否仍然有效？
17. 判断运动是在引导还是分散注意力。
18. 判断静止是否在需要处制造强调。
19. Code Pattern：按重要性错开。示例：.hero-title { animation: fadeInUp 400ms ease-out; } .hero-subtitle { animation: fadeInUp 400ms ease-out 100ms backwards; } .hero-cta { animation: fadeInUp 400ms ease-out 200ms backwards, pulse 2s ease-in-out 1s infinite; } .background-element { animation: subtleDrift 20s linear infinite; opacity: 0.3; }；同时降低背景强调。
20. Hierarchy Through Motion：Primary 使用快、突出、可能循环的动画。
21. Hierarchy Through Motion：Secondary 使用中等速度、一次性动画。
22. Hierarchy Through Motion：Tertiary 使用慢、微妙或静止的动画。
23. Hierarchy Through Motion：Background 使用非常慢或不使用动画。