motion-and-storytelling

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Motion and Storytelling in UI

UI中的动效与叙事

Animation and motion are not decoration — they are communication. When applied with the same discipline as typography or colour, they tell the user what is happening, where to look, and what the product feels like to use. The source material — Disney's 12 principles, cinematic language, comic book conventions — is centuries of accumulated knowledge about how to communicate through movement and sequence.

The key word is subtlety. In UI, motion should be felt, not watched.

动画与动效并非装饰——它们是一种沟通方式。当我们像对待排版或色彩一样严谨地运用动效时，它们能告知用户当前发生了什么、该看向何处，以及产品的使用体验如何。其参考素材——迪士尼的12条动画原则、电影语言、漫画创作惯例——是数百年积累的关于如何通过动作与序列进行沟通的知识。

核心关键词是微妙。在UI设计中，动效应让用户有所感知，而非刻意吸引注视。

Disney's 12 Principles Applied to UI

迪士尼12条动画原则在UI中的应用

1. Squash and Stretch

1. 挤压与拉伸（Squash and Stretch）

Objects compress on impact and extend on acceleration. In UI: a button that scales down slightly on press and springs back communicates physicality and responsiveness.

css

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

Use sparingly — reserved for primary CTAs and satisfying confirmations.

物体在受冲击时压缩，加速时伸展。在UI中：按钮按下时略微缩小，松开后回弹，以此传递物理质感与响应性。

css

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

需谨慎使用——仅用于主要CTA按钮和给人满足感的确认反馈。

2. Anticipation

2. 预备动作（Anticipation）

A small preparatory movement before the main action. In UI: a menu item shifting slightly before opening, or a loading indicator appearing before a transition begins, prepares the user for what is coming.

主动作前的微小准备动作。在UI中：菜单项展开前轻微位移，或过渡开始前先显示加载指示器，让用户为即将发生的操作做好准备。

3. Staging

3. 舞台呈现（Staging）

Present one idea clearly at a time. In UI: entrance animations should direct attention to the new content, not compete with existing content. When a modal opens, the rest of the page dims — that is staging.

一次清晰地呈现一个核心信息。在UI中：入场动画应将注意力引导至新内容，而非与现有内容争夺焦点。模态框弹出时，页面其余部分变暗——这就是舞台呈现的体现。

4. Straight Ahead vs Pose to Pose

4. 逐帧动画vs关键帧动画（Straight Ahead vs Pose to Pose）

Pose to pose — defining start and end states and letting the system interpolate — is the CSS/JS approach. Define clear initial and final states; let

transition

or a spring physics library handle the in-between.

关键帧动画——定义起始和结束状态，让系统自动补间——是CSS/JS的常用方式。明确初始与最终状态，让

transition

或弹簧物理库处理中间过程即可。

5. Follow-Through and Overlapping Action

5. 跟随动作与重叠动作（Follow-Through and Overlapping Action）

Elements don't all stop at the same time. In UI: staggered list item entrances (each item enters 40–60ms after the previous) feel more natural than all items appearing simultaneously.

css

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

元素不会同时停止运动。在UI中：列表项分批入场（每个项比前一个晚40-60ms出现），比所有项同时出现更自然。

css

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

6. Ease In and Ease Out

6. 缓入与缓出（Ease In and Ease Out）

Nothing in nature starts or stops instantly. Use easing curves, not linear transitions.

Easing	Use for
`ease-out` (fast start, slow end)	Elements entering the screen — feels natural arrival
`ease-in` (slow start, fast end)	Elements leaving the screen — feels intentional exit
`ease-in-out`	Elements moving between positions on screen
Spring physics	Interactive elements that respond to touch/drag

Never use

linear

for UI motion — it reads as mechanical and unfinished.

自然界中没有事物会瞬间启动或停止。使用缓动曲线，而非线性过渡。

缓动类型	使用场景
`ease-out` （快启动，慢结束）	元素进入屏幕——呈现自然的抵达感
`ease-in` （慢启动，快结束）	元素离开屏幕——呈现明确的退出感
`ease-in-out`	元素在屏幕内移动位置
弹簧物理曲线	响应触摸/拖拽的交互元素

UI动效绝不要使用

linear

——它会显得机械且未完成。

7. Arcs

7. 弧线运动（Arcs）

Natural movement follows arcs, not straight lines. Tooltips and popovers that scale from their origin point (rather than fading uniformly) follow this principle.

transform-origin

matters.

自然运动遵循弧线，而非直线。从原点缩放出现的工具提示和弹出框遵循这一原则。

transform-origin

属性至关重要。

8. Secondary Action

8. 次要动作（Secondary Action）

