interaction-design

交互设计 (Interaction Design) 技能提供了一套完整的框架，通过有目的的动态设计与精确的反馈来增强数字界面。此技能专为前端开发人员与 UI/UX 工程师设计，旨在通过实现流畅的组件转场、迷人的微交互与清晰的状态沟通，超越静态布局。通过强调“有目的的动态”原则，此技能确保动画能有效确认用户操作、引导视觉焦点，并在用户旅程中维持空间连续性。

• 使用 framer-motion 进行进阶动画编排，包含弹簧物理效果、错落有致的序列动画与布局转场。

• 实作精致的加载状态，包含骨架屏幕 (skeleton screens) 与确定进度指示器，以管理感知的系统性能。

• 建立互动式反馈模式，例如涟漪效应 (ripple effects)、手势互动 (滑动移除、拖放) 与通知消息系统。

• 提供标准化的时间长度准则以确保 UI 的一致性，将转场归类为微反馈 (100-150ms)、小型切换 (200-300ms) 与复杂编排 (500ms+)。

• 现代 CSS 动画技术，包含淡入与脉冲的关键帧定义，并搭配 cubic-bezier 缓动函数以达到专业级的运动曲线。

• 以无障碍 (Accessibility) 为优先的开发方式，确保所有动态皆尊重用户对于“减少动态”的偏好，并确实增强而非干扰可用性。

• 目标用户：专注于网页或移动应用程序精致度的前端开发人员、UI/UX 工程师与产品设计师。

• 典型使用情境包含状态切换动画、复杂页面转场处理、构建手势丰富的仪表板以及优化组件的悬停与聚焦状态。

• 输入要求包含目标 DOM 元素或状态条件；预期输出包含生产环境就绪的 JSX、CSS 模块或 Framer Motion 变量配置。

• 限制条件着重于维持 60fps 的性能，优先使用如 transform 与 opacity 等硬件加速属性，并确保与 React 与 Tailwind CSS 等既有组件架构的无缝整合。