27 lines
783 B
Markdown
27 lines
783 B
Markdown
---
|
|
title: "Micro-Interaction"
|
|
type: concept
|
|
tags: []
|
|
---
|
|
|
|
## Definition
|
|
微交互设计是指在用户与界面交互时产生的细小、专注的交互瞬间，通过视觉反馈、动画效果提升用户体验。
|
|
|
|
## Examples
|
|
- **按钮悬停效果**：光晕扫过、轻微上浮、阴影加深
|
|
- **表单验证庆祝**：成功时显示 ✨ 闪烁动画
|
|
- **加载动画**：带有个性的跳动圆点动画
|
|
- **进度庆祝**：任务完成时显示 🎉 庆祝动画
|
|
|
|
## Design Principles
|
|
- 使用 cubic-bezier 缓动函数实现流畅动画
|
|
- 保持动画时长在 0.3-0.5s 范围
|
|
- 动画应服务于功能反馈而非纯粹装饰
|
|
- 需支持 reduced-motion 偏好设置
|
|
|
|
## Related Concepts
|
|
- [[Whimsy Taxonomy]]
|
|
- [[Easter Egg]]
|
|
|
|
## Sources
|
|
- [[design-whimsy-injector]] |