用途
本技能用于解决界面动画导致的注意力分配问题。当出现以下情况时可使用：用户错过重要内容、装饰性元素抢走焦点、CTA 不够突出、用户首先看向错误的元素、信息层级不清晰。其核心思路是借助迪士尼动画原则来正确引导用户焦点。
问题指标
- 用户错过重要内容
- 装饰性元素抢走焦点
- CTA 不够突出
- 用户首先看向错误的东西
- 信息层级不清晰
按原则诊断
Staging（舞台调度）
- 问题：多个元素同时争夺注意力
- 修复：一次只让一个东西动。为最重要的元素做动画，其余保持静止。
Timing（节奏）
- 问题：所有元素以相同速度做动画
- 修复：主要内容用更快的动画；次要内容更慢或延迟。速度暗示重要性。
Exaggeration（夸张）
- 问题：整个层级使用统一的运动幅度
- 修复：重要元素使用更夸张的动画，背景元素使用细微运动。
Anticipation（预备动作）
- 问题：没有铺垫来引导视线
- 修复：用预备动作引导注意力。一个小的动作可以在主动作之前吸引视线。
Appeal（吸引力）
- 问题：错误的元素在视觉上更有趣
- 修复：让重要元素成为视觉上最吸引人的。动画应增强层级，而不是与之对抗。
快速修复
- 一次只做一个动画——按顺序，不要并行
- 按重要性错峰——最重要的先动
- 减少装饰性运动——背景应保持平静
- 增强 CTA 动画对比——使其从周围环境中脱颖而出
- 用运动引导阅读顺序——从上到下、从左到右
排查检查表
- 用户首先看什么？（眼动追踪或测试）
- 动画顺序是否与重要性层级匹配？
- 装饰性动画是否足够细微？
- 主 CTA 是否具有最强的运动？
- 统计同时进行的动画数量（应为 1-2 个）
- 测试：隐藏动画后，层级是否仍然成立？
- 运动是在引导还是在分散注意力？
- 静止是否在需要的地方制造了强调？
代码模式
/* Stagger by importance */
.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;
}
/* De-emphasize background */
.background-element {
animation: subtleDrift 20s linear infinite;
opacity: 0.3;
}
通过运动建立层级
| 优先级 | 动画风格 |
|---|---|
| 主要 | 快速、醒目，可能循环 |
| 次要 | 中等速度，一次性 |
| 三级 | 缓慢、细微或静止 |
| 背景 | 极慢或无动画 |
适用场景
适用于前端与界面动效设计，尤其是需要在页面加载、内容呈现、CTA 引导等环节控制用户视线、维护视觉层级的场景。
限制
资料未提供关于具体平台、框架版本、性能指标或收费信息，暂未提供。