Pointer Highlight (指標框選)
文字捲動進入畫面時，一個指標箭頭圍繞某個詞畫出醒目框。
適用情境
標題、行銷文案
變體
- Pointer Highlight
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「指標框選」(Pointer Highlight) 效果。
文字捲動進入畫面時，一個方框從左到右圍繞關鍵詞畫出，同時一個小指標箭頭沿著方框的角移動，流暢、等速，就像有人用手圈出這個詞。
只在第一次進入畫面時畫一次，不要推擠文字；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示畫好的方框。相似的動效
ABC DEFG HIJ KL
Text Highlighter (文字螢光筆)
別稱 Highlight Marker, Marker Underline, Hero Highlight
一條螢光筆般的色帶劃過詞句，將其突顯強調。
適用情境
強調關鍵詞句
在[套用位置]加入「文字螢光筆」(Text Highlighter) 效果，也叫螢光標記 (highlight marker) 或麥克筆底線 (marker underline)。
一條螢光筆般的色帶從左到右平順地劃過關鍵詞句的背後，就像有人用筆把它畫起來。
在詞句捲動進入畫面時只播放一次，確保色帶上的文字清楚易讀，並且在詞句換成兩行時讓色帶正確跟隨。ABC DEF
將滑鼠移到上面
Underline Draw (底線繪製)
別稱 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
懸停時，連結下方的底線從一側或中間延伸出來。
適用情境
導覽連結、文內連結
在[套用位置]加入「底線繪製」(Underline Draw) 懸停效果，也叫動畫底線 (animated underline) 或懸停底線動畫 (hover underline animation)。
游標停在連結上時，文字下方的底線從左到右平順延伸，游標移開後再收回：快速而含蓄。
不要讓底線推擠周圍版面，並且在鍵盤焦點時呈現同樣的效果。Line Drawing (線條繪製)
別稱 Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
透過替虛線偏移加上動畫，讓 SVG 描邊看起來沿著路徑被畫出來。
適用情境
圖示、Logo 和插畫
在[套用位置]加入「線條繪製」(Line Drawing) 動畫，也叫路徑繪製 (path drawing) 或自繪 SVG (self-drawing SVG)。
每條描邊看起來沿著路徑從起點到終點流暢地自己畫出來，第二條描邊（例如勾號）緊接在第一條之後。
進入畫面時只播放一次，不要循環；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示畫好的線條。Micro-interaction 中的其他動效
A
點擊試試
Press (Button Tap Scale) (按下縮放)
別稱 Tap feedback, Active scale, Press state
按下時元素略微縮小，放開後帶彈性地恢復。
適用情境
按鈕、卡片
在[套用位置]加入「按下縮放」(Press (Button Tap Scale)) 效果，也叫點按回饋 (tap feedback) 或按下狀態 (press state)。
按下時元素略微縮小並稍微變暗，放開後帶一點彈跳恢復原本大小：快速、含蓄。
用鍵盤按下和觸控時也顯示同樣的回饋，並保持周圍版面不位移。拖曳試試
Pull to Refresh (下拉重新整理)
別稱 Swipe to refresh
向下拖曳清單會露出載入圖示，放開後重新載入內容。
適用情境
動態消息、收件匣
在[套用位置]加入「下拉重新整理」(Pull to Refresh) 互動，也叫 swipe to refresh。
從頂端往下拉清單時，清單帶著一點阻力跟隨手指，並露出一個隨拉動旋轉的載入圖示；放開後載入圖示在內容重新載入期間持續旋轉，完成後清單平順地收回頂端。
只在清單已經捲動到頂端時才觸發，並為鍵盤和螢幕閱讀器使用者另外提供一般的重新整理按鈕。點擊試試
Ripple (漣漪效果)
別稱 Material ripple, Touch ripple, Ripple Button, Ink ripple
圓形漣漪從點擊或輕觸的確切位置擴散開並淡出。
適用情境
按鈕、清單項目
在[套用位置]加入「漣漪效果」(Ripple)，也叫 material ripple 或 ink ripple。
每次點擊或輕觸時，一圈柔和的圓形漣漪從按下的確切位置向外擴散，直到覆蓋整個元素，邊擴散邊淡出：快速、輕盈。
漣漪要依元素的形狀裁切，快速連續按下時每次都產生新的漣漪，用鍵盤按下時從中心開始擴散。