提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 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。
元素要像摇头表示“不”一样,带着轻微扭转快速左右转动,每次幅度都比上一次小,最后停稳。
每次触发时只播放一次(比如操作被拒绝时),并且不要让周围的布局跟着移动。