关于动效落地,我们可以做的更多

1年前发布

原创文章 / 多领域 / 教程
Jadon7 原创,如需商业用途或转载请与Jadon7联系,谢谢配合。

历时两个月断断续续终于整理完了这篇文章,希望能对大家工作中遇到的一些问题有所帮助(多图慎点)
最近求职中,有意向可以联系

概要


针对动效输出的选择正在变得越来越多,然而作为设计师我们仅仅只是对动效输出的选择有所了解往往产出的结果还是会不尽如人意。了解动效落地背后的原理,可以帮助我们在设计的前期阶段就了解应该如何去做设计才能更容易的对接和落地。

 


随着技术革新,用户对于产品细节的感知度和挑剔程度正在日益剧增,越来越多的产品都在尝试通过不同的手段来打造产品的差异化,而动效设计作为近年来大火的设计趋势之一也被越来越多的产品所青睐。动效对于一个优秀的产品也在日渐从“锦上添花”的地位慢慢变成“必不可少”的构成元素。但是当我们去观察身边很多的线上产品对于动效落地把控的时候发现现实结果往往并不尽如人意,很多优秀的概念、在想法阶段到最终落地几乎被打磨的体无完肤。我们以往的经验告诉我们可以通过简单的方式输出我们的设计作品并且加以跟进就可以使线上的结果达到很高的完成度,但是当我们面临动效输出的时候会发现,输出的选择在日渐变多,但是输出的结果还是很难达到理想的状态。


目前市面上针对动效的输出与落地主要还是围绕着基础的几种输出方式,输出方式的选择就困扰着很多的设计师,而作为设计师我们要做的不仅是了解在什么情境下应该选择什么样的输出方式,更应该了解这些流程化的输出方式的原理以及围绕这些原理我们可以在整个产品的设计流程中可以做到的更多的事情。




产品中的动效分类


在了解动效落地方式的选择之前,我们需要明白的第一件事是互联网产品当中的动效分类与一般意义上的动效有很大的区别。广义的我们把 UI 动效分为三类:



一、情感化动效


情感化动效偏向于感性的层面,主要目的是增加我们产品的气质和传达情绪,增加产品的魅力值,在一些小的细节上我们加入一些情感化的元素也可以以彩蛋的形式给用户惊喜。比较常见的有 app 中的 loading 动画,点赞动画等。





二、交互动效


产品流程、交互行为的串联,不论可实际操作的交互原型还是纯做 demo 展示的动效过场都可以算作交互动效设计,交互动效最基础的的形态就是原型流程图的串联交互稿。交互动效又可以细分为转场动效和微交互,分别应用于页面衔接和基础组件的交互反馈。前者可以传达给用户产品的层次结构和空间关系,后者可以使用户减少操作成本。




三、复合型动效


复合型动效不局限于感性层面的情绪传达,也不局限于交互行为的串联,往往真实场景当中更多的也是这一类动效,在与开发人员对接阶段也更容易存在各种各样的不稳定因素,对于设计师而言也存在更多层面的挑战性。





影响输出方式的因素


影响输出方式的因素


情感化动效一般情况下会受到三个方面的属性影响他的输出选择,分别是尺寸、时间、动画复杂度:




一、动画尺寸


动画尺寸越大=占用系统空间越大=占用的系统性能也越大,但是这个等式仅仅成立于我们常见的一些所见即所得的格式上,例如gif/视频/webp/apng 等。


类似这样的一些格式,是我们的设备所能接受的最简单最直白的格式。他去产出一个动画的逻辑一般都是不同的静态图像的堆栈通过给定的次序和时间逐个播放。这里边的每一个静态构成图尺寸越大,整个动画的占用内存相应的也就越大。但是我们的产品包的容量始终有限,不能允许太大内存的动效存在。



另一方面,大尺寸的静态图在预览过程中也需要耗费更多的设备计算,举一个很简答的例子,当我们在电脑上预览一张 800*600 的图和一张 2400*1800 的图电脑打开它所需要的时间是不同的,相应的,动画格式多个大尺寸静态图做预览时耗费的系统性能是成倍数增长的。



二、动画时长


影响原因与尺寸的影响原因类似,当图片堆栈的时间变长时,堆栈当中的图片数量也会增加,动画的占用内存相应的也就变得更大。所以,当我们的动画时间过长时也不适合使用这些所见即所得的格式类型。


需要注意的一点是,动画的时长对性能的影响会相对的小很多


三、动画复杂度


