1.3 KiB
1.3 KiB
title, type, tags, sources, last_updated
| title | type | tags | sources | last_updated | |||||
|---|---|---|---|---|---|---|---|---|---|
| Micro-Interaction Design | concept |
|
|
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 — 微交互设计系统核心交付物