A supporting motion that reinforces the main action. In UI: an icon inside a button that shifts slightly when the button is pressed. A checkmark that draws itself after a form submission. These details reward attention without demanding it.

辅助主动作的支持性动效，用于强化主动作。在UI中：按钮被按下时，内部图标轻微位移；表单提交后，对勾图标逐笔绘制。这些细节能回馈用户的注意力，却不会强制占用注意力。

9. Timing

9. 时长控制（Timing）

Duration is meaning. Fast = responsive, energetic. Slow = weighty, important.

Duration	Use for
80–120ms	Micro-interactions (button press, hover)
150–250ms	Component transitions (dropdown open, tooltip)
250–400ms	Page-level transitions, modal entrance
400–600ms	Hero animations, onboarding sequences
> 600ms	Almost always too long — the user is waiting

时长具有表意性。快速=响应迅速、充满活力；缓慢=厚重、重要。

时长范围	使用场景
80–120ms	微交互（按钮按压、悬停）
150–250ms	组件过渡（下拉菜单展开、工具提示）
250–400ms	页面级过渡、模态框入场
400–600ms	核心区域动画、引导流程
> 600ms	几乎总是过长——用户会产生等待焦虑

10. Exaggeration

10. 适度夸张（Exaggeration）

A small, deliberate overstatement makes an action feel satisfying. In UI: a success checkmark that overshoots slightly before settling, or a notification badge that pops just slightly larger than its final size. The exaggeration is 10–15%, not theatrical.

微小、刻意的夸张能让动作更具满足感。在UI中：成功对勾图标略微超出最终位置后再归位，或通知徽章先略微放大再回到最终尺寸。夸张幅度控制在10-15%，而非戏剧化的夸张。

11. Solid Drawing (Solid Design)

11. 扎实造型（Solid Drawing）

Respect the 3D space of the interface. Elements should move in ways consistent with their perceived layer — a bottom sheet slides up from below because it lives below the content, not from the side. A tooltip appears near its trigger, not across the screen.

尊重界面的3D空间。元素的移动方式应与其感知层级一致——底部面板从下方滑入，因为它位于内容层之下，而非从侧面滑入。工具提示出现在触发元素附近，而非屏幕另一侧。

12. Appeal

12. 吸引力（Appeal）

The overall motion should feel right for the brand. A playful consumer app can use bouncier, springier motion. A financial tool uses precise, controlled transitions. Appeal is not decoration — it is brand personality expressed through time.

整体动效应契合品牌调性。趣味型消费应用可使用更具弹性、活泼的动效；金融工具则采用精准、可控的过渡效果。吸引力并非装饰——它是通过时间维度传递的品牌个性。

Cinematic Techniques

电影叙事技巧

Reveal and Entrance

渐显与入场

