微互動：15 個範例以及如何設計它們
微互動解釋：定義、Dan Saffer 的四個部分、按類型分組的 15 個真實範例、設計規則以及如何在 CSS、Framer Motion、GSAP 或 ExodeUI 中建構它們。
核心要點
微互動是介面中一個小的、包含的時刻，它執行一件事：喜歡貼文、切換設定、確認表單或完成手勢。這個術語及其剖析來自 Dan Saffer，他定義了四個部分。觸發器啟動它，規則決定發生什麼，回饋顯示結果，循環或模式控制它隨著時間的推移所做的事情。好的微互動是短暫的，回應使用者自己的輸入，並且保持可中斷。
什麼是微交互？
微互動是產品中最小的完整互動：具有開始、變化和結束的單一任務。這不是一個完整的流程。讚貼文是一種微互動；撰寫和發布評論是一個流程。這個想法及其結構來自 Dan Saffer 的書《微互動》，將每一部分分為四個部分。
微交互的四個部分
Dan Saffer 的框架將微互動分為四個部分。給它們命名很有用，因為大多數錯誤和最糟糕的運動都存在於四個之一中，而不是整體中。
扳機
啟動它的事件。使用者啟動（點擊、懸停、長按、拖曳）或系統啟動（下載完成、網路錯誤到達）。圖片來源：丹·薩弗。
規則
啟動後會發生什麼：有效狀態、拖曳邊界或最小值和最大值等限制以及事件順序。圖片來源：丹·薩弗。
回饋
產品如何告訴使用者發生了什麼事：彈簧穩定、顏色變化、圖示變形、文字更新。這是大部分動作設計的所在。圖片來源：丹·薩弗。
循環和模式
隨著時間的推移，互動會發生什麼，以及模式如何改變它。相同的切換在暗模式或緊湊佈局中可以有不同的行為，而無需改變其邏輯。圖片來源：丹·薩弗。
為什麼微互動很重要
微交互是指介面如何在沒有一段文字的情況下回答使用者。它確認已收到操作，表示某些內容仍在工作，或解釋剛剛發生的變更。當它們缺失時，同一個產品會感覺更重：用戶點擊兩次，因為沒有任何資訊告訴他們第一次點擊已落地，或者他們在沒有任何進展跡象的螢幕上等待。好的東西更多的是被感受到而不是被注意到，這就是重點。
15 個微互動範例
這些按其通信內容進行分組。如果 ExodeUI 提供了符合的範例，則會給出名稱，以便您可以開啟並編輯它。
按鈕和開關（按下和狀態）
1. 按鈕按下：指針向下時縮放至約 0.92，釋放時彈回（ExodeUI 範例：果凍按鈕）。 2. 切換開關：基於 spring 的翻譯，提交時顏色變化（Gooey Toggle）。 3. 模式開關：分段控件，可滑動其指示器並改變活動標籤（運動開關）。
表單回饋（驗證和提交）
4. 無效的輸入搖動：一個簡短的水平輕推，在沒有對話方塊的情況下顯示「檢查此欄位」（擺動文字輸入）。 5. 正在提交：該按鈕成為進度指示器，因此使用者永遠不會失去自己的位置（動畫發送按鈕）。 6. 成功確認：動作落地時按鈕上會發出輕微的慶祝聲（火箭發射按鈕）。
載入和進度
7. 循環進度：填滿至實際值並用彈簧（徑向計）固定的環。 8. 電平或活動計：對音頻電平（聲波）等傳入資料進行即時反應的條。
導航
9. 選單切換：在兩種狀態之間變形並顯示選單的圖示（變形導航）。 10. 停靠放大：遊標附近的項目會抬起並放大，然後穩定下來（磁性停靠）。 11.選項卡選擇：在選項卡之間滑動而不是閃爍的指示器（液體選項卡欄）。
空狀態和成功狀態
12. 空狀態：一個小插圖，一次動畫以軟化空白畫面。 13. 獎勵揭曉：當達到一個里程碑時，您會滿懷期待地打開一份禮物或徽章（驚喜禮盒）。
下拉重新整理
14. 拉動刷新：彈性過度滾動，追蹤拖動，然後彈回並在釋放時穩定下來。回饋是拉伸，而不是旋轉。
觸覺式回饋
15. 確認脈衝：元素上的簡短刻度和發光反映了移動設備上的觸覺點擊，因此相同的操作在沒有振動馬達的設備上感覺相同。
保持良好狀態的設計規則
有一些規則可以區分有益的微互動和令人煩惱的微互動。
- 保持簡短：最完整的時間約為 200-400 毫秒；小元素上較長的運動感覺很慢
- 在與輸入相同的幀中開始；延遲開始破壞了因果關係
- 保持可中斷：如果使用者在運動中反轉動作，則以速度重定向而不是從零重新開始
- 尊重喜歡減少運動：提供靜態或交叉淡入淡出後備，仍然傳達變化
- 給它一份工作：如果互動需要多個決策，那麼它就是一個流程
如何建構微交互
正確的工具取決於相同的互動必須在多少個平台上運行。
僅CSS
適合簡單、獨立的情況：懸停升降機、對焦環和由 :checked 或類變更驅動的切換。過渡和 @keyframes 就足夠了，除了樣式表之外沒有任何東西可以傳遞。
Framer Motion 或 GSAP（網路）
當動作需要彈簧、手勢或編排並且只需在網路上運行時，這是很好的選擇。兩者都為您提供可中斷的彈簧，並且可以由 React 狀態驅動。
ExodeUI（來自一個檔案的 Web、iOS 和 Android）
當相同的互動必須在 React 應用程式、SwiftUI 應用程式和 Flutter 中表現相同時，請使用此選項。您可以在 .exode 檔案中編寫一次，然後在運行時在每個平台上播放它，因此沒有針對每個平台的重寫。
生產實施片段
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}要記住的關鍵 Principle
- 微互動是一項小任務，具有觸發器、規則、回饋和循環或模式，這四個部分由 Dan Saffer 命名
- 大多數好的程式在大約 200-400ms 內完成，在與輸入相同的幀中啟動，並且保持可中斷
- 回饋是有效的：它確認操作並解釋發生了什麼變化，通常沒有任何文字
- 始終提供首選減少運動後備，在沒有運動的情況下攜帶相同的訊息