反馈与动效

动效不是为了让界面"好看"，而是 App 在用"会动"的方式告诉你：你的操作被接收了、状态正在变化。会说话的动效让用户安心；只顾着花哨的动效反而让人手忙脚乱。

动效是功能反馈，不是装饰

新手最容易"动效上瘾"——按钮弹、卡片飞、页面转，怎么花怎么来。但用户往往没更爽：点个按钮要等它表演完、翻页被转圈拖慢、满屏乱动不知该看哪。为什么不能瞎加？因为动效是功能反馈，不是装饰——它存在的意义是"告知"，不是"好看"。判断一段动效好不好的标准，是"它有没有传达一个有用的信息"，不是"够不够炫"。没有目的、只会拖慢用户的动效，比没有更糟。

动效好坏的判断标准：不是"够不够炫"，而是"有没有传达一个有用的信息"。

动效四用途：它在"说什么"

用微信把四种用途对号入座：

用途	它传达的信息	微信例子
反馈	你操作了，系统接收到了	输入框光标跟着闪、提示字跟着走（"正在输入"被接收）
状态提示	系统正在忙，请稍等	下拉刷新转圈、消息发送的转圈
引导	你接下来该看哪	弹层展开/收起、内容淡入淡出
过渡	场景切换了	从列表点进聊天，页面平滑滑入

动效到底在"说什么"？所有动效都服务于四种"话"，每一种都在传达一类信息：

反馈 你操作了，系统接收到了（点按钮有"咔哒"响应）；状态提示 系统正在忙，请稍等（加载中的转圈）；引导 界面接下来怎么变、你的眼睛该看哪儿（展开/收起、淡入淡出）；过渡 页面/场景怎么切换（从 A 页滑到 B 页）。

一句话记：反馈、状态、引导、过渡，四种"话"都要说得清楚。

动效三要素：时长、缓动、位移

任何一段动效，都是三件事在起作用。时长决定它跑多久（快慢节奏）；缓动曲线决定它是匀速跑，还是先快后慢、先慢后快（油门松紧）；位移决定它动了多大多远（幅度大小）。调动效，就是调这三样。

时长参考：轻量反馈（按钮响应、爱心）约 100~200ms；稍重的过渡（页面切换）约 200~300ms；再长容易烦躁。记住：动效是"提示"不是"表演"，别让用户为你的动效等。

缓动曲线：全部"匀速"跑会生硬、机械，真实世界的东西动起来都有加速有减速。

曲线	表现	用途
匀速 linear	全程同速，机械、生硬	少用
先快后慢 ease-out	起步猛地加速、终点缓缓停下	最常用，像"点一下"的自然手感（页面滑入用这个）
先慢后快 ease-in	慢慢起步、终点才冲	少量用于强调，像"蓄力后弹出"

位移原则：够用就好——让用户"看见动效发生"即可，别让元素飞满屏。位移常和时长配合：动得越远，时间稍长些，否则太快看不清、太慢又拖。

时长参考：轻量反馈 100~200ms · 过渡 200~300ms · 再长烦躁；最自然的"点一下"缓动是先快后慢（ease-out）。

克制原则：短、快、有目的

微信动效拆解：下拉刷新转圈跟手、松手后转起来表示刷新，全程在"告知状态"，没有一秒多余；消息发送转圈是"正在发送"的护栏，避免重复点发送；点进聊天页从右往左先快后慢滑入，像真实地"从旁边推过来再缓缓停住"，不是生硬地"啪"地出现。

动效的品格是克制——好的动效要短、快、有目的：短，别让用户等，动效是"提示"不是"表演"；快，轻松干脆，200~300ms 上下足够，别拖；有目的，每个动效都要能回答"它在告诉用户什么"。一个恰到好处的 200ms 反馈，远胜一场花哨但拖沓的动画秀。

同时要知道什么时候不该动：

• 高频 + 低信息的地方（开关、列表快速滚动）：动效太多反而晃眼、拖手，轻或不加。
• 用户急着看到结果时：关键数据加载完要立刻看到内容，别让内容再"表演"一遍。
• 误伤可及性：用户关闭了系统级"减弱动态效果"，动效要能被关掉或降级。
• 判断标准："这个动效告诉用户什么新信息了吗？"答不上来，就不加。

一句话总结：三要素（时长/缓动/位移）是"怎么动"，四用途（反馈/状态/引导/过渡）是"为什么动"，克制原则是"动不动"。

深度

原理：为什么"200~300ms 上下"是舒服区间？ 人眼对"刚发生又消失"的反馈需要约 100ms 才能看清；而超过 300ms，用户的注意力就开始等待、产生"系统卡了"的焦躁。所以轻量反馈落在 100~200ms（够看清、不拖），过渡落在 200~300ms（有节奏感、不烦人）。这是"快得看清、慢得不等"的平衡点。

