跳到主要内容

动画交付

定义设计好的交互和动画如何交付,如何和技术更好的协作进行设计落地,以确保设计师的设计意图得到完整传递和准确实现。

同时,良好的动画交付流程也能够提高开发效率,降低沟通成本,增强设计和开发的协作效果。


交付规范

项目概述

本项目是为 [项目名称] 开发 [功能/页面名称] 的交互动画。

设计稿

设计稿地址:[设计稿链接]

交互稿地址:[交互稿链接]

动效说明

概要说明

动画类型: 说明设计师设计的交互动画类型,例如:进入动画、退出动画、交互反馈动画等。

动画效果: 说明设计师要求实现的动画效果,例如:淡入淡出、滑动、缩放、旋转等。

触发方式: 说明动画触发的方式,例如:鼠标悬停、点击、拖拽等。

动画时长: 说明动画的持续时间,以毫秒为单位。

动画循环: 说明动画的循环方式,包括循环次数、循环延迟、循环形式等。

动画曲线: 说明动画的时间曲线,例如:线性、缓入缓出、弹簧等。

其他要求: 如果有其他特殊的要求,例如动画过程中需要改变元素的位置、大小、颜色等,需要在此说明。

详细说明

进入页面时,[描述进入动效],持续时间为 [持续时间] 秒。 点击按钮 [按钮名称] 时,[描述按钮动效],持续时间为 [持续时间] 秒。

参考实现

包含哪些可加速实现的[动效库]

实现要求

动效需要在 [浏览器名称] 上正常展示。 代码实现需要兼容 [浏览器版本]。 动效需要流畅自然,不卡顿、不闪烁。 动效需要具有良好的交互反馈,让用户感受到操作的结果。

交付示例

项目概述

本项目是为 [项目名称] 开发 [功能/页面名称] 的交互动画。

设计稿

设计稿地址:[设计稿链接]

交互稿地址:[交互稿链接]

动效说明

概要说明

动画类型:退出动画。

动画效果:渐变淡出。

触发方式:点击。

动画时长:200ms。

动画循环:无。

动画曲线:缓入缓出。

其他要求:无。

详细说明

进入页面时,[描述进入动效],持续时间为 [持续时间] 秒。 点击按钮 [按钮名称] 时,[描述按钮动效],持续时间为 [持续时间] 秒。

参考实现

包含哪些可加速实现的[动效库]

实现要求

动效需要在 [浏览器名称] 上正常展示。 代码实现需要兼容 [浏览器版本]。 动效需要流畅自然,不卡顿、不闪烁。 动效需要具有良好的交互反馈,让用户感受到操作的结果。