motion-and-storytelling

UI 中的动效与叙事

动画和动效不是装饰，而是沟通方式。像运用字体排印或色彩一样严谨地运用动效，就能让用户了解正在发生什么、该关注哪里，以及使用产品是什么感受。其源头包括 Disney 的 12 条原则、电影语言和漫画惯例，凝聚了数百年来关于如何通过运动与序列进行沟通的知识。

关键在于含蓄。在 UI 中，动效应该被感受到，而不是被观看。

---

将 Disney 的 12 条原则应用于 UI

1. 挤压与拉伸

物体受撞击时会压缩，加速时会拉伸。在 UI 中：按钮按下时略微缩小，再弹回原状，能传达出实体感和响应速度。

button:active { transform: scale(0.96); }
button { transition: transform 80ms ease-out; }

谨慎使用——仅用于主要 CTA 和令人满意的确认反馈。

2. 预备动作

主要动作开始前的轻微准备动作。在 UI 中：菜单项打开前稍微移动一下，或在过渡开始前显示加载指示器，能让用户为接下来发生的事情做好准备。

3. 演出布局

一次清晰地呈现一个想法。在 UI 中：进入动画应将注意力引向新内容，而不是与现有内容争夺关注。模态框打开时，页面其余部分变暗——这就是演出布局。

4. 连续动作与姿势到姿势

姿势到姿势——定义起始状态和结束状态，再由系统进行插值——是 CSS/JS 的做法。定义清晰的初始和最终状态，再让 transition 或弹簧物理库处理中间过程。

5. 跟随动作与重叠动作

元素不会同时停止。在 UI 中：列表项依次进入（每项比前一项晚 40–60ms 进入）比所有项同时出现更自然。

.item:nth-child(1) { animation-delay: 0ms; }
.item:nth-child(2) { animation-delay: 50ms; }
.item:nth-child(3) { animation-delay: 100ms; }

6. 缓入与缓出

自然界中没有任何事物会瞬间开始或停止。使用缓动曲线，而不是线性过渡。

缓动方式	用途
ease-out（快速开始，缓慢结束）	进入屏幕的元素——呈现自然的到达感
ease-in（缓慢开始，快速结束）	离开屏幕的元素——呈现有意为之的离场感
ease-in-out	在屏幕上的不同位置之间移动的元素
弹簧物理	对触摸或拖动做出响应的交互元素

UI 动效绝不要使用 linear——它看起来机械而生硬。

7. 弧线运动

自然的运动沿弧线进行，而不是沿直线。以其原点为中心缩放（而不是统一淡入）的工具提示和弹出框遵循了这一原则。transform-origin 很重要。

8. 次要动作

辅助动效，用于强化主要动作。在 UI 中：按钮被按下时，按钮内的图标稍微移动一下；表单提交后，勾号逐渐绘制出来。这些细节能奖励关注，却不会强求用户注意。

9. 时机

时长承载着含义。快速 = 响应灵敏、充满活力；缓慢 = 稳重、重要。

时长	用途
80–120ms	微交互（按钮按下、悬停）
150–250ms	组件过渡（下拉菜单打开、工具提示）
250–400ms	页面级过渡、模态框进入
400–600ms	主视觉动画、引导流程
> 600ms	几乎总是太长——用户正在等待

10. 夸张

适度且刻意的夸张能让动作更令人满足。在 UI 中：成功勾号略微超过目标位置后再停下，或通知徽章先弹到比最终尺寸稍大的状态。夸张幅度为 10–15%，而非戏剧化的表现。

11. 扎实绘制（扎实设计）

尊重界面的深度和层次。元素的移动方式应符合其感知层级——底部弹出面板从下方滑入，因为它位于内容下方，而不是从侧面进入。工具提示应出现在触发元素附近，而不是横跨屏幕。

12. 感染力

整体动效应符合品牌调性。轻松活泼的消费类应用可以采用更有弹性、回弹感更强的动效。金融工具则应使用精准、可控的过渡效果。感染力不是装饰，而是品牌个性通过时间展现出来的方式。

---

电影化技巧

揭示与入场

进入视口的内容，如果是动态呈现而非静止出现，效果会更有冲击力。由滚动触发的入场动画——例如用户滚动到某个区域时，该区域从下方淡入——借鉴了电影中的揭示手法。关键在于：内容应从有意义的方向进入（从下方进入，因为用户正从那里滚动而来）。

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

视差

背景元素比前景元素移动得慢，会营造出纵深感。在网页中，让英雄区背景图以滚动速度的 50% 移动，而内容以 100% 的速度移动，就能营造出层次感。应谨慎使用——过强的视差会引起晕动症。

硬切与叠化

• 硬切（即时状态变化）：快速、果断、高效。用于页面间导航、关闭模态框。
• 叠化／交叉淡化：渐进、从容、连贯。用于两个状态相关的场景，例如切换标签页或切换图片库中的图片。

场景铺陈

区域的第一帧会先于细节出现，为场景定下基调。以醒目图片和大号字体构成的英雄区，随后在短暂延迟后呈现辅助细节，就是一种电影化的开场。用户会先被引导关注主体，再开始阅读。

---

漫画表现手法

分格序列

漫画通过一系列静态画格讲述故事，并暗示画格之间的动作。在 UI 中，步骤指示器、新手引导轮播和进度流程也遵循相同逻辑——每个“画格”都是序列中的一个时刻，用户的视线会在画格之间移动。

速度线与动感

强调线、放射状渐变和方向性模糊，无需实际动画也能表现运动和能量。带有细微方向性渐变的按钮会让人觉得它正指向某个方向。带有渐隐拖尾的加载指示器则会暗示移动方向。

字体传递情绪

在漫画中，字体的大小、粗细和样式能传达情绪——喊叫会用大号粗体大写字母，耳语则用小号纤细斜体。在 UI 中，英雄区使用超大展示字体可以营造张力；小号、低对比度的说明文字则会退居次要位置。这是用微排版传递情绪，而不只是体现层级。

分格间隙

在漫画中，读者会用想象填补画格之间的空白。在 UI 中，过渡就是分格间隙——也就是状态之间发生的变化。流畅的过渡能让用户的大脑构建连贯的心智模型。突兀的跳变则会迫使用户重新适应。

---

实用规则

1. 始终尊重 prefers-reduced-motion——务必如此。有前庭障碍或对运动敏感的用户，必须能够在不使用动画的情况下操作产品。

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

2. 动效应服务用户，而非取悦用户。 每个动画都应回答：它能帮助用户理解发生了什么、某个元素从哪里来，或接下来该看哪里吗？

3. 绝大多数动效的时长应少于 400ms。 动画耗时更长，就会拖慢用户。

4. 绝不为布局属性设置动画（width、height、padding、top、left）——它们会导致重排。只为 transform 和 opacity 设置动画——它们由 GPU 执行。

5. 每个区域一次只播放一种动效。 同时播放互相竞争的动画会造成视觉干扰。应分阶段呈现。

审查清单

• prefers-reduced-motion 是否会禁用或减少所有动画？
• 所有过渡是否都使用 ease-out（进入）、ease-in（退出）或 ease-in-out（重新定位）？
• 是否避免使用线性缓动？
• 组件级过渡的持续时间是否都短于 400ms？
• 是否只对 transform 和 opacity 设置动画（而非布局属性）？
• 入场动画是否从有意义的方向移动（滚动显现时从底部进入，缩放时从原点开始）？
• 动效是否符合品牌调性（活泼风格使用弹跳效果，企业风格使用精准效果）？
• 列表项是否使用交错入场，而非同时出现？