一個產品用起來有沒有質感，常常不是由首頁多華麗決定。
讓人覺得「這個東西很順」的，反而可能是一些幾乎說不出口的小地方：
- 按下按鈕後立刻有回應。
- 表單錯了，訊息就出現在錯的欄位旁邊。
- 資料正在儲存時，不會讓人以為畫面死掉。
- 切換開關後，狀態一眼看得懂。
- 操作完成時，系統給出足夠但不過度的確認。
這些就是微互動。
使用者可能不會特別稱讚「這個回饋做得很好」，但只要少了它，就很容易開始多點一次、返回重做、懷疑有沒有成功，甚至直接離開。
微互動是一個完整的小任務，不只是一段動畫
很多人把微互動等同滑過效果、彈跳、漸變與轉場。
動畫只是可能使用的回饋方式之一。
Dan Saffer 把一個微互動拆成四個部分：
- 觸發（Trigger）：什麼事情啟動這個互動？
- 規則（Rules）：啟動後，系統應該怎麼運作？
- 回饋（Feedback）：使用者怎麼知道現在發生什麼？
- 迴圈與模式（Loops & Modes）：這個互動長期會不會改變？有沒有特殊模式？
只做動畫，卻沒有處理規則與狀態，反而可能讓介面更混亂。
第一部分：觸發（Trigger）要讓人知道「這裡可以做事」
觸發可以由人主動開始，也可以由系統自己發生。
手動觸發常見於按鈕、開關、滑動、拖曳與輸入欄位；系統觸發則可能來自時間到了、收到新資料、網路中斷、付款完成或發生錯誤。
觸發的第一個責任，是讓使用者知道它存在。
如果某個功能只能靠隱藏手勢啟動，又沒有任何視覺提示，新使用者很可能永遠不知道它可以用。
按鈕至少要有幾種狀態，而不是永遠長一樣
一個「送出」按鈕，最少就可能遇到預設、滑過、鍵盤焦點、按下、不可使用、處理中與完成等狀態。
如果使用者按下後，按鈕完全沒有變化，他第一個反應常常是再按一次。
這可能造成重複送出、重複付款或多筆請求。
所以一個很小的「處理中……」狀態，背後其實同時在解決理解與操作風險。
先做 State Matrix，才不會只設計「漂亮的正常狀態」
設計元件時，可以先做一張狀態矩陣（State Matrix），逐一確認：
| 狀態 | 要回答的問題 |
|---|---|
| 預設 | 看得出能不能操作嗎？ |
| Hover／Focus | 滑鼠與鍵盤使用者都看得出目前位置嗎？ |
| Active | 按下去有沒有立即反應？ |
| Loading | 處理期間會不會重複觸發？ |
| Success | 完成後使用者知不知道成功？ |
| Error | 錯在哪裡、怎麼修？ |
| Disabled | 為什麼不能用？何時才會可用？ |
這張表很簡單，卻能抓出大量「Demo 看不出來、正式使用一定會遇到」的缺口。
同一個元件也要跨裝置驗收。桌機上的滑過狀態，在手機觸控上可能根本不存在；鍵盤使用者則需要清楚的焦點提示。微互動不能只在設計稿裡成立，還要在實際輸入方式裡成立。
第二部分：規則（Rules）決定互動到底怎麼運作
規則是使用者看不到、卻會慢慢學會的部分。
例如：
- 密碼至少幾個字。
- 同一個按鈕能不能連按。
- 刪除後可不可以復原。
- 超過字數後是阻止輸入，還是提示錯誤。
- 資料沒存完就離開時要怎麼處理。
好的規則應該穩定、可預測，而且盡量符合使用者已經熟悉的操作習慣。
規則要先處理 Edge Cases，不要只看正常流程
產品 Demo 很容易只展示正常流程。
但微互動的品質，常常是在欄位空白、字數達上限、網路很慢、重複觸發、中途取消與資料不存在時被看見。
如果這些情況沒有規則，系統就會在最需要給指引時突然失去反應。
破壞性操作：不是每次都跳確認視窗
刪除資料、取消訂單、移除帳號等高風險操作需要防呆，但「每次都問你確定嗎？」也會產生另一個問題：使用者看久了會習慣直接按確定。
可以先判斷操作能不能安全復原。
如果可以復原，很多情況更適合先完成動作，再提供短時間的「復原（Undo）」；如果不可逆、影響重大，才提高確認強度，甚至要求重新輸入關鍵資訊。
防呆要讓錯誤的代價和保護程度相稱，不需要讓每一個操作都多一步。
第三部分：回饋（Feedback）是在回答「現在到底怎麼了？」
使用者按下一個東西之後，會立刻期待系統回應。
回饋可以透過顏色、文字、圖示、位置變化、動畫、聲音與震動傳達。
但回饋不是越多越好。
一個小動作不需要同時跳通知、震動、播放音效、灑彩帶。
最好的原則是：用最小、最清楚的方式，讓使用者知道事情有發生。
回饋大小，要和事件的重要程度一致
收藏一篇文章，只需要小小的圖示變化；成功完成一筆付款，可以給更明確的完成畫面；刪除重要資料，則應該讓風險與結果足夠醒目。
如果小事情反應很戲劇化，產品會顯得吵；如果大事情幾乎沒反應，使用者又會沒有安全感。
表單驗證最好靠近問題本身
一份長表單送出後，只在最上方顯示「有欄位錯誤」，使用者還得重新往下找哪裡有問題。
比較好的微互動會在錯誤欄位附近直接說明這一欄錯在哪裡、需要什麼格式，以及要怎麼修正。
例如「Email 格式不正確」通常比只顯示紅框更有幫助。
這和Nielsen UX Heuristics：使用者看不懂、找不到、一直犯錯，可以怎麼檢查裡的「系統狀態可見」與「協助辨識、診斷、恢復錯誤」非常接近。
載入狀態的工作，是避免使用者以為系統死掉
只要一個動作不是立刻完成，就要考慮等待期間怎麼呈現。
很短的等待，也許按鈕變成「處理中」就夠；時間較長時，可以提供進度、剩餘步驟、取消方式，或背景處理完成後通知。
重點是誠實。不知道實際進度時，不要做一個假裝「已完成 83%」的進度條。假的精準會讓回饋失去可信度。
空狀態也是微互動，不是「沒有資料就空白」
第一次登入某個系統，沒有任何資料時，空白畫面其實是一個很重要的時刻。
好的空狀態可以回答：這裡原本會出現什麼、為什麼現在是空的，以及下一步可以做什麼。
例如「目前還沒有課程」旁邊直接提供「建立第一門課程」，就比只留一大片白色區域更有方向感。
通知先判斷「值不值得打斷」，再決定要不要推
通知也是系統觸發的微互動，每一則通知都在向使用者借注意力。
如果所有事情都推播，使用者最後最可能做的是把通知全部關掉。
所以通知應該問：如果現在不打斷他，會不會真的造成損失或錯過重要事情？
第四部分：迴圈（Loops）決定互動長期怎麼變
同一個互動，在第一次與第一百次使用時，不一定要完全一樣。
例如新使用者第一次看到某功能，可以顯示一次性提示；熟悉之後，提示應該消失。
這就是漸進式減量（Progressive Reduction）：隨著使用者熟練，把教學與輔助逐步拿掉。
如果老使用者每次登入都還要看同一段新手導覽，原本用來幫忙的東西最後就會變成阻力。
模式（Modes）越少越好，而且現在在哪個模式一定要看得見
模式代表同一個控制，在不同情況下會做不同事情，例如閱讀模式、編輯模式與管理模式。
模式最大的風險，是使用者忘記自己現在在哪一個狀態。
如果同一個點擊在 A 模式是選取，在 B 模式卻變成刪除，錯誤機率就會提高。
所以模式應盡量少，而且目前模式要明顯。
無障礙也要進入微互動設計
不能只靠顏色告訴使用者成功或失敗，因為不同視覺能力的人可能看不出差異；只靠 Hover 顯示資訊，也會讓鍵盤與觸控使用者拿不到同樣提示。
重要狀態最好同時有文字、圖示或語意上的變化，焦點狀態也要清楚。
動畫則要考慮「減少動態效果（Reduced Motion）」偏好。對容易暈動或不喜歡大量動態的人，沒有必要強迫播放位移很大的動畫。
微互動做得有質感，不代表每個人都必須用同一種感官接收。
招牌時刻（Signature Moment）：可以有品牌感，但不要每個地方都演一場
微互動也可以成為產品辨識的一部分，例如某個完成動作、載入畫面或回應方式，久了會形成記憶。
但不是每一個按鈕都需要有獨特動畫。
如果每個地方都想搶注意力，最後就沒有任何地方特別。
比較適合做品牌化的，是高頻、可見、又不會阻礙操作的時刻。
功能先成立，再談愉悅感（Delight）
「有驚喜」很容易被做成設計 KPI。
但如果使用者連表單有沒有送出都不知道，再多可愛動畫也沒有意義。
可以用一個簡單順序檢查：
- 先確定功能真的能完成。
- 再確定狀態清楚。
- 再降低步驟與摩擦。
- 最後才加入品牌個性與愉悅感。
這也和Steve Jobs 怎麼審產品？從「砍掉」開始的設計與產品哲學的觀點一致：完成度不在於表面多華麗，更在於每個實際會發生的狀態都有被設計。
最好的微互動，很多時候根本不需要被注意到
如果一個開關需要教學才能理解，它很可能已經太複雜。
微互動常見的改善方向，很多時候反而是做減法：
- 少一個選項。
- 少一個步驟。
- 設定合理預設值。
- 把常見動作縮成一次操作。
- 只在真的需要時才揭露進階設定。
當使用者不用停下來想，互動才真的變輕。
一個實用的微互動稽核表
| 檢查問題 | 如果答「否」 |
|---|---|
| 觸發點看得出可以操作嗎？ | 補明確控制或提示 |
| 目前狀態看得懂嗎？ | 補預設、處理中、完成、停用等狀態 |
| 規則符合使用者預期嗎？ | 簡化規則或遵循平台慣例 |
| 操作後立刻有回饋嗎？ | 補視覺或文字回應 |
| 回饋大小和事件重要度相符嗎？ | 減少過度動畫或加強重要確認 |
| 錯誤狀態有說怎麼修嗎？ | 補近端、具體的錯誤說明 |
| 熟練使用者還一直被新手提示打擾嗎？ | 加入漸進式減量 |
| 模式是否必要而且清楚？ | 移除或明確標示模式 |
常見問題
微互動就是動畫嗎？
不是。動畫只是回饋的一種方式。完整微互動還包含觸發、規則、回饋，以及長期迴圈與模式。
每個按鈕都需要動畫嗎？
不需要。按下後有清楚狀態變化就可能足夠。動畫應該幫助理解，不是為了讓介面看起來比較忙。
載入多久才需要顯示處理中狀態？
只要使用者可能察覺等待，就應該考慮回饋。非常短的等待可用按鈕狀態變化；時間較長時，再使用進度或更完整的等待資訊。
浮動通知（Toast）是不是越多越安心？
不是。若每個操作都跳浮動通知，反而會造成注意力負擔。能直接在原本元件上呈現狀態時，通常更自然。
微互動和使用者體驗（UX）有什麼差別？
使用者體驗涵蓋整體流程；微互動聚焦在單一小任務。很多整體體驗問題，最後都能追到某個具體狀態或回饋沒有設計完整。
怎麼知道微互動做過頭了？
如果動畫延遲下一步、操作變慢、每件事都在搶注意力，或使用者必須等待效果播完，通常就已經超過功能需要。
微互動的價值，是讓產品在每一個小動作裡都給出清楚答案
一個產品不會因為多一段動畫就突然有質感。
差異就在於：使用者每按一次、輸入一次、等待一次、犯錯一次，系統都能用合適的方式回答他：
「我有收到你的操作。現在正在處理。這是結果。接下來你可以這樣做。」
當觸發、規則、回饋、迴圈與模式都被照顧到，那些看起來很小的互動，才會累積成一個讓人覺得可靠、順手、完整的產品。
參考資料
Dan Saffer：Microinteractions: Designing with Details。