---
title: "Micro-Interaction"
type: concept
tags: []
---

## Definition
微交互设计是指在用户与界面交互时产生的细小、专注的交互瞬间，通过视觉反馈、动画效果提升用户体验。

## Examples
- **按钮悬停效果**：光晕扫过、轻微上浮、阴影加深
- **表单验证庆祝**：成功时显示 ✨ 闪烁动画
- **加载动画**：带有个性的跳动圆点动画
- **进度庆祝**：任务完成时显示 🎉 庆祝动画

## Design Principles
- 使用 cubic-bezier 缓动函数实现流畅动画
- 保持动画时长在 0.3-0.5s 范围
- 动画应服务于功能反馈而非纯粹装饰
- 需支持 reduced-motion 偏好设置

## Related Concepts
- [[Whimsy Taxonomy]]
- [[Easter Egg]]

## Sources
- [[design-whimsy-injector]]