让动效设计如何完美对接开发

一、明白需求来源
我把它总结为三个可能来源：老板/上级、甲方、自己
1.当收到老板和上级的动效需求时，第一反应当然是接收

但不应该全盘接收，咱们也得思考衡量产品的业务逻辑和方向，评估自己目前手上工作量以及优先级后才能做出决定。考虑是需要马上给出方案还是可以押后再议，甚至还需要考虑到是否有必要去增加动效？毕竟，一个产品首先必须得先满足可用性和易用性。其次再去考虑有必要增加动效。

2.甲方很多时候总是想要多一点，再多来一点。当这时候就跟上面一样，同样需要评估一下必要性和实现难度的问题。

其实甲方的终极目标是想解决问题，而不是一股脑堆砌功能，有时候甲方可能会坚持己见，但是不代表我们不能发挥。我们可以发表看法或提出更优质的方案，供甲方决定。

3..自我：作为设计师，我们的目标就是解决问题。每当解决一个问题后，会让人觉得特别有满足感，有一种证明自己价值的感觉！在一些时候，为了产品使用更加顺畅，转场更加自然舒适，我们会在某些地方添加一些动效，这时候需要说服的可能是一整个产品团队，包括了产品经理、开发还有你的老板，这都是需要工作量。

二、改变错误的沟通方式
接下来讲一讲再和开发沟通问题的错误方式
关于没有动效文档的时候设计师是如何跟开发描述自己的动效设计的？

（补充：下面说的动效指的是让开发写的动效，而不是我们提供的GIF或其它动效文件）

1.设计师口述后让开发实现
很多设计师比较忙或者没有制作动效文档习惯，就会选择用口述的方法。但是除非开发者领悟能力惊人，否则实现出来的效果是不会达到预期效果的，有时候甚至是南辕北辙。
当这时候就会产生一个问题：

你觉得和你的预期不符，去让开发修改。但是开发又觉得自己做得明明和你描述得差不多，为什么要修改？

造成的结果就是，要么开发不改，你们吵一架，问题丝毫没解决。要么就是你指着开发改，开发和你彼此心里都不爽，后续的工作不好推进。

2.设计师做成GIF图发给开发，让开发照着做
这种方法相对上面的方法可能稍微会好点，但是！还是会有问题，开发照着动效做一般只能实现出大概的样子。细节地方还是会没达到设计师的预期。这时候又会出现上面的场景，设计师又来到了开发面前，最后不欢而散。
上面的场景我想很多设计师应该都遇到过，之所以有这样的问题一方面是沟通不到位。
另一方面也是最重要的是，你没有给开发一个具体的参数值，上面不管是口述还是GIF图都只是感官上的感受。是没有参数值的，你没有告诉他在20毫秒的时候大小是80%，在100毫秒的时候透明度是50%。当开发没有这些参数，自然只能自己凭感觉来写参数，出来的效果自然会和你的预期不一致。

所以设计师就要改变错误的沟通方式，那么如何把这些参数告诉开发？请看第三点

三、制作动效文档
1. 要明白制作动效需要什么工具？
可以选择Excel只需要一个表格工具即可，可以使用在线表格工具；可以多人同时查看，在线更新。
动效文档归根结底是给开发看的，如何让他们更快地理解内容最重要；
当然，制作动效的软件也是不可或缺的，只是这样的软件太多了，看个人的习惯。

工具只是工具，重要的是想要表达的内容。哪个用着更顺手就用哪个。

2. 动效文档需要哪些参数
主要秘诀，和开发沟通！记住一定要勤沟通，既然实现效果的是开发同学，那么不问开发，问谁呢？

我们可以先问清楚开发需要什么样的参数，再制作不迟，不然做出来的动效文档开发拿着也是白费功夫

下面就拿我一个工作中的动效文档举例，帮助大家更好地理解动效文档。

还可以插入图片，非常方便。

下面对这份动效文档的内容进行拆解：

动效文档的备注，主要是一些提醒开发同学注意的地方和辅助信息。

1.（标注：上图由于只有首页有动效，所以没有这个版块）
明白是哪个页面需要动效设计，比如首页、详情页等等。
2.明白是哪个模块需要动效设计，比如banner、商品列表等等。
3.把具体的模块截图放到表格中，帮助开发快速定位，可是文字哪有图片直观呢？
4.触发条件：意思是当前动效发生需要的条件，出现删除的触发条件是拖拽。
5.假如一个模块的动效有多个对象发生了改变，那么我们就需要把当前模块所有发生改变的对象都列出来。
例 下面的banner模块有三个对象需要添加动效：


6.接下来是具体的参数
这些参数是已经跟开发沟通后他们需要的参数值，切记一定要先问问开发！！
透明度：开发的透明度是0-1，0-1代表0%-100%
X轴位移：对象在X轴的位移
Y轴位移：对象在Y轴的位移
总时长：当前对象完成所有变化需要的时间
注意看下面的时间轴，原理和做动效设计时的时间轴差不多。是告诉开发当前对象的改变从哪里开始到哪里结束，使用的单位用的是开发那边使用的单位ms

以上，就是本次分享的内容。希望你每一天都有所收获！

天津天迅达科技有限公司经过多年来对APP、小程序、以及网站建设的探索，已经帮助每一个客户快速开发出属于自己的APP、小程序、网站，是万千企业之选。

标签：天迅达科技 天津APP开发 天津网站建设 网站建设