Micro-interaction

商品图片一边缩小一边沿弧线飞入购物车图标。

在[应用位置]添加“加购抛物线”(Add to Cart Fly)动画，也叫飞入购物车(fly to cart)或加购动画(add-to-cart animation)。
点击加购按钮时，商品图片的一个小副本一边缩小，一边沿一条流畅而快速的弧线飞入购物车图标，购物车在数量更新时轻轻弹一下。
每次点击只播放一次，不要移动原来的商品卡片；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就省略飞行动画，但照常更新购物车。

勾选时，方框内的对勾一笔一笔地画出来。

在[应用位置]添加“复选框勾选绘制”(Checkbox Check Draw)动画，也叫动画复选框(animated checkbox)或对勾绘制(checkmark draw)。
勾选时，方框填充颜色，对勾以一笔快速流畅的线条自己画出来；取消勾选时以同样方式擦除。
保持它是带选中状态的真正复选框，可以用键盘操作，并有清晰可见的焦点环。

彩色纸片喷涌而出再飘落下来，用来庆祝成功。

在[应用位置]添加“撒花”(Confetti)庆祝效果，也叫彩纸迸发(confetti burst)。
彩色小纸片从按钮中快速迸发出来，然后翻滚着飘落并渐渐淡出，形成一阵短促而热闹的纸片雨。
每次成功只触发一次，不要循环，不要挡住页面上的点击；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就不要播放。

复制图标变成对勾，标签短暂显示“已复制”。

在[应用位置]添加“复制成功反馈”(Copy-to-Clipboard Feedback)动画，也叫已复制状态(copied state)或复制图标变对勾(copy icon to checkmark)。
点击复制按钮时，复制图标快速缩小消失，同时画出一个对勾，标签变为“已复制”，片刻之后一切平滑地恢复原样。
切换过程中保持按钮尺寸不变，不让任何东西位移，并把已复制状态告知屏幕阅读器。

拖拽时元素跟随指针移动，并可以限制在某个区域或某条轴上。

在[应用位置]添加“拖拽”(Drag)交互，也叫可拖拽(draggable)或拖拽约束(drag constraints)。
拖拽时元素直接跟随指针，在允许区域的边缘停住，松开后带一点回弹地弹回静止位置。
触摸和鼠标都要能用，拖动时下面的页面不能跟着滚动，并提供用键盘移动它的方式。

输入框获得焦点或已有内容时，占位标签上移并缩小到输入框上方。

在[应用位置]添加“浮动标签”(Floating Label)，也叫浮动标签(float label)或动画占位符(animated placeholder)。
输入框获得焦点或已有值时，原本在框内的标签平滑而快速地上移并缩小，停到输入框的上边缘；只有在输入框为空且失去焦点时才落回原处。
保持它是与输入框关联的真正 label，并确保输入框高度不变，让表单永远不会跳动。

点击时爱心图标填充颜色，并迸发出小粒子或跳动一下。

在[应用位置]添加“点赞爱心”(Like / Heart Burst)动画，也叫爱心动画(heart animation)或收藏切换(favorite toggle)。
点赞时爱心填充颜色并带弹性地弹一下，同时一圈光环和小圆点向外迸发并淡出，整体快速、俏皮；取消点赞时爱心只是安静地变空。
做成带按下状态的真正切换按钮，只在开启时播放迸发效果。

按住元素片刻即可触发额外操作或进度填充。

在[应用位置]添加“长按”(Long Press)交互，也叫 press and hold 或 touch and hold。
按住时元素轻微下沉，同时进度填充以稳定的速度扫过它；填满后元素带弹性地回弹并打开菜单，提前松开则取消并重置填充。
为键盘和屏幕阅读器用户提供另一种途径来执行相同操作，并且不要让长按触发文本选择或浏览器自带的右键菜单。

收到新通知时，数字徽标弹出、弹跳或脉动。

