前段时间做了一个旅游网站的项目， 设计完后，前端已经开始实现了，老板说想要网站“动”起来，加一些动效让旅游网站更好看更吸引人。出发点是没问题的，这个旅游网站主要也是让用户浏览观赏用，那么动效设计在产品策略上也算是锦上添花甚至是不可或缺的。说干就干，我是早上接到这个需求的，前端和我商量了一下说打算怎么做，我想了想，之前我并没有这么系统地和前端交接过动效，正好趁此机会梳理出一份动效文档，日后也可以复用。

当前在之前也有过类似需要动效设计的场景，但动效量没有这么大，加上手上需求比较多，一直没有系统梳理过动效文档，所以踩的坑也是一箩筐的，所以下面的内容不仅仅会说动效文档的制作，也会把我在工作中遇到的坑给大家一一分享，帮助大家排雷。 

目录

1.需求来源

2.低效率的沟通方式

3.动效文档如何制作 

一、需求来源

一般动效这样的需求可能来源于以下对象：

老板/上级

甲方

自己

当收到老板和上级的动效需求时，第一反应当然是OK啊

毕竟……一个是给你发工资的，一个是你的顶头上司，所以，这个需求不能一口否决，除非……你想换个坑。。。

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

至于怎么和老板沟通，这不在本篇文章的讨论范畴，一句话，想想你的饭碗（溜……）

第二个动效需求的来源是甲方，甲方很多时候总是想要得更多……

这时候跟上面一样，同样需要评估必要性和实现难度的问题。

其实甲方的终极目标是想解决问题，而不是一股脑堆砌功能，有时候虽说甲方会坚持己见，但是不代表我们不能发表自己的看法或提出更优质的方案，至于选择哪个方案，是否选择我们的方案，那是甲方的决定。

但是我们保持沉默和提出选择方案是不一样的，后者会显得我们更专业，不是么……

第三个动效需求是自我，作为设计师，我们的目标不就是解决问题吗？

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

二、低效率的沟通方式

前面提到，在开始制作一份动效文档之前我和开发也沟通过其它琐碎的动效实现问题，遇到了很多坑，下面就这些坑展开来讲，旨在帮助大家在工作中与开发更好地沟通。

没有动效文档的时候设计师是如何跟开发描述自己的动效设计的？？？

第一种：设计师口述后让开发实现

嗯……我想这是很多设计师在比较忙或者没有制作动效文档习惯的时候的方法，除非开发领悟能力惊人，否则实现出来的效果是不太可能和你描述得一模一样的，有时候甚至是南辕北辙，这时候就会产生一个问题，你觉得实现得和你的预期不符，然后让开发修改，开发又觉得自己做得明明和你描述得差不多，为什么要改？结果就是，要么开发不改，你们吵一架，问题也没解决，要么是你指着开发改，开发心里也不爽，你也不爽，后续的工作可能不太好推进。

第二种：设计师将做好的GIF图发给开发，让开发照着做

这种方法相对上面的方法稍微好点，可是还是会有问题，开发照着动效做一般只能实现出大概的样子，但是心细如设计师，连细微的变化也能发现……很多时候不就是这些细节决定了一个产品的优劣吗？这时候又会出现上面的场景，你又来到了开发面前……最后不欢而散。

上面的场景我想很多设计师应该或多或少都遇到过，之所以有这样的问题一方面是沟通不到位，另一方面也是最重要的是，你没有给开发一个具体的参数值，上面不管是口述还是GIF图都只是感官上的感受，你没有告诉他在20毫秒的时候大小是80%，在100毫秒的时候透明度是50%，开发没有这些参数，自然只能自己凭感觉来写参数，出来的效果当然会和你的预期不一致，所以……这还真不怪开发同学。

那么如何把这些参数告诉开发？ 

三、如何制作动效文档

制作动效文档的根本目的有二，一是帮助开发实现动效效果，二是在开发实现出来的效果和你预期不一致的时候，可以拿着这份文档去和开发沟通，白纸黑字，这可比凭感觉的动效来得真实可靠。

1）制作动效需要什么工具？

Excel

只需要一个表格工具即可，我推荐在线表格工具，可以多人同时查看，在线更新，推荐石墨文档的在线表格工具，蛮不错的。

