interaction-design

互動設計 (Interaction Design) 技能提供了一套完整的框架，透過有目的的動態設計與精確的反饋來增強數位介面。此技能專為前端開發人員與 UI/UX 工程師設計，旨在透過實現流暢的組件轉場、迷人的微互動與清晰的狀態溝通，超越靜態佈局。透過強調「有目的的動態」原則，此技能確保動畫能有效確認用戶操作、引導視覺焦點，並在用戶旅程中維持空間連續性。

• 使用 framer-motion 進行進階動畫編排，包含彈簧物理效果、錯落有致的序列動畫與佈局轉場。

• 實作精緻的載入狀態，包含骨架螢幕 (skeleton screens) 與確定進度指示器，以管理感知的系統效能。

• 建立互動式反饋模式，例如漣漪效應 (ripple effects)、手勢互動 (滑動移除、拖放) 與通知訊息系統。

• 提供標準化的時間長度準則以確保 UI 的一致性，將轉場歸類為微反饋 (100-150ms)、小型切換 (200-300ms) 與複雜編排 (500ms+)。

• 現代 CSS 動畫技術，包含淡入與脈衝的關鍵影格定義，並搭配 cubic-bezier 緩動函數以達到專業級的運動曲線。

• 以無障礙 (Accessibility) 為優先的開發方式，確保所有動態皆尊重用戶對於「減少動態」的偏好，並確實增強而非干擾可用性。

• 目標用戶：專注於網頁或行動應用程式精緻度的前端開發人員、UI/UX 工程師與產品設計師。

• 典型使用情境包含狀態切換動畫、複雜頁面轉場處理、建構手勢豐富的儀表板以及優化組件的懸停與聚焦狀態。

• 輸入要求包含目標 DOM 元素或狀態條件；預期輸出包含生產環境就緒的 JSX、CSS 模組或 Framer Motion 變數配置。

• 限制條件著重於維持 60fps 的效能，優先使用如 transform 與 opacity 等硬體加速屬性，並確保與 React 與 Tailwind CSS 等既有組件架構的無縫整合。