# Interaction Design

> 当需要设计交互细节（动效、过渡、反馈、加载状态）并提升体验时使用。

- Skill: `sunflowermm/interaction-design` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add sunflowermm/interaction-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sunflowermm/interaction-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: sunflowermm (https://skillmd.com/u/sunflowermm)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sunflowermm/interaction-design

---


## 权威入口

- ` .cursor/skills/interaction-design/references/microinteraction-patterns.md `
- ` .cursor/skills/interaction-design/references/animation-libraries.md `
- ` .cursor/skills/interaction-design/references/scroll-animations.md `

## 适用场景

- 需要增强交互反馈与操作确定性。
- 需要统一动效时长、节奏与状态切换。
- 需要优化加载、提交、错误恢复体验。

## 非适用场景

- 不用于替代业务逻辑与接口容错设计。
- 不为了“炫技”加入无意义动画。

## 执行步骤

1. 标注关键状态：默认、悬停、激活、加载、成功、失败。
2. 设计最小有效反馈：优先可感知和可理解。
3. 统一时长与缓动，并考虑低性能设备。
4. 增加 `prefers-reduced-motion` 兜底方案。
5. 验证交互连续性：不中断主任务流。

## 常见陷阱

- 动画过长导致响应“变慢”。
- 只做进入动画，不处理退出与中断状态。
- 忽略减弱动画偏好与可访问性要求。