social-media
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseSocial Media Animation Principles
社交媒体动画设计原则
Apply Disney's 12 principles to create engaging, expressive experiences that encourage interaction and emotional connection.
运用迪士尼的12项动画原则，打造具有吸引力、富有表现力的体验，促进互动与情感联结。
The 12 Principles Applied
12项原则的应用
1. Squash & Stretch
1. Squash & Stretch（挤压与拉伸）
- Like Buttons: Heart squishes on tap, then bounces back
- Reaction Emojis: Playful stretch during selection
- Send Button: Compress before message flies away
- 点赞按钮：点击时爱心会挤压变形，随后弹回原状
- 反应表情：选择过程中呈现趣味拉伸效果
- 发送按钮：消息发出前先收缩，再“飞”出
2. Anticipation
2. Anticipation（预备动作）
- Post Button: Brief wind-up before publishing
- Stories: Tap-and-hold with radial progress
- Swipe Actions: Preview hints at what's coming
- 发布按钮：发布前有短暂的蓄力动画
- 动态故事：长按操作时显示环形进度条
- 滑动操作：通过预览提示即将发生的动作
3. Staging
3. Staging（构图呈现）
- Content First: User content is always the star
- Reactions Bar: Clear but not overshadowing
- Notifications: Prominent but dismissible
- 内容优先：用户内容始终是视觉焦点
- 反应栏：清晰可见但不抢内容风头
- 通知提示：醒目但可轻松关闭
4. Straight Ahead & Pose to Pose
4. Straight Ahead & Pose to Pose（逐帧动画与关键帧动画）
- Feed Scroll: Endless smooth flow (straight ahead)
- Posting Flow: Step-by-step creation (pose to pose)
- Story Sequences: Frame-by-frame progression
- 信息流滚动：流畅的无限滚动效果（逐帧动画）
- 发布流程：分步式内容创建（关键帧动画）
- 故事序列：按帧逐步推进的展示
5. Follow Through & Overlapping Action
5. Follow Through & Overlapping Action（跟随动作与重叠动作）
- Like Animation: Icon bounces, count updates after
- Comment Thread: Avatar appears, then text
- Share Menu: Options cascade in sequence
- 点赞动画：图标先弹跳，随后更新点赞数
- 评论线程：先显示头像，再加载评论文本
- 分享菜单：选项按顺序层叠展开
6. Slow In & Slow Out
6. Slow In & Slow Out（缓入缓出）
- Pull to Refresh: Smooth deceleration
- Card Transitions: Ease-in-out for polished feel
- Modal Sheets: Comfortable 300ms timing
- 下拉刷新：平滑的减速效果
- 卡片切换：使用缓入缓出动画提升质感
- 模态面板：采用舒适的300ms过渡时长
7. Arc
7. Arc（弧线运动）
- Reactions Float: Emojis arc upward from button
- Story Gestures: Swipe follows natural curve
- Content Sharing: Posts arc to share destination
- 反应表情漂浮：表情从按钮处沿弧线向上飘动
- 故事操作手势：滑动遵循自然曲线
- 内容分享：内容沿弧线移动至分享目标位置
8. Secondary Action
8. Secondary Action（次要动作）
- Double-Tap Like: Heart bursts while fading
- Typing Indicator: Dots bounce while thinking
- Upload Progress: Shimmer while processing
- 双击点赞：爱心弹出并逐渐消失
- 输入状态提示：输入时圆点弹跳动画
- 上传进度：处理过程中显示闪烁动画
9. Timing
9. Timing（时长控制）
- Interactions: Snappy 100-200ms for engagement
- Transitions: Swift 250-300ms to maintain flow
- Celebrations: 500-800ms for emotional moments
- 交互操作：100-200ms的快速响应提升参与感
- 页面切换：250-300ms的过渡时长维持流程顺畅
- 庆祝动画：500-800ms的时长强化情感体验
10. Exaggeration
10. Exaggeration（夸张表现）
- Reactions: Amplify emotional expression
- Milestones: Celebrate follower counts, likes
- Live Features: Dynamic, attention-grabbing
- 反应表情：放大情感表达效果
- 里程碑时刻：为粉丝数、点赞数等成就制作庆祝动画
- 直播功能：采用动态、吸睛的动画效果
11. Solid Drawing
11. Solid Drawing（扎实造型）
- Avatar Consistency: Uniform sizing and styling
- Icon Language: Cohesive visual vocabulary
- Grid Layouts: Proper alignment and spacing
- 头像一致性：尺寸与样式保持统一
- 图标语言：视觉风格统一的图标体系
- 网格布局：规范的对齐与间距设置
12. Appeal
12. Appeal（吸引力）
- Personality Forward: Platform character shines through
- Dopamine Design: Rewarding micro-interactions
- Shareability: Animations worth recording
- 个性优先：突出平台自身的品牌特质
- 多巴胺设计：带来愉悦感的微交互
- 可分享性：值得用户记录传播的动画效果
Industry Timing Standards
行业时长标准
| Action | Duration | Easing |
|---|---|---|
| Like/React | 200ms | spring |
| Pull to Refresh | 300ms | ease-out |
| Story Transition | 250ms | ease-in-out |
| Modal Open | 300ms | ease-out |
| Send Message | 150ms | ease-out |
| 操作类型 | 时长 | 缓动效果 |
|---|---|---|
| 点赞/反应 | 200ms | spring（弹簧） |
| 下拉刷新 | 300ms | ease-out（缓出） |
| 故事切换 | 250ms | ease-in-out（缓入缓出） |
| 模态框打开 | 300ms | ease-out（缓出） |
| 发送消息 | 150ms | ease-out（缓出） |
Key Principle
核心原则
Social media thrives on emotional expression. Animations should amplify connection, make interactions feel rewarding, and encourage continued engagement without feeling manipulative.
社交媒体的核心是情感表达。动画应强化用户联结，让交互体验充满愉悦感，同时避免过度操控用户，以此提升持续参与度。