跳到主要内容

交互模式 · 动效

微交互

Micro-interaction

也叫:微动效、细节动效、交互反馈动画

围绕一个小操作的简短反馈动画,比如点赞时红心弹一下、开关圆点滑动、复制后图标变成对勾。

示例

详细解释

微交互是「一次操作 + 一个小反馈」的最小单元:按钮按下时轻微缩小、开关切换时圆点滑过去、点赞后图标放大再回弹、复制按钮点击后变成对勾 2 秒、输入密码时显示强度条。它让用户确认「我的操作生效了」,也让产品显得有细节。

它和过渡动画的关系:过渡动画是实现手段(属性从 A 平滑变到 B),微交互是设计目的(针对某个操作的反馈),一个微交互通常由一两个过渡或关键帧动画组成。

原则是短(100~300ms)、轻、有意义,不要为了动而动。给 AI 提需求时,描述触发条件、变化过程和持续时间,比说「加点动效」有用得多。

开发者信息
术语 ID
interaction-micro-interaction
DOM 选择器
没有 DOM 线索,这个概念不在页面上直接识别。
优先级
1 · 同一层有多条命中时,优先级高的胜出
版本
v1 · 更新于 2026/09/29