关于 interaction-design
面向 Web 和移动应用交互流程与界面行为的设计技能，涵盖状态处理、反馈、错误恢复、无障碍设计和微交互。
主要功能
- 01梳理加载、空、错误和成功状态
- 02设计反馈与恢复路径
- 03规划手势和输入模式
- 04设计转场与微交互
- 05采用无障碍优先的交互模式
适用场景
- 01设计拖放文件上传流程
- 02为 API 调用添加加载和错误状态
- 03改进表单反馈与验证时机
- 04检查多步骤向导是否清晰
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/interaction-design确认已加载。
附带文件references/state-patterns.md
详细介绍
交互设计
设计自然、反馈明确且能优雅处理所有状态的交互。涵盖 Web 和移动应用的用户流程、微交互、状态转换和界面行为模式。
何时使用此技能
- 为新功能设计交互流程（拖放、向导、模态框）
- 创建加载、空、错误和成功状态
- 改进表单、按钮或导航中的微交互
- 为破坏性操作设计撤销/重做和恢复模式
- 检查多步骤流程中的交互清晰度
- 规划动画和过渡行为
- 设计无障碍交互模式
快速参考
| 任务 | 加载参考 |
|---|---|
| 状态模式和微交互 | skills/interaction-design/references/state-patterns.md |
工作流
- 梳理所有状态：此元素可能处于哪些状态？（加载、空、部分、完整、错误、成功、禁用、离线）
- 设计反馈：用户如何知道自己的操作已成功？
- 处理错误：出现问题时会发生什么？用户如何恢复？
- 考虑边缘情况：数据为空、连接缓慢、部分失败、并发操作。
- 增添愉悦感：哪些微交互可以改善体验，又不会造成干扰？
领域词汇
用户流程、交互模式、微交互、状态转换、反馈循环、错误状态、空状态、加载状态、渐进式披露、手势设计、可供性、触觉反馈、动画时序、骨架屏
指导问题
设计任何交互时，请思考以下问题：
- “这里自然的交互模式是什么？”
- “如何在每一步提供反馈？”
- “遇到错误和边缘情况时会发生什么？”
功能
交互模式
- 自然的手势和输入设计（触控、鼠标、键盘）
- 多模态交互设计
- 语音和对话式 UI 模式
- 无障碍优先的交互设计
状态设计
- 加载状态优化（骨架屏、旋转指示器、进度条）
- 引导用户采取行动的空状态设计
- 错误状态恢复模式
- 成功状态庆祝效果和后续步骤
- 离线状态和同步提示
微交互
- 按钮和输入反馈（悬停、焦点、激活、禁用）
- 表单验证反馈时机
- 进度指示器和完成信号
- 通知和提醒模式
- 过渡和动画设计
流程设计
- 多步骤向导模式
- 渐进式披露的实现
- 模态框和覆盖层交互模式
- 导航和路径指引
- 撤销/重做和恢复模式
交互示例
- “设计拖放文件上传的交互流程”
- “为此 API 调用创建加载和错误状态”
- “改进此表单中的微交互”
- “为破坏性操作设计撤销模式”
- “检查此向导流程的交互清晰度”
评论
支持 Markdown