使用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文件比较大,如果后面有了更好的替代可能会更新这个工作流。

总结

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

推荐阅读更多精彩内容