原理：缓动曲线在代码里长什么样？ 用 Web Animations API 写一段 250ms 的"点一下"反馈（先快后慢 ease-out，最自然的手感）：

// 时长为 250ms，先快后慢（ease-out），最自然的"点一下"手感
element.animate({ transform: 'scale(1.15)' }, {
  duration: 250,          // 时长：快慢节奏
  easing: 'ease-out',     // 缓动：先快后慢，像自然松手
});

把 easing 换成 linear 或 ease-in，同一个 250ms 就会变得机械或"蓄力"，直观感受"曲线"对手感的影响。

边界：动效简洁的代价与取舍。 克制不是"能不动就不动"，而是"只在有信息要说的地方动"。高频操作（如聊天列表快速滚动）加会晃眼；但首屏加载、关键状态切换恰恰是最该动的地方——它们要填补等待、告知状态。所以"动不动"的判断，永远回到那一句：它告诉用户什么新信息了吗？

完整收束： "动效越快越好/越慢越酷"是误区——要快得看清、慢得不等；"缓动无所谓，匀速就行"是误区——匀速最生硬，先快后慢最自然；"动效是开发的活，设计师定不了"是误区——时长、快慢、该不该动，都是设计师先定义的设计决策，开发只是执行。

误区

误解	正解
动效是装饰，加得越花越好	动效是功能反馈，标准是"有没有传达有用信息"，不是"够不够炫"
所有地方都要动效	动效用在"有信息要说"的地方才有价值，无关紧要的地方别动；克制才是品格
动效越快越好 / 越慢越酷	要快得看清、慢得不等，200~300ms 上下是舒服区间
缓动无所谓，匀速就行	匀速最生硬、机械；先快后慢最贴近自然的"点一下"手感
动效是开发的活，设计师定不了	时长、快慢、该不该动，都是设计师先定义的设计决策，开发只是执行

练习

即时题 Q：一个新闻 App 的首页有几处动效——点"点赞"按钮时爱心放大再缩小；下拉刷新时顶部转圈；页面切换时从右往左滑入；列表快速滚动时每个卡片都弹跳一下。请逐一判断：哪些是"有目的的功能反馈"，哪些是"没必要的过度装饰"？说出判断依据。

模块题 Q：你要为微信"发送消息"设计那几处动效，请：

1. 列出消息发送、下拉刷新、页面切换、输入框输入这四处，分别属于"反馈/状态/引导/过渡"中的哪种，各要传达什么信息。
2. 为"点赞动效"定出你建议的时长和缓动曲线，并说明为什么（用"油门"类比解释缓动的选择）。
3. 说明"下拉刷新转圈"为什么必须"跟手"（跟着手指走），以及它怎么起"状态提示 + 防误操作"作用。
4. 指出一个你不该加动效的场景，并说明判断标准。

迷你案例：给微信"发消息"配一套克制动效 在 Penpot 新建一个 375×812 画板，画一个"聊天页"（可复用依赖 19 状态设计的发送中/成功/失败状态）：

1. 先画静态聊天页：上方输入框、中间几条聊天气泡。
2. 为输入框标注动效：光标闪烁、输入时提示字跟随——注明它是"反馈"。
3. 做发送动效示意：画"发送中"气泡（灰 + 转圈）→"发送成功"（气泡变亮）——用箭头 + 标注时长（约 200ms、先快后慢），标出"状态提示"。
4. 做页面过渡示意：标出"从列表滑入聊天页"用"先快后慢"缓动、约 250ms——标注"过渡"。
5. 最后对照"克制原则"检查一遍：这四处动效是不是都短、快、有目的？有没有你本来想加、其实不该加的？（比如气泡弹跳飞入——没必要，砍掉。）

做完你会明白：好动效让人几乎"感觉不到它的存在"，却一直知道"状态在变、系统在忙、我点到了"。

素材

• 👉 打开交互演示：反馈与动效 — 拖动时长滑块（100ms→1000ms）、切换匀速/先快后慢/先慢后快，对比"坏榜样"（加满花哨 / 没有动效），找最舒服的区间（提示：200~300ms 上下）。
• 微信观察：点一个点赞按钮看它的"咔哒"响应；下拉聊天列表看转圈跟手、松手刷新；点进聊天页看页面滑入的缓动——这是最好的"反馈与动效"活教材。
• Material Design 3：Motion 相关章节（时长、缓动曲线、动效规范，官方标准做法）。
• Apple HIG：Animation 相关指南（官方，动效的克制与可及性，含"减弱动态效果"无障碍）。
• 概念解析：搜索 "UI motion duration easing" / "micro-interaction" / "motion design principles"。
• 工具联动：本课依赖 19 状态设计（发消息的"发送中→成功/失败"就是状态流转在动效上的体现）；动效的"是否该动、动多久"也服务于 21 用户心理（反馈感、等待感）。

---