Micro-interaction

商品圖片一邊縮小一邊沿弧線飛進購物車圖示。

在[套用位置]加入「飛入購物車」(Add to Cart Fly) 動畫，也叫 fly to cart 或加入購物車動畫 (add-to-cart animation)。
按下加入按鈕時，商品圖片的一個小複本一邊縮小，一邊沿一條流暢而快速的弧線飛進購物車圖示，購物車在數量更新時輕輕彈一下。
每次按下只播放一次，不要移動原本的商品卡片；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就省略飛行動畫，但照常更新購物車。

勾選時，方塊內的勾號一筆一筆地畫出來。

在[套用位置]加入「核取方塊打勾」(Checkbox Check Draw) 動畫，也叫動畫核取方塊 (animated checkbox) 或勾號繪製 (checkmark draw)。
勾選時，方塊填滿顏色，勾號以一筆快速流暢的線條自己畫出來；取消勾選時以同樣方式擦除。
保持它是帶有勾選狀態的真正核取方塊，可以用鍵盤操作，並有清楚可見的焦點框。

彩色紙片噴發而出再飄落下來，用來慶祝成功。

在[套用位置]加入「彩紙噴發」(Confetti) 慶祝效果，也叫彩紙爆發 (confetti burst)。
彩色小紙片從按鈕中快速噴發出來，接著翻滾著飄落並逐漸淡出，形成一陣短促而熱鬧的紙片雨。
每次成功只觸發一次，不要循環，不要擋住頁面上的點擊；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不要播放。

複製圖示變成勾號，標籤短暫顯示「已複製」。

在[套用位置]加入「複製回饋」(Copy-to-Clipboard Feedback) 動畫，也叫已複製狀態 (copied state) 或複製圖示變勾號 (copy icon to checkmark)。
按下複製按鈕時，複製圖示快速縮小消失，同時畫出一個勾號，標籤變為「已複製」，片刻之後一切平順地恢復原狀。
切換過程中保持按鈕尺寸不變，不讓任何東西位移，並把已複製狀態告知螢幕閱讀器。

拖曳時元素跟著游標移動，並可以限制在某個區域或某條軸上。

在[套用位置]加入「拖曳」(Drag) 互動，也叫可拖曳 (draggable) 或拖曳限制 (drag constraints)。
拖曳時元素直接跟著游標，在允許區域的邊緣停住，放開後帶一點回彈地彈回靜止位置。
觸控和滑鼠都要能用，拖曳時下方的頁面不能跟著捲動，並提供用鍵盤移動它的方式。

輸入框取得焦點或已有內容時，預留位置標籤上移並縮小到輸入框上方。

在[套用位置]加入「浮動標籤」(Floating Label)，也叫浮動標籤 (float label) 或動畫預留位置 (animated placeholder)。
輸入框取得焦點或已有值時，原本在框內的標籤平順而快速地上移並縮小，停到輸入框的上緣；只有在輸入框為空且失去焦點時才落回原處。
保持它是與輸入框關聯的真正 label，並確保輸入框高度不變，讓表單永遠不會跳動。

點擊時愛心圖示填滿顏色，並迸發出小粒子或跳動一下。

在[套用位置]加入「愛心迸發」(Like / Heart Burst) 動畫，也叫愛心動畫 (heart animation) 或收藏切換 (favorite toggle)。
按讚時愛心填滿顏色並帶彈性地彈一下，同時一圈光環和小圓點向外迸發並淡出，整體快速、俏皮；取消按讚時愛心只是安靜地變空。
做成帶有按下狀態的真正切換按鈕，只在開啟時播放迸發效果。

按住元素片刻即可觸發額外操作或進度填滿。

在[套用位置]加入「長按」(Long Press) 互動，也叫 press and hold 或 touch and hold。
按住時元素輕微下沉，同時進度填滿以穩定的速度掃過它；填滿後元素帶彈性地回彈並開啟選單，提前放開則取消並重設填滿。
為鍵盤和螢幕閱讀器使用者提供另一種方式來執行相同操作，並且不要讓長按觸發文字選取或瀏覽器內建的右鍵選單。

收到新通知時，數字徽章彈出、彈跳或脈動。

