演示场 / 通知设置与组件画廊

Micro-interactions 微交互

这一页的所有控件都可以真实操作。按下、悬停、选中、完成,每一次状态变化都在 150-250ms 内以物理回弹曲线给出反馈:错误用抖动提醒,成功用打勾确认,加载用转圈过渡。

21 个可交互控件 / 16 种状态反馈动效 / 全站统一回弹缓动 cubic-bezier(.34,1.56,.64,1)

01 / 07

通知偏好

开关拨杆 200ms 回弹滑移,按下时拇指被压扁 4px

更改即时写入本地演示状态
02 / 07

提示音与反馈

滑杆填充即时跟随,读数以 180ms 回弹放大

40

仅在桌面端生效 / 拖动时拇指放大 1.18 倍

反馈强度

影响开关与评分的触感权重

分段滑块以 200ms 回弹曲线换位
03 / 07

今日任务

勾选后 180ms 完成打勾与划线,进度同步流动

2 / 4 项已完成

进度条以 240ms 平滑流动
04 / 07

体验评分

悬停即时预览,落定后当前星级回弹放大

已记录:顺手,感谢你的反馈

支持键盘方向键切换星级
05 / 07

邮箱验证

错误以 300ms 水平抖动提示,修正后即刻转绿

用于接收协作邀请与安全提醒

边框与提示文字同步换色
06 / 07

分享邀请

点击复制后:700ms 加载转圈,成功打勾并在 1.8 秒后复位

邀请链接 7 天内有效 / 可在成员管理中重置
07 / 07

动效规格

本页每一处反馈的时长与缓动曲线,供落地时对照

控件触发时长缓动曲线
开关拨杆点按200mscubic-bezier(.34,1.56,.64,1)
拇指按压按下90msease-out
滑杆抓取拖动120mscubic-bezier(.34,1.56,.64,1)
复选打勾点按180msease-out
任务划线点按220msease-out
星级落定点按220mscubic-bezier(.34,1.56,.64,1)
加载转圈点按700ms 循环linear
错误抖动输入出错300msease-out
进度流动状态变化240mscubic-bezier(.2,.8,.2,1)