fintech-banking

金融科技与银行业动画原则

运用迪士尼的 12 条原则，打造值得信赖、令人感到安全的体验，以恰当的庄重感处理金钱相关内容。

应用 12 条原则

1. 挤压与拉伸

• 谨慎使用：金钱事关重大，避免使用俏皮的挤压效果
• 数字计数器：数值更新时轻微拉伸
• 卡片翻转：显示卡片详情时略微弯曲

2. 预备动作

• 提交交易：处理前短暂停顿
• 余额更新：显示余额前稍作准备
• 安全检查：为验证步骤提供视觉上的准备提示

3. 演出布局

• 余额优先：将账户余额作为主视觉元素
• 交易流程：清晰聚焦当前步骤
• 安全徽章：醒目但不喧宾夺主

4. 连续动作与关键帧动作

• 资金转账：清晰地逐步推进（关键帧动作）
• 实时价格：持续平滑更新（连续动作）
• 交易记录：滚动时依次显示

5. 跟随动作与重叠动作

• 支付成功：先落下勾号，再确认金额
• 仪表板加载：先显示余额，再显示卡片，最后显示交易记录
• 图表：先显示坐标轴，再以动画呈现数据

6. 慢入与慢出

• 所有金融操作：采用平滑、从容的缓动效果
• 卡片动画：使用 ease-in-out，营造高级质感
• 模态框过渡：采用从容的 300-400ms 动效

7. 弧线

• 资金流动：用曲线路径呈现转账过程
• 支出图表：在饼图／环形图中使用平滑弧线
• 卡片选择：卡片之间采用弧线运动

8. 次要动作

• 转账成功：余额更新时显示细微的勾号动画
• 账单支付：显示确认信息时加入轻量彩纸效果
• 投资收益：数值更新期间显示绿色光晕

9. 时间控制

• 常规操作：250-350ms，营造从容感
• 安全验证：采用从容的 400-500ms 动效
• 快速反馈：输入验证采用 150ms

10. 夸张

• 尽量克制：金融数据要求准确
• 成功时刻：略微强调积极结果
• 欺诈警报：营造恰当的紧迫感，而非惊慌感

11. 扎实绘制

• 数字易读性：确保各种尺寸下的字体清晰易读
• 卡片真实感：使用恰当的透视和阴影
• 图表准确性：数据可视化必须精准

12. 吸引力

• 高级质感：流畅精致，如 Apple Pay 般
• 克制而可信：少即是多
• 专业个性：从容自信，不浮夸

行业时长标准

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

核心原则

每个动画都应强化信任感与安全感。用户把钱托付给你，动效就应显得从容、精准且高端。