提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「果凍晃動」(Jello) 提示效果,也叫 jelly。
元素要像晃動的果凍一樣來回傾斜變形:一開始幅度大,接著很快平息下來。
觸發時只播放一次,並維持元素佔用的空間不變,避免周圍內容位移。相似的動效
A
Rubber Band (橡皮筋)
別稱 Rubberband
元素橫向拉伸、縱向壓扁,經過幾次彈性變化後恢復原狀。
適用情境
按鈕回饋、吸引注意
在[套用位置]加入「橡皮筋」(Rubber Band) 提示效果,也叫 rubberband。
元素要先橫向拉寬、縱向壓扁,再經過幾次越來越小的彈性回彈,最後停在正常大小。
觸發時只播放一次,並確保拉伸過程中周圍版面不會位移。A
元素像不穩的物體一樣,帶著傾斜左右搖晃。
適用情境
吸引使用者注意圖示或按鈕
在[套用位置]加入「搖晃」(Wobble) 提示效果。
元素要帶著傾斜左右搖晃,一開始幅度很大,每擺一次就變小,直到停穩。
觸發時只播放一次,並避免相鄰內容位移。A
將滑鼠移到上面
懸停時,元素向一側斜切變形。
適用情境
按鈕、標籤
在[套用位置]加入「斜切」(Skew) 懸停效果。
游標停在元素上時,元素向一側斜切成輕微傾斜的樣子,移開後恢復端正:快速而流暢。
傾斜時文字仍要清楚易讀,不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。A
Head Shake (搖頭)
別稱 Headshake, No Shake
元素帶著輕微旋轉左右擺動,就像搖頭表示「不」。
適用情境
輸入無效或操作遭拒
在[套用位置]加入「搖頭」(Head Shake) 提示效果,也叫 headshake 或 no shake。
元素要像搖頭表示「不」一樣,帶著輕微扭轉快速左右轉動,每次幅度都比上一次小,最後停穩。
每次觸發時只播放一次(例如操作遭拒時),並且不要讓周圍的版面跟著移動。Emphasis 中的其他動效
A
Ping (雷達波)
別稱 Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
元素的副本反覆放大並淡出,就像雷達波紋。
適用情境
通知小圓點、即時狀態
在[套用位置]加入「雷達波」(Ping) 效果,也叫 radar ping 或脈衝環 (pulse ring)。
元素的一個副本要向外擴大並淡出,以穩定的節奏一次又一次重複,而元素本身保持不動。
把圓環畫在獨立的圖層上,確保它絕不影響版面;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止循環。A
Pulse (脈動)
別稱 Pulsing
元素反覆地輕柔縮放或淡入淡出。
適用情境
骨架屏載入、即時狀態指示、CTA 按鈕
在[套用位置]加入「脈動」(Pulse) 效果,也叫 pulsing。
元素要以緩慢、穩定的節奏輕輕膨脹再回縮:含蓄,不要有彈跳感。
無縫循環播放,不要讓周圍版面移動;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止動畫。