---
title: "Micro-Interaction"
type: concept
tags: [ux, design, interaction]
last_updated: 2026-04-30
---

# 微交互设计（Micro-Interaction）

## Aliases
- Micro-Interaction
- 微交互

## 定义

微交互是指产品中那些小型的、聚焦于单一任务的交互细节——通过小型动画、声音反馈和视觉变化，增强用户体验的愉悦感和功能性。通常作用于：按钮状态变化、表单验证反馈、加载动画、设置切换等具体场景。

## 核心特征

1. **聚焦单一任务**：每个微交互只做一件事（如点赞动画、成功反馈）
2. **触发-反馈循环**：用户动作 → 系统响应 → 状态变化
3. **细节驱动体验**：大型功能由微交互串联形成流畅体验

## 设计原则

- **目的性**：每个微交互必须有功能性或情感性目的，不可为装饰而装饰
- **响应性**：即时反馈，减少用户对系统状态的焦虑
- **一致性**：同类型交互保持相同反馈模式，建立用户预期
- **可访问性**：动画需考虑 `prefers-reduced-motion`，不影响屏幕阅读器

## 分类

| 类型 | 示例 | 目的 |
|------|------|------|
| 状态反馈 | 按钮悬停、点击效果 | 确认操作被接收 |
| 数据验证 | 表单实时验证成功/失败 | 引导正确输入 |
| 系统状态 | 加载动画、空状态 | 减少等待焦虑 |
| 进度指示 | 上传进度、完成庆祝 | 维持用户动机 |

## 应用场景

- [[design-whimsy-injector]] 在按钮、表单、进度条等关键触点嵌入微交互，提升品牌趣味性同时保持功能性
- [[design-ux-architect]] 提供 CSS 框架层面的微交互系统设计规范

## 相关概念

- [[Brand-Personality-Framework]]：微交互是品牌个性在交互层的具体表达载体
- [[Gamification]]：成就庆祝等游戏化元素本身也是一种微交互
- [[Inclusive-Delight]]：包容性要求微交互需支持 reduced-motion 模式