提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「下沉」(Sink) 懸停效果。
游標停在元素上時,元素略微下移並停住,彷彿被按進頁面裡,移開後再升回原位:平順,沒有回彈。
只在視覺上移動,不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。相似的動效
A
將滑鼠移到上面
元素往內一沉再彈回,彷彿按下了一顆實體按鈕。
適用情境
按鈕
在[套用位置]加入「按壓」(Push) 懸停效果。
每次游標移入時,元素快速縮小一次再彈回正常大小,就像按下一顆實體按鈕。
每次懸停只播放一次,不要循環;避免周圍版面位移。A
將滑鼠移到上面
Float (浮起)
別稱 Lift, Raise
懸停時,元素向上浮起幾個像素,彷彿飄浮起來。
適用情境
卡片、按鈕
在[套用位置]加入「浮起」(Float) 懸停效果,也叫抬升 (lift) 或升起 (raise)。
游標停在元素上時,元素輕輕向上浮起並維持,游標移開後再落回:平順柔和,沒有回彈。
只做視覺上的移動,不要推擠周圍的版面,鍵盤焦點時也呈現同樣的效果。A
將滑鼠移到上面
Shrink (縮小)
別稱 Scale Down
游標停在元素上時,元素平順地略微縮小。
適用情境
按鈕、方塊
在[套用位置]加入「縮小」(Shrink) 懸停效果,也叫縮小 (scale down)。
游標停在元素上時,元素平順地略微縮小,移開後恢復原本大小:快速而含蓄。
不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。A
將滑鼠移到上面
Hover Shadow (懸停陰影)
別稱 Drop Shadow on hover, Elevation on hover
游標懸停時元素下方出現或加深一層柔和陰影,營造浮起的感覺。
適用情境
卡片、按鈕
在[套用位置]加入「懸停陰影」(Hover Shadow) 效果,也叫 drop shadow on hover 或 elevation on hover。
游標懸停時,元素下方的柔和陰影加深並擴散,讓它看起來浮起;游標移開後再淡回原樣,元素本身保持不動。
陰影要夠含蓄,在淺色和深色主題下都合適;鍵盤聚焦時也顯示同樣的效果。Hover 中的其他動效
A
將滑鼠移到上面
懸停時,元素向一側斜切變形。
適用情境
按鈕、標籤
在[套用位置]加入「斜切」(Skew) 懸停效果。
游標停在元素上時,元素向一側斜切成輕微傾斜的樣子,移開後恢復端正:快速而流暢。
傾斜時文字仍要清楚易讀,不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。A
將滑鼠移到上面
Speech Bubble (對話泡泡)
別稱 Bubble
懸停時,元素一側出現一個對話泡泡的小三角。
適用情境
分頁標籤、工具提示
在[套用位置]加入「對話泡泡」(Speech Bubble) 懸停效果,也叫泡泡 (bubble)。
一個小三角尾巴從元素一側的後方滑出,讓元素變成對話泡泡的形狀,游標移開後再滑回去:快速而流暢。
尾巴要和元素同色,看起來是一個整體,鍵盤焦點時也呈現同樣的效果。A
將滑鼠移到上面
懸停時,元素邊緣內側出現一條內框線。
適用情境
按鈕、卡片
在[套用位置]加入「內框線」(Trim) 懸停效果。
游標停在元素上時,一條細線在元素邊緣內側淡入,移開後淡出:含蓄,不帶位移。
線條要放在元素內部,保持元素尺寸不變,鍵盤焦點時也呈現同樣的效果。