44 lines
1.3 KiB
Markdown
44 lines
1.3 KiB
Markdown
---
|
||
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]] — 微交互设计系统核心交付物
|