微交互
Micro-interaction
初级通用微交互（Micro-interaction）是围绕一个小操作的即时反馈：点赞时红心弹一下、开关滑过去、复制后图标变成对勾。它让用户在操作的那一刻就知道「点上了、成功了、出错了」，不用猜，也不用等服务器回来。
你可能会说：「点了按钮之后好像没反应，用户老是以为没点上又点一次，能不能点下去就有个小反馈？」
读之前建议先了解
动手看看点赞这一下，用户看得到吗
要点微交互是怎样起作用的？
- 1
点下去的那一刻就要有反应
用户按下按钮后，大约 100 毫秒内看不到任何变化，就会开始怀疑「是不是没点上」。如果界面要等接口返回才变，网络一慢就是一两秒的空白，用户很可能再点一次——对点赞、收藏这种「切换」操作来说，第二下正好把第一下抵消了。所以微交互的第一要务是立刻给反馈：按钮轻轻缩一下、图标换状态，请求在后台走；万一失败，再把状态改回去并提示。
- 2
一个微交互通常有四个部分
触发（用户点击、拖动，或者系统事件）、规则（这个操作会改变什么）、反馈（用户看到、听到或感到的变化）、循环和模式（重复操作、长按时怎么表现）。比如复制按钮：点击触发，规则是把文字写进剪贴板，反馈是图标变成对勾并显示「已复制」，两秒后恢复原样，方便下次再复制。我们设计时把这四点想清楚，比单纯「加个动画」更不容易漏。
- 3
小、短、不挡路
微交互只动和操作相关的那个小元素，时长一般 100~300 毫秒。常见的做过头的写法是：点个赞放一秒多的全屏动画，期间还把按钮锁住。第一次觉得有趣，第十次就嫌烦，想马上取消也点不动。好的微交互随时能被下一次操作打断，用户手速再快也不会被动画卡住。
容易混淆的地方
微交互说的是「一个小操作的反馈」，动画只是它常用的表现手段之一，颜色变化、文字变化、手机震动也算。它也不等于乐观更新：乐观更新讲的是数据先在界面上改掉、再等服务器确认；微交互讲的是用户能感知到的那一下反馈。两者经常一起用，但可以分开存在。
什么时候用
适合用
- 社区或内容产品的点赞、收藏、关注按钮，点下去要立刻看到状态变化，不能等接口。
- AI 工具的「复制回答」按钮，复制成功后图标短暂变成对勾，告诉用户已经进了剪贴板。
- 设置页的开关，滑块滑过去、颜色跟着变，让用户确认这一项已经打开。
不适合用
- 付款、删除账号这类后果严重的操作，别只靠一个小动画表示完成；要给明确的结果页或确认提示。
- 操作要好几秒才能完成时，别用一个按钮小动画糊弄过去；改用进度条或加载状态说明还要多久。
- 想表达整页内容的切换或层级变化时，微交互管不了这么大的范围；改用页面转场。
练一练选一个答案，看看解释
你在做一个内容社区，点赞接口在弱网下要 1~2 秒才返回，常有用户反馈「点了赞又没了」。哪种做法最合适？
让 AI 帮你做复制给 AI Agent 直接用
请给【需要反馈的操作，如：文章详情页的点赞和收藏按钮】加上微交互。先阅读这些按钮的组件和请求代码，弄清现在是不是等接口返回才更新界面，以及项目里已有的动画库和样式写法。改成：点击瞬间就切换状态并给一个 100~300 毫秒的小反馈（按下缩放、图标弹一下、数字过渡到新值），请求在后台发，失败时恢复原状并提示。动画只作用于按钮本身，不能锁住按钮或挡住其他操作，连续快速点击时以最后一次为准。开启减少动效时只保留颜色和状态变化。沿用现有组件，不改无关代码。最后说明怎样在浏览器里把网络调慢来验证：点击后立刻有反馈，快速连点结果也正确。