4000字干货！如何打造吸引人的大屏可视化动效设计？

前言：此篇主要讨论的是大屏可视化动效设计，与应用于各种移动应用、网页、软件等用户界面设计中的纯 UI 动效在定义、应用场景、设计目的与原则以及技术实现与要求等方面都存在明显的区别。纯 UI 动效更注重于提升用户体验和界面的生动性，而大屏可视化动效则更侧重于提高信息展示的有效性和大屏整体的视觉效果。两者各有侧重，但都是为了提升用户体验和信息展示效果。

一、动效设计的价值体现

1. 提升用户体验

2. 增强信息传达

3. 改善交互体验

4. 强化品牌形象

每个品牌除了有自己的品牌色和品牌元素外，也可通过独特的动效设计展现品牌特色，给用户留下深刻印象，增强记忆点，促进用户对产品及品牌的深度认同与信赖 ，比如 Google 的 logo 演变和 Apple 的 Face ID 动画。

5. 辅助数据分析

6. 提高信息密度

7. 增强沉浸感

8. 提升大屏的现场感和即时性

9. 营造氛围和情感共鸣

总结：动效设计虽然能够帮助可视化大屏设计提升价值属性，但在应用动效设计时也需要注意适度原则，避免过度使用影响数据的清晰展示和系统性能。合理的动效设计能够在提升用户体验的同时，更有效地达成数据可视化的目标。

二、动效设计的类型

1. 主视觉动效

主视觉动效主要包含摄像机动画、场景动画、背景动画、灯光动画以及页面切换动画。这里需要说明一下的是主视觉的场景内容虽然属于整个大屏的设计组件之一，占比高，但此处将不以设计组件进行展开阐述，将作为独立模块讲解，另外，主讲的是三维场景。

① 摄像机动画

大屏主视觉动画中，摄像机动画起着关键作用，它可以多角度，全方位展示数据。主要涉及到主场景入场动画和视角切换动画。在制作摄像机动画前，还有一项很重要的点是要确定好摄像机的 FOV（视场角），FOV 的计算方法通常与摄像机的焦距和传感器尺寸有关：计算方法可参考「相机视角 FOV 计算公式」

以 35mm 胶片相机为例，胶片的图像格式是 36mm 宽 24mm 高。 如果镜头焦距为 24mm，则：

摄像机动画的意义

摄像机动画的设计要点

总结：摄像机动画虽然可以模拟人眼观察事物的角度和方式，全方位展示数据内容，合理的动画设计可以增加大屏的沉浸感，增强动画的连贯性和提升用户体验，但需要准确控制好摄像机视角转换的速度和节奏，避免造成用户的眩晕感和数据表现不充分的现象。另外，在相同的传感器尺寸中，过宽的摄像机视角容易导致画面畸变，比如鱼眼镜头（焦距通常≤16mm），过窄的摄像机视角，空间容易被极致压缩，导致画面缺乏空间感，例如200mm的长焦镜头，我们在制作摄像机动画时需根据不同的场景选择合适的FOV。

② 场景动画

场景动画以城市场景为例，体现在建筑物的生长、城市板块抬升、城市道路交通流光效果、水域的波动等其它城市元素动画，搭配摄像机动画可以增加沉浸感和临场感。

场景动画的意义

场景动画的设计原则

③ 背景动画

背景动画在大屏视效中扮演着辅助角色，起到衬托主体、丰富整体画面的作用。

常见的背景动画有粒子动画、波浪变形动画、颜色渐变动画、纹理变形动画、几何图形动画等，例如 AE 中 Trapcode Particular 和 Stardust 粒子插件，以下是一些案例样式，图片来源：Pinterest。

④ 灯光动画

灯光动画主要体现在光效层面，能营造出强烈的科技感、穿梭感以及空间感，例如 AE 中的 OF（Optical Flares）、Saber 插件在大屏可视化设计中就会经常用到。以下是一些案例样式，图片来源：Pinterest。

2. 设计组件动效

① 标题动效

标题动效包括渐变动画、位移动画、缩放动画、旋转动画以及闪烁动画，他们可以作为单独的属性来生成动画，也可进行多项组合生成。在制作的时候把控好每个元素动画出现的时间，即可生成有层次且具有美感的标题动效。

② 图表动效

图表是数据展示的重要形式，是最为直观的信息传达方式。常用的图表动效有线形图、面积图、柱状图、直方图、条形图、气泡图、散点图、雷达图、漏斗图、饼图、环形图、水波图、仪表盘、热点图、树状图等。以下是一些图表动效案例，动图有进行抽帧看起来会卡顿。

③ 图标按钮动效

常见的图标按钮可以分为：图标、按钮、图标+按钮三大类，包括：区域/页面切换、提示反馈、状态变化、引导、数据更新这五种类型。以下是几个案例呈现，整体的动效都相对比较柔和，不激进。

④ 地图打点动效

通常应用在地球、地图以及城市大屏中，用来定位某一具体地理位置，有时候会结合不同的颜色来区分告警级别。比如位置标记、呼吸态、光柱图、渐变图形等。

⑤ 其它特殊组件动效

特殊组件主要包括下拉菜单动效、弹窗动效、地图飞线动效、扩散波、数字滚动动效。

三、动效设计的原则

大屏动效设计的原则包括信息优先、交互友好、简洁流畅、适度平衡、一致性、层次感、适应性、技术可行性、及时反馈、个性化、创新性、可维护性。原则只是让我们能够以这个为基础，需根据不同的业务需求进行灵活运用。

最后，以上就是此篇文章所讲的内容，在平时的工作之余实际是可以多花点心思去突破现有的一些动效设计，要保持对新技术、新趋势的敏感度，持续创新。

另外，大屏可视化动效设计师往往扮演着多个角色，除了需要具备 UI 设计和动效设计的能力外，还需要对数据处理、大屏交互等方面有一定的了解和实践经验。

PS:本人较懒，整理了一下动效设计导图，welcome 一起学习讨论，共同进步。

3DDATAX