e-commerce-retail
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseE-Commerce & Retail Animation Principles
电商与零售动画设计原则
Apply Disney's 12 principles to create shopping experiences that feel premium, trustworthy, and encourage conversion.
将迪士尼12项动画原则应用到购物体验设计中，打造高端、可靠且能促进转化的用户体验。
The 12 Principles Applied
12项原则的实践应用
1. Squash & Stretch
1. Squash & Stretch（挤压与拉伸）
- Add to Cart: Button compresses on tap, product thumbnail squishes into cart icon
- Quantity Badges: Numbers stretch when incrementing quickly
- Sale Tags: Pulse with slight stretch to draw attention
- 加入购物车：按钮点击时压缩，商品缩略图被挤压进入购物车图标
- 数量徽章：数值快速递增时出现拉伸效果
- 促销标签：带有轻微拉伸效果的脉冲动画吸引注意力
2. Anticipation
2. Anticipation（预备动作）
- Buy Button: Subtle lift before purchase confirmation
- Image Zoom: Brief pause before expanding product image
- Checkout Steps: Progress indicator hints at next section
- 购买按钮：购买确认前有轻微上浮效果
- 图片放大：商品图片展开前有短暂停顿
- 结账步骤：进度指示器提示下一个即将进入的环节
3. Staging
3. Staging（布局呈现）
- Product Hero: Center product with dimmed background
- Price Display: Animate price prominently, discounts secondary
- CTA Hierarchy: Primary actions draw eye first
- 商品主视觉：商品居中展示，背景调暗
- 价格展示：价格动画突出显示，折扣信息作为次要内容
- CTA层级：首要操作优先吸引用户注意力
4. Straight Ahead & Pose to Pose
4. Straight Ahead & Pose to Pose（逐帧绘制与关键帧绘制）
- Browse Flow: Smooth scroll for catalog browsing (straight ahead)
- Checkout: Defined steps with clear transitions (pose to pose)
- Search Results: Staggered reveal for product grid
- 浏览流程：商品目录浏览采用平滑滚动（逐帧逻辑）
- 结账流程：步骤清晰，转场明确（关键帧逻辑）
- 搜索结果：商品网格错落依次展示
5. Follow Through & Overlapping Action
5. Follow Through & Overlapping Action（惯性动作与重叠动作）
- Product Cards: Image settles before price text
- Cart Drawer: Items slide in, total updates after
- Filters: Tags animate before results refresh
- 商品卡片：图片先加载完成，价格文字后加载显示
- 购物车抽屉：商品滑入后，总价再更新
- 筛选器：标签动画完成后再刷新结果
6. Slow In & Slow Out
6. Slow In & Slow Out（缓入缓出）
- Modal Opens: Ease-out for product quick-view
- Image Carousel: Smooth deceleration between slides
- Checkout Transitions: 300-400ms with ease-in-out
- 弹窗打开：商品快速预览采用ease-out效果
- 图片轮播：轮播切换过程平滑减速
- 结账转场：300-400ms时长，采用ease-in-out效果
7. Arc
7. Arc（弧形运动）
- Add to Cart: Product thumbnail arcs toward cart icon
- Wishlist: Heart icon arcs to saved section
- Drag to Compare: Items follow natural curved path
- 加入购物车：商品缩略图沿弧形轨迹飞向购物车图标
- 收藏夹：心形图标沿弧形轨迹飞入已收藏区域
- 拖拽对比：商品沿自然曲线路径移动
8. Secondary Action
8. Secondary Action（次要动作）
- Purchase Success: Confetti while confirmation loads
- Review Stars: Sparkle while rating saves
- Discount Applied: Price crosses out while new price appears
- 购买成功：确认页加载时播放撒花动画
- 评价星级：评分保存时播放闪烁特效
- 折扣生效：原价划掉的同时新价格出现
9. Timing
9. Timing（节奏把控）
- Quick Add: 150-200ms for snappy cart additions
- Checkout Steps: 300-400ms for confident transitions
- Loading States: Skeleton screens for perceived speed
- 快速加购：150-200ms时长，实现爽快的加购体验
- 结账步骤：300-400ms时长，转场稳妥自然
- 加载状态：使用骨架屏提升感知速度
10. Exaggeration
10. Exaggeration（夸张效果）
- Flash Sales: Urgent countdown with bold pulses
- Low Stock: Warning badge with attention-grabbing shake
- Big Discounts: Strike-through with dramatic reveal
- 限时闪购：紧急倒计时搭配醒目的脉冲效果
- 库存不足：警告徽章搭配吸引注意力的抖动效果
- 大额折扣：划掉原价的动画极具冲击力
11. Solid Drawing
11. Solid Drawing（立体绘制）
- Product Images: Maintain aspect ratios during zoom
- 3D Views: Consistent lighting and perspective
- Icons: Uniform weight across cart, search, menu
- 商品图片：放大过程中保持宽高比不变
- 3D预览：保持统一的光照和透视效果
- 图标：购物车、搜索、菜单等图标权重统一
12. Appeal
12. Appeal（吸引力）
- Micro-Delights: Subtle bounce on successful actions
- Brand Personality: Premium = smooth, Playful = bouncy
- Trust Signals: Gentle animations for security badges
- 微小愉悦感：操作成功时搭配轻微弹跳效果
- 品牌个性：高端品牌用平滑动画，活泼品牌用弹跳动画
- 信任信号：安全徽章搭配柔和动画
Industry Timing Standards
行业时间标准
| Action | Duration | Easing |
|---|---|---|
| Add to Cart | 200ms | ease-out |
| Quick View | 250ms | ease-in-out |
| Checkout Step | 350ms | ease-in-out |
| Cart Update | 150ms | ease-out |
| Image Zoom | 300ms | ease-out |
| 操作 | 时长 | 缓动效果 |
|---|---|---|
| 加入购物车 | 200ms | ease-out |
| 快速预览 | 250ms | ease-in-out |
| 结账步骤切换 | 350ms | ease-in-out |
| 购物车更新 | 150ms | ease-out |
| 图片放大 | 300ms | ease-out |
Key Principle
核心原则
Never let animation slow the path to purchase. Every motion should feel efficient and build buying confidence.
绝对不要让动画拖慢购买路径。每一个动效都应当高效，并且建立用户的购买信心。