Long Press (长按)
别称 Press and hold, Touch and hold
按住元素片刻即可触发额外操作或进度填充。
适用场景
上下文菜单、长按确认
变体
- hold to delete
- context menu
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“长按”(Long Press)交互，也叫 press and hold 或 touch and hold。
按住时元素轻微下沉，同时进度填充以稳定的速度扫过它；填满后元素带弹性地回弹并打开菜单，提前松开则取消并重置填充。
为键盘和屏幕阅读器用户提供另一种途径来执行相同操作，并且不要让长按触发文本选择或浏览器自带的右键菜单。相似的动效
A
点击试试
Press (Button Tap Scale) (按压缩放)
别称 Tap feedback, Active scale, Press state
按下时元素略微缩小，松开后带弹性地恢复。
适用场景
按钮、卡片
在[应用位置]添加“按压缩放”(Press (Button Tap Scale))效果，也叫点击反馈(tap feedback)或按下状态(press state)。
按下时元素略微缩小并稍微变暗，松开后带一点弹跳恢复到原大小：快速、含蓄。
键盘按下和触摸时也显示同样的反馈，并保持周围布局不发生位移。Button Loading State (按钮加载状态)
别称 Spinner button, Loading button, Button spinner, Submit loading state
操作执行期间，按钮把文字换成一个小加载图标，或在旁边加上它。
适用场景
表单提交、异步操作
在[应用位置]添加“按钮加载状态”(Button Loading State)，也叫 spinner button 或 loading button。
按下时按钮轻轻下压，文字淡出，操作进行期间在原位置显示一个小加载图标，完成后文字再回来。
加载时保持按钮宽度不变，阻止重复点击，并向屏幕阅读器播报忙碌状态。Determinate Progress Bar (确定进度条)
别称 Progress bar fill, Progress Indicator, Progress bar, Circular progress
进度条按任务完成比例从左向右填充。
适用场景
文件上传、多步骤表单
在[应用位置]添加“确定进度条”(Determinate Progress Bar)，也叫 progress bar fill 或 progress indicator。
进度条随真实进度从左向右填充，每次更新之间平滑过渡，并在旁边显示百分比。
使用带当前值、最小值和最大值的正确进度条语义，让屏幕阅读器能读出进度，并且填充绝不能倒退。Micro-interaction 中的其他动效
3
Notification Badge Bounce (徽标弹跳)
别称 Badge pop, Badge pulse, Ping
收到新通知时，数字徽标弹出、弹跳或脉动。
适用场景
铃铛图标、收件箱
在[应用位置]添加“徽标弹跳”(Notification Badge Bounce)动画，也叫 badge pop 或 ping。
收到新通知时，数字徽标从无到有地弹出，带着两下快速、有弹性的跳动落定，同时一圈柔和的光环从它向外扩散一次。
每条新通知只播放一次，不要循环，并让屏幕阅读器播报新的数字。••••••ABCDEF
点击试试
Password Reveal Toggle (密码显隐切换)
别称 Show/hide password, Eye icon toggle
显示或隐藏密码时，眼睛图标在睁开和带斜线之间切换。
适用场景
登录和注册表单
在[应用位置]添加“密码显隐切换”(Password Reveal Toggle)，也叫 show/hide password 或眼睛图标切换(eye icon toggle)。
点击眼睛时斜线迅速擦除，隐藏的圆点交叉淡入为真实字符；再次点击时斜线重新画出并隐藏字符：流畅、迅速，不要弹跳。
保持输入框宽度不变以免文字跳动，并把切换做成真正的按钮，用标签说明当前密码是否可见。在里面滚动
文字滚动进入视口时，一个指针箭头围绕某个词画出高亮框。
适用场景
标题、营销文案
在[应用位置]添加“指针高亮”(Pointer Highlight)效果。
文字滚动进入视口时，一个方框从左到右围绕关键词画出，同时一个小指针箭头沿着方框的角移动，流畅、匀速，就像有人在用手圈出这个词。
只在第一次进入视口时画一次，不要挤动文字；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的方框。