Back to Details

interaction-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Interaction Design

交互设计

Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions.
通过动效、反馈和周密的状态转场，创建生动且直观的交互体验。

Project Conventions

项目约定

  • Preferred library: Framer Motion for React component animations
  • CSS animations: Use 
    transform
    and 
    opacity
    only for 60fps performance
  • Spring physics: Prefer spring animations over linear/eased for interactive elements
  • Interruptible: Users must be able to cancel or override any animation
  • 首选库： 使用 Framer Motion 为 React 组件添加动画
  • CSS 动画： 仅使用 
    transform
    和 
    opacity
    ，以保持 60fps 性能
  • 弹簧物理： 交互元素优先使用弹簧动画，而非线性动画或缓动动画
  • 可中断： 用户必须能够取消或覆盖任何动画

Timing Scale

时间尺度

DurationUse Case
100-150msMicro-feedback (hovers, clicks)
200-300msSmall transitions (toggles, dropdowns)
300-500msMedium transitions (modals, page changes)
500ms+Complex choreographed animations
时长使用场景
100-150ms微反馈（悬停、点击）
200-300ms小型转场（开关、下拉菜单）
300-500ms中型转场（模态框、页面切换）
500ms 以上复杂的编排动画

Accessibility

无障碍

Always respect 
prefers-reduced-motion: reduce
. Set animation duration to 0 when the user prefers reduced motion. This is non-negotiable.
始终遵循 
prefers-reduced-motion: reduce
。当用户偏好减少动态效果时，将动画时长设置为 0。这是不可妥协的要求。

Reference Files

参考文件

Read these on demand based on the task:
FileWhen to read
animation-libraries.mdChoosing or configuring Framer Motion, GSAP, or CSS-based approaches
microinteraction-patterns.mdBuilding button feedback, toggles, ripples, loading indicators, toasts
scroll-animations.mdImplementing scroll-triggered reveals, parallax, or intersection-based animations
根据任务需要按需阅读以下文件：
文件阅读时机
animation-libraries.md选择或配置 Framer Motion、GSAP 或基于 CSS 的方案
microinteraction-patterns.md构建按钮反馈、开关、涟漪效果、加载指示器和 toast
scroll-animations.md实现滚动触发的显示效果、视差效果或基于交叉观察器的动画