Interaction Design

作者 secondsky88378361314fMIT227 个星标收录于 2026年10月8日更新于 2026年10月8日仓库10天前更新

Creates intuitive user experiences through feedback patterns, microinteractions, and accessible interaction design. Use when designing loading states, error handling UX, animation guidelines, or touch interactions.

仅含说明Design & Creative

AI 生成的概览

为界面中的加载、错误、空状态、动画与无障碍交互状态提供设计指导与代码模式。

功能: 提供用户界面的交互设计指导，涵盖反馈模式、微交互与无障碍设计。它给出微交互、转场与入场动画的时长参考表，并提供骨架屏加载、错误状态、空状态以及屏幕阅读器状态播报的 CSS 与 JSX 示例代码。它还列出动画准则与最佳实践，例如尊重减少动态效果偏好并支持键盘导航。
适用场景: 适用于设计加载状态、错误处理体验、动画准则或触控交互时。适合为网页或应用界面定义交互模式与反馈行为的团队。也适合用于检查动效与状态变化是否保持无障碍。
运行要求: 无需脚本或工具，仅为说明性内容。示例涉及 CSS、JSX/React 以及 matchMedia 等浏览器 API，但无需安装或运行任何东西。

Interaction Design

Create intuitive user experiences through thoughtful feedback and interaction patterns.

Interaction Patterns

Loading States

css

/* 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; }}

/* 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; }}

jsx

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

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

Error States

jsx

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 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>  );}

Empty States

jsx

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>  );}

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>  );}

Accessibility

jsx

// Announce state changes to screen readersfunction StatusAnnouncer({ message }) {  return (    <div aria-live="polite" aria-atomic="true" className="sr-only">      {message}    </div>  );}
// Respect motion preferencesconst prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Announce state changes to screen readersfunction StatusAnnouncer({ message }) {  return (    <div aria-live="polite" aria-atomic="true" className="sr-only">      {message}    </div>  );}
// Respect motion preferencesconst prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

Animation Guidelines

Keep animations under 500ms (longer feels sluggish)
Use ease-out for entering, ease-in for exiting
Respect prefers-reduced-motion
Ensure focus indicators are always visible
Test with keyboard navigation

Best Practices

Provide immediate feedback for all actions
Show loading states for waits >0.5s
Include clear error messages with recovery options
Design meaningful empty states
Support keyboard navigation

来源与署名

来源：secondsky/claude-skills位于plugins/interaction-design/skills/interaction-design提交8837836

许可证： MIT

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Pattern	Duration	Use Case
Microinteraction	100-200ms	Button press, toggle
Transition	200-400ms	Page change, modal
Entrance	300-500ms	List items appearing

Interaction Design

Interaction Design

Interaction Patterns

Loading States

Error States

Empty States

Accessibility

Animation Guidelines

Best Practices

来源与署名

更多来自 secondsky/claude-skills 的技能

Vulnerability Scanning

Web Performance Optimization

Web Performance Audit

Threejs

Tailwind V4 Shadcn

Technical Specification

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design