為什麼微互動很重要？
想象一下：
你按下一個按鈕，什麼反饋都沒有。頁面沒動靜。你不確定有沒有按到，再按一次，結果送出了兩次表單。
再想象另一種情況：
你按下同一個按鈕，按鈕顏色輕微變深（表示被按了），然後出現一個轉圈圈動畫（告訴你「正在處理」），最後出現一個勾勾和「送出成功！」的訊息。
第二個版本，你完全不需要猜測發生了什麼。你感覺到這個系統在「回應你」。
這就是微互動（Micro-interactions）的本質：用小小的動態反饋，建立使用者和介面之間的溝通感。
微互動的 4 個組成要素
觸發器（Trigger）： 什麼動作啟動了這個互動？
例：按下按鈕、鼠標懸停（Hover）、表單填寫完成
規則（Rules）： 觸發後會發生什麼？
例：按鈕顏色變化、動畫播放、訊息顯示
反饋（Feedback）： 讓使用者知道發生了什麼
例：視覺動畫、文字提示、震動（手機）
循環和模式（Loops & Modes）： 互動結束後怎辦？是否重複？
例：成功後 2 秒恢復原狀、錯誤了閃紅色提示
常見的微互動應用場景
按鈕互動狀態
一個設計完整的按鈕有 5 個狀態：
Default：一般狀態
Hover：鼠標移入，顏色略變
Active：按下去的瞬間，有輕微「凹陷感」
Loading：等待中，按鈕變灰 + 轉圈動畫
Success / Error：操作結果
很多台灣網站的按鈕只有 Default 狀態，缺少其他反饋，使用體驗是有缺陷的。
表單驗證的即時反饋
壞的方式： 使用者填完整個表單按送出，才統一跳出錯誤訊息
好的方式： 每個欄位失去焦點（使用者移到下一欄）時，立即驗證並給出反饋——格式正確顯示綠色勾勾，格式錯誤立刻顯示錯誤說明
即時反饋讓修正的成本更低，使用者不需要回頭重新找哪裡填錯了。
載入狀態
頁面或資料在載入時，不應該讓使用者面對空白：
骨架螢幕（Skeleton Screen）： 用形狀輪廓佔位，等真實內容載入後替換
進度指示器： 頂部的細長進度條，讓使用者知道頁面還在載入
讀取動畫： 轉圈圈或 loading dots——比完全空白的體驗好很多
滾動觸發動畫
頁面捲動時，元素從下方淡入——這是現代品牌官網非常普遍的視覺設計。
做好了讓頁面有質感和節奏感；但過度使用（每個元素都要動）反而讓人眼花繚亂，也可能影響效能。
設計原則： 動畫要有意義（引導注意力、強調重點），而不是為了動而動。
Hover 效果
桌機版的 Hover 效果（鼠標移入時的輕微變化）是一個低成本、高效益的微互動：
- 服務卡片 Hover 時輕微上升 + 陰影加深
- 圖片 Hover 時出現半透明遮罩和文字說明
- 連結 Hover 時底線從左滑出
這些細節讓頁面從「靜態展示」變成「互動體驗」。
微互動的設計原則
① 有目的，不是裝飾
每個動畫效果都應該有功能性的意義：傳遞狀態、引導注意力、提供反饋。純裝飾性的動畫如果過多，只會分散注意力。
② 速度要對
大多數 UI 動畫的時長建議：
- 簡單的 Hover/Active 反饋：100–200ms（太快感覺不到，太慢覺得拖）
- 頁面元素進入動畫：300–500ms
- 較複雜的動畫：最多 800ms（超過 1 秒的 UI 動畫通常感覺很慢）
③ 動畫曲線（Easing）
線性（linear）的動畫看起來機械感，加入 ease-in-out（先慢後快再慢）讓動畫更自然。
CSS 的 transition: all 0.3s ease-in-out 是最常用的基礎設定。
④ 尊重使用者偏好（prefers-reduced-motion）
部分使用者（包括有前庭障礙、癲癇風險的使用者）可能在系統中設定「減少動畫」。
在 CSS 中加入：
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
讓你的網站可以尊重這個系統設定，同時也是無障礙設計的要求。