mcpField
I
interaction-design

interaction-design

github.com/secondsky设计与 UI240450 次安装5 周前更新
代码仓库

关于 interaction-design

interaction-design 是一项设计技能，帮助规划清晰的用户反馈和交互模式。内容涵盖加载、错误与空状态、无障碍支持及动画建议，适用于界面设计与开发。

主要功能

  1. 01交互时长建议
  2. 02加载、错误和空状态
  3. 03屏幕阅读器状态播报
  4. 04动画与减少动态效果建议
  5. 05键盘导航和焦点指示

适用场景

  1. 01设计按钮操作反馈
  2. 02处理缓慢或失败的操作
  3. 03制作无障碍界面过渡效果

安装

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

$npx skills add https://github.com/secondsky/claude-skills --skill interaction-design

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

详细介绍

交互设计

通过周到的反馈和交互模式，打造直观的用户体验。

交互模式

模式时长使用场景
微交互100-200ms按钮按下、切换
过渡200-400ms页面切换、模态框
入场300-500ms列表项出现

加载状态

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

function LoadingState({ isLoading, children }) {
  if (isLoading) {
    return <div className="skeleton" style={{ height: 200 }} />;
  }
  return children;
}

错误状态

function ErrorState({ error, onRetry }) {
  return (
    <div className="error-container" role="alert">
      <Icon name="warning" />
      <h3>Something went wrong</h3>
      <p>{error.message}</p>
      <button onClick={onRetry}>Try Again</button>
    </div>
  );
}

空状态

function EmptyState({ title, description, action }) {
  return (
    <div className="empty-state">
      <Illustration name="empty-inbox" />
      <h3>{title}</h3>
      <p>{description}</p>
      {action && <button onClick={action.onClick}>{action.label}</button>}
    </div>
  );
}

无障碍

// Announce state changes to screen readers
function StatusAnnouncer({ message }) {
  return (
    <div aria-live="polite" aria-atomic="true" className="sr-only">
      {message}
    </div>
  );
}

// Respect motion preferences
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

动画指南

  • 将动画时长控制在 500ms 以内（更长会显得迟缓）
  • 入场使用 ease-out，退场使用 ease-in
  • 尊重 prefers-reduced-motion
  • 确保焦点指示器始终可见
  • 使用键盘导航进行测试

最佳实践

  • 为所有操作提供即时反馈
  • 等待时间超过 0.5s 时显示加载状态
  • 提供清晰的错误消息和恢复选项
  • 设计有意义的空状态
  • 支持键盘导航

评论

支持 Markdown