交互模式 · 动效
微交互
Micro-interaction
也叫:微动效、细节动效、交互反馈动画
围绕一个小操作的简短反馈动画,比如点赞时红心弹一下、开关圆点滑动、复制后图标变成对勾。
详细解释
微交互是「一次操作 + 一个小反馈」的最小单元:按钮按下时轻微缩小、开关切换时圆点滑过去、点赞后图标放大再回弹、复制按钮点击后变成对勾 2 秒、输入密码时显示强度条。它让用户确认「我的操作生效了」,也让产品显得有细节。
它和过渡动画的关系:过渡动画是实现手段(属性从 A 平滑变到 B),微交互是设计目的(针对某个操作的反馈),一个微交互通常由一两个过渡或关键帧动画组成。
原则是短(100~300ms)、轻、有意义,不要为了动而动。给 AI 提需求时,描述触发条件、变化过程和持续时间,比说「加点动效」有用得多。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
interaction-micro-interaction- DOM 选择器
- 没有 DOM 线索,这个概念不在页面上直接识别。
- 优先级
- 1 · 同一层有多条命中时,优先级高的胜出
- 版本
- v1 · 更新于 2026/09/29