如何撰写动效说明

在设计中,为了某个体验细节更佳流畅友好,设计师会精心设计交互动效。

对于开发工作人员来说,仅仅拿到一个动效图就去开发,往往很头痛,而且做出来的效果也未必符合设计师的要求。因此,一份完整的动效方案产出物就非常重要了。那么,完整的动效方案应该包括那些内容呢?

1、一个完成的高保真动效设计动图,最好是gif格式的

2、一个完成的动效方案说明和适配说明


动效方案图


动效说明

如何产出一份开发看得懂、好用的动效说明?

1、动效包含的要素:时间、运动方式(翻转、平易、出现、消失)、运动曲线(匀速、先加速后减速、弹性削减...)、素材属性(放大、缩小、透明度...);如果有变化一定要在设计稿用数值说明,曲线部分要给出曲线类型

2、分帧拆解 将每个关键变化点的关键页面平行罗列,并进行说明

3、触发方式说明:自动触发、滑动、点击等等

4、适配方式:ios端用切图较多,为了保证图片效果出要给出宽高比;android端开发可以自己写渐变的背景,进行适配。

5、可以提前手机优秀的设计录屏,给开发提供一些参考

后期如何验收?

验收工作不一定放在最后,在开发过程中可以多次进行沟通,查看落地情况及时改正。这样避免到了后期与设计差距很大,让开发反返工。


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容