SuperAPI AI 工具集

motion-direction

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

motion-direction 是一套用于设计系统或产品动效方向定义的规范方法,核心理念是“做事的动效,而非装饰的动效”。它把动效的职责归为四类:连续性(说明元素从何处来、到何处去)、状态变化(确认某操作已发生或正在进行)、层级(引导注意力而不喧宾夺主)、个性(用少量标志性动作表达品牌)。若一个动效不承担上述任一职责,应将其删除。

主要能力与默认参数: 时长方面,微交互(状态切换、按钮反馈)为 100-150ms,标准动效(面板打开、页面切换)为 200-300ms,深思型动效(大面积变化、引导流程)为 400-600ms;超过 600ms 需有明确理由。缓动方面,linear 仅用于加载指示和进度条,ease-out 用于进入元素,ease-in 用于退出元素,ease-in-out 用于交叉淡入淡出和连续变化,自定义 cubic-bezier 用于标志性时刻且应克制使用。错开方面,多个元素一起动画时默认错开 20-50ms,除非语义要求它们作为整体移动。

使用方式:针对每个交互需要指定触发条件、动画属性(CSS 属性或 transform)、时长(ms)、缓动(名称或 cubic-bezier 值)、延迟、反向行为(触发移除时的表现),以及在 prefers-reduced-motion 开启时的降级方案。

应避免的做法:所有动画都加弹跳;在可用 transform 时仍动画布局属性(width、height);阻塞交互的动画;对常规操作触发庆祝效果;给每个元素都加微动画以致产品显得躁动。

限制:本资料未提供具体安装命令、代码示例、收费方式或平台支持信息,暂未提供。