提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「橡皮筋」(Rubber Band) 提示效果,也叫 rubberband。
元素要先橫向拉寬、縱向壓扁,再經過幾次越來越小的彈性回彈,最後停在正常大小。
觸發時只播放一次,並確保拉伸過程中周圍版面不會位移。相似的動效
A
Jello (果凍晃動)
別稱 Jelly
元素像晃動的果凍一樣來回傾斜變形,幅度逐漸減小。
適用情境
俏皮地強調按鈕或 Logo
在[套用位置]加入「果凍晃動」(Jello) 提示效果,也叫 jelly。
元素要像晃動的果凍一樣來回傾斜變形:一開始幅度大,接著很快平息下來。
觸發時只播放一次,並維持元素佔用的空間不變,避免周圍內容位移。A
將滑鼠移到上面
Bounce Scale (彈性縮放)
別稱 Bounce In / Out
懸停開始或結束時,元素帶著彈性過衝進行縮放。
適用情境
按鈕、徽章
在[套用位置]加入「彈性縮放」(Bounce Scale) 懸停效果,也叫彈入/彈出 (bounce in / out)。
元素帶著明顯的彈性稍微放大,短暫超過最終尺寸後再回穩;游標移開時以同樣的彈性縮回。
不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。Shake (抖動)
別稱 Shake X, Shake Y, Shake Horizontal, Shake Vertical, shakeX, Error shake, Wiggle, Invalid input shake, Headshake
元素沿一個方向快速來回抖動。
適用情境
表單錯誤回饋
在[套用位置]加入「抖動」(Shake) 效果,也叫 error shake 或 invalid input shake。
元素要快速左右抖動幾次,然後剛好停在起始位置:快速、俐落。
每次出錯時播放一次,不要循環;同時顯示看得見的錯誤訊息,讓意思不只靠動畫傳達。A
將滑鼠移到上面
元素快速放大,再帶著彈性「啵」地回到原樣。
適用情境
圖示、按鈕
在[套用位置]加入「輕彈」(Pop) 懸停效果。
每次游標移入時,元素快速鼓起一次再回到正常大小,像一次帶彈性的輕快彈跳。
每次懸停只播放一次,不要停在放大狀態,也不要循環;避免周圍版面位移。Emphasis 中的其他動效
Spin (持續旋轉)
別稱 Rotate Loop, Spinner
元素以固定速度持續旋轉。
適用情境
載入中的旋轉指示器
在[套用位置]加入「持續旋轉」(Spin) 效果,也叫 spinner 或 rotate loop。
元素要以固定、均勻的速度持續旋轉,每圈之間不要有緩動。
讓循環無縫銜接,為 spinner 加上無障礙的「載入中」標籤;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就放慢或停止旋轉。A
元素以頂邊為支點,像鐘擺一樣來回擺盪,幅度逐漸減小。
適用情境
懸掛的招牌、通知圖示
在[套用位置]加入「擺盪」(Swing) 提示效果。
元素要像懸掛的招牌一樣來回擺盪,一開始擺幅很大,接著很快平息。
以頂邊而不是中心為支點擺盪,觸發時只播放一次。