---
title: "Micro-Interaction Design"
type: concept
tags: [ui-design, animation, user-experience, interaction-design]
sources: [design-whimsy-injector]
last_updated: 2026-05-15
---

# Micro-Interaction Design

## Definition

微交互设计（Micro-Interaction Design）通过小规模、有针对性的动画和状态反馈，提升用户参与度，同时不影响性能。核心要素：触发（Trigger）、规则（Rules）、反馈（Feedback）、循环（Loops）。

## Key Elements

- **按钮悬停效果**：光扫动画 + 微妙缩放
- **表单验证反馈**：即时状态变化 + 成功动画（如 ✨ 闪烁）
- **加载动画**：弹跳点动画、进度条动画
- **彩蛋触发区域**：交互探索奖励
- **进度庆祝**：完成节点的表情符号动画

## Design Principles

- 每个微交互服务于功能或情感目的
- 性能优化：轻量 CSS 动画，不影响页面速度
- 包容性：无障碍支持，减少动画偏好用户选项

## Implementation

通过 CSS Keyframes 实现，示例技术：
- `cubic-bezier` 缓动函数
- `transition` 状态变化
- `@keyframes` 自定义动画序列

## Related Concepts

- [[Gamification]]：微交互可作为游戏化的组成元素
- [[Inclusive-Delight-Design]]：微交互需遵循包容性设计原则

## Source

- [[Whimsy-Injector]] — 微交互设计系统核心交付物