如何让动效又快又好落地?5种动效设计格式优缺点。

动效设计,可以提升界面的趣味性和引导性,让用户浏览过程中不会太枯燥,获得更好的体验。

最近做的金山知了(后面改名为金山知识库)官网,头图元素加入了缓动效果,第一眼挺新颖的。

如何让动效又快又好落地?我分析了这5种格式的优缺点!

金山协作新年许愿活动,许愿按钮加入了运动的形象,更能吸引用户点击。

如何让动效又快又好落地?我分析了这5种格式的优缺点!

不过,输出动图和开发对接的过程中,我也遇到过一些问题:导出的动图模糊、资源太大、开发不支持动图格式等等,当时也是想尽办法地解决。

这次我总结了几种常用的动图格式,也提及我输出动图过程遇到的问题和解决方法,以及我们设计师该如何选择合适的动图格式。

  1. 序列帧
  2. GIF
  3. Lottie
  4. APNG
  5. SVGA

序列帧

刚开始接触动效,我最先了解到的 PNG 序列帧,就是输出动图的每一帧图片,然后交付开发,按帧播放图片实现。

比如这个加载动画,我的练习作品,导出序列帧资源很大,所以我平时基本不用这种格式。

如何让动效又快又好落地?我分析了这5种格式的优缺点!

导出方法:

AE 输出选择 PNG 序列,如果要导出透明背景,通道选择 RGB+Alpha。

如何让动效又快又好落地?我分析了这5种格式的优缺点!

GIF

GIF 支持安卓、iOS、网页,可以说也是比较常用的格式之一。界面设计中的小元素可以使用这个格式,比如运营按钮动画、点赞图标动画等,资源不会太大。

像我之前负责的新年许愿活动,因为是从 0 到 1 的产品,开发还没有支持 Lottie,所以许愿按钮动画输出 GIF 给开发实现,压缩后资源 300KB。虽然动图放大周围有锯齿,但是在手机上是看不到的。

如何让动效又快又好落地?我分析了这5种格式的优缺点!

导出方法有三种:

1. AE 导出 MOV 格式,再用 PS 转换成 GIF。(注意:可能是因为动画时间太长、文件太大,导出经常失败,所以我很少用这种方式)

如何让动效又快又好落地?我分析了这5种格式的优缺点!

2. AE 安装 Gifgun 插件,直接导出。

如何让动效又快又好落地?我分析了这5种格式的优缺点!

3. AE 导出 PNG 序列,将所有图片拖进 ISParta,勾选 GIF 输出。(注意:如果导出 GIF 图片有问题,需要勾选压缩质量,填写小于 100 的值就可以解决了)

如何让动效又快又好落地?我分析了这5种格式的优缺点!

如果 GIF 文件太大,可以使用无损压缩软件:PPDuck。

Lottie

Lottie 是一个用于 AndROId、iOS、Web、Windows 的动画库,用于解析使用 bodymovin 导出为 json
文件的 AE 动画。动画通过代码实现,是矢量的。动画库资源会增加安装包的大小,客户端会有推动成本,不过 WPS Office
有在使用,资源大小和稳定性目前来说是可以的。

不支持 AE 效果器直接添加的效果,比如高斯模糊、内发光、投影。

支持用图片导入 AE 做出的动效,比如金山知识库官网的头图,就是使用 Lottie 方式实现,资源小,动图也很清晰。

支持颜色渐变,但是导出 json 容易出问题。比如之前设计的会员卡片动效,渐变颜色导出后变成了黑白渐变。

如何让动效又快又好落地?我分析了这5种格式的优缺点!

这时候只需要将所有渐变图层名称按顺序改为 Gradient fill 1、Gradient fill 2、…,就可以解决了。

如何让动效又快又好落地?我分析了这5种格式的优缺点!

导出方法:

AE 安装 bodymovin 插件,直接导出。(注意:要选择保存路径,导出按钮才能点击。点击设置图标,选择 Standard 和 Demo,才能导出 json 文件和 demo 预览效果)

如何让动效又快又好落地?我分析了这5种格式的优缺点!

APNG

APNG 是基于 PNG 格式的位图动画格式图片,文件后缀依然是.png,可以在浏览器中预览动画。金山协作的表情包使用的也是这种格式动图。和 GIF 对比,它的优势在于动图边缘光滑,不会有锯齿和颗粒感。

如何让动效又快又好落地?我分析了这5种格式的优缺点!

导出方法:

AE 导出 PNG 序列,将所有图片拖进 iSparta,勾选 APNG 输出。

