nexus/wiki/concepts/Micro-Interaction.md

title, type, tags, last_updated

title	type	tags	last_updated
Micro-Interaction	concept	ux design interaction	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 模式