fintech-banking

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Fintech & Banking Animation Principles

金融科技与银行类应用动画设计原则

Apply Disney's 12 principles to create trustworthy, secure-feeling experiences that handle money with appropriate gravitas.

将迪士尼12项动画原则应用于设计中，打造值得信赖、富有安全感的使用体验，契合资金相关场景应有的庄重感。

The 12 Principles Applied

12项原则的适配应用

1. Squash & Stretch

1. 挤压与拉伸（Squash & Stretch）

Restrained Use: Money is serious, avoid playful squash
Number Counters: Subtle stretch as values update
Card Flip: Slight flex when revealing card details

克制使用：资金相关场景十分严肃，避免过于俏皮的挤压效果
数字计数器：数值更新时添加轻微的拉伸效果
卡片翻转：展示卡片详情时添加轻微的弯曲形变效果

2. Anticipation

2. 预期铺垫（Anticipation）

Transaction Submit: Brief pause before processing
Balance Updates: Moment of preparation before reveal
Security Checks: Visual preparation for verification steps

交易提交：处理前短暂停顿
余额更新：展示前的片刻准备提示
安全检查：验证步骤前的可视化准备提示

3. Staging

3. 视觉重点（Staging）

Balance First: Account balance is hero element
Transaction Flow: Clear focus on current step
Security Badges: Prominent but not distracting

余额优先：账户余额是核心视觉元素
交易流程：清晰聚焦当前操作步骤
安全徽章：位置显眼但不会分散注意力

4. Straight Ahead & Pose to Pose

4. 逐帧动画与关键帧动画（Straight Ahead & Pose to Pose）

Money Transfers: Clear step-by-step (pose to pose)
Live Prices: Continuous smooth updates (straight ahead)
Transaction History: Sequential reveal on scroll

资金转账：清晰的分步展示（关键帧动画模式）
实时价格：连续顺滑的更新（逐帧动画模式）
交易历史：滚动时按顺序逐步展示

5. Follow Through & Overlapping Action

5. 动作延续与重叠动作（Follow Through & Overlapping Action）

Payment Success: Checkmark lands, then amount confirms
Dashboard Load: Balance first, then cards, then transactions
Charts: Axis appears, then data animates in

支付成功：对勾动画先完成，再展示金额确认
仪表板加载：优先加载余额，再加载卡片，最后加载交易记录
图表：先出现坐标轴，再逐步展示数据动效

6. Slow In & Slow Out

6. 缓入缓出（Slow In & Slow Out）

All Financial Actions: Smooth, deliberate easing
Card Animations: Premium feel with ease-in-out
Modal Transitions: Confident 300-400ms movements

所有金融操作：顺滑、审慎的缓动效果
卡片动效：使用ease-in-out实现高级质感
模态框过渡：300-400ms的稳妥过渡时长

7. Arc

7. 弧形运动（Arc）

Money Flow: Visualize transfers with curved paths
Spending Charts: Smooth arcs in pie/donut charts
Card Selection: Arc motion between cards

资金流向：用曲线路径可视化转账过程
支出图表：饼图/环形图中使用顺滑的弧线
卡片选择：卡片切换时采用弧形运动轨迹

8. Secondary Action

8. 次要动作（Secondary Action）

Transfer Success: Subtle checkmark while balance updates
Bill Paid: Confetti-lite while confirmation appears
Investment Gain: Green glow during number update

转账成功：余额更新时同步展示轻微的对勾动效
账单支付完成：确认提示出现时同步展示轻量化撒花效果
投资收益：数字更新时同步展示绿色光晕效果

9. Timing

9. 时长控制（Timing）

Standard Actions: 250-350ms for confident feel
Security Verification: Deliberate 400-500ms
Quick Feedback: 150ms for input validation

标准操作：250-350ms实现稳妥的操作反馈
安全验证：400-500ms的审慎时长
快速反馈：输入验证采用150ms的响应时长

10. Exaggeration

10. 夸张效果（Exaggeration）

Very Minimal: Financial data requires accuracy
Success Moments: Slight emphasis on positive outcomes
Fraud Alerts: Appropriate urgency, not alarm

极低使用度：金融数据要求绝对准确
成功时刻：对正向结果做轻微强调
欺诈告警：传递适当的紧迫感，避免过度恐慌

11. Solid Drawing

11. 扎实绘制（Solid Drawing）

Number Legibility: Clear typography at all sizes
Card Realism: Proper perspective and shadows
Chart Accuracy: Data visualization must be precise

数字易读性：所有字号下的排版都清晰可辨
卡片真实感：合理的透视效果与阴影
图表准确性：数据可视化必须精准无误

12. Appeal

12. 吸引力（Appeal）

Premium Feel: Smooth, Apple Pay-like refinement
Trust Through Restraint: Less is more
Professional Personality: Confident, not playful

高级质感：顺滑、类似Apple Pay的精致效果
克制传递信任感：少即是多
专业调性：稳妥可靠，避免过度俏皮

Industry Timing Standards

行业时长标准

Action	Duration	Easing
Button Feedback	150ms	ease-out
Card Flip	400ms	ease-in-out
Transfer Step	300ms	ease-in-out
Balance Update	250ms	ease-out
Modal Open	350ms	ease-out

操作	时长	Easing
按钮反馈	150ms	ease-out
卡片翻转	400ms	ease-in-out
转账步骤	300ms	ease-in-out
余额更新	250ms	ease-out
模态框打开	350ms	ease-out

Key Principle

核心原则

Every animation should reinforce trust and security. Users are entrusting you with their money - motion should feel deliberate, accurate, and premium.

每一处动画都应当强化信任与安全感。用户将资金托付给你——动效应当显得从容审慎、准确无误且富有高级质感。