SuperAPI AI 工具集

micro-interactions

设计与创作

查看项目

更新于 10-15 21:36

技能介绍

用途:为小型 UI 反馈时刻(按钮状态、开关、表单校验、加载指示、通知徽章)设计动画,把迪士尼 12 条动画原则应用到界面细节上。

主要能力:给出各原则的微交互实现对应,例如挤压拉伸用于按钮按压与开关回弹、预备动作用于悬停提示、聚焦用于突出活动元素、跟随与重叠用于涟漪与沉降、缓入缓出用于轻快平滑过渡、弧线用于开关与环形菜单、次要动作用于图标随父状态变化、时间控制、夸张与吸引力等。

必要用法:提供按钮、开关、复选框等组件模式,使用 CSS transition 与 transform 实现。示例中按钮悬停上移 1px、按下 scale(0.98);开关拇指过渡 200ms cubic-bezier(0.34,1.56,0.64,1);复选框用 stroke-dashoffset 在 50ms 延迟后 200ms ease-out 描边。时间参考:悬停与点击 100ms ease-out,开关 150-200ms 弹簧/弹性,复选框 150ms ease-out,聚焦环 100ms ease-out,工具提示显示 150ms ease-out、隐藏 100ms ease-in,徽章更新 200ms 弹性,表单错误 200ms ease-out。

适用场景:小 UI 反馈细节;时长通常 100-300ms,避免线性过渡;错误抖动 3-5px、成功缩放 1.05-1.1,须克制。

限制:禁用状态不动画并降低不透明度,避免每次变化都动画,需在无动画下测试功能,并尊重 prefers-reduced-motion。文中未提供更多实施环境或依赖说明。