enterprise-b2b
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseEnterprise & B2B Animation Principles
企业级与B2B动效设计原则
Apply Disney's 12 principles to create trustworthy, efficient experiences that prioritize clarity and professional credibility.
将迪士尼12项动画原则应用于设计，打造以清晰性和专业可信度为核心的可靠、高效体验。
The 12 Principles Applied
12项原则的实际应用
1. Squash & Stretch
1. 挤压与拉伸（Squash & Stretch）
- Almost Never: Enterprise requires utmost professionalism
- Data Points: Subtle pulse for live updates
- Buttons: Minimal, if any, deformation
- 几乎不使用：企业场景要求极致专业性
- 数据点：实时更新时的细微脉动效果
- 按钮：即使使用变形，也需控制在最小程度
2. Anticipation
2. 预备动作（Anticipation）
- Form Submissions: Brief processing indication
- Data Actions: Moment before confirmation
- Navigation Changes: Subtle preparation cues
- 表单提交：简短的处理状态提示
- 数据操作：确认前的过渡瞬间
- 导航切换：细微的准备提示
3. Staging
3. 舞台布局（Staging）
- Data Tables: Primary content focus
- Action Buttons: Clear but not flashy
- Notifications: Non-disruptive placement
- 数据表：聚焦核心内容
- 操作按钮：清晰但不花哨
- 通知提示：非干扰性位置布局
4. Straight Ahead & Pose to Pose
4. 逐帧动画与关键帧动画（Straight Ahead & Pose to Pose）
- Dashboards: Real-time data streams (straight ahead)
- Wizards/Flows: Explicit step progression (pose to pose)
- Report Generation: Sequential build
- 仪表盘：实时数据流（逐帧动画）
- 向导/流程：明确的步骤推进（关键帧动画）
- 报告生成：按顺序逐步构建
5. Follow Through & Overlapping Action
5. 跟随动作与重叠动作（Follow Through & Overlapping Action）
- Table Updates: Row highlights, then data refreshes
- Panel Expansions: Container opens, content follows
- Filter Applications: UI adjusts, then data loads
- 表格更新：先高亮行，再刷新数据
- 面板展开：容器先展开，内容随后呈现
- 筛选应用：先调整UI，再加载数据
6. Slow In & Slow Out
6. 缓入缓出（Slow In & Slow Out）
- All Transitions: Smooth, professional easing
- Modal Opens: Confident 250-300ms
- State Changes: Deliberate, measured motion
- 所有过渡效果：流畅、专业的缓动曲线
- 模态框打开：250-300ms的流畅过渡
- 状态切换：从容、有节奏的动效
7. Arc
7. 弧线运动（Arc）
- Minimal Use: Straight lines suggest efficiency
- Drag Operations: Slight natural curve
- Data Flow Diagrams: Curved connection lines
- 尽量少用：直线更能体现效率
- 拖拽操作：轻微的自然曲线
- 数据流图：曲线连接线条
8. Secondary Action
8. 次要动作（Secondary Action）
- Save Indicator: Subtle spinner while processing
- Sync Status: Background activity indication
- Validation: Inline feedback during input
- 保存提示：处理过程中的细微加载动画
- 同步状态：后台活动提示
- 验证反馈：输入时的实时内联反馈
9. Timing
9. 时间节奏（Timing）
- Efficient: 150-250ms for most interactions
- Never Delay Work: Speed is respect for user time
- Instant Feedback: 100ms for input responses
- 高效性：大多数交互动效控制在150-250ms
- 绝不耽误工作：速度是对用户时间的尊重
- 即时反馈：输入响应控制在100ms内
10. Exaggeration
10. 夸张表现（Exaggeration）
- Avoid Completely: Enterprise must be understated
- Exception: Critical alerts warrant attention
- Milestone Only: Major achievements, sparingly
- 完全避免：企业场景需保持低调克制
- 例外情况：关键警报可适当突出以吸引注意力
- 仅用于里程碑：重大成就场景，谨慎使用
11. Solid Drawing
11. 扎实绘制（Solid Drawing）
- Data Accuracy: Charts must be precise
- Typography: Clear, readable business fonts
- Icon System: Consistent, professional set
- 数据准确性：图表必须精准
- 排版：清晰易读的商务字体
- 图标系统：统一、专业的图标集
12. Appeal
12. 吸引力（Appeal）
- Professional Trust: Motion builds credibility
- Invisible Polish: Refined but not flashy
- Reliability Signal: Consistent, predictable behavior
- 专业信任感：动效构建可信度
- 隐形打磨：精致但不花哨
- 可靠性信号：一致、可预测的行为
Industry Timing Standards
行业时间标准
| Action | Duration | Easing |
|---|---|---|
| Button Feedback | 100ms | ease-out |
| Modal Open | 250ms | ease-out |
| Table Row Update | 200ms | ease-in-out |
| Panel Transition | 300ms | ease-in-out |
| Toast Message | 200ms | ease-out |
| 操作 | 时长 | 缓动曲线 |
|---|---|---|
| 按钮反馈 | 100ms | ease-out |
| 模态框打开 | 250ms | ease-out |
| 表格行更新 | 200ms | ease-in-out |
| 面板过渡 | 300ms | ease-in-out |
| 提示消息（Toast Message） | 200ms | ease-out |
Key Principle
核心原则
Enterprise users are working, not playing. Animation exists solely to provide feedback, maintain orientation, and signal state changes. Every millisecond of animation must earn its place through utility.
企业用户是在工作而非娱乐。动效的唯一作用是提供反馈、维持方位感并传达状态变化。每一毫秒的动效都必须通过实用性证明其存在的价值。