提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「擺盪」(Swing) 提示效果。
元素要像懸掛的招牌一樣來回擺盪,一開始擺幅很大,接著很快平息。
以頂邊而不是中心為支點擺盪,觸發時只播放一次。相似的動效
A
元素像不穩的物體一樣,帶著傾斜左右搖晃。
適用情境
吸引使用者注意圖示或按鈕
在[套用位置]加入「搖晃」(Wobble) 提示效果。
元素要帶著傾斜左右搖晃,一開始幅度很大,每擺一次就變小,直到停穩。
觸發時只播放一次,並避免相鄰內容位移。A
Head Shake (搖頭)
別稱 Headshake, No Shake
元素帶著輕微旋轉左右擺動,就像搖頭表示「不」。
適用情境
輸入無效或操作遭拒
在[套用位置]加入「搖頭」(Head Shake) 提示效果,也叫 headshake 或 no shake。
元素要像搖頭表示「不」一樣,帶著輕微扭轉快速左右轉動,每次幅度都比上一次小,最後停穩。
每次觸發時只播放一次(例如操作遭拒時),並且不要讓周圍的版面跟著移動。A
元素以左上角為鉸鏈擺動、晃盪幾下,然後掉出螢幕。
適用情境
以逗趣的方式移除元素
在[套用位置]加入「鉸鏈掉落」(Hinge) 退場動畫。
元素像螺絲鬆脫一樣以左上角為軸向下擺,來回晃盪,然後一邊淡出一邊掉出螢幕:緩慢、逗趣、刻意。
讓它從其他內容上方掉落,不要擠動版面或產生捲軸,掉落後移除元素;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就立即隱藏。A
將滑鼠移到上面
游標懸停時元素旋轉幾度。
適用情境
圖示、縮圖
在[套用位置]加入「旋轉」(Rotate) 懸停效果。
游標懸停時,元素順時針輕微轉動,游標移開後轉回:流暢而含蓄。
避免周圍版面位移;鍵盤聚焦時也顯示同樣的效果。Emphasis 中的其他動效
A
元素放大後帶著旋轉左右晃動,再恢復原本大小,像在慶祝一樣。
適用情境
成功狀態、慶祝時刻
在[套用位置]加入「慶祝晃動」(Tada) 提示效果。
元素要先微微縮小,再放大並快速傾斜著左右晃動,然後恢復正常大小,像一次小小的慶祝。
只播放一次(例如在操作成功後立刻播放);如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就略過這個動畫。Vibrate (震動)
別稱 Vibration, Buzz
元素向各個方向快速地細微顫動,就像手機在震動。
適用情境
警示提醒、來電式提示
在[套用位置]加入「震動」(Vibrate) 提示效果,也叫 buzz 或 vibration。
元素要像手機震動一樣,朝不同方向快速地細微顫動片刻,然後停下來。
動作幅度要非常小,確保內容依然清楚好讀;每次提醒只播放一次,不要循環。