动画交付
定义设计好的交互和动画如何交付,如何和技术更好的协作进行设计落地,以确保设计师的设计意图得到完整传递和准确实现。
同时,良好的动画交付流程也能够提高开发效率,降低沟通成本,增强设计和开发的协作效果。
交付规范
项目概述
本项目是为 [项目名称] 开发 [功能/页面名称] 的交互动画。
设计稿
设计稿地址:[设计稿链接]
交互稿地址:[交互稿链接]
动效说明
概要说明
动画类型: 说明设计师设计的交互动画类型,例如:进入动画、退出动画、交互反馈动画等。
动画效果: 说明设计师要求实现的动画效果,例如:淡入淡出、滑动、缩放、旋转等。
触发方式: 说明动画触发的方式,例如:鼠标悬停、点击、拖拽等。
动画时长: 说明动画的持续时间,以毫秒为单位。
动画循环: 说明动画的循环方式,包括循环次数、循环延迟、循环形式等。
动画曲线: 说明动画的时间曲线,例如:线性、缓入缓出、弹簧等。
其他要求: 如果有其他特殊的要求,例如动画过程中需要改变元素的位置、大小、颜色等,需要在此说明。
详细说明
进入页面时,[描述进入动效],持续时间为 [持续时间] 秒。 点击按钮 [按钮名称] 时,[描述按钮动效],持续时间为 [持续时间] 秒。
参考实现
包含哪些可加速实现的[动效库]。
实现要求
动效需要在 [浏览器名称] 上正常展示。 代码实现需要兼容 [浏览器版本]。 动效需要流畅自然,不卡顿、不闪烁。 动效需要具有良好的交互反馈,让用户感受到操作的结果。
交付示例
项目概述
本项目是为 [项目名称] 开发 [功能/页面名称] 的交互动画。
设计稿
设计稿地址:[设计稿链接]
交互稿地址:[交互稿链接]
动效说明
概要说明
动画类型:退出动画。
动画效果:渐变淡出。
触发方式:点击。
动画时长:200ms。
动画循环:无。
动画曲线:缓入缓出。
其他要求:无。
详细说明
进入页面时,[描述进入动效],持续时间为 [持续时间] 秒。 点击按钮 [按钮名称] 时,[描述按钮动效],持续时间为 [持续时间] 秒。
参考实现
包含哪些可加速实现的[动效库]。
实现要求
动效需要在 [浏览器名称] 上正常展示。 代码实现需要兼容 [浏览器版本]。 动效需要流畅自然,不卡顿、不闪烁。 动效需要具有良好的交互反馈,让用户感受到操作的结果。