提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「搖晃」(Wobble) 提示效果。
元素要帶著傾斜左右搖晃,一開始幅度很大,每擺一次就變小,直到停穩。
觸發時只播放一次,並避免相鄰內容位移。相似的動效
A
Head Shake (搖頭)
別稱 Headshake, No Shake
元素帶著輕微旋轉左右擺動,就像搖頭表示「不」。
適用情境
輸入無效或操作遭拒
在[套用位置]加入「搖頭」(Head Shake) 提示效果,也叫 headshake 或 no shake。
元素要像搖頭表示「不」一樣,帶著輕微扭轉快速左右轉動,每次幅度都比上一次小,最後停穩。
每次觸發時只播放一次(例如操作遭拒時),並且不要讓周圍的版面跟著移動。A
元素以頂邊為支點,像鐘擺一樣來回擺盪,幅度逐漸減小。
適用情境
懸掛的招牌、通知圖示
在[套用位置]加入「擺盪」(Swing) 提示效果。
元素要像懸掛的招牌一樣來回擺盪,一開始擺幅很大,接著很快平息。
以頂邊而不是中心為支點擺盪,觸發時只播放一次。A
元素放大後帶著旋轉左右晃動,再恢復原本大小,像在慶祝一樣。
適用情境
成功狀態、慶祝時刻
在[套用位置]加入「慶祝晃動」(Tada) 提示效果。
元素要先微微縮小,再放大並快速傾斜著左右晃動,然後恢復正常大小,像一次小小的慶祝。
只播放一次(例如在操作成功後立刻播放);如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就略過這個動畫。A
Jello (果凍晃動)
別稱 Jelly
元素像晃動的果凍一樣來回傾斜變形,幅度逐漸減小。
適用情境
俏皮地強調按鈕或 Logo
在[套用位置]加入「果凍晃動」(Jello) 提示效果,也叫 jelly。
元素要像晃動的果凍一樣來回傾斜變形:一開始幅度大,接著很快平息下來。
觸發時只播放一次,並維持元素佔用的空間不變,避免周圍內容位移。Emphasis 中的其他動效
A
Bounce (彈跳)
別稱 Bounce (attention)
元素上下彈跳,彈跳幅度逐漸減小。
適用情境
向下捲動提示、行動呼籲按鈕
在[套用位置]加入「彈跳」(Bounce) 提示效果。
元素向上跳起再落下,快速彈跳幾次,每次幅度越來越小,落地時稍微壓扁。
觸發時只播放一次,不要循環;對開啟了「減少動態效果」的使用者則略過。Flash (快閃)
別稱 Blink
元素透過快速切換不透明度來閃爍。
適用情境
提示有新內容
在[套用位置]加入「快閃」(Flash) 提示效果,也叫 blink。
元素快速淡出再淡入,閃爍兩次,然後保持完全可見。
只播放一次,不要無止盡地閃爍;快速閃爍可能讓人不舒服,所以對開啟了「減少動態效果」的使用者則略過。ABC
Flicker (閃爍)
別稱 Flickering
元素的不透明度像接觸不良的燈一樣不規則地閃動。
適用情境
霓虹和故障風效果
在[套用位置]加入「閃爍」(Flicker) 效果,也叫 flickering。
元素大部分時間保持穩定,偶爾像接觸不良的霓虹燈一樣短促、不均勻地變暗。
節奏要不規則而非等間隔,避免全強度的快速閃爍;對開啟了「減少動態效果」的使用者則停止。