brand-consistency

品牌一致性

运用 Disney 的原则，使动画风格与品牌形象保持一致。

问题表现

• 动画感觉“不符合品牌风格”
• 动效千篇一律，放在任何产品上都适用
• 各项功能的动画风格不一致
• 动效与品牌调性相冲突
• 用户无法感受到产品的个性

按原则诊断

吸引力

问题：动画缺乏鲜明的个性
修复方法：定义品牌动效属性。品牌是活泼的（有弹性的缓动）、专业的（流畅、简洁），还是充满活力的（快速、利落）？

夸张

问题：戏剧效果的程度与品牌不符
修复方法：让夸张程度符合品牌个性。奢华＝含蓄。活泼＝有弹性。企业风格＝克制。

时间

问题：速度与品牌活力不符
修复方法：快节奏的品牌：100-200ms。沉稳的品牌：300-500ms。定义一套时间尺度并始终如一地使用。

挤压与拉伸

问题：弹性效果与严肃的品牌形象相冲突
修复方法：仅在活泼的品牌中使用挤压和拉伸。专业品牌应使用缩放变换。

次要动作

问题：细节无法强化品牌形象
修复方法：次要动作应强化品牌个性。趣味型品牌可以使用俏皮的涟漪效果；严肃型品牌则使用细微的淡入淡出效果。

快速修复

1. 制定动效风格指南 - 记录所用的缓动、时长和原则
2. 定义 3-5 个品牌动效关键词 - “迅捷、精准、自信”
3. 构建可复用的动画令牌 - 统一的时间/缓动变量
4. 审查现有动画 - 找出不一致之处
5. 创建动画组件 - 通过代码确保一致性

故障排查清单

• 能否用 3 个品牌关键词描述动画？
• 动效是否符合品牌调性指南？
• 各项功能的缓动曲线是否一致？
• 时间尺度是否已记录并得到遵循？
• 竞争对手会使用完全相同的动画吗？
• 所有动画是否都让人感觉出自同一款产品？
• 测试：不显示 UI，只展示动画，能否辨认出这是你的品牌？
• 与品牌/设计团队一起审查

代码模式

:root {
  /* Brand motion tokens */
  --brand-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --brand-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --brand-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --brand-duration-fast: 150ms;
  --brand-duration-normal: 250ms;
  --brand-duration-slow: 400ms;
}