interaction-design

“交互设计 (Interaction Design)”技能为构建高质量、专业级的用户界面提供了全面的框架。本技能专注于动态设计、用户反馈模式与状态驱动型 UI 逻辑的结合。它旨在协助前端开发者与 UI 工程师填补静态设计与交互流畅应用程序之间的鸿沟，特别是在功能开发的最后阶段，针对用户体验与无障碍功能进行优化时尤为重要。

• 使用 Framer Motion 等现代库实现进阶微交互，创造自然的按钮悬停、点击与手势交互效果。

• 精密的状态转换管理，包含骨架屏 (skeleton screens)、进度指标与平滑的布局变更，确保在异步操作期间维持用户上下文。

• 遵循时间与缓动 (easing) 的最佳实践，通过特定的 cubic-bezier 设置（如 ease-in、ease-out 与弹簧物理效果），确保动态效果具备目的性，而非单纯的装饰。

• 优先考量无障碍开发，包含尊重用户的动态偏好设置 (prefers-reduced-motion)，以及为屏幕阅读器与键盘操作实现标准的焦点与悬停状态。

• CSS 动画架构模式，提供适用于淡入、脉冲与旋转效果的可复用关键帧定义，以及针对 transform 与 box-shadow 的高性能转换策略。

• 在实现加载状态、提示通知 (toast notifications)、拖放界面或复杂的页面转场时使用此技能。

• 此技能的输入包含 UI 组件规格、设计系统与交互需求；输出则为干净、高效的 React、CSS 与 TypeScript 代码。

• 请遵循核心时序准则：微反馈为 100-150ms，UI 切换为 200-300ms，模态框或视图层级转场为 300-500ms。

• 永远优先考虑感知性能；使用骨架屏保持布局稳定，并对用户的输入提供即时的视觉确认，以降低感知延迟。

• 确保所有动态效果维持连续性—用户应始终明确了解新元素从何处出现以及向何处离开。