使用Principle为产品模块做动效

动效的作用

起因

对于产品经理而言，动效是一个既华丽又实用的展现产品功能模块的方式；

在开发的前期能有效向开发人员传递功能的操作流程，又能在开发过程中将动效部分转化为UX，提高软件操作的爽快感。

制作软件

工作平台：MAC

软件：Principe

对于动效的尝试我很早就开始了，但是一直处于摸索中，并未形成一套完整的可行工作流，而且也一直在摇摆感受各个软件在制作时的差异，本文提到的Principe是基于我的使用习惯体验还不错的一个软件，并且和Sketch的配合非常到位。

动效制作的工作流

第一步：绘制功能页面

使用Sketch绘制新功能模块涉及到的页面，只需要主流程中的各页面即可，页面的不同状态在Principe中完成，将需要做动效的页面组件编组模块话，方便后面再Principe中处理。

第二步：从Sketch导入到Principe

保持Sketch打开状态，在Principe选择Import(导入)，就能自动识别打开的Sketch项目了，选择需要的面板导入。

第三部：制作动效

Principe的优势就在于只需要确定好页面到页面的跳转逻辑，然后将需要动效的模块在不同页面里进行位置或者其他属性的调整，然后就可以自动生成中间动画，它会生成一个他认为合理的动画转场，这样就能大大简化动效制作时间。

相比于AfterEffect也是自动生成中间帧的方式，Principe没有那么自由，但是做到了恰到好处，能让人更快上手，而且出来的效果也不弱。

另一个优势是它的实时预览和调试功能相当不错，能很快看到效果，并且能录制动效，方便你导出后放到其他平台展示。

导出展示

这部分算是一点题外话，只是我个人的制作习惯，每个人可能有所不同。

Principe提供了录制视频的功能，所以将录制好的视频可以直接拿出来展示，但是如果想要更好的效果可以将视频用PR稍作剪辑，加个手机壳和背景，这样出来的整体效果就更漂亮；

为了网页展示GIF是个不错的格式，看到Dribble上那么多大神的作品，你是不是也想秀一秀，理论上讲PS就可以将视频转为GIF，但是我电脑上一直没法完成这个过程，感觉需要消耗很大的资源，所以我就找了一个替换软件，叫PicGIF，目前的效果还不错，但是有个缺点是出来的GIF文件比较大，如果后面有了更好的替代可能会更新这个工作流。

总结

这套工作流只是目前我尝试下来比较快速和简单的制作方法，后期还是会不断更新和完善来为了更好的展示效果。