50 lines
1.9 KiB
Markdown
50 lines
1.9 KiB
Markdown
---
|
||
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 模式
|