interaction-design

「互動設計 (Interaction Design)」技能為構建高品質、專業級的使用者介面提供了全面的框架。本技能專注於動態設計、使用者回饋模式與狀態驅動型 UI 邏輯的結合。它旨在協助前端開發者與 UI 工程師填補靜態設計與互動流暢應用程式之間的鴻溝，特別是在功能開發的最後階段，針對使用者體驗與無障礙功能進行優化時尤為重要。

• 使用 Framer Motion 等現代函式庫實作進階微互動，創造自然的按鈕懸停、點擊與手勢互動效果。

• 精密的狀態轉換管理，包含骨架螢幕 (skeleton screens)、進度指標與平滑的佈局變更，確保在非同步操作期間維持使用者上下文。

• 遵循時間與緩動 (easing) 的最佳實作，透過特定的 cubic-bezier 設定（如 ease-in、ease-out 與彈簧物理效果），確保動態效果具備目的性，而非單純的裝飾。

• 優先考量無障礙開發，包含尊重使用者的動態偏好設定 (prefers-reduced-motion)，以及為螢幕閱讀器與鍵盤操作實作標準的焦點與懸停狀態。

• CSS 動畫架構模式，提供適用於淡入、脈衝與旋轉效果的可重複使用關鍵影格定義，以及針對 transform 與 box-shadow 的高性能轉換策略。

• 在實作載入狀態、提示通知 (toast notifications)、拖放介面或複雜的頁面轉場時使用此技能。

• 此技能的輸入包含 UI 元件規格、設計系統與互動需求；輸出則為乾淨、高效的 React、CSS 與 TypeScript 程式碼。

• 請遵循核心時序準則：微回饋為 100-150ms，UI 切換為 200-300ms，模態框或視圖層級轉場為 300-500ms。

• 永遠優先考慮感知效能；使用骨架螢幕保持佈局穩定，並對使用者的輸入提供即時的視覺確認，以降低感知延遲。

• 確保所有動態效果維持連續性—使用者應始終明確了解新元素從何處出現以及向何處離開。