emotional-disconnect

情感脱节

运用迪士尼原则，让动画情绪与上下文保持一致。

问题迹象

• 动画感觉“不对劲”，却很难说清楚
• 严肃内容搭配俏皮的动效
• 温暖内容搭配冷淡的动效
• 用户认为界面冷漠、像机器人，或混乱、令人烦躁
• 动画与传达的信息不匹配

按原则诊断

吸引力

问题：动画缺乏情感共鸣
修复：明确情感目标。温暖 = 柔和缓动、轻微超调。专业 = 干脆、线性。让动效与信息相匹配。

夸张

问题：动画强度与情感语境不符
修复：严肃场景需要克制。欢快场景可以活泼弹跳。让夸张程度与情感分量相匹配。

时间节奏

问题：速度与情绪基调冲突
修复：平静情绪 = 放慢。兴奋情绪 = 加快。紧张情绪 = 变速。时间节奏就是情绪。

挤压与拉伸

问题：僵硬的场景中使用了弹性效果
修复：挤压和拉伸意味着俏皮与生命力。在严肃、临床或专业场景中应移除。

跟随动作

问题：收尾方式与情感意图不符
修复：戛然而止会显得生硬。轻柔落定会显得温和。弹跳收尾会显得俏皮。有意识地做出选择。

快速修复

1. 明确目标情绪 - “这里应该让人感到平静”
2. 让缓动与情绪相匹配 - 弹跳 = 俏皮，顺滑 = 平静
3. 根据上下文调整时间节奏 - 放慢严肃时刻的节奏
4. 移除不匹配的因素 - 删除与整体基调相冲突的动画
5. 用情感词汇进行测试 - 询问用户“这让你感觉如何？”

故障排查清单

• 这一刻应该唤起什么情绪？
• 动画缓动是否符合这种情绪？
• 时间节奏是否适合当前情感语境？
• 移除动画是否会让体验更好？
• 同类产品在这里是否采用了不同的动效？
• 询问用户：“用哪 3 个词描述这个动画？”
• 动画是否符合内容的严肃程度？
• 测试：遮住内容后，动效传达的情绪是否仍然恰当？

情绪与动效对照表

情绪	缓动	时间节奏	效果
喜悦	弹跳式超调	快	挤压/拉伸、放大
平静	柔和的缓出	慢	淡入淡出、轻微滑动
信任	顺滑、可预测	中	极简、一致
紧迫	突兀的缓入	快	直接、不超调
俏皮	弹簧物理效果	可变	旋转、弹跳
严肃	线性或轻微缓动	慢	最小幅度移动

代码模式

/* Calm/trustworthy */
--ease-calm: cubic-bezier(0.4, 0, 0.2, 1);

/* Playful/joyful */
--ease-playful: cubic-bezier(0.34, 1.56, 0.64, 1);

/* Urgent/serious */
--ease-urgent: cubic-bezier(0.4, 0, 1, 1);