原型绘制杂谈 动画效果制作

long long ago，动效制作属于专业ui设计师的领地，他们熟练的使用ae，输出生动有趣的动画效果俘获每一个人的心。直到有一天，sketch，qc（facebook origami）等站了出来，他们要成为偶像？拯救苦逼的交互设计师，让他们更快的生成更接近开发需求的可交互原型！

上面的都是废话。

——————————————————————————————————————————————

本文主要希望仔细讨论交互设计师的原型产出特别是动画产出的流程相关的内容。

＃前提1:交互设计师有必要输出原型中核心动画的交互效果

＃前提2:因为时间有限，只有部分核心的动画才能用AE or 其他动画制作工具产出

＃前提3:设计师最好提供接近于工程实现的产出，

如facebook origami／noodl（chrome插件）等几乎完全使用开发处理逻辑进行动效设计的软件

方便与工程进行耦合

＃前提4:动效本身（无论是不是fb origami自动导出的代码）都可能带来性能问题

但是过早的性能优化没有必要，要设计师写出neat code极难（因为需要很好的代码基本功）

＃前提5:本文适合那些希望耗费一定时间把产品做好的团队，

并不适合如下情况：

团队中喜欢扯皮，无论开发和设计都在尽力规避责任而非思考如何做好产品

设计师／开发不愿意学习新内容，尝试新合作流程也不愿意互相妥协配合

＃笔者对ui设计以及动效制作和代码经验都极少，请诸位大大轻喷。

——————————————————————————————————————————————

＃动效产出的前提——分类输出

根据我个人的工作经验而言，许多产品以及市场营销等等部门，他们对于app内精巧的交互动画并没有太多兴趣。确切的说他们也没有这方面的知识，所以面向这类受众交互设计师应该提供的是页面的总体流程和框架（从低保真的线框图到中度保真的原型都可能）。但是如果需要制作动效给开发和产品作为实际参考，那么交互设计师必须针对实际的页面做高保真。这不仅仅需要设计师拥有一定ui设计能力甚至是代码能力，也需要交互设计师能有恰当的平台和软件快速产出不同类型的内容。

我一直都希望交互设计师能使用mac进行工作，因为不仅仅可以使用sketch（这是一款较为容易上手，同时输出低保真以及高保真都较为方便的软件），也可以配合invision甚至是skala快速演示大致流程，方便市场／产品理解产品使用流程与核心要素。同时sketch也是一款对gui设计师而言相对简单容易上手的工具，能方便交互设计师快速学习以及产出ui切图，再使用fb origami 等其他工具连接patch，制作可交互动效果。（吐槽下在mac上进行前端开发等等也稍微方便一些）

（我觉得有些web上的效果直接用现成的css／现成的动画库也很快，现成代码和库都有，设计师几乎只需要把代码折腾下来简单调参数了。

有些团队的交互设计师并不能产出高保真图，那么他们只能等ui设计师产出对应的高保真图后才进行动效设计。然而动效设计本身也是需要不少时间进行打磨的过程，一味等着ui设计师的产出只会把流程拖得更长更复杂。如果交互设计师能自行产出他所需要的ui控件，那么他就可以独立完成动效制作的整个流程。无论是直接使用代码还是借助一些工具，交互设计师至少能把控他自己所要产出的全部内容，也能更快提供动效产出。

＃动效制作的要素——团队时间安排

时间既然永远都是有限的，那么是否等于动效制作变成遥不可及的奢望呢。如果这个团队希望提高出更好产品，那么可能意味着需要有着对应的分工。比如如果产品经理能够更多梳理用例和仔细书写功能要点，那么设计师就有更多时间专注于设计和更好的表现功能本身而非更多关注产品的功能设计。如果团队愿意支付一些经费购买和学习一些工具，比如zeplin和buffer，切图插件等等，就能减少设计师在切图以及标注上一些重复劳动的时间（当然设计规范等等的统合整理依然需要时间，可是并不是使用ai慢慢画线人手取值标注的低效无意义劳动）节约出来的时间才能转换成各种更实际的产出，无论是设计规范方面的建设，还是视觉设计师提高更好的视觉方案，交互设计师的动效产出等等。

