构建愉悦的用户体验

当我们谈论"愉悦感"时，微交互扮演着关键角色。一个精心设计的按钮动画，一个流畅的页面过渡，都能让用户感受到产品背后的用心。

为什么微交互重要？

微交互是那些几乎不被注意到的小细节，但它们的缺失却会让整个体验感觉"缺了点什么"。

考虑以下场景：

按钮点击：按下时有轻微的缩放反馈
表单提交：成功时有愉悦的动画确认
页面切换：平滑的淡入淡出而不是生硬的跳转
加载状态：有趣的骨架屏而不是空白页面

第一个例子：弹性按钮

让我们从一个简单但有效的例子开始 - 一个具有弹性效果的按钮：

1import { motion } from 'framer-motion';2 3export function SpringButton({ children, onClick }) {4return (5  <motion.button6    whileHover={{ scale: 1.05 }}7    whileTap={{ scale: 0.95 }}8    transition={{ type: 'spring', stiffness: 400, damping: 17 }}9    onClick={onClick}10  >11    {children}12  </motion.button>13);14}

关键点在于 transition 配置。使用 spring 类型可以创建自然的物理感觉，而 stiffness 和 damping 参数控制弹性的强度。

性能考虑

动画虽好，但性能更重要。以下是一些关键原则：

只动画 transform 和 opacity

1/* ✅ 好：使用 transform */2.animated-element {3  transform: translateY(-4px) scale(1.02);4  transition: transform 0.2s ease;5}6 7/* ❌ 避免：动画 layout 属性 */8.bad-animation {9  margin-top: 10px; /* 触发 layout */10  height: 200px; /* 触发 layout */11}

尊重用户偏好

始终检查 prefers-reduced-motion 媒体查询：

1import { useEffect, useState } from 'react';2 3export function useReducedMotion() {4const [reducedMotion, setReducedMotion] = useState(false);5 6useEffect(() => {7  const query = window.matchMedia('(prefers-reduced-motion: reduce)');8  setReducedMotion(query.matches);9  10  const handler = (e) => setReducedMotion(e.matches);11  query.addEventListener('change', handler);12  return () => query.removeEventListener('change', handler);13}, []);14 15return reducedMotion;16}

总结

创建愉悦的用户体验不需要复杂的动画库或花哨的特效。关键在于：

细节：关注那些微小但重要的交互
物理感：使用弹簧动画创造自然的感觉
性能：只动画 transform 和 opacity
包容性：尊重用户的动画偏好

希望这篇文章能帮助你在下一个项目中创建更加愉悦的用户体验！