术语图鉴/UI/UX 设计/微交互
←→切换Esc返回

微交互 Micro-interaction

你可能会说

按钮点击时加个涟漪动画,反馈更生动。

界面上的小动画反馈:按钮点击波纹、点赞心形动画、下拉刷新弹性。

界面上的小动画反馈:按钮点击波纹、点赞心形动画、下拉刷新弹性。让用户感到「界面是活的」。

也常被叫作Micro-interaction

生活类比

像门把手转动时的「咔哒」声——很小的反馈,但让你确认操作成功了。

🎮 动手试试

👇 点击体验微交互

点击我
选择题选择一个你认为最合适的答案

关于「微交互」,以下哪个描述最准确?

你可以这样告诉 AI

帮我的按钮加点击反馈:点击时出现从中心扩散的涟漪波纹、轻微缩放弹跳,点赞图标加心形放大动画。

容易混淆?这样区分

微交互 Micro-interaction≠
动画 Animation

微交互是用户操作触发的小反馈(点击波纹),动画可以是自动播放的大幅视觉效果(页面转场、入场动画)。

什么时候用

提升操作感知品质

想让按钮点击、表单提交、开关切换等操作有「确认感」时,加入微交互(波纹、弹跳、颜色变化)让界面从静态变鲜活。

和 AI 协作时

想让 AI 加微交互时,说「点赞心形点击放大再弹回、贝塞尔缓动 300ms」,AI 会写对应的 CSS 动画代码。

什么时候不用

性能受限的旧设备

低端 Android 或老旧浏览器上,过多微交互动画会导致掉帧和卡顿,优先保证功能流畅比精致动画更重要。

与纯后台数据处理无关

数据清洗、定时任务、批量处理等后端逻辑完全不需要用户界面反馈,微交互无处附着。

组成结构 · Anatomy

1
核心概念Core

界面上的小动画反馈:按钮点击波纹、点赞心形动画、下拉刷新弹性。让用户感到「界面是活的」。

2
实际表现In Practice

像门把手转动时的「咔哒」声——很小的反馈,但让你确认操作成功了。

3
与 AI 的关联AI Context

和 AI 沟通时提到「加个点击反馈动画」或「点赞时加个微交互」,就是给操作加小动画。

典型使用场景

按钮点击反馈
告诉 AI「按钮点击加涟漪波纹效果,从点击位置扩散,同时按钮缩到 95% 再弹回来,过渡 200ms」
想弄懂概念时
告诉 AI「用大白话给我解释什么是微交互,举个生活中的例子」

延伸阅读