mcpField
I
interaction-design

interaction-design

github.com/aj-geddes设计与 UI374507 次安装34 周前更新
代码仓库

关于 interaction-design

用于规划用户流程、反馈、动画和无障碍界面行为的交互设计技能，附有动画、错误处理和无障碍参考指南。

主要功能

  1. 01用户流程与触点设计
  2. 02动画与转场指导
  3. 03错误与加载状态
  4. 04微交互模式
  5. 05无障碍建议

适用场景

  1. 01设计移动端交互模式
  2. 02改善易用性与反馈
  3. 03规划可撤销的动画
  4. 04测试键盘与屏幕阅读器访问

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill interaction-design

安装后在 Claude Code 中输入/interaction-design确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
accessibility-in-interactions.md
animation-transition-design.md
error-handling-feedback.md
templates/
component-template.tsx

详细介绍

交互设计

目录

概述

交互设计关注用户如何与系统互动，通过反馈和响应能力打造直观、愉悦的体验。

适用场景

  • 设计用户流程和接触点
  • 创建动画和过渡效果
  • 定义错误和加载状态
  • 构建微交互
  • 提升易用性并提供反馈
  • 移动端交互模式

快速开始

最简可用示例：

Common Interaction Patterns:

Swipe:
  Use: Mobile lists, carousels
  Feedback: Visual sliding, momentum
  Accessibility: Keyboard alternative (arrows)

Tap & Hold:
  Use: Context menus, drag prep
  Feedback: Visual feedback after delay
  Duration: ~500ms before trigger

Pinch & Zoom:
  Use: Image viewing, maps
  Feedback: Smooth zoom animation
  Boundaries: Set min/max zoom levels

Drag & Drop:
  Use: Reordering, moving items
  Feedback: Visual during drag, drop confirmation
  Fallback: Alternative method (buttons)

Double Tap:
  Use: Zoom, favorite, select
  Feedback: Immediate visual response
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南内容
动画与过渡设计动画与过渡设计
错误处理与反馈错误处理与反馈
交互中的无障碍设计交互中的无障碍设计

最佳实践

✅ 应该做
  • 将动画时长控制在 400ms 以内
  • 提供清晰的视觉反馈
  • 使用动画引导注意力
  • 尊重用户的动态效果偏好
  • 确保交互可撤销
  • 使用键盘和屏幕阅读器进行测试
  • 提供多种交互方式
  • 兼顾触控和鼠标操作
  • 使用恰当的缓动曲线
  • 记录交互行为
❌ 不应该做
  • 仅为装饰而添加动画
  • 使用超过 500ms 的动画
  • 忽视对动态效果敏感的用户
  • 移除焦点指示器
  • 将用户困在模态框中
  • 使用令人困惑的动画
  • 为所有内容添加动画
  • 忽视加载状态
  • 忘记错误状态
  • 跳过无障碍测试

评论

支持 Markdown