新闻中心

News

仪表特效——AE在UI动效设计中的应用


动效设计是UI设计中不可或缺的一环。随着硬件性能的发展和动效输出方式的优化,大家对动效的认知也从最初的认为动效只是为了美观酷炫,到逐渐认识到动效对于提升用户体验和产品需求的重要作用。

 

最近几年,除了老牌AE之外,InVision、Flinto、Principle、Marvel等大量轻量级动效工具相继涌现,甚至掀起一股“动效”热潮。这些新兴工具主要特点是轻量、快捷、学习成本低,虽然确实可以帮助新手快速入门,解决许多基本动效问题。然而由于其轻量的特性,在设计一些较为复杂的动效甚至是特效时,就会显得无力。

 

而在利用老牌工具AE进行UI动效设计,设计师只需配合PS和AI等自家软件,在PS或AI里设计好UI视觉稿后,再稍加整理图层,即可无缝衔接AE进行动效设计。下面就来一起看一下,如何把PS与AE进行无缝链接。

 

图片1.png

 

 

一、PS和AE如何链接

首先,在PS里将文件图层进行整理。

 

图片2.png

 

然后,将整理好的PSD文件导入到AE里。选择可编辑的图层样式,即可将PSD文件里的图层以及图层样式全部导入到AE里进行相关的动效设计。


图片3.png

 

图片4.png

 

二、AE做出的动效该如何落地

设计师在做动效设计的时候灵感喷涌,兢兢业业做出炫酷的效果,结果一和开发工程师对接就懵了——要么无法实现,要么极其复杂。毕竟开发工程师要通过代码把动效实现出来,设计师得用开发工程师所能理解的语言来描述。


图片5.png


那么我们该如何将动效转化成开发工程师看得懂的语言?

首先,需要将动效量化。


图片6.png

 

然后,详细记录AE文件里的动效数据以及运动曲线。

 

图片7.png


图片8.png

 

最后,将详细的数据汇聚成一份数据表格,如下表所示:


图片9.png

 

通过以上步骤,开发工程师就能解决80%的动效实现问题,但遇到一些复杂动效/特效就会失去作用。因为复杂动效/特效涉及的数据不单单只有时间、变化、曲线,而是由更多的AE内的功能实现,而这些功能是用计算机语言编程好的,显然是不可能提取出相关代码供开发工程师使用的。这时候我们就可以使用LOTTIE、KEYFRAME类的开源库,将AE导出的动画资源直接在项目中应用了。下面我们拿LOTTIE来举个例子:


图片10.png

 

Lottie 是 Airbnb 开源的一个动画渲染库,同时支持Android、iOS、React Native 平台。通过 AE 插件 bodymovie 可导出 json 文件作为动画数据,其工作流程如下:

 

图片11.png

 

我们只需把相关软件安将完成,然后进入AE里,开启插件生成一个json格式的文件(json文件描述了该动画的一些关键点的坐标及运动轨迹),再交给开发工程师引用,如此一来,不需要任何图片和gif,动画效果就可以实现出来了,非常简单方便。

 

图片12.png

 

目前,虽然还是有很多高难度的动效/特效无法实现,但是随着科技的发展,老大哥AE和AE的各种强大的开源库、脚本和插件正在飞快地更新和出现,相信过不了多久,只要设计师能设计出来的动效,一定可以通过开发工程师轻松地落地实现。