也有一些设计师用sketch做动效文档，我个人觉得sketch做表格的东西效率不高，而且涉及到插入图片，sketch远没有Excel来得方便，动效文档归根结底是给开发看的，如何让他们更快地理解内容比美观性更重要。

当然，制作动效的软件也是不可或缺的，只是这样的软件太多了，看个人的习惯吧。我一般用sketch做高保真设计，用principle做动效展示。

2）动效文档需要哪些参数

和开发沟通

和开发沟通

和开发沟通

和开发沟通

记住这句话，一定要勤沟通，既然实现效果的是开发同学，那么不问开发，问谁呢？先问清楚开发需要什么样的参数，再制作不迟，不然做出来的动效文档开发拿着也是白瞎不是么……

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

补充一句：如果想让动效文档更好地帮助开发同学实现效果，那么不如稍微费点心思跟开发请教一下他们是如何实现效果的，知其然后，你会对动效文档有更深的理解的。

好了，先上图

图片可能看不清楚，建议鼠标右键查看大图 

再放一张在线Excel的全景图，还可以插入图片，太好用鸟！！！

下面对这份动效文档进行拆解

1、备注

动效文档的备注，主要是一些提醒开发同学注意的地方，比如告诉他们图片可以点击放大（对于第一次打开这份文档的人，这样的提示可能还真有必要……）

2、表头

1）页面

是哪个页面需要动效设计，比如首页、详情页等等

2）模块

是哪个模块需要动效设计，比如banner、商品列表等等

3）图示

把具体的模块截图放到表格中，帮助开发快速定位，文字哪有图片直观呢？

4）触发条件

意思是当前动效发生需要的条件

例如下面的动效，出现删除的触发条件是拖拽。 

5）对象

一个模块的动效可能有多个对象发生了改变，那么就需要把当前模块所有发生改变的对象都列出来

比如下面的例子

热门城市模块一共有四个对象发生了改变，分别是：主标题、图片、图片标题、图片文字介绍。

那么为什么对象只有三个呢？

因为主标题和图片的改变是一样的，所以它们可以作为一组对象来使用。 

6）接下来是具体的参数

这些参数是我跟开发沟通后他们需要的参数值，切记一定要先问问开发。

透明度：写变化，开发的透明度是0-1，0代表0%，1代表100%

X轴位移：对象在X轴上的位移

Y轴位移：对象在Y轴的位移

总时长：当前对象完成所有变化需要的时间 

国际惯例，在开始之前，还是先来聊一聊我们设计中心在人机交互中对于动效的一些经验和想法。

动效，一直都存在于这个物理世界中。随着技术的不断进步和设备性能的不断提高，以及带有动效行为设计的不断优化，改变了我们在人机交互过程中原本复杂而无聊的交流过程，暂且不考虑它的作用，最直观的就是用户已经习惯了在电脑中体验丝般顺滑的动画效果（流畅性）。

手机终端也是如此。在扁平化设计的时代中，一个落地的手机界面的动态效果可以帮我们提升用户体验，使产品显得更加鲜活和统一的同时，也提升用户感知度并且进一步提升了产品的易用性。优秀的动效设计更能让用户从中感到惊喜，让用户感受到产品的温度和调性。

越来越多设计师设计动效作品

优秀的动效是克制的产品表达

在UI领域中，优秀的动效是一种克制的产品表达。许多设计师在设计过程中都会遇到一个问题，如何设计动效才算是输出了一个优秀并且有价值的方案呢？

我们考虑的方向是，优秀的动效设计不仅仅赋予了产品本身的调性和趣味，其次还要充分体现产品的定位和特点。它的发生并非是让用户去在意动效的本身，而是旨在让用户感知到它原本就是你产品的一部分，从而体现品牌的价值。

落地的UI动效原则

１、有效

有效的动效提升操作感受并提供良好的视觉效果，提升产品界面的灵动性、和带入感，增强用户对产品的认知和情绪的带入。

２、适度

Ios10 和 Material motion 带来很多优秀的动效，越来越多设计师热衷于设计众多的动画效果，很多动效由于本身的复杂性和冗长的时间产生的拖沓，使得用户产生不适，并失去产品的焦点。所以设计师在设计动效时，应该更克制，做到最短最高效，轻快流畅的交互表达。

