数据可视化大屏动效设计小结

知乎原文连接
带视频

这两年在从事数据可视化相关的设计工作，之前起草了一篇关于数据可视化的文章，但多是静态视觉传达上的东西，而自己感觉市场和行业从最开始的静态展现慢慢开始向动态设计表达的方向转变，突然就感觉没有什么动力写下去了。不过这篇文章也不全面（主要是3D的应用还没有实操），算是对自己这两年的一个小结吧。
由于文章里的案例都是真实已落地的项目，所以我裁掉了一些界面，看上去可能会有点摸不着头脑。

常见的动效展现形式

数字类：
最基础的数字累加效果：

codepen：https://codepen.io/hankthewhale/pen/NwKvLy

基于数字累加效果，增加一个数字上下翻滚的效果会让数字变动的过渡更加平滑，同时当数字发生变化时，相对单纯的数字累加，翻滚的效果在一定程度上也能够吸引到更多的注意力。

codepen：https://codepen.io/Tournevis/pen/qBEJaPj
另外一种常见的数字动画形式是翻页器，但这种形式在数据量不稳定的情况下适用性就不太好了。

codepen：https://codepen.io/hank73307/details/NQdyyz

poi打点：
对于可视化大屏中一些需要着重突出的信息，可以使用相对更跳脱更醒目的方式来达到吸引注意力的目的，但不建议把每个信息点都做成动态的，一般来说信息点在进入时有一个比较明显的动画就可以达到目的，完成入场动画之后让信息点回归到静态或者是弱动画来展示会比较合适，当与信息点产生交互时，出现一个比较明显的动画能够进一步提升体验。

水波扩散：
水波扩散是一种十分常见的效果，水波不断地在循环向外涌动，逐渐向外扩散，能够传达出发散、覆盖的感觉。
数据可视化案例-水波扩散

焦点收缩：
跟不断向外扩散的水波相反，焦点收缩是从界面边缘向内极速收拢最终汇集到一个焦点上。使用收缩的设计，能够极大程度的吸引用户的注意力并且有效的引导到焦点中心。
数据可视化案例-焦点收缩
数据可视化案例-焦点收缩

闪烁：
闪烁的设计灵感是来自故障艺术，当电子设备刚接入电力时，时常会有闪屏的现象。又或者是在赛博朋克中常见的霓虹灯质感。这样的设计可以给界面带来一定程度的机械感。
数据可视化案例-闪烁灯光
数据可视化案例-闪烁灯光
呼吸灯：
呼吸灯是指灯光在微电脑的控制之下完成由亮到暗的逐渐变化，感觉好像是人在呼吸。由于近年来非常频繁的被各大手机厂商拿来做设计亮点，也使得它在大众的审美取向中多了一些科技的感觉，容易和电路、电子设备这样的信息产生关联，进而传达出科技感。
数据可视化案例-呼吸灯
数据可视化案例-呼吸灯
还有像放大缩小渐隐渐显等等很多的动效方式，就不赘述了。基础的属性可能也就位移、大小、透明度这些，但是通过各种组合就能够发现多种多样的动效表达方式。只要能够达到想要表达的意思，能够传递给用户正确的信息就是合适的动效设计。

落地方式

落地方式有很多种，可以通过输出svga动画也可以视频+视频遮罩，我们团队目前用的是lottie。各种方式各有千秋吧，不做评判。
【aeux插件】sketch一键导出图层到ae

【bodymovin插件】ae导出json动画

前端通过【lottie】在网页上播放json文件
Lottie Docsairbnb.io

需要注意的几点：

【1】尽量不要写表达式，虽然没有验证过是不是所有表达式都不支持，但平时我常用的循环、随机、闪烁这种表达式都无法完全支持，导出的json都存在问题。
例如wiggle loopOutDuration(不支持) loopOut(支持)

【2】想要实现循环的效果可以让开发的盆友通过代码来设定开始帧和结束帧。
【3】描边只有居中描边，没有内描边或者外描边。
【4】不支持直接导出文本(无论中英文都不支持)，直接导出文本会报错，然后demo里面会出现文字错乱的情况。

【5】ae中的画板大小就是最终你导出的动画大小，所以最好是把尺寸弄好，免得开发的盆友们抓狂。
【6】在使用aeux从sketch导入到ae中时，如果使用到了渐变填充，渐变描边。需要手动将这些属性的名字改成【Gradient Fill （数字）】和【Gradient Stroke （数字）】。
属性名称为中文

属性名称改为英文
且数字尽量不要重复，不然会导致样式污染。例如下图中我两种不同的渐变用的是同一个属性名称，但是输出结果却只有一个。这里还有需要注意的一点，这个数字是从整个项目为统计维度来计算的，也就是说当我在一个项目中创建了多个合成，而我输出的时候只输出一个小的合成，那小合成中的属性名称也会被外面的污染（如果产生了的话）。
由于属性名称重复，导致样式渲染出来之后被覆盖。（左侧的绿色被覆盖了）