saas-productivity
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseSaaS & Productivity Animation Principles
SaaS与生产力应用动画原则
Apply Disney's 12 principles to create efficient, professional experiences that enhance focus and reduce friction.
将迪士尼的12项动画原则应用其中，打造高效、专业的体验，提升专注度并减少操作阻碍。
The 12 Principles Applied
12项原则的实际应用
1. Squash & Stretch
1. Squash & Stretch
- Minimal Use: Professional context requires restraint
- Checkboxes: Subtle squash on task completion
- Buttons: Slight compression for tactile feedback
- 适度使用：专业场景需克制
- 复选框：任务完成时轻微的挤压效果
- 按钮：轻微压缩以提供触觉反馈
2. Anticipation
2. Anticipation
- Save Actions: Brief preparation before confirmation
- Form Submit: Button state hints at processing
- Drag Initiation: Element lifts before moving
- 保存操作：确认前的短暂准备效果
- 表单提交：按钮状态暗示正在处理
- 拖拽启动：元素移动前先轻微抬起
3. Staging
3. Staging
- Active Task: Current work item takes focus
- Sidebar Navigation: Secondary to main content
- Notifications: Non-intrusive placement
- 活跃任务：当前工作项获得视觉焦点
- 侧边栏导航：作为主内容的次要元素
- 通知：放置在不干扰操作的位置
4. Straight Ahead & Pose to Pose
4. Straight Ahead & Pose to Pose
- Workflows: Clear step-by-step processes (pose to pose)
- Real-time Collaboration: Smooth cursor movements (straight ahead)
- Dashboard Updates: Sequential data loading
- 工作流：清晰的分步流程（关键帧到关键帧）
- 实时协作：流畅的光标移动（逐帧绘制）
- 仪表盘更新：数据按顺序加载
5. Follow Through & Overlapping Action
5. Follow Through & Overlapping Action
- Card Movements: Shadow follows card with delay
- List Reordering: Items settle naturally
- Panel Resizing: Content adjusts after panel stops
- 卡片移动：阴影延迟跟随卡片移动
- 列表重排：项目自然归位
- 面板调整大小：面板停止后内容再调整
6. Slow In & Slow Out
6. Slow In & Slow Out
- Professional Easing: Smooth, never bouncy
- Modal Transitions: Confident 250-350ms
- State Changes: Deliberate, not snappy
- 专业缓动：流畅自然，无弹跳效果
- 模态框过渡：250-350ms的从容过渡
- 状态切换：动作沉稳，不仓促
7. Arc
7. Arc
- Drag and Drop: Natural curved paths
- Kanban Cards: Arc between columns
- Notification Dismiss: Swipe follows curve
- 拖拽操作：自然的曲线路径
- 看板卡片：在列间沿弧线移动
- 通知关闭：滑动操作沿曲线进行
8. Secondary Action
8. Secondary Action
- Auto-save Indicator: Subtle pulse while saving
- Sync Status: Background indicator during updates
- Loading Skeleton: Shimmer while data fetches
- 自动保存指示器：保存时的轻微脉动效果
- 同步状态：更新时的后台指示器
- 加载骨架屏：数据获取时的微光效果
9. Timing
9. Timing
- Efficient: 150-300ms for most interactions
- Never Slow: Users are here to work
- Instant Feedback: 100ms for input validation
- 高效时长：大多数交互为150-300ms
- 拒绝拖沓：用户的核心需求是完成工作
- 即时反馈：输入验证反馈时长为100ms
10. Exaggeration
10. Exaggeration
- Almost Never: Productivity demands efficiency
- Milestones Only: Project completion, goals met
- Onboarding: Slightly more playful to engage
- 几乎不用：生产力应用追求高效
- 仅用于里程碑：项目完成、目标达成等场景
- 新手引导：可适度增加趣味性以提升参与度
11. Solid Drawing
11. Solid Drawing
- Data Visualization: Clear, accurate charts
- Icon Consistency: Uniform across all features
- Typography: Readable at all sizes
- 扎实构图：数据可视化需清晰、准确的图表
- 图标一致性：所有功能中的图标保持统一
- 排版：在所有尺寸下都保持可读
12. Appeal
12. Appeal
- Professional Polish: Refined, not flashy
- Invisible Design: Animations serve, not distract
- Trust & Reliability: Consistent, predictable motion
- 吸引力：专业打磨，不浮夸
- 隐形设计：动画为辅助服务，不分散注意力
- 信任与可靠：动效一致、可预测
Industry Timing Standards
行业动效时长标准
| Action | Duration | Easing |
|---|---|---|
| Button Feedback | 100ms | ease-out |
| Modal Open | 250ms | ease-out |
| Dropdown Menu | 200ms | ease-in-out |
| Page Transition | 300ms | ease-in-out |
| Toast Notification | 200ms | ease-out |
| 操作 | 时长 | 缓动效果 |
|---|---|---|
| 按钮反馈 | 100ms | ease-out |
| 模态框打开 | 250ms | ease-out |
| 下拉菜单 | 200ms | ease-in-out |
| 页面过渡 | 300ms | ease-in-out |
| 提示通知 | 200ms | ease-out |
Key Principle
核心原则
Animations should be invisible to users focused on work. Motion exists to provide feedback and maintain spatial awareness, never to entertain or delay.
对于专注工作的用户而言，动画应“隐形”存在。动效的作用是提供反馈并维持空间感知，而非娱乐或拖慢操作。