首页 > 网页教程 > 设?#21697;?#20139; > 产品设计必学:动效落地输出指南整理

产品设计必学:动效落地输出指南整理

时间:2019-09-17    作者:Jadon7   来源:优设网

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

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

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

产品中的动效分类

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

1. 情感化动效

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

2. 交互动效

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

3. 复合型动效

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

影响输出方式的因素

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

1. 动画尺寸

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

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

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

2. 动画时长

影响原因与尺寸的影响原因类似,当?#35745;?#22534;栈的时间变长时,堆栈当中的?#35745;?#25968;量?#19981;?#22686;加,动画的占用内存相应的也就变得更大。所以,当我们的动画时间过长时也不适合使用这些所见即所得的格式类型。

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

3. 动画复杂度

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

情感化动效输出选择

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

  • 所见即所得格式
  • 所见非所得格式

所谓「所见即所得」就是输出之后即可预览的格式,比如 GIF 图/视频这种的格式,也是动效输出最基础的格式。

1. GIF?#20960;?#24335;

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

当然除了他自身所带的这么多优点之外,GIF 格式也因为他的应用年代技术限制,会有很多其他的缺陷。前面提到的很多优点往往也是因为诞生早给他自身带来的福利,他会有很多不可逆的问题。=第一点是对电脑的内存和性能占用非常大(根据 GIF 的时间尺寸等情况会有不同程度的影响)。第二点他是一个有损的文件格式,不论是色彩还是画面质感都会有一定程度的压缩。第三点是对?#35813;?#36890;道的支持非常有限,输出结果会非常差,时常会有锯齿或白边的情况。以上是我们在输出 GIF 格式之前,需要提前思考是否可?#36234;?#21463;的问题。

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

<iframe height=500 src="//player.youku.com/embed/XNDMwODU1OTEyNA==" frameborder=0 allowfullscreen></iframe>

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

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

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

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

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

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

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

2. 视频格式

视频格式在大多数的产品上也都可以直接兼容,相比 GIF 格式他的内存在一些派生出的制式下可以更小,我们的智能设备也可以在更小?#21335;?#32479;性能下读取视频格式。他的问题是对?#35813;?#36890;道的支持很差,并且他也是一种有损的输出格式。所以在动画输出时我们?#19981;?#23613;可能地减少对视频格式的使用。

Handbrake

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

3. APNG/WEBP

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

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

WEBP 是由 Google 推出,他目前也基本兼容所有的主流浏览器,相同的效果,webp 格式要比 png 格式小出来大概一半的大小,同时他也兼容所有的安卓设备,像一些 iOS 设?#24863;?#35201;通过一定的方式才可以支持,?#36824;?#30456;比来说各方面的表现都是非常优秀的。

这里推荐一款工具 iSparta ,这款工具可以帮助我们导出 APNG、WEBP 格式,也可以帮助我们导出带?#22411;该?#36890;道的 GIF,但是以我的经验来说导出 GIF 并不是很理想。像这两?#25351;?#24335;我们可以根据我们的设备不同,分开导出,可以在保证我们内容质量不被压缩的情况下保证更小的体积和性能占用。这些格式我们也可以直接拖到浏览器当中查?#30784;?/p>

这种新型的格式虽然可以弥补 GIF 或视频带来的负面影响,但是他们本身也面临的问题是硬件需要各?#25351;?#21161;支持才能使用,很多时候在开发?#26041;?#23601;不能很好的支持,这种时候就需要我们引出另一?#25351;?#24335;──序列帧/精灵图。

4. 序列帧/精灵图

序列帧

在客户端上,我们可以把我们的动画导出单独的图层序列输出,并且可以通过一些工具来压缩单独的图层序列?#28304;锏阶?#20302;的内存占用。

序列帧是一个无损且低内存的格式,但是他只能在客户端环境中使用,不建议在 Web 环境中使用。原因是序列帧一般都是随着 App 程序包一起下载下来的,但是 Web 中每次进入一个新的网页都需要重新下载。举个例子如果一个 60 帧的动画就得重复向服务器请求 60 次,在这?#25351;?#39057;次的请求下很容易因为一个小的问题导致整个动画无法正常播放,为了避免这种错误我们一般会把这个 60 张图合并为一个,并且通过代码在指定时间内显示某一个区块,所以这里我们引出另一?#25351;?#24335;──精灵图/雪碧图。

