从微交互到lottie动画

正文共： 2404字 14图    预计阅读时间： 7分钟

最好的产品通常会做好两件事情“功能和细节”。功能能够吸引用户关注这个产品，而细节则能够让关注的用户留下来。

功能和细节这两者对于产品来说都同等重要。但是人们在使用产品时大多数都是目的驱动，所以功能的重要性居于首位，细节次之，然而一个产品能吸引到用户的原因往往源于细节。细节的来源是精致的排版、漂亮的色彩、统一的字体、栅格系统的应用、精美的图标、情感化的设计理念和精美且富有趣味的动效。而诸多细节实际上都可以对于现在互联网产品的博弈中最重要的是微交互。

微交互是围绕着某个交互或任务的微妙时刻，它并不特指某个交互或者某个动效，而是和任务、交互相关的这个时间段中一系列的交互、动效和反馈。我们日常使用的APP中都有大量的微交互。

当我们探讨微交互的时候，我们常常会拿日常生活中的开关作为实例，执行按开关这个操作的时候，开关按钮会有力回馈，按钮本身会有物理上的位移，同时会有声音回馈反映到用户耳中，开关所启动或者关闭的对象会发生改变，并且让用户感知到。这种微交互毫无疑问在计算机被发明之前就有了，而这也是我们设计微交互的原理所在。

举几个栗子：iPhone静音:静音按钮被打开时，手机会有震动通知，UI上会同时显示静音图标；下拉刷新交互:当用户希望发现更多内容的时候，下拉界面，随后内容无缝地加载到页面中来，通常界面还会提醒内容已更新。

简而言之，微交互通过让产品更加人性化来提升用户体验。在设计UI的中，绝大多数情况下，我们都在反复斟酌界面的外观和感受，思考怎么将这些东西设计出来。但是当我需要考虑微交互的设计之时，则更多的是在产品、服务和品牌之间做权衡与抉择。微交互才是真正意义上以人为核心的设计：

• 提供即时反馈——视觉反馈符合用户的本能预期，它的存在让用户明白，他们的操作被用户接受；

• 促进互动——微交互本身就在鼓励用户进行交互，它能够指引用户，教育用户，让用户明白如何使用；

• 带来愉悦感——微交互本身就是呈现完美体验的良好时机。

细心发现的诸位可能已经发现，虽然一方面在强调微交互不是特指某个交互或者动效，但是微交互在UI设计的应用中确是通过动效的引入来实现。针对设计者将动效设计完成之后怎样高效、便捷的输出给开发工程师这一直是个斗智斗勇的故事。

传统的动效制作可能是切出GIF、导出序列帧(此两种导出方式我在“UI切图与命名规范”中以详细介绍)。或者是工程师自己做，那么动画要么无法实现，要么极其复杂。毕竟开发工程师要通过代码把动效实现出来，设计师得用开发所能理解的语言来描述。而使用切GIF图或者序列帧的做法来说这样使得软件安装包或者工程文件巨大，要是万一遇到网络环境不好的情况则成了失败的用户体验，同时切图还会导致动画元素严重失真，降低阅读性。

Airbnb助力交互动画，AE动画秒变原生代码。

Lottie 是 Airbnb(爱彼迎)推出的一种SVG(输出json字符串)动画解决方案，同时支持 Android、iOS、React Native 平台。当设计师做完动画只需使用 bodymovin 将动画导出成文件再传给前端，前端就能非常快速地引入文件和播放动画。有效的解决了动画落地难的问题，其工作流程如下：

简单来说，lottie动画的解决方案是用AE导出动画json字符串，而json中记录的是动画元素的锚点变化、颜色变化、透明度变化来实现用代码记录动画的整个过程。所以，在lottie动画支持的元素都是矢量元素。

所以通过在AE中建立矢量的运动图形，并记录动画后利用插件导出的json文件就可以直接通过代码实现以下效果：

1、tab动画切换

2、故障页情感化设计

3、加载/下拉刷新

4、Banner/弹窗

设计者具体应该如何操作呢？

这里我在文末整理了bodymovin的软件资料，下载插件可以在文末查看

如下图所示：

安装完成之后，打开AE在“窗口>扩展”菜单下，应该看到“Bodymovin”

在设置中你可以进行以下操作：

拆分：尝试将动画导出到多个json文件中。如果主组件有多个图层，则导出器将考虑主组件在时间上从何处开始进行细分。

字形：选中后，它将所有文本字符转换为形状。如果未选中，则需要提供字体文件或类名才能呈现正确的字体。

隐藏：选中后，它将包括所有隐藏层。当您的表达式指向隐藏层时，通常需要这样做。请记住，所有隐藏层都将被导出，从而增加最终文件的大小

引导层：选中后，它将包括所有引导层。当您的表达式指向引导层时，通常需要这样做。请记住，所有引导的图层都将被导出，从而增加最终文件的大小

Extra Comps：您可以选择其他合成作为动画的一部分导出。仅当您的表达式指向主comp或subcomp树中未包含的外部comp时才需要

原始资产名称：如果您已将jpgs等栅格化资产，它将使用原始来源名称将其导出到images文件夹。

独立：选中后，它将导出动画，并将播放器全部捆绑到一个文件中。如果页面中只有一个动画，可能会很有用。例如，用于传递横幅。

演示：它将导出demo.html文件，因此您可以轻松预览动画。

具体设置不作讲解说明了，点击绿色按钮渲染即可得到js文件，用记事本打开即可发现确实是记录了我们运动图形的锚点变化、颜色变化、透明度变化。

好了，现在你可以拿着js动画文件找程序猿愉快的进行动效开发了。具体的开发问题和相应的设置可以在官网中找到解决方案。

Lottie官网链接：https://airbnb.io/lottie/#/

因附件过大，故不能添加为附件。

链接：https://pan.baidu.com/s/15e1Hs-Z2JVGdBMEnay846Q 

提取码：o1eo

因本人能力有限，文章中还有很多不足之处，请各位指正。

本文由Haywardwang原创，并首发于我的微信公众号易知坊，有兴趣的朋友可以移步原文链接。