提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「按壓」(Push) 懸停效果。
每次游標移入時,元素快速縮小一次再彈回正常大小,就像按下一顆實體按鈕。
每次懸停只播放一次,不要循環;避免周圍版面位移。相似的動效
A
點擊試試
Press (Button Tap Scale) (按下縮放)
別稱 Tap feedback, Active scale, Press state
按下時元素略微縮小,放開後帶彈性地恢復。
適用情境
按鈕、卡片
在[套用位置]加入「按下縮放」(Press (Button Tap Scale)) 效果,也叫點按回饋 (tap feedback) 或按下狀態 (press state)。
按下時元素略微縮小並稍微變暗,放開後帶一點彈跳恢復原本大小:快速、含蓄。
用鍵盤按下和觸控時也顯示同樣的回饋,並保持周圍版面不位移。A
將滑鼠移到上面
懸停時,元素向下移動幾個像素,彷彿被按進頁面裡。
適用情境
按鈕
在[套用位置]加入「下沉」(Sink) 懸停效果。
游標停在元素上時,元素略微下移並停住,彷彿被按進頁面裡,移開後再升回原位:平順,沒有回彈。
只在視覺上移動,不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。A
將滑鼠移到上面
Shrink (縮小)
別稱 Scale Down
游標停在元素上時,元素平順地略微縮小。
適用情境
按鈕、方塊
在[套用位置]加入「縮小」(Shrink) 懸停效果,也叫縮小 (scale down)。
游標停在元素上時,元素平順地略微縮小,移開後恢復原本大小:快速而含蓄。
不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。Hover 中的其他動效
A
將滑鼠移到上面
Radial Fill (圓形填充)
別稱 Circle expand
游標懸停時一個彩色圓形從中心放大或往中心收縮,填滿元素。
適用情境
按鈕
在[套用位置]加入「圓形填充」(Radial Fill) 懸停效果,也叫 circle expand。
新顏色的圓形從中心流暢地放大到填滿元素,游標移開後再縮回中心,同時文字顏色隨之切換,保持清楚易讀。
圓形要裁切在元素形狀之內,文字位在它上方;鍵盤聚焦時也顯示同樣的效果。A
將滑鼠移到上面
游標懸停時元素內部的矩形放大或收縮,藉此切換背景。
適用情境
按鈕
在[套用位置]加入「矩形填充」(Rectangle Fill) 懸停效果。
隨著內部矩形往中心收縮,新背景色從四邊往內合攏;游標移開後再重新打開,同時文字顏色隨之切換,保持清楚易讀:流暢而快速。
文字始終位在填充層上方;鍵盤聚焦時也顯示同樣的效果。A
將滑鼠移到上面
游標懸停時元素旋轉幾度。
適用情境
圖示、縮圖
在[套用位置]加入「旋轉」(Rotate) 懸停效果。
游標懸停時,元素順時針輕微轉動,游標移開後轉回:流暢而含蓄。
避免周圍版面位移;鍵盤聚焦時也顯示同樣的效果。