３、性能优先

所有动效都不应牺牲产品本身的性能和响应时间，不仅起不了效果更影响用户体验，如果没有找到更加简明轻快的解决方案，那么我们更建议不要轻易加入动画效果。

４、开发效率

开发是真正的动效“设计师”。越复杂的动效，开发难度越大。没有谁能阻止设计师天马行空，但是要推动项目的进行，一定要考虑开发效率。对于最终实现的效果和完成的时间，这两者一定要做好权衡。我们建议设计师在开始动手设计之前，可以先和开发蜀黍们评估一下开发的时间和成本。

５、意外的惊喜

巧妙的动效设计，不仅能够提升产品体验，增加趣味性，甚至对完成产品目标和业务目标也有着事半功倍的效果。挖掘用户的兴趣点，提供超出用户预期的愉悦体验，是设计动效时需要思考的其中一个方向。比较有代表性的一个案例是Twitter的点赞效果。

动效输出规范

终于，一个好的idea有了，万事俱备，只欠开发了。我们正在努力建立一套高效的动效输出规范，让动效更有效地进入开发环节。

如何把设计师的想法更准确的表达出来、并且工程师能准确理解，最终快速实现效果，这样高效的流程才是我们想要的结果。

如果想要开发很好的还原动效设计效果，最好让设计和开发使用同一个方法论。最近花了很多时间在动效上面，调研和实践之后总结出一种成本低但是效果不错的方式。

方法论
这个方式的首要原则，就是需要让动效设计中使用的参数，可以直接使用在开发中。一般常见的动效，可以分解成以下三点：

• 属性（位置、透明度、大小、颜色...）

• 时间（开始时间、持续时间）
  

• 缓动函数

只要做动效设计的过程中，能够将动效清晰地分解出以上的三个数据，那么这些数据将可以直接用于开发。

在一个产品完整的设计流程中，交互与视觉定稿后，后续视觉规范的输出、UI控件的整理与标注、开发的高还原度，都会影响产品最终的用户体验。作为视觉设计师，在视觉设计的最后阶段则是繁琐且像素级别的精雕细琢，开发出来的精美页面需要视觉设计师做到以下几点。

　　一、视觉与交互之间应衔接无缝，即时刷新视觉页面

　　一般产品设计流程包括不同的阶段，不同的阶段其涉及的范畴内容不一样，作为设计师面对所有步骤不能一蹴而就，而是按部就班，计划行事。

　　前期准备阶段：确定设计需求的目标，竞品分析，用户研究，市场评估等;

　　设计需求分析阶段：设计需求的理清，业务逻辑的推敲，产品的架构的搭建;

　　设计执行阶段：交互设计原型的输出，视觉设计风格与方案确定，开发落实与测试上线，这构成一个不断迭代刷新的流程;

　　在以上阶段中，业务需求的变更与澄清，交互的迭代，视觉的刷新，是设计过程中最繁琐的阶段。设计启动前了解多端的适配情况(分辨率/屏幕精度)，综合考虑优先出什么分辨率;接着视觉设计师需面对庞大的页面工作量，且常会遇到与交互原型不一致的问题，需及时反馈并拉通讨论。这就需遵循一个清晰可见的迭代流程，对视觉设计而言，需求的变更与澄清-交互的迭代-视觉的刷新-设计的迭代构成的是一个闭环无缝的路线，只有这样才能为开发的启动，打下扎实的根基。

　　当然作为视觉设计师，设计过程中主动出ABC…方案而不是只拿出一个唯一的方案，只有将想法用画面来表达，才是够合格的设计师，特别是视觉设计师，好处可以锻炼自己的设计表达力，方便评审定稿，避免反复修改被人牵着走。

1. 起始状态、结束状态

2. 变化属性（宽度、高度、XY 坐标、XYZ 轴旋转角度、透明度、颜色…）

3. 时间脚本（多少 ms 到多少 ms 做哪个属性变化）

4. 渐变函式（Ex. ease-in）

5. 操作行为（停止并改为根据使用者操作、忽略、其他）

6. 参考范例