反馈与交互点一下的回应
用户操作之后,界面立刻给出的回应,让人确信这一步生效了。
15 条动效
- 悬停反馈Hover effect 鼠标移到可点元素上时,它在很短时间内给一点颜色或亮度的变化,表示这里能点
- 按压反馈Press feedback 按下时元素略微缩小或变暗,让手指感觉确实按到了
- 长按确认Hold to confirm 用户按住不放,一条进度环慢慢走完,走完才真正执行,用来给危险操作加一道缓冲
- 拖拽Drag 元素跟随光标或手指移动,位移量完全由用户决定,松手后可能停住也可能弹回
- 拖拽排序Drag to reorder 按住一项把它拖到别的位置,其他项实时让位,松手后落位并轻微回弹
- 滑动关闭Swipe to dismiss 横向滑动一个条目把它推走,滑过一定距离或速度够了就直接关闭
- 橡皮筋回弹Rubber-banding 拖到边界后还能再拉一点,但越拉越费劲,松手就弹回去,像拉一根橡皮筋
- 抖动Shake 元素左右快速抖动几下,明确告诉用户这里出错了、输入不被接受
- 涟漪Ripple 点击处扩散出一圈逐渐变淡的水波,把“点这里生效了”这件事画出来
- 贴纸揭角Sticker peel 指针靠到角上,那一角就翘起来、露出下面一层,像贴纸被指尖挑起
- 高光扫过Glare sheen 指针一进去,一道斜的亮光从卡片上扫过去,同时指针那一小块微微提亮
- 悬停让其它项退让Sibling dim on hover 鼠标停在清单的某一项上,动的是其它几项:它们一起变暗、缩一点、往两边让开,被指的那一项反而像被推到了前面
- 磁吸吸附Magnetic snap 鼠标靠近按钮时,按钮自己往光标那边挪一小段,像被吸住;移开时它弹回原位,回弹的时候还稍微过一点头
- 反色跟随光标Difference cursor 多了一个自己做的圆点跟着指针走,但它永远慢半拍 —— 不是贴在指针上
- 悬停预览跟随Cursor preview follow 指针划过菜单里的名字,一张预览图就从指针那儿冒出来跟着走;移到下一个名字,预览图原地换成那一个,指针一动它又跟上去