saas-productivity

SaaS 与效率工具的动画原则

运用 Disney 的 12 条原则，打造高效、专业的体验，提升专注度并减少阻碍。

12 条原则的应用

1. 挤压与拉伸

• 尽量少用：专业场景要求克制
• 复选框：任务完成时轻微挤压
• 按钮：轻微压缩，提供触感反馈

2. 预备动作

• 保存操作：确认前短暂预备
• 表单提交：按钮状态暗示正在处理
• 开始拖动：元素移动前先轻轻抬起

3. 演出布局

• 当前任务：让正在处理的工作项成为焦点
• 侧边栏导航：次于主要内容
• 通知：放置位置不打扰用户

4. 连续动作与关键帧

• 工作流：清晰的逐步流程（关键帧）
• 实时协作：流畅的光标移动（连续动作）
• 仪表板更新：数据按顺序加载

5. 跟随动作与重叠动作

• 卡片移动：阴影延迟跟随卡片
• 列表重排：项目自然归位
• 面板调整大小：面板停止后再调整内容

6. 渐入与渐出

• 专业缓动：平滑，不弹跳
• 模态框过渡：稳健的 250-350ms
• 状态变化：从容，不突兀

7. 弧形运动

• 拖放：自然的弧线路径
• 看板卡片：在列之间沿弧线移动
• 关闭通知：滑动时沿曲线移动

8. 次要动作

• 自动保存指示器：保存时轻微脉动
• 同步状态：更新期间显示后台指示器
• 加载骨架屏：获取数据时显示闪烁效果

9. 时间控制

• 高效：大多数交互为 150-300ms
• 绝不拖沓：用户来这里是为了工作
• 即时反馈：输入验证为 100ms

10. 夸张

• 几乎不用：效率至上
• 仅用于里程碑：项目完成、达成目标
• 新手引导：稍微活泼一些，以吸引用户

11. 扎实绘制

• 数据可视化：图表清晰、准确
• 图标一致性：所有功能的图标保持统一
• 排版：所有尺寸下都清晰易读

12. 吸引力

• 专业润色：精致，不浮夸
• 隐形设计：动画服务于用户，而非分散注意力
• 信任与可靠性：动作一致、可预测

行业时间标准

操作	时长	缓动
按钮反馈	100ms	ease-out
模态框打开	250ms	ease-out
下拉菜单	200ms	ease-in-out
页面过渡	300ms	ease-in-out
Toast 通知	200ms	ease-out

核心原则

对于专注工作的用户来说，动画应当隐而不显。动效用于提供反馈并帮助用户保持空间感，绝不是为了娱乐或拖延操作。