动画复杂度对在以上提到的输出格式当中不存在任何问题,更多的是在一些近几年比较时髦的输出工具上出现问题。对于复杂动画,我们要尽可能选择去输出所见即所得的格式。当选择了其他的格式时也要尽可能的减少动画的复杂度,保留重点,去掉冗杂的细节





情感化动效输出选择


一般情况下我们会根据动效的类型把输出方式分为两类:


· 所所见即所得格式

· 所见非所得格式


所谓「所见即所得」就是输出我们最常见的一些输出之后即可预览的格式,比如 GI比 图/视频这种的格或,也是我们很多的动效输出最基础的格式:



GIF 图格式


GIF 图格式可谓是作为设计师接触过的最多的动态格式了,GIF格式自 1987 年由 CompuServe 公司引入后,因其体积小而成像相对清晰,特别适合于初期慢速的互联网,而从此大受欢迎。因为时代背景使得他有非常强的兼容性,基本上可以再目前大多数的智能设备上直接预览。不论动效落地还是在各个平台上的兼容性也都是非常优秀的的,尤其在一些设计平台上,也是大家最多的选择用来做一些概念展示的格式之一。也因为他在不同平台设备之间的兼之间,他的传播性也是非常强的。


当然除了他自身所带的这么多优点之外,GIF 格式也因为他的应用年代技术限制的原因会有很多其他的缺陷,前面提到的很多优点往往也是因为诞生早给他自身带来的福利,他会有很多不可逆的问题,首先第一点是对电脑的内存和性能占用非常大(根据 GIF 的时间尺寸的等情况会有不同的程度的影响),作为设计师常有的一个经验是在网页上多开几个 GIF 之后电脑风扇就开始飚起来了。第二点是他是一个有损的文件格式,不论是色彩还是画面质感都会有一定程度的压缩。第三点是对透明通道的支持非常有限,输出结果会非常差,时常会有锯齿或白边的情况。以上是我们在输出 GIF 格式的之前需要提前思考是否可以接受以上的问题。



另外输出 GIF 图的过程也经常困扰着很多的设计师,我也为此录制了一篇关于 GIF 输出的经验分享



常规的 GIF 输出(After effects)会有三种选择:


第一种:首先 AE 输出视频格式,然后分通过 PS 输出 GIF 格式。这种方式是目前市面上最常见的输出方式,内存占用一般,输出质量一般。





第二种:在原有的基础上做部分优化,首先AE 输出序列帧格式,然后通过 PS 选择针对图片的优化方式输出。这是目前为止所有输出方式中内存最小失真最低的方式。内存占用低,输出质量高。但是存在问题是无法输出 500fps 以上的动画(PhotoShop限制 自身限制)。




第三种:直接通过GIF Brewery3输出。内存占用一般,输出质量低。一般针对前两种方式无法输出时选择, 优点是比较稳定,基本不会出现任何问题。





下图为不同输出方式输出结果对比:



另外还有第四种选择是通过 AE 插件 GIFGUN 直接导出,GIFGUN 插件是一个非常方便操作简单的插件,但是这里不推荐使用的原因是 GIFGUN 有一个限制是只能输出低的 30FPS 的动画,很多时候输出的结果会存在掉帧的情况




EZGIF 压缩 GIF 图


当我们输出图 GIF 图内存无法达到理想大小时可以使用 https://ezgif.com 来压缩。




视频格式


视频格式在大多数的产品上也都可以直接兼容,相比 GIF 格式他的内存在一些派生出的制式下可以更小,我们的智能设备也可以再更小的系统性能下读取视频格式。他的问题是对透明通道的支持很差,并且他也是一种有损的输出格式。所以在动画输出时我们也会尽可能的减少对视频格式的使用。



压缩视频格式——Handbrake 


我们可以通过 Handbrake 通过 软件来直接压缩视频格式,可以保证我们在输出视频格式时以最低的内存占用来呈现





APNG/WEBP


前面提到的两种格式是我们所接触最古老也最不容易出错的两种格式,但是随着技术进步这些格式很显然已经无法满足我们现在的动效。针对情感化动效我们也衍生出了很多新的格式,像 APNG、WEBP 之类的格式。这些格式是基于我们现有的像 JPEG、PNG、GIF 格式的所衍生出来的。


APNG 格式是 Mozilla 代码社区出来的一个格式,是对 png 位图格式的动画扩展,但是目前还没有得到 png 格式官方的认可,他在目前主流的所有浏览器上都可以完美支持,在移动的设备上通过一些代码框架也可以完美支持,他相比 GIF 支持的色彩范围更广,更清晰,并且占用更低的内存,支持透明通道,有非常多的优势。