在[应用位置]添加“徽标弹跳”(Notification Badge Bounce)动画，也叫 badge pop 或 ping。
收到新通知时，数字徽标从无到有地弹出，带着两下快速、有弹性的跳动落定，同时一圈柔和的光环从它向外扩散一次。
每条新通知只播放一次，不要循环，并让屏幕阅读器播报新的数字。

显示或隐藏密码时，眼睛图标在睁开和带斜线之间切换。

在[应用位置]添加“密码显隐切换”(Password Reveal Toggle)，也叫 show/hide password 或眼睛图标切换(eye icon toggle)。
点击眼睛时斜线迅速擦除，隐藏的圆点交叉淡入为真实字符；再次点击时斜线重新画出并隐藏字符：流畅、迅速，不要弹跳。
保持输入框宽度不变以免文字跳动，并把切换做成真正的按钮，用标签说明当前密码是否可见。

文字滚动进入视口时，一个指针箭头围绕某个词画出高亮框。

在[应用位置]添加“指针高亮”(Pointer Highlight)效果。
文字滚动进入视口时，一个方框从左到右围绕关键词画出，同时一个小指针箭头沿着方框的角移动，流畅、匀速，就像有人在用手圈出这个词。
只在第一次进入视口时画一次，不要挤动文字；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的方框。

按下时元素略微缩小，松开后带弹性地恢复。

在[应用位置]添加“按压缩放”(Press (Button Tap Scale))效果，也叫点击反馈(tap feedback)或按下状态(press state)。
按下时元素略微缩小并稍微变暗，松开后带一点弹跳恢复到原大小：快速、含蓄。
键盘按下和触摸时也显示同样的反馈，并保持周围布局不发生位移。

向下拖动列表会露出加载图标，松开后重新加载内容。

在[应用位置]添加“下拉刷新”(Pull to Refresh)交互，也叫 swipe to refresh。
从顶部向下拉列表时，列表带着一点阻力跟随手指，并露出一个随拉动旋转的加载图标；松开后加载图标在内容重新加载期间持续旋转，完成后列表平滑地收回顶部。
只在列表已经滚动到顶部时才触发，并为键盘和屏幕阅读器用户另外提供一个普通的刷新按钮。

圆形波纹从点击或轻触的确切位置扩散开并淡出。

在[应用位置]添加“水波纹”(Ripple)效果，也叫 material ripple 或 ink ripple。
每次点击或轻触时，一圈柔和的圆形波纹从按下的确切位置向外扩散，直到覆盖整个元素，边扩散边淡出：快速、轻盈。
波纹要按元素的形状裁切，快速连续按下时每次都产生新的波纹，用键盘按下时从中心开始扩散。

圆圈和对勾自行画出，确认操作已成功。

在[应用位置]添加“成功对勾”(Success Checkmark)动画，也叫 animated success tick。
先用一笔流畅的线条画出圆圈，接着在圆圈内画出对勾，整个图标再轻轻弹一下：沉稳、笃定。
操作成功时只播放一次，配上屏幕阅读器能播报的文字提示；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的图标。

横向滑动列表行，露出删除或归档等操作按钮。

在[应用位置]添加“滑动删除”(Swipe to Delete)交互，也叫 swipe actions 或 swipe to reveal。
横向拖动某一行时，它直接跟着手指移动，露出后面的归档、删除等操作按钮，按钮完全露出后停住；松开后平滑地滑到位，不要回弹。
横向滑动时仍要保证纵向滚动可用，并让键盘和屏幕阅读器用户无需滑动也能执行相同操作。

圆形滑块沿轨道滑动，轨道颜色在关和开之间切换。

在[应用位置]添加“开关切换”(Toggle Switch)动画，也叫 switch。
打开或关闭时，圆形滑块平滑地滑到轨道另一端，同时轨道颜色随之变化：快速、干脆，不要弹跳。
做成真正可访问的开关(带 checked 状态的 role="switch")，并且支持键盘操作。