微交互Micro-interactions
在 50–100ms 内用颜色、位移与形变回应用户：按钮回弹、输入校验、加载骨架、手势反馈。单点改动小，累积起来决定产品的手感。
典型场景表单流程 · 移动应用 · 高频操作工具
编号16
年代2020s Modern
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
在 50–100ms 内用颜色、位移与形变回应用户：按钮回弹、输入校验、加载骨架、手势反馈。单点改动小，累积起来决定产品的手感。
关键词
Small animationsgesture-basedtactile feedbacksubtle animationscontextual interactionsresponsive
效果与动效
Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic
设计系统变量
--micro-animation-duration50-100ms--gesture-responsivetrue--haptic-feedbacktrue--loading-animationsmooth--state-feedbacksuccess+error配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B
辅色 / Secondary
Accent feedback, neutral supporting, clear action indicators
强调色在页面底色上的对比度约 2.3:1，仅适合装饰与大色块，不要用于文字。
适用场景
适合 / Best For
- Mobile apps
- touchscreen UIs
- productivity tools
- user-friendly
- consumer apps
- interactive components
避开 / Do Not Use For
- Desktop-only
- critical performance
- accessibility-first (alternatives needed)
框架兼容
framer-motionreact-spring
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Micro-animations 50-100ms,
- Gesture-responsive,
- Tactile feedback visual/haptic,
- Loading spinners smooth,
- Success/error states clear,
- Hover effects subtle
CSS / 技术关键词
animation: short 50-100ms, transition: hover states, @media (hover: hover) for desktop, :active for press, haptic-feedback CSS/API, loading animation smooth loop
AI 提示词
Design with delightful micro-interactions: small 50-100ms animations, gesture-based responses, tactile feedback, loading spinners, success/error states, subtle hover effects, haptic feedback triggers for mobile. Focus on responsive, contextual interactions.