professionalism-credibility

专业性与可信度动画

创建能够传达专业能力、严肃态度和商务级精致感的动画。

情感目标

专业性意味着动效应尊重用户的时间和使用情境。可信度来自能够展现技术能力、但不刻意炫技的动画。

专业性的 Disney 原则

挤压与拉伸

无到极少（0-5%）。专业界面采用刚性、精准的动效。对象保持精确比例。

预备动作

简短且实用（50-100ms）。只需足以避免让人意外。无需戏剧性的铺垫——直奔主题。

演出布局

层次与目的明确。布局符合商务场景。每个元素都各就其位，功能清晰。

逐帧动作

完全避免。专业动效应受控且可预测。不应有自发性或变化。

跟随与重叠动作

尽量少且受控地稳定下来。快速稳定。不要弹跳或俏皮——立即完成。

慢入与慢出

采用平滑、专业的曲线。使用精致但不刻意装饰的标准缓动。用 ease-out 提高效率。

弧线运动

尽量减少曲线，优先采用直接路径。专业动效讲求效率。直线传达直接明确。

次要动作

仅用于功能。加载状态、进度指示器。不添加装饰性动画——每个动效都应有其用途。

时机

高效且一致（150-250ms）。足够快，让人感觉响应灵敏；也要足够慢，便于跟上。不要浪费时间。

夸张

不要夸张。动作应真实且符合比例。专业意味着踏实可信。

扎实绘制

几何形状精准一致。对齐完美。每个细节都符合技术规范。

吸引力

设计简洁、系统化。布局以网格为基础。色彩中性。美学以功能为先。

时长建议

元素	时长	缓动
过渡	150-250ms	ease-out
反馈	100-150ms	ease-out
模态框	200-250ms	ease-out
数据更新	150-200ms	ease-in-out

CSS 缓动

--pro-standard: cubic-bezier(0.4, 0, 0.2, 1);
--pro-enter: cubic-bezier(0.0, 0, 0.2, 1);
--pro-exit: cubic-bezier(0.4, 0, 1, 1);

专业模式

@keyframes pro-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pro-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.professional-element {
  animation: pro-slide-up 200ms ease-out forwards;
}

可信度指南

• 时机一致能够建立信任
• 平滑动效体现专业能力
• 没有动画胜过糟糕的动画
• 遵循平台惯例
• 尊重 prefers-reduced-motion
• 在不同设备上测试，确保一致性

适用场景

• B2B 软件
• 金融仪表板
• 法律与合规工具
• 医疗管理
• 政府服务
• 企业应用
• 专业作品集
• 企业网站