media-publishing
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseMedia & Publishing Animation Principles
媒体与出版行业动效设计原则
Apply Disney's 12 principles to create immersive reading experiences that enhance content without distracting from it.
将迪士尼12项动效原则应用于沉浸式阅读体验设计，在增强内容表现力的同时避免干扰阅读。
The 12 Principles Applied
12项原则的具体应用
1. Squash & Stretch
1. Squash & Stretch（挤压与拉伸）
- Very Minimal: Content is serious, not playful
- Bookmark Icon: Subtle press feedback
- Share Buttons: Light tactile response
- 极少量运用：内容偏严肃，无需活泼感
- 书签图标：微妙的按压反馈动效
- 分享按钮：轻量的触觉响应动效
2. Anticipation
2. Anticipation（预备动作）
- Article Load: Skeleton hints at content structure
- Image Reveal: Brief preparation before full quality
- Next Story: Preview of upcoming content
- 文章加载：骨架屏提示内容结构
- 图片展示：在高清图加载前显示过渡效果
- 下一篇文章：提前预览后续内容
3. Staging
3. Staging（舞台布局）
- Content First: Article text is always primary
- Media Integration: Images/video support, not distract
- Navigation: Minimal, reveals on scroll
- 内容优先：文章文本始终是核心
- 媒体整合：图片/视频为内容提供支持，而非干扰
- 导航栏：极简设计，滚动时显示
4. Straight Ahead & Pose to Pose
4. Straight Ahead & Pose to Pose（逐帧动画与关键帧动画）
- Reading Scroll: Continuous smooth flow (straight ahead)
- Section Navigation: Jump to defined sections (pose to pose)
- Slideshows: Clear frame transitions
- 阅读滚动：持续流畅的滚动效果（逐帧动画）
- 章节导航：跳转至指定章节（关键帧动画）
- 幻灯片：清晰的帧过渡效果
5. Follow Through & Overlapping Action
5. Follow Through & Overlapping Action（跟随动作与重叠动作）
- Parallax Images: Background moves slower than text
- Pull to Refresh: Content follows indicator
- Article Cards: Image loads, then headline appears
- 视差图片：背景移动速度慢于文本
- 下拉刷新：内容跟随指示器动效
- 文章卡片：先加载图片，再显示标题
6. Slow In & Slow Out
6. Slow In & Slow Out（缓入缓出）
- Page Transitions: Smooth, never jarring reading
- Modal Opens: Comfortable 300-350ms
- Menu Reveals: Elegant ease-in-out
- 页面切换：平滑过渡，绝不干扰阅读节奏
- 弹窗打开：300-350ms舒适时长
- 菜单展开：优雅的缓入缓出动效
7. Arc
7. Arc（弧线运动）
- Scroll Progress: Curved indicator paths
- Share Sheet: Options arc into view
- Swipe Navigation: Natural curved gestures
- 滚动进度：弧形路径的进度指示器
- 分享面板：选项以弧形动画进入视野
- 滑动导航：符合自然手势的弧形动效
8. Secondary Action
8. Secondary Action（次要动作）
- Save Article: Subtle confirmation animation
- Loading Images: Shimmer while fetching
- Audio Player: Waveform while playing
- 保存文章：微妙的确认动画
- 图片加载：加载时显示微光动效
- 音频播放器：播放时显示波形动效
9. Timing
9. Timing（时长控制）
- Unobtrusive: 200-300ms standard transitions
- Reading Flow: Never interrupt consumption
- Interactive Elements: Quick 150ms feedback
- 低调不突兀：标准过渡时长为200-300ms
- 阅读流畅性：绝不打断阅读过程
- 交互元素：150ms快速反馈
10. Exaggeration
10. Exaggeration（夸张）
- Avoid Mostly: News/content requires credibility
- Breaking News: Appropriate urgency only
- Feature Stories: Subtle dramatic reveals
- 尽量避免：新闻/内容类产品需保持可信度
- 突发新闻：仅在此时运用恰当的紧迫感动效
- 专题报道：微妙的戏剧性展示动效
11. Solid Drawing
11. Solid Drawing（扎实绘制）
- Typography Excellence: Perfect text rendering
- Image Quality: Crisp media at all sizes
- Layout Consistency: Reliable grid systems
- 卓越排版：完美的文本渲染效果
- 图片质量：全尺寸下保持清晰画质
- 布局一致性：可靠的网格系统
12. Appeal
12. Appeal（吸引力）
- Elegant Restraint: Premium publication feel
- Brand Voice: Motion matches editorial tone
- Readability Focus: Animations serve content
- 优雅克制：高端出版物质感
- 品牌调性：动效与编辑风格匹配
- 可读性优先：动效为内容服务
Industry Timing Standards
行业动效时长标准
| Action | Duration | Easing |
|---|---|---|
| Page Transition | 300ms | ease-in-out |
| Image Load | 250ms | ease-out |
| Menu Open | 250ms | ease-out |
| Share Action | 200ms | ease-out |
| Scroll Indicator | 150ms | ease-out |
| 操作 | 时长 | Easing |
|---|---|---|
| 页面切换 | 300ms | ease-in-out |
| 图片加载 | 250ms | ease-out |
| 菜单打开 | 250ms | ease-out |
| 分享操作 | 200ms | ease-out |
| 滚动指示器 | 150ms | ease-out |
Key Principle
核心原则
The content is king. All animation exists to enhance readability and content discovery, never to showcase design. Motion should feel invisible while reading.
内容为王。所有动效的存在都是为了提升可读性与内容发现效率，绝非为了展示设计。阅读时，动效应让人感觉“无形”。