Content that enters the viewport has more impact when it arrives, rather than simply existing. Scroll-triggered entrance animations — a section fading up as the user scrolls into it — borrow from cinematic reveals. The key: the content drives in from a meaningful direction (below, because that's where the user is scrolling from).

css

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

当内容进入视口时，动态呈现比直接显示更有冲击力。滚动触发的入场动画——用户滚动到某一区域时，该区域向上淡入——借鉴了电影的镜头揭示手法。关键在于：内容从有意义的方向进入（比如从下方，因为用户是从下往上滚动）。

css

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

Parallax

视差效果（Parallax）

Background elements moving slower than foreground elements creates depth. In web: a hero background image moving at 50% scroll speed while content moves at 100% creates a sense of layers. Use subtly — aggressive parallax causes motion sickness.

背景元素移动速度慢于前景元素，以此营造深度感。在Web中：核心区域背景图片以50%的滚动速度移动，而内容以100%速度移动，从而产生分层感。需适度使用——过度的视差效果会引发晕动症。

Cut vs Dissolve

硬切vs溶解

Hard cut (instant state change): fast, decisive, efficient. Use for navigation between pages, closing modals.
Dissolve / crossfade: gradual, considered, connected. Use when two states are related — a tab switching, an image gallery transitioning.

硬切（瞬间状态切换）：快速、果断、高效。用于页面导航、关闭模态框。
溶解/交叉淡入淡出：平缓、深思熟虑、关联性强。用于两个相关状态的切换——标签页切换、图片画廊过渡。

Scene Setting

场景构建

The first frame of a section sets the scene before detail appears. A hero with a strong image and large type, followed by supporting details appearing after a brief delay, is a cinematic opening. The user's eye is directed to the subject before reading begins.

一个区域的第一帧先搭建场景，再呈现细节。核心区域先展示醒目的图片和大字号标题，短暂延迟后再显示辅助细节，这就是电影式的开场。用户的注意力会先被主体吸引，再开始阅读内容。

Comic Book Conventions

漫画创作惯例

Panel Sequence

分镜序列

Comics tell stories through a sequence of static frames that imply motion between them. In UI: step indicators, onboarding carousels, and progress flows use the same logic — each "panel" is a moment in a sequence, and the user's eye moves between them.

漫画通过一系列静态分镜讲述故事，分镜之间隐含动作。在UI中：步骤指示器、引导轮播、进度流程运用了相同逻辑——每个“分镜”是序列中的一个节点，用户的视线在节点间移动。

Speed Lines and Energy

速度线与活力

Emphasis lines, radial gradients, and directional blur suggest motion and energy without actual animation. A button with a subtle directional gradient implies it is pointing somewhere. A loading indicator with trailing opacity implies direction.

强调线、径向渐变、方向模糊可在无需实际动画的情况下暗示动作与活力。带有微妙方向渐变的按钮暗示其指向某个方向；带有拖尾透明度的加载指示器暗示运动方向。

Typography as Tone

排版传递调性

In comics, the size, weight, and style of lettering communicates emotion — a shout is set in large bold caps, a whisper in thin small italics. In UI: oversized display type for a hero carries energy; small muted caption text recedes. This is micro-typography as emotional register, not just hierarchy.

在漫画中，字体的大小、字重和样式传递情绪——大喊用大号粗体大写，低语用细体小号斜体。在UI中：核心区域的超大号标题传递活力；小型柔和的说明文字则退居次要位置。这是微观排版作为情感表达的方式，而非仅仅是层级划分。

The Gutter

gutter（分镜间隙）

In comics, the reader's imagination fills the space between panels. In UI, transitions are the gutter — what happens between states. A smooth transition lets the user's brain construct a coherent mental model. A jarring jump forces them to re-orient.

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

Practical Rules

实用规则

Respect
prefers-reduced-motion
— always. Users with vestibular disorders or motion sensitivity must be able to use the product without animation.

css

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

Motion should serve the user, not entertain them. Every animation should answer: does this help the user understand what happened, where something came from, or where to look next?
Duration under 400ms for almost everything. If an animation takes longer, it is slowing the user down.
Never animate layout properties (
```
width
```
,
```
height
```
,
```
padding
```
,
```
top
```
,
```
left
```
) — they cause reflow. Animate
```
transform
```
and
```
opacity
```
only — they run on the GPU.
One motion at a time per region. Simultaneous competing animations create visual noise. Stage them.

始终尊重
prefers-reduced-motion
设置——患有前庭障碍或对动效敏感的用户必须能够在无动画的情况下使用产品。

css

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

**动效应服务于用户，而非取悦用户。**每个动画都应回答：这是否能帮助用户理解发生了什么、元素来自何处，或接下来该看向哪里？
**几乎所有动效的时长都应控制在400ms以内。**如果动画时长更长，会拖慢用户的操作节奏。
永远不要为布局属性设置动画（
```
width
```
、
```
height
```
、
```
padding
```
、
```
top
```
、
```
left
```
）——它们会导致重排。仅对
```
transform
```
和
```
opacity
```
设置动画——它们在GPU上运行。
**每个区域同一时间只保留一个动效。**同时出现的竞争性动画会造成视觉干扰，需分阶段呈现。

Review Checklist

审核清单

Does
```
prefers-reduced-motion
```
disable or reduce all animations?
Are all transitions using
```
ease-out
```
(enter),
```
ease-in
```
(exit), or
```
ease-in-out
```
(reposition)?
Is linear easing avoided?
Are durations under 400ms for component-level transitions?
Are only
```
transform
```
and
```
opacity
```
animated (not layout properties)?
Do entrance animations move from a meaningful direction (bottom for scroll-reveal, origin for scale)?
Does motion match brand tone (bouncy for playful, precise for enterprise)?
Are staggered entrances used for list items rather than simultaneous appearance?

```
prefers-reduced-motion
```
是否会禁用或弱化所有动画？
所有过渡是否使用了
```
ease-out
```
（入场）、
```
ease-in
```
（退场）或
```
ease-in-out
```
（位置调整）？
是否避免了线性缓动？
组件级过渡的时长是否控制在400ms以内？
是否仅对
```
transform
```
和
```
opacity
```
设置动画（而非布局属性）？
入场动画是否从有意义的方向进入（滚动渐显从下方，缩放从原点）？
动效是否匹配品牌调性（趣味产品用活泼弹性动效，企业产品用精准可控动效）？
列表项是否采用分批入场，而非同时出现？