跳到主要内容
前端术语库

微交互

Micro-interaction

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

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

详细解释

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

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

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

示例

灰度线框示意,只表达结构,不代表具体视觉风格。

怎么跟 AI 说

可以直接贴给 Cursor、Claude Code 等工具,把里面的业务内容换成你自己的。

代码块右上角的复制按钮加微交互:点击后复制内容,图标从「复制」变成对勾并显示「已复制」,同时按钮轻微放大再回弹,动画 200ms;2 秒后恢复成复制图标;按钮按下时缩小到 95%。