微互動
一句話定義
微互動是使用者觸發某個任務或功能時，介面給出的細小互動體驗；它用即時、清楚且適量的回饋，讓使用者知道系統有收到操作、正在做什麼，以及下一步是否成功。
核心要點
微互動是功能回饋，不是裝飾動畫
2026-05-07-SocialMORE-UIUX設計入門-Part01 將微互動定義為「使用者在觸發某個任務 / 功能時產生的互動體驗」。它的價值不是讓畫面比較炫，而是：
- 幫助使用者流暢使用功能。
- 透過人性化的即時回饋，讓使用者知道該做什麼。
- 告訴使用者操作是否正確、是否完成、是否仍在進行。
若動畫讓人分心、拖慢操作或遮蔽資訊，它就不是好的微互動。
四元素：Trigger / Rules / Feedback / Loops and Modes
| 元素 | 意義 | 問題 |
|---|---|---|
| Trigger 觸發器 | 互動如何開始 | 是使用者點擊 / 拖曳，還是系統自動偵測？ |
| Rules 規則 | 觸發後發生什麼 | 點讚數 +1？圖片放大？檔案開始上傳？ |
| Feedback 回饋 | 系統如何回應使用者 | 動畫、文字、聲音、震動或進度提示是否清楚適量？ |
| Loops and Modes 循環與模式 | 互動如何重複、持續或變化 | 每天推薦、定期提醒、上傳進度、切換模式如何運作？ |
這四元素讓微互動可以被設計，而不是靠感覺加動畫。
兩種觸發：使用者觸發與系統觸發
- 使用者觸發：例如在 Instagram 雙擊相片送愛心、捏合照片放大、按 + / - 調整數量。
- 系統觸發：例如偵測到新留言後自動通知、檔案開始上傳後顯示進度。
兩者都需要清楚回饋。尤其系統觸發時，使用者未必知道發生了什麼，更需要避免突然、模糊或干擾性的反應。
回饋要清晰且適量
socialMORE 特別提醒：所有回饋都應清晰及適量，否則會打擾使用者、影響體驗。
可用檢核：
- 使用者能否立刻理解目前狀態？
- 回饋是否和操作有明確因果關係？
- 動效長度是否比任務本身更搶戲？
- 是否有替代通道給減少動態效果或使用 screen reader 的使用者？
Prototype 與交付中的微互動
2026-05-07-SocialMORE-UIUX設計入門-Part02 用 Figma Smart Animate 示範滑動互動。這類高保真原型的價值在於：
- 讓團隊與開發者理解設計師腦中的互動節奏。
- 測試滑動、轉場、狀態變化是否符合預期。
- 用分享連結或錄影降低跨團隊溝通成本。
但 prototype 的精緻程度不等於使用者驗證品質。若目標是驗證概念，仍需回到 Prototype 的「單一假設 → 單一原型」紀律。
與其他概念的關係
- 使用者介面設計 — 微互動是 UI 裡的操作回饋層；讓介面不只是可看，也可被感知。
- 使用者體驗設計 — 微互動會影響操作性與情感性體驗；是 UX 被感受到的細節。
- 介面狀態設計 — loading、empty、error、success 等狀態都需要微互動或回饋訊號。
- Prototype — 微互動常透過 prototype 呈現，尤其在 Figma Smart Animate、錄影或可點擊原型中。
- UX文案 — 動畫回饋常需搭配短文案；例如完成、失敗、等待、重試。
- 情緒價值 — 微互動可以安撫、鼓勵或給予完成感，但不應用可愛感掩蓋功能問題。
- 費茲法則 / 希克法則 — 微互動應降低操作與決策摩擦，而不是增加需要點擊或選擇的負擔。
- 無障礙設計 — 動效需要考慮減少動態、替代文字、非動畫提示與多通道回饋。
相關來源
- 2026-05-07-SocialMORE-UIUX設計入門-Part01 — 微互動定義、四元素與 IG / upload / Medium 等例子。
- 2026-05-07-SocialMORE-UIUX設計入門-Part02 — Figma Smart Animate、UMAMI LAND 與 UI Movement 案例，把微互動從理論推到工具與案例。
備註
UI 動效先作為本頁 alias；若未來累積 motion design、easing、12 principles of animation、Reduce Motion 等專門來源，可再評估是否拆出「動效設計」。