Auto-sync: 2026-04-21 17:12
This commit is contained in:
@@ -1,27 +0,0 @@
|
||||
---
|
||||
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]]
|
||||
Reference in New Issue
Block a user