动效与动态设计：让设计"活"起来
如果说静态设计是"照片"，那动态设计就是"电影"。
好的动效，不只是"让东西动起来"—— 它能引导注意力、传达信息、建立情感连接、提升体验质感。
这几年，动效越来越重要了——
- 网页有动效
- APP 有动效
- 品牌有动效 LOGO
- 甚至海报和印刷品，都在往"动态化"走
但很多设计师对动效的理解还停留在"加个动画"、"加个过渡"的层面。 动效的价值，远不止于此。
这篇文章，我们从动效的作用出发，聊聊动态设计的核心原则和方法。
动效到底有什么用？
很多人觉得动效是"锦上添花"—— 有了好看，没有也能用。
错了。 好的动效，是体验的重要组成部分。 它有用，而且很有用。
作用一：解释关系，引导注意力
静态界面里，元素之间的关系是"死"的。 用户要自己猜：这个按钮点了会怎么样？这个页面从哪来的？
动效能把这些关系"演"出来。
比如：
- 点击一个按钮，弹窗从按钮的位置"放大"出来 → 用户就知道"这个弹窗和这个按钮有关"
- 返回上一页，页面从左往右滑走 → 用户就知道"我回到了左边的页面"
- 列表加载，新的项目从上面"掉下来" → 用户就知道"这些是新加载出来的"
动效能告诉用户：
- 元素之间是什么关系？
- 操作之后发生了什么？
- 接下来可以做什么？
这就是动效的"沟通"作用—— 不用写文字说明，用户一看就懂。
作用二：提供反馈，建立预期
用户操作之后，最需要的是什么？ 是反馈。
- 我点了按钮，它有没有反应？
- 我提交了表单，成功了还是失败了？
- 页面在加载吗？卡住了吗？
这些，都可以用动效来反馈。
比如：
- 按钮按下去有个"按压"的动效 → 用户就知道"点到了"
- 加载的时候有个转圈的动画 → 用户就知道"在加载，等一下"
- 提交成功后，有个"对勾"的动画 → 用户就知道"成功了"
没有动效的界面，是"死"的。 用户操作了，不知道有没有成功，不知道接下来会发生什么。 这种"不确定感"，会让用户很焦虑。
好的动效，就像人和人对话时的"嗯"、"好的"、"我知道了"—— 让对方知道"你在听"。
作用三：提升质感，建立品牌
同样的功能，为什么有的产品看起来"高级"，有的看起来"廉价"？ 很大程度上，差在动效上。
- 苹果的动效 → 流畅、细腻、有弹性 → 感觉"高端"
- 安卓早期的动效 → 生硬、卡顿、不自然 → 感觉"廉价"
动效的质量，直接影响用户对产品品质的感知。
而且，动效也是品牌的一部分——
- 你的动效是什么风格？
- 快的还是慢的？
- 弹性的还是线性的？
- 活泼的还是稳重的？
这些，都会形成用户对品牌的印象。
好的动效系统，就像品牌的"声音"—— 用户不用看到 LOGO，只看动效，就能感受到"这是它"。
作用四：增加愉悦感，创造情感连接
最后，动效能让产品变得"有温度"。
- 完成任务时的庆祝动画 → 用户会开心
- 空状态的可爱小动画 → 用户不会觉得空落落的
- 加载时有趣的小动画 → 等待也不那么无聊了
这些小小的动效，虽然不直接解决什么问题，但能让用户"喜欢"上你的产品。
人是感性的动物。 用户说不出为什么喜欢，但就是觉得"这个产品很好用、很舒服"。 很多时候，这种"感觉"，就是动效带来的。
动效设计的十二原则
动效不是随便乱加的。 好的动效，有它的规律和原则。
迪士尼动画师总结过"动画十二原则"—— 这些原则虽然是给传统动画的，但对 UI 动效、交互动效，同样适用。
我们挑几个和设计最相关的来讲。
1. 慢入慢出（Slow In & Slow Out）
现实世界里，物体的运动不是匀速的——
- 启动的时候，慢慢加速
- 停止的时候，慢慢减速
只有机器，才是匀速运动的。
所以，好的动效，也要有"慢入慢出"。
- 动画开始的时候，速度慢，然后逐渐加快
- 动画结束的时候，速度慢下来，逐渐停止
这样的动效，看起来自然、舒服。 如果是匀速的，会很生硬、很机械。
在 CSS 里，就是 ease-in-out。
大部分动效，用这个曲线就对了。
2. 弹性与重量（Overshoot & Follow Through）
现实世界里，物体停下来的时候，不会"戛然而止"—— 它会有惯性，会有"过冲"。
比如一个球掉到地上，会弹几下才停下来。 比如你甩鞭子，鞭子的末端会继续运动。
动效里加入一点"弹性"和"过冲"，会更自然、更有活力。
比如：
- 弹窗出现的时候，稍微放大一点，再弹回来一点
- 按钮按下去，弹回来的时候稍微过一点，再恢复
- 列表项加载出来，往下掉一点，再弹回来
当然，弹性不能太大—— 太大了，就会很浮夸，影响体验。 适量就好，"刚刚好"的弹性，会让动效很有质感。
3. 预期（Anticipation）
什么是预期？ 就是在动作发生之前，先有一个"预备动作"。
比如，人要跳起来，会先蹲下； 人要出拳，会先收拳； 人要往前跑，会先往后仰。
为什么要有预期？ 因为它告诉用户："接下来要发生什么了。"
- 按钮 hover 的时候，稍微放大一点 → 用户就知道"可以点"
- 卡片往上飘一点 → 用户就知道"悬浮起来了，可以操作了"
- 列表项往左滑，露出后面的删除按钮 → 用户就知道"往左滑可以删除"
预期动效，让用户有心理准备。 不会觉得"突然"、"莫名其妙"。
4. staging（ staging / 强调）
就是"重点突出"—— 动效要引导用户的注意力，让用户知道该看哪里。
一个画面里，不能所有东西都在动。 所有东西都在动 = 没有重点。
好的动效，一次只让用户注意一件事。
- 弹窗出现的时候，背景变暗 → 注意力放在弹窗上
- 提交成功的时候，只有对勾在动 → 注意力放在"成功"上
- 页面跳转的时候，旧的渐隐，新的渐现 → 注意力放在新内容上
动效不是越多越好。 精准、到位，比多更重要。
5. 节奏与时机（Timing）
动效的节奏，直接影响它的感觉。
同样的动画，时长不一样，感觉完全不一样：
- 很快（100ms 以下）→ 干脆、利落、有冲击力
- 适中（200-300ms）→ 自然、舒服
- 很慢（500ms 以上）→ 优雅、庄重，但可能拖沓
动效的时长怎么定？
- 小元素、小动画 → 快一点（150-200ms）
- 大元素、全屏动画 → 慢一点（300-500ms）
- 装饰性、品牌性的动效 → 可以更慢一点（500-1000ms）
太快了，用户看不清； 太慢了，用户等得不耐烦。
一般来说，UI 动效的时长，在 200-300ms 是比较舒服的。
6. 次要动作（Secondary Action）
主动作之外，可以加一些次要的小动作，让画面更生动。
比如：
- 一个按钮弹出来，上面的图标也跟着小幅度跳动
- 一个卡片浮起来，下面的阴影也跟着变化
- 一个字符跳动，旁边的字符也微微震动
次要动作不能抢了主动作的戏—— 它是辅助的，是锦上添花的。 有了它，动效更生动；没有它，也不影响功能。
7. 吸引力（Appeal）
好的动效，应该是"好看的"、"吸引人的"。
什么是有吸引力的动效？
- 流畅的，不卡顿的
- 自然的，符合物理规律的
- 有细节的，有设计感的
- 符合品牌调性的
动效的质感，直接影响产品的质感。 同样的界面，动效做得好，就是"高端"；动效做得烂，就是"廉价"。
UI 动效的分类和应用场景
UI 里的动效，按作用来分，大概可以分成这几类。
1. 反馈动效
用户操作之后，给个反馈。
常见的：
- 按钮 hover / active 状态
- 开关切换的动画
- 复选框打勾的动画
- 提交成功/失败的动画
- 下拉刷新的动画
- 加载动画
设计要点：
- 快：不能让用户等
- 明确：一看就知道是什么意思
- 细腻：小小的细节，提升质感
反馈动效是用得最多的，也是最容易被忽略的。 把反馈动效做好，产品的"手感"会提升一大截。
2. 转场动效
页面和页面之间、状态和状态之间的切换。
常见的：
- 页面切换（推入、推出、淡入淡出）
- 弹窗出现/消失
- 展开/收起
- Tab 切换
- 路由切换动画
设计要点：
- 有方向感：告诉用户"从哪来、到哪去"
- 有层级感：谁在上、谁在下
- 流畅自然：不要生硬、不要突兀
转场动效，是产品"质感"的关键。 转场做得好，用户会觉得"这个 app 很流畅、很跟手"。
3. 引导动效
引导用户的注意力，告诉用户该做什么。
常见的：
- 新手引导的高亮和手势动画
- 空状态的引导动画
- 新功能提示的动画
- 滚动提示（往下滑）
设计要点：
- 目的性强：明确引导用户做什么
- 不要太干扰：不要挡住用户的操作
- 适时出现：不要一上来就弹出来
引导动效，是"润物细无声"的—— 用户跟着做了，但没觉得被引导。
4. 状态动效
表达某种状态，或者某种情绪。
常见的：
- 空状态的小动画
- 成功/失败的动画
- 加载中的动画
- 庆祝/成就的动画
- 表情包/IP 的动态表情
设计要点：
- 情绪到位：开心就是开心，难过就是难过
- 不要太长：不要让用户等
- 符合品牌调性：和品牌的性格一致
状态动效，是最能传递"温度"的。 一个好的空状态动画，能让用户的挫败感减少很多。
5. 装饰性动效
纯粹为了好看、为了品牌感的动效。
常见的：
- 首页的品牌动画
- 背景的微动效
- 滚动视差
- 鼠标跟随的小效果
- 节日/活动的装饰动画
设计要点：
- 不要影响性能
- 不要干扰内容
- 适度就好，不要太多
装饰性动效是"加分项"—— 有了更好，没有也不影响用。 但要注意"度"，太多了就会花哨、廉价。
动效设计的"度"：什么时候不该加动效？
动效很重要，但不是越多越好。 很多新手，学了动效之后，什么都想加—— 按钮要动，文字要动，背景要动，图标也要动……
结果就是：乱、晃、累。
什么时候不该加动效？
1. 影响效率的时候
如果动效让用户变慢了，那就不要加。
比如：
- 每次切换页面都要等 1 秒动画 → 烦不烦？
- 每次点按钮都要弹半天 → 急不急？
- 列表滚动的时候各种动画 → 卡不卡？
UI 动效的第一原则是：不影响效率。 它应该是"用户几乎感觉不到，但觉得很舒服"的那种。 如果用户注意到了动效，并且觉得"好慢"，那就是失败的。
2. 引起不适的时候
有些动效，会让人头晕、恶心。
比如：
- 快速闪烁的动效（可能引发癫痫）
- 大幅度的晃动
- 强制的视差滚动
- 自动播放的视频和动画
一定要尊重用户的"减少动效"设置。
系统里有 prefers-reduced-motion 的选项，用户选了，就把大部分动效关掉。
这是可访问性的要求，也是对用户的尊重。
3. 性能不好的时候
动效很卡、掉帧、手机发烫—— 那还不如不要。
性能优化的要点：
- 用 CSS 的 transform 和 opacity（这两个属性不会触发重排重绘）
- 不要用 left/top/width/height 做动画（会很卡）
- 图片和视频要优化
- 复杂的动效用 Canvas 或 WebGL
- 低配设备可以降级
流畅的普通动效，比卡顿的"高级"动效好一万倍。
4. 内容比动效重要的时候
如果动效抢了内容的风头，那就是喧宾夺主。
比如：
- 文章页面，背景各种动 → 还让不让人读了？
- 表单页面，输入框各种特效 → 还让不让人填了？
- 重要信息，被动画挡住了 → 还让不让人看了？
永远记住：内容是主角，动效是配角。 动效是为内容服务的，不是反过来。
品牌动效与动态识别
现在的品牌，不只是静态的了。 越来越多的品牌，开始做"动态品牌"—— 动态 LOGO、动态识别系统、动态主视觉。
什么是品牌动效系统？
就像品牌有色彩系统、字体系统一样，品牌也有"动效系统"。
它定义了：
- 品牌的动效是什么风格？
- 动效的速度是快还是慢？
- 动效的曲线是什么样的？
- 动效的节奏是什么样的？
- 哪些元素可以动？怎么动？
有了这套系统，不管是谁来做动效—— 不管是视频、海报、网站、还是 APP—— 出来的感觉都是统一的。
品牌动效的作用
1. 提升品牌识别
- 不用看到 LOGO，只看动效的风格，就知道是哪个品牌
- 就像人的走路姿势一样，是一种识别特征
2. 丰富品牌表达
- 静态的品牌，能传达的信息有限
- 动态的品牌，可以有情绪、有性格、有温度
3. 适应新媒体
- 现在的传播，越来越多是短视频、社交媒体、数字媒介
- 静态的 LOGO 和海报，已经不够用了
- 品牌需要"动起来"，才能适应新的媒介
经典案例：谷歌的 Material Design 动效
Material Design 的动效系统，是最经典的品牌动效系统之一。
它的特点：
- 动效快速、干脆、响应及时
- 有真实的"材质感"——像纸一样，有厚度、有阴影
- 动效有明确的"来源"和"去向"——告诉用户从哪来、到哪去
- 节奏明快，不拖沓
用了 Material Design 的 APP，你不用看 LOGO，也能感觉到"这是谷歌的风格"。
这就是品牌动效的力量。
经典案例：苹果的动效哲学
苹果的动效，是行业的标杆。
它的特点：
1. 物理感
- 动效很真实，像真实世界的物体
- 有弹性、有重量、有惯性
- 不是机器在动，是"东西"在动
2. 跟手
- 动效是跟着你的手指走的
- 你滑得快，它就快；你滑得慢，它就慢
- 你松手了，它才自己完成剩下的动画
这种"跟手"的感觉，会让用户觉得"这个东西是我在控制"—— 非常有掌控感。
3. 克制
- 苹果的动效不多，但每一个都很到位
- 不会为了动而动
- 每一个动效都有它的作用
苹果的动效，是"润物细无声"的—— 你感觉不到它的存在，但你就是觉得"好用"、"舒服"。
这是动效的最高境界。
动效的性能与实现
动效设计得再好，卡成 PPT 也没用。 性能，是动效的生命线。
60fps 原则
好的动效，要达到 60fps（每秒 60 帧）。 也就是每 16.6ms 就要渲染一帧。
如果低于 60fps，用户就会感觉到卡顿。 特别是移动端，对性能更敏感。
哪些属性可以用来做动画？
在 Web 上，不同的 CSS 属性做动画，性能差别很大。
性能最好的两个属性：
- transform（位移、缩放、旋转、倾斜）
- opacity（透明度）
为什么？ 因为这两个属性，不会触发页面的重排（reflow）和重绘（repaint）。 它们是在合成层（compositor）里做的，由 GPU 来加速。
尽量不要用这些属性做动画：
- width / height
- left / top / right / bottom
- margin / padding
- border
- font-size
这些属性会触发重排，非常消耗性能。 在移动端会很卡。
动效性能优化技巧
1. 用 transform 和 opacity
- 位移用
transform: translate() - 缩放用
transform: scale() - 显隐用
opacity - 不要用 left/top/width/height
2. 开启硬件加速
- 用
will-change: transform或者transform: translateZ(0) - 让浏览器提前知道这个元素要做动画，把它放到单独的合成层
3. 减少同时动画的元素
- 不要一大堆元素同时在动
- 能错开就错开，形成节奏
- 既好看，又省性能
4. 图片和视频要优化
- 图片要压缩
- 视频要用合适的格式和码率
- 大的媒体文件，动效会卡
5. 降级处理
- 低端设备、老浏览器，可以简化或者关掉动效
- 用
prefers-reduced-motion检测用户偏好
性能和效果，是需要平衡的。 不是所有动效都要 100% 实现。 流畅，永远是第一位的。
怎么学习动效设计？
很多设计师想学动效，但不知道从哪下手。 给你几个建议。
1. 先学会"看"
学习动效的第一步，不是学软件，而是学会"看"。
- 多用一些好的产品（苹果的产品、谷歌的产品、优秀的 APP）
- 留意它们的动效
- 按钮怎么动的？页面怎么转场的？反馈是什么样的？
- 思考：为什么要这么做？好处是什么？
看得多了，你就有感觉了。
2. 从简单的开始
不要一上来就做复杂的动画。 从最简单的开始练：
- 按钮 hover 效果
- 淡入淡出
- 位移和缩放
- 简单的转场
先把这些基础动效做得自然、舒服。 基础打好了，复杂的自然就会了。
3. 理解物理和运动规律
动效做得自然不自然，关键在于对"运动规律"的理解。
- 重力是怎么作用的？
- 加速度和减速度是什么样的？
- 弹性是什么样的？
- 惯性是什么样的？
不用学物理，多观察现实世界就行——
- 一个球掉下来是怎么弹的？
- 一扇门打开是什么样的？
- 一块布飘起来是什么样的？
理解了现实世界的运动，做出来的动效才会自然。
4. 掌握工具
工欲善其事，必先利其器。
常见的动效设计工具：
UI 动效 / 交互动效：
- Figma 自带的 Smart Animate
- Principle
- ProtoPie
- Framer
- After Effects + 各种插件
视频 / MG 动画：
- After Effects（最常用的）
- Animate（以前的 Flash）
- Blender（3D 动效）
代码实现：
- CSS 动画（transition / animation）
- JavaScript 库（GSAP、Framer Motion、Anime.js……）
- WebGL / Three.js（3D 动效）
不用全都学，选一个适合你的，学精就行。
5. 多练，多抄，多想
和所有设计一样，动效也是练出来的。
- 看到好的动效，试着复刻一个
- 抄的过程中，你就会理解它为什么这么做
- 抄得多了，就会有自己的想法
然后，在自己的项目里多尝试——
- 这个地方加个动效会不会更好？
- 这个动效能不能再优化一下？
- 有没有更简单的实现方式？
练得多了，动效就会成为你的"本能"。
写在最后
动效到底是什么？
我觉得，它是设计的"第四维"—— 除了长、宽、颜色，还有时间。
静态设计，是空间的艺术。 动态设计，是空间 + 时间的艺术。
多了一个维度，可能性就多了无数倍。 但难度，也大了无数倍。
好的动效，就像好的配乐—— 你感觉不到它的存在，但它默默烘托了气氛，调动了情绪。 如果拿掉它，你就会觉得"少了点什么"。
坏的动效，就像烂大街的背景音乐—— 吵、烦、多余，只想关掉。
动效不是越多越好，也不是越炫越好。 合适，才是最好的。
什么时候该动？什么时候该静？ 什么时候快？什么时候慢？ 什么时候明显？什么时候克制？
这些"分寸感"，才是动效设计的真功夫。
愿我们都能做出—— 让用户觉得"舒服"的动效。 不是为了炫技，而是为了更好的体验。