精灵图/雪碧图(Sprite)

当我?#21069;?#25152;有序列合并在一张?#35745;?#19978;往往还是?#36824;?#30340;,我们还需要提供给开发具体哪个时间显示哪一部分的具体参数。我们可以直接通过 AE 插件 CSS Sprite Exporter(By Bigxixi)直接快速地输出开发所需的代码和精灵图。

5. Lottie

Lottie 可以说是近两年在动画输出方面不得不提的一个格式,它由 Airbnb 推出,并且迅速在国内外各种大小厂快速推广开来,目前已经是一个非常普遍常用的格式,他在 AE 中的插件叫 Bodymovin,他的原理?#21069;?#25105;们的各种矢量元素、位图图层以及他们的效果关键节点打包的形式行成一个 json 格式的文件。

我们的开发人员拿到 Bodymovin 输出的 json 格式是无法直接使用的,他需要在代码中加入 Airbnb 提供的 Lottie 第三方库来读取播放,相当于 lottie 文件在我们各个端口设备上的播放器的作用,它会占用一定?#21335;?#32479;空间,但是一般情况下也不会很大,从产品长远发展的角度来说肯定是可以给我们 App 节省非常多空间的,这也正是 Lottie 可以在这么短的时间内被这么多公司所认可的原因之一。

Lottie 是一个非常强大的输出工具,它可以满足很多种类的矢量动画和?#35745;?#21160;画。但是他也有一些自身问题,首?#20154;?#23545;缓动曲线的解析会占用非常多的内存,这点后面会展开解释;第二点是各?#25945;?#25928;果的支持都不是很稳定,很多时候容易出 Bug。

下图为 Lottie 官方提供的对于 AE 特性的支持:

△ By Bigxixi

相关推荐
动效设计:5分钟教你打造Siri式波浪动效
设?#21697;?#20139;:25个完美的动效网站设计欣赏
动效设计教程:如何制作符合场景的交互动效?
12 个网页滚动特效设计案例赏析
动效设计:让网页设计的用户体验更有趣!
动效教程:产品的动效设计
动效设计对用户体验的重要性
8个优秀动效网页设计案例赏析
网页交互设计的一些理解
深挖交互设计?#21335;?#33410;提升用户满意度
8个原则打造优秀的用户体验
交互设计中6个通用原则的介绍
如何杜绝网页设计中视噪对用户的影响
电子商务网站如何设计高效易用的网站左侧导航树
网页视觉设计如何针对用户有效表达信息
交互设计之?#31243;?#19979;意识设计
前瞻:2012年Web设计和开发的15个最新趋势
用户体验评估之用户心理负荷的测量
百度统计流量研究院设计过程及思路详解
给不完整视觉信息寻?#26131;?#31616;单直接的解读办法
移动应用开发?#20309;?#32447;终端用户理解工作方法分享
分享:体验设计师需要学习的一些前端技术
分享:5招助你打造更加简洁的用户界面
?#31243;?#30028;面UI设计中的包容性设计
仿生设计—让互联网产品更易用
?#31243;?#20132;互设计中的默?#29616;?#23545;用户的影响
深入分析网页栅格系统的规范制作
深入谈交互设计之人人都懂交互设计
移动应用设计的横竖屏切换中的界面设计与体验提升
交互设计:移动应用与PC应用的交互差异浅析
交互设计师应该如何设计直观且有说服力的作品集
移动设备动画设计的12个原则分享
分析用户界面中扁?#20132;?#35774;计的优缺点
分享?#21592;?#36141;便利交互设计心得
富有灵感和创意的web布局及交互设计赏析
符合用户操作习惯的网站界面设?#21697;?#20139;

精彩推荐

?#35753;?#25945;程

王牌战士上线了吗
pk10滚雪球全天计划 江西新时时中奖qq群 7m即时比分app 新世纪娱乐网站多少 重庆时时彩龙虎正规吗 丰满裸体写真 一天赚20元 pk10全天二期人工计划 博彩王 大赢家足球比分