微互動（microinteractions）是介面裡那些「一次只做一件事」的小片刻：切換開關、按讚時愛心跳一下、密碼欄位即時提示強度、下拉重新整理的彈性回饋。它們單獨看微不足道，但使用者每天觸發數十次，累積起來決定了產品「順不順手」的體感。Dan Saffer 在《Microinteractions》裡把它拆成四個零件，讓這種直覺變成可以刻意設計的東西。
多數團隊把力氣花在大流程（結帳、註冊、上傳），卻讓微互動自由發揮，結果動效炫技、時長過久、狀態交代不清。真正的功力在於：每個微互動都要有明確目的（確認、狀態、引導擇一），控制在 100–400 毫秒，並且在整個產品裡行為一致。這篇整理 Saffer 的四零件模型、時長與回饋的實務數字，以及無障礙的底線。
📖 學（核心）
微互動的四個零件：觸發、規則、回饋、循環與模式
Saffer 把每個微互動拆成四塊。**觸發（Trigger）**啟動整段互動，可以是使用者主動（點按鈕、滑動）或系統發起（收到通知、電量過低）。**規則（Rules）**定義觸發後會發生什麼、有哪些條件與限制，是設計師花最多心力卻最隱形的部分——例如「按讚只能按一次」「表單未填完不能送出」。**回饋（Feedback）**是規則的外顯：把「系統正在做什麼」翻譯成使用者看得懂的視覺、聲音或觸覺訊號。**循環與模式（Loops & Modes）**決定這段互動維持多久、是否重複，以及在特殊模式下（如勿擾、離線）行為如何改變。設計微互動時逐一檢查這四塊，就不會漏掉「按了沒反應」「送出後不知道成不成功」這類破口。
回饋只做「必要的最少量」，並綁定真實狀態
回饋的原則是「用最少的訊號傳達最多的意義」。Saffer 提醒：不要為了給回饋而給回饋，而是善用互動本來就會產生的訊號。一個切換開關，滑塊移動＋顏色變化本身就是回饋，不需要再彈 toast 說「已開啟」。更關鍵的是回饋必須反映真實狀態，而非樂觀假設：按讚後若後端還沒成功就先顯示已讚，一旦失敗使用者會困惑。實務上把回饋分三種時機——即時（hover、聚焦）、過程中（載入、進度）、完成後（成功打勾、錯誤晃動）。錯誤回饋尤其要具體：欄位變紅還不夠，要說明「密碼需至少 8 碼」。回饋的載體也要對應情境：安靜環境用視覺、手機口袋裡用觸覺震動、無法看螢幕時用聲音。
時長與節奏：把動效控制在感知甜蜜點
微互動的動效時長有明確區間：一般落在 100–400 毫秒。低於 100ms 使用者幾乎感知不到，失去「有反應」的確認感；高於 400ms 就開始覺得拖沓、擋路。小元素（按鈕、開關）用短時長 100–200ms，大範圍位移（面板滑入、頁面轉場）可到 300–400ms，因為移動距離長、需要多一點時間讓眼睛跟上。搭配 ease-out 緩動曲線（快進慢出）最符合物理直覺，讓元素像有重量般自然停下，避免死板的線性動畫。節奏一致也很重要：同一產品裡同類互動用同一組時長與曲線，抽成設計 token 管理，使用者才會建立可預期的肌肉記憶，而不是每個頁面各彈各的。
🧠 記
- 微互動＝觸發 + 規則 + 回饋 + 循環與模式，設計時逐一檢查四塊，破口通常出在「規則沒想周全」或「回饋缺完成態」。
- 每個微互動只能有一個目的：確認、傳達狀態、或引導下一步，三者擇一，貪多就變裝飾。
- 動效時長甜蜜點 100–400ms；小元素偏短、大位移偏長，超過 400ms 開始惹人厭。
- 緩動用 ease-out（快進慢出）最自然；避免線性，也少用會回彈過頭的誇張彈簧效果。
- 回饋要綁真實狀態，別做樂觀假設；成功、進行中、失敗三態都要有明確且具體的訊號。
- 一致性靠 token：把時長、曲線、位移距離抽成變數統一管理，同類互動全站一致。
- 無障礙底線：尊重
prefers-reduced-motion，關鍵資訊不能只靠動效傳達，且要相容螢幕報讀器。
✍️ 實踐
- 挑產品裡一個現有微互動（例如按讚或開關），用四零件模型逐項寫下它的觸發、規則、回饋、循環與模式，找出哪一塊被省略了。
- 稽核全站動效時長：把明顯超過 400ms 或短到沒感覺（低於 100ms）的互動列出來，統一調整到區間內並改用 ease-out。
- 為每個關鍵動作補齊三態回饋——進行中（載入指示）、成功（明確確認）、失敗（具體錯誤訊息），別讓使用者按了之後盯著沒反應的畫面。
- 把時長、緩動曲線、位移距離抽成設計 token（如
motion-duration-fast: 150ms），讓工程與設計共用同一組值。 - 加上
@media (prefers-reduced-motion: reduce)的降級版本，把非必要動效關掉或改成瞬間切換，並確認關掉動效後資訊仍完整可讀。
🔗 延伸學習
- Microinteractions in User Experience — Nielsen Norman Group
- The 4 Components of a Microinteraction — Prototypr（Saffer 框架拆解）
- The Role of Micro-interactions in Modern UX — Interaction Design Foundation
- Microinteractions: Designing with Details — Dan Saffer（原著）
💬 問 AI
我正在設計｛請填入產品／功能，例如「待辦清單 App 的完成打勾」｝的微互動。
請用 Dan Saffer 的四零件模型（觸發 / 規則 / 回饋 / 循環與模式）幫我逐項檢查，
並針對｛請填入平台，例如 iOS / Web｝建議合適的動效時長（ms）與緩動曲線。
另外請提醒我在 prefers-reduced-motion 情境下該如何降級。