提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「彈跳」(Bounce) 提示效果。
元素向上跳起再落下,快速彈跳幾次,每次幅度越來越小,落地時稍微壓扁。
觸發時只播放一次,不要循環;對開啟了「減少動態效果」的使用者則略過。相似的動效
A
將滑鼠移到上面
Bob (上下浮動)
別稱 Hang
懸停期間,元素先向上浮起,然後持續上下輕輕浮動。
適用情境
圖示、按鈕
在[套用位置]加入「上下浮動」(Bob) 懸停效果,也叫懸掛 (hang)。
元素先輕輕浮起,游標停留期間持續柔和地上下浮動,游標移開後再落回原位:緩慢而柔和。
只在懸停期間循環浮動;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就保持靜止。A
Bounce In (彈跳入場)
別稱 Bounce In Down, Bounce In Up
元素以超出後回落的彈跳方式進場,可以是放大出現,也可以從邊緣落下。
適用情境
通知徽章、活潑的彈出視窗
在[套用位置]加入「彈跳入場」(Bounce In) 進場動畫,也叫 bounce in down 或 bounce in up。
元素從小逐漸放大,略微超過完整尺寸後晃動幾下再穩定下來:快速、有彈性。
只播放一次,以免一直搶走注意力;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接在原位顯示、不做動畫。3
Notification Badge Bounce (通知徽章彈跳)
別稱 Badge pop, Badge pulse, Ping
收到新通知時,數字徽章彈出、彈跳或脈動。
適用情境
鈴鐺圖示、收件匣
在[套用位置]加入「通知徽章彈跳」(Notification Badge Bounce) 動畫,也叫 badge pop 或 ping。
收到新通知時,數字徽章從無到有地彈出,帶著兩下快速、有彈性的跳動落定,同時一圈柔和的光環從它向外擴散一次。
每則新通知只播放一次,不要循環,並讓螢幕閱讀器唸出新的數字。Emphasis 中的其他動效
Flash (快閃)
別稱 Blink
元素透過快速切換不透明度來閃爍。
適用情境
提示有新內容
在[套用位置]加入「快閃」(Flash) 提示效果,也叫 blink。
元素快速淡出再淡入,閃爍兩次,然後保持完全可見。
只播放一次,不要無止盡地閃爍;快速閃爍可能讓人不舒服,所以對開啟了「減少動態效果」的使用者則略過。ABC
Flicker (閃爍)
別稱 Flickering
元素的不透明度像接觸不良的燈一樣不規則地閃動。
適用情境
霓虹和故障風效果
在[套用位置]加入「閃爍」(Flicker) 效果,也叫 flickering。
元素大部分時間保持穩定,偶爾像接觸不良的霓虹燈一樣短促、不均勻地變暗。
節奏要不規則而非等間隔,避免全強度的快速閃爍;對開啟了「減少動態效果」的使用者則停止。A
Head Shake (搖頭)
別稱 Headshake, No Shake
元素帶著輕微旋轉左右擺動,就像搖頭表示「不」。
適用情境
輸入無效或操作遭拒
在[套用位置]加入「搖頭」(Head Shake) 提示效果,也叫 headshake 或 no shake。
元素要像搖頭表示「不」一樣,帶著輕微扭轉快速左右轉動,每次幅度都比上一次小,最後停穩。
每次觸發時只播放一次(例如操作遭拒時),並且不要讓周圍的版面跟著移動。