如何让动效又快又好落地?我分析了这5种格式的优缺点!

SVGA

SVGA 是由 YY 团队开发出来的一种跨平台的开源动画格式,同时兼容 iOS / Android / Flutter / Web
多个平台的动画格式,常用于直播礼物场景,适合炫酷的礼物动效。因为礼物效果比较复杂,一般是用 png 序列,一张图一帧地制作动画,输出 SVGA
文件。它只会生成一个 svga 后缀文件,代码和位图元素都被集成在了一起,但是 Lottie 会生成两个文件:json 代码文件+img
文件夹。

支持 AE 自带基础动画:位移、缩放、不透明度等,但是不支持图层渐变(Lottie 支持渐变)和 AE 自带及外部插件的效果控件特效,所以 UI 动效 Lottie 比较通用,不容易出错。

总结

讲了那么多动效落地方案,那么在实际工作中我们该如何选择使用呢?

资源大小对比

如何让动效又快又好落地?我分析了这5种格式的优缺点!

质量对比

如何让动效又快又好落地?我分析了这5种格式的优缺点!

使用场景对比

Lottie:基本适合所有 UI 动图,比如图标动效、加载动效、插图动效、运营按钮动效等,优先使用

GIF:移动端小元素动图可以使用,比如点赞动效(大尺寸透明背景动图不建议使用,锯齿严重)

APNG:表情包、小元素动图(比 GIF 质量好)

SVGA:直播礼物炫酷动效

序列帧:资源太大,不建议使用

以上就是我的业务动效落地经验总结,大家有需要这些导出插件的可以找我。

ALEI的设计思考

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/232261.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年3月1日 12:12
下一篇 2023年3月1日 12:14

相关推荐

  • 网页设计中视觉层次的五大支柱。

    一个"看起来不错"的网站他的视觉层次结构是可以直接影响用户的流量和决策的。从基本的角度来说,视觉层次结构描述了哪些元素在你的用户的注意力中占据了主导地位,并最吸引他们的眼球。但是,没有一种正…

    2023年2月14日 SEO操作
    00
  • UX设计如何避免“狼来了”

    不要用虚假的信息内容去误导用户。简单来说,当用户与网站界面进行交互的时候,信息以多种的形式给用户呈现出来。所以,页面的每个细节对於用户来说,每时每刻都在被引导和被影响。 其实,这和功能可供性有很大的关…

    2022年6月25日
    0125
  • 大厂动态设计最全交付指南!快来围观。

    本文将从动态的交付文件、成像原理,以及如何高效的与开发团队沟通等角度来分析动态设计交付,旨在帮助与我们遇到类似问题的团队提供合适的解决方案。前言开始阅读之前,我想让大家先思考两个问题:你平时接触的动…

    2023年3月1日 SEO操作
    05
  • Material design新版动效——界面内

    什麽是动效元素在界面内运动?简单来说就是屏幕内物体在两点之间的运动,沿着一条自然、凹陷的弧线。这种新版动效特点使用的是标准曲线。有以下两个特点: 1、 弧线向上 在生活和物理当中,元素向上运动需要克服重…

    2022年6月16日
    0139
  • 网站页面视觉设计注意事项与细节。

    每个网站都希望用户能多访问一点。用户在页面上停留的时间长,说明页面上一定有他们感兴趣的内容。那么,如何在网站设计中优化视觉效果呢?接下来,小编将与大家分享网站设计时优化视觉效果的细节。让我们看看! 网…

    2023年2月21日
    01
  • 用腾讯会议的实战案例,深入分析如何简化用户任务。

    前言随着产品不断迭代,产品功能会逐渐丰富全面,但对于用户来说,是不是齐全的功能就等同于好的体验呢?本文将以"腾讯会议设置布局"交互优化为例,结合《设计心理学 2》的相关理论,分享关于简化复杂任…

    2023年3月7日 SEO操作
    08
  • 分享东莞网站设计哪家公司好。

    东莞作为广东省的重要城市,拥有众多的网站设计公司,这些公司为各类企业提供专业的网站设计服务,网站设计的内容主要包括以下几个方面: 1. 网站规划:这是网站设计的第一步,需要根据企业的需求和目标,进行详细…

    2024年7月26日
    00
  • 视觉设计中的相似原理。

    具有相似视觉特征的物体最有可能是相关的,或者至少在用户界面设计方面应该如此。清晰、一致地为每种类型的UI元素应用可视化规则对于帮助用户轻松地理解和使用设计至关重要。这是因为每次交互都会开发出用户对其他…

    2023年2月23日 SEO操作
    03

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息