在[套用位置]加入「通知徽章彈跳」(Notification Badge Bounce) 動畫，也叫 badge pop 或 ping。
收到新通知時，數字徽章從無到有地彈出，帶著兩下快速、有彈性的跳動落定，同時一圈柔和的光環從它向外擴散一次。
每則新通知只播放一次，不要循環，並讓螢幕閱讀器唸出新的數字。

顯示或隱藏密碼時，眼睛圖示在睜開和帶斜線之間切換。

在[套用位置]加入「密碼顯示切換」(Password Reveal Toggle)，也叫 show/hide password 或眼睛圖示切換 (eye icon toggle)。
點擊眼睛時斜線迅速擦除，隱藏的圓點交叉淡入為真實字元；再次點擊時斜線重新畫出並隱藏字元：流暢、快速，不要彈跳。
保持輸入框寬度不變以免文字跳動，並把切換做成真正的按鈕，用標籤說明目前密碼是否顯示。

文字捲動進入畫面時，一個指標箭頭圍繞某個詞畫出醒目框。

在[套用位置]加入「指標框選」(Pointer Highlight) 效果。
文字捲動進入畫面時，一個方框從左到右圍繞關鍵詞畫出，同時一個小指標箭頭沿著方框的角移動，流暢、等速，就像有人用手圈出這個詞。
只在第一次進入畫面時畫一次，不要推擠文字；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示畫好的方框。

按下時元素略微縮小，放開後帶彈性地恢復。

在[套用位置]加入「按下縮放」(Press (Button Tap Scale)) 效果，也叫點按回饋 (tap feedback) 或按下狀態 (press state)。
按下時元素略微縮小並稍微變暗，放開後帶一點彈跳恢復原本大小：快速、含蓄。
用鍵盤按下和觸控時也顯示同樣的回饋，並保持周圍版面不位移。

向下拖曳清單會露出載入圖示，放開後重新載入內容。

在[套用位置]加入「下拉重新整理」(Pull to Refresh) 互動，也叫 swipe to refresh。
從頂端往下拉清單時，清單帶著一點阻力跟隨手指，並露出一個隨拉動旋轉的載入圖示；放開後載入圖示在內容重新載入期間持續旋轉，完成後清單平順地收回頂端。
只在清單已經捲動到頂端時才觸發，並為鍵盤和螢幕閱讀器使用者另外提供一般的重新整理按鈕。

圓形漣漪從點擊或輕觸的確切位置擴散開並淡出。

在[套用位置]加入「漣漪效果」(Ripple)，也叫 material ripple 或 ink ripple。
每次點擊或輕觸時，一圈柔和的圓形漣漪從按下的確切位置向外擴散，直到覆蓋整個元素，邊擴散邊淡出：快速、輕盈。
漣漪要依元素的形狀裁切，快速連續按下時每次都產生新的漣漪，用鍵盤按下時從中心開始擴散。

圓圈和勾號自行畫出，確認操作已成功。

在[套用位置]加入「成功打勾」(Success Checkmark) 動畫，也叫 animated success tick。
先用一筆流暢的線條畫出圓圈，接著在圓圈內畫出勾號，整個圖示再輕輕彈一下：沉穩、篤定。
操作成功時只播放一次，搭配螢幕閱讀器能唸出的文字訊息；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示畫好的圖示。

橫向滑動清單列，露出刪除或封存等操作按鈕。

在[套用位置]加入「滑動刪除」(Swipe to Delete) 互動，也叫 swipe actions 或 swipe to reveal。
橫向拖曳某一列時，它直接跟著手指移動，露出後方的封存、刪除等操作按鈕，按鈕完全露出後停住；放開後平順地滑到定位，不要回彈。
橫向滑動時仍要確保垂直捲動可用，並讓鍵盤和螢幕閱讀器使用者不必滑動也能執行相同操作。

圓形滑塊沿軌道滑動，軌道顏色在關和開之間切換。

在[套用位置]加入「切換開關」(Toggle Switch) 動畫，也叫 switch。
開啟或關閉時，圓形滑塊平順地滑到軌道另一端，同時軌道顏色跟著改變：快速、俐落，不要彈跳。
做成真正符合無障礙的開關 (帶有 checked 狀態的 role="switch")，並且支援鍵盤操作。