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