交互设计动效(推送交互效果)

导语：在上一篇文章《交互体验之动效深耕（上）》中，我们学习了动态效果设计的意义和价值，动态效果的作用以及交互效果中的设计原则。接下来作者继续和我们聊动态效果的分类和落地方案。
四。产品动态效应的分类动态效应大致可分为四种类型：导向动态效应、过渡动态效应、反馈动态效应和品牌动态效应。
1.向导式动态效果通过视觉和动态效果聚焦用户视线，从而吸引用户注意力，帮助产品业务实现某个模块的KPI，如提示引导、活动入口、动态横幅图等。
作者：张诗钟维诺
2.过渡动态效果过渡动态效果简单来说就是帮助用户了解页面之间的变化和层次关系，让用户清楚的知道自己当前的位置和将要跳转到的页面。
3.反馈动态效果反馈动态效果是告诉用户系统当前的运行状态，减少用户的迷失感，给用户一定的心理预期。
作者詹姆斯g。
4.品牌动态效果品牌动态效果是通过动态展示，突出产品的核心功能和特点，打造感性产品，给用户更深更强的记忆，达到品牌推广的目的。
亚历山大皮亚季科夫
动词（verb的缩写）动态效果持续时间动态效果持续时间是指从动态效果开始到动态效果结束所需要的总时间，对于动态效果持续时间的控制非常重要。时间过长，会有明显的停留感。如果时间太短，在用户感知到之前就已经结束了。所以动态效果需要快速对应，同时兼顾沉稳优雅。
伦敦城市学院神经学家Davina Bristow曾提出，大多数人每分钟眨眼15次，平均持续时间为100 ~ 150 ms，iOS和Android系统的动作反馈时间在100~500ms之间，即100 ~ 500 ms用户就能产生感知。
所以我们可以定义50ms为最小增减幅度，100ms为最大增减幅度，统一定义不同场景、不同类型的动态效果时长规格。
六。动态效果落地的n种解决方案为了方便用户快速获取产品，加载产品资源，我们需要控制下载包的大小，保证用户能够以较低的成本获取产品。
所以我们要控制动画的音量，还有一个原因就是占用的内存越大，动画占用的系统性能就越大，会导致部分用户手机卡顿死机，造成用户流失。
1.非交互式动态登陆方案1)GIF格式
GIF格式是由CompuServe公司在1987年创建的。由于其良好的压缩技术，即使在当时的低速网络时代，GIF格式也能毫无压力地显示出来，因此很受欢迎。由于年代久远的原因，它具有非常强的兼容性，市面上大多数智能设备都可以直接预览。
然而，随着互联网的不断发展，GIF格式本身的问题也逐渐显现出来：
占用设备大量内存和性能(GIF的时长和大小都是影响因素)；输出背景透明的GIF时，经常出现锯齿边和白边；它是一种有输出损失的文件格式，体现在颜色和图像质量上。虽然GIF格式存在上述问题，但由于GIF在不同设备间的兼容性较好，很多平台都会选择GIF作为预览动画的方式。那么如何输出GIF呢？
方法一：第一种方法也是传统的输出方法，用PS导出GIF。
虽然这是一种传统的输出方式，但却是目前唯一高质量输出GIF的方式。
方法二：使用AE脚本GIFGUN快速导出GIF，操作简单，导出速度快。您可以自定义属性，如GIF文件的大小和帧速率。但是导出的GIF质量不高，会有掉帧和卡帧，色差比较大。
方法三：通过Ezgif将视频转换成GIF，支持上传多种视频格式，包括mp4、webm、avi、mpeg、flv、mov和3gp等。支持的最大视频量可达100MB。截取的部分视频可以通过参数设置转换成GIF。
方法四：用Brewery3软件导出GIF。虽然导出的内存占用不多，但是输出质量很低，在没有更高要求的情况下可以选择使用。
2)视频
无可否认，这种视频格式普遍兼容许多产品。视频格式比GIF占用内存少，但是对透明通道的支持不是很友好，是有损输出格式。平时可以用这个工具——手刹进行视频压缩。
3)Apng/Webp
这两者都是从当前的GIF、PNG、JPG等衍生而来的。其中Apng是基于png位图动画格式的图片，是PNG位图动画的扩展，可以实现PNG格式的动态图片效果。它似乎取代了旧的GIF格式，但尚未得到官方认可。
Webp是Google在2010年开发的一种全包图像格式，因为它不仅可以有损(代替JPG)或无损(代替PNG)，还可以是动态的(代替GIF)，压缩比完全超越这三种常用格式。
目前可以被所有主流浏览器完美支持，但只能在移动设备上被代码框架完美支持。
Apng的优点：与GIF相比，支持的颜色范围更广，更清晰，占用内存更少，支持透明通道；Webp的优点：类似于Apng，但是ios设备只能支持Google发布的函数库。如何输出Apng/Webp？
方法一：第一种方法，可以选择工具：iSparta，将生成的PNG序列导入iSparta，调整参数导出。但如果序列帧多，导出速度会变得很慢，偶尔会出现卡顿、闪回、画面大小不一致等问题。
方法二：使用AE插件——BX-Webp/Apng Exporter。
注意：不要将导出地址设置为桌面，否则数据会丢失。导出前一定要把导出地址改成“/xxx.webp”或者“/xxx.png”！
4)序列框架
序列是一个逐帧表示动画的图像文件。一些工具可以用来压缩层的序列以减少内存。尽管序列帧是无损的并且占用内存少，但是最好只在客户端使用，而不要在Web环境中使用。
由于Web中的图片资源需要从服务器下载，如果序列帧过多，资源请求的数量无疑会增加，如果高频请求出现错误，很容易导致动画无法正常播放。
在客户端中，序列帧资源存储在APP安装包中，不会有问题。想要解决Web中的上述问题，就需要减少加载资源的请求数量，这就导致了CSS Sprite的诞生——Sprite diagram/Sprite diagram。
5)精灵/雪碧
sprite/sprite (CSS Sprite)作为序列帧的素材应运而生，以满足在Web上播放序列帧的需求。CSS Sprite是一种图像拼接技术，利用CSS背景定位来显示图像中需要显示的部分，以减少加载资源的请求。
如何输出：可以使用AE的插件CSS Sprite Exporter进行输出。
6)洛蒂
由Airbnb推出的Lottie是一个使用Bodymovin解析导出为JSON的AE动画的第三方库，支持ios、windows和web。他的工作原理是将我们的各种矢量元素、位图及其效果关键节点打包成一个JSON格式的文件。
但是当我们使用AE插件Bodymovin导出JSON时，开发并不能直接使用导出的JSON文件。开发者还需要在代码中引入Airbnb提供的Lottie第三方库来读取和播放JSON动画。
实现原理其实就是将动画中的元素进行拆分，描述每个元素的动画执行路径和执行时间。其次，为了保证交付开发的JSON文件没有问题，制作动画时需要特别注意洛蒂不支持的属性。
另外，虽然Lottie是一个非常强大的第三方动画库，但是仍然存在很多不确定性和兼容性问题。比如他对慢速移动曲线的分析会占用大量内存，在不同设备和平台上的支持效果也很不稳定。
关于JSON的导出，除了大家熟知的Bodymovin插件，还有Lottie平台推出的LottieFile插件。它类似于Bodymovin，但功能更多。理论上可以实时预览AE动画，但由于网络原因很难实时更新同步。
使用洛蒂时的注意事项：
洛蒂不支持任何形式的表达；Mask/track mask会极大影响洛蒂在Android上的表现；AE本身不支持内外划，洛蒂只能导出中划；Mask- reverse mask，最终输出不支持该功能；如果动画中涉及大量位图，会影响最终的表现；不支持图层效果和各种AE效果以及滤镜；在不影响动画的前提下，尽量减少层数；Bodymovin自带的预览功能往往不是实际效果。实际测试(可以用Framer进行实际测试)可以减少很多后期与工程师的沟通；洛蒂更新频繁，高配版对安卓版要求更高；在输出json时，尽量把合成尺寸切割到刚好适合你的动画大小，这样对开发者有利；如果你必须使用位图，输出位图后，你最好压缩图片。虽然轨迹遮罩和遮罩效果差不多，但是在洛蒂的导出上是不一样的，所以选择了轨迹遮罩。关于3D旋转和Z轴的位置，洛蒂Web支持3D旋转，但是这个动画在Android上完全无效，Z轴的设置在两个平台上无效；尽可能减少关键帧，可以采用亲子模式，而不是每层都加关键帧；避免使用路径关键帧，因为使用它们后会创建一个非常大的文档；可以使用空层，但为了让它正常工作，我们需要打开可见性，并将透明度设置为0。7)AE2CSS
这是一个AE插件，以CSS代码的形式导出AE的效果，理论上支持AE的所有效果，输出动画质量高，占用内存极少。他的实现原理是直接把基本属性动画转换成代码，复杂效果转换成sprite图，把两者结合在一起输出成一组文件。
虽然输出质量高，占用内存极小，但只能应用于Web和H5。
注意：目前只能导出纯色图层和位图的位移、旋转、缩放和透明动画，支持表达式和父子级别。
8)SVGA
是另一种类似lottie的文件输出格式，是同时兼容iOS/Android/Flutter/Web平台的动画格式。目前是礼品动态领域的主流应用形式。我们可以使用AE插件SVGAConverter输出SVGA格式的文件。在使用SVGA时，我们还需要开发和调用第三方库。
虽然比lottie占用内存多，支持的属性少，但是兼容性和稳定性更强。他和洛蒂在录制动画的方式上不同。洛蒂在AE中根据关键帧和慢动作的组合来录制动画。
所以存在慢动曲线分析不好导致的性能问题和稳定性问题，而SVGA是逐帧记录，类似于顺序帧，但是资源可以重用，所以占用内存少。
9)VAP
VAP的全称是Video Animation Player，是企鹅电竞为播放酷炫动画而开发的实现方案。比Webp和Apng有更高的压缩率，即素材体积变小，采用硬件解码，使解码速度更快。解决了洛蒂和SVGA支持AE受限的问题。
充电时刻：什么是硬件解码和软解？
硬件解码硬件解码，即将一部分原本由CPU处理的视频数据交给GPU，GPU的并行计算能力远高于CPU，可以大大减轻CPU的负荷。软的解决方案是软件解码，也就是用软件让CPU解码。洛蒂，GIF，Apng，Webp等。我们常用的都是软件解码，而MP4和VAP是硬件解码。
10)第三方动态效果库
第三方动态库很多，但是非官方维护有很多不确定因素，所以如果要使用第三方库，需要慎重考虑。下面是一些动态的第三方库供参考：
当然，还有一些在线动态设计工具，比如马良、Rive、Flutter、Lotter-Editor等等。
11)PAG
PAG的全名是便携式动画图形，一种听起来很奇怪的格式。是鹅厂开发的，但是还没有覆盖全平台。它不仅提供了AE导出插件，还在每端提供了桌面预览工具和跨平台渲染SDK。
PAG具有更快的解码速度和更高的文件压缩率，PAG桌面预览工具还提供了性能检测功能，可以帮助我们直观地优化性能问题。不仅如此，PAG还可以动态修改替代文本和图片等资源。
手动贴标与自动贴标…
原文链接：https://www.ui.cn/detail/582355.html
作者：Coldrain1，微信官方账号“CD动力效应研究所”
本文由@Coldrain1发布。每个人都是产品经理。未经许可，禁止复制。
来自Unsplash的图像，基于CC0协议。