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