好的产出背后不仅仅需要的是分工以及硬件的必要投入，也意味着决策方面的流程较为合理。假如一个团队让每个人都直接干涉开发上的细节（你这个变量，要这样命名，你要在这里，怎么怎么样写），对开发可能并不有利，同样对于设计的决策也应该强调总体方向和产品需求，技术限制等等而不是过于强调外行非常随便的观感（比如我不喜欢圆角，我喜欢那个竞品（不管我们的业务需要是不是与之类似），我喜欢高大上的（这种形容词tmd和具体产品有毛线关系呀，太泛滥了！））。通常团队产出慢并不是因为对细节的仔细打磨，而是来回在决策上没有意义的摇摆以及互相不负责任的扯皮，造成设计师／研发反复大幅度修改方案耗费时间，最终阶段反而只能用极少时间做出很简陋的方案。

＃动效制作的过程——接近代码还是接近设计？

目前有两种动画输出的方式——AE，keypnote等采取时间轴为基准，不可交互的动效产出，基于代码为基础，通过变量之间的连接，传递参数产出动效的产出。两种产出各有优劣，前者特别是AE,对于许多有着传统设计科班基础的设计师更友好——其一很多学校都提供了这类课程和培训，其次思维方式更接近于设计而非代码，但是更可能制作出的效果需要工程师更多开发时间，以及不一定能够实现。如果团队采取这种动效产出方式，可以比较方便的招聘设计师（因为美院或是各个大学设计相关专业的毕业生不少），也容易产出更加富有想象力和更美的动画（概率上而言）。这些团队可能更多使用ps进行界面产出，所以更可能要求交互设计师同样学习和使用ps进行界面产出方便后续链接AE进行动效产出。可能因为我个人对于adobe系列的产品有偏见，我认为这种流程对于非设计科班出身的交互设计师不太友好。

如果设计团队采取后者，使用更接近代码生成的方式来产出动效，那么交互设计师同样需要对代码以及各个部件面板连接的逻辑，参数变量的关系，触发基准等等，有所理解。这要求设计有一定代码上的逻辑甚至是能力（特别是如果直接使用某个js动画库or css的时候）。团队可能需要招聘有着编程基础的设计师（无论是不是野生），他们可能产出的效果更接近于开发但是却不够具有想象力（因为很少设计出身的设计师也懂代码，代码和视觉两者都很强的设计师的确存在，但是并不多）。可能在这种情况下，使用更方便的ui绘制工具，比如sketch／antetype等能方便设计师尽快绘制ui并且使用fb origami／noodl等工具慢慢连接各个各种要素进行动效设计和产出。

其实团队还有其他选择，比如使用ps或是axure精细的制作低保真到高保真的输出，并且利用axure的一些技巧（比如多张图叠合）产出灵动的动画效果。（确实有人能利用axure做出相当精美的动画效果）遗憾的是，axure本身对于ui绘制以及动画制作的支持都不充分，所以ui绘制效率不如ps也不如sketch，动画制作中也总是要叠合图层做动态面板（因为缺乏必要的一些视图所以图层堆叠debug起来很痛苦，复用性也不高）。我个人并不太喜欢这种方式，其一就是高保真图绘制依然需要依赖ps等其他工具，其次是因为过度依赖axure这个平台所以技能提升空间和日后发展都有被平台局限。

＃前提——学习能力以及投入方向（团队and个人）

团队层面的动效产出本身意味团队的成员有学习能力并且愿意互相指导和学习。这对于一些团队而言并不容易，因为并非每个成员都有意愿和能力在下班后依然不断提高特定方向的专业水准（或是他们可能希望提高别的方面的水准）。或许这就要求在团队组建和招聘的时候就严格把关，根据对产品的期待选择对应的设计师。

而且团队成员的投入方向也有着不同的选择，如果更希望使用adobe的产品，那么交互设计师显然要花费更多时间学习上手ps以及花一定时间学习AE。如果希望更接近于工程，那么设计师可能要花费时间学习sketch 和ui设计，以及花更多的时间学习培养代码能力和动效相关的逻辑思维能力。两者都不是一条容易走的路，前者有更多空间给倾向于展示性的作品，后者有更多空间给倾向于交互性的产品。团队对于产品的期许，以及个人对于自身发展方向的选择和视觉投入决定了不同的方向。