这些天, 随着技术推动大量数据的收集和生产, 获取可以指导你日常决策的信息相对容易. 移动应用程序利用心率和其他生物特征数据来跟踪健康和锻炼目标. 它们提供有关投资、个人支出和预算的实时数据. 它们甚至可以帮助父母评估他们的新生儿。 饮食和睡眠模式.

要掌握大量可用的数据，只要看看设计师尼古拉斯·费尔顿(Nicholas Felton)的数据就知道了 年度报告 根据他自己的个人资料构建的. 有这么多的信息在你的指尖，困难的部分是理解它.

这就是动画可以提供帮助的地方. 动画数据使其更易于理解, 引人入胜的, 和有用的, 尤其是在移动设备的小屏幕上. 与动画, 数字变得更容易消化，否则会被忽视的趋势, 模式, 叙述变得明显. 与这些视觉效果的实时交互促进了用户的参与，并允许用户更深入地探索数据.

同时, 过多或被误导的动画会破坏其目的, 模糊的:模糊而不是阐明的见解. 在制作移动数据可视化动画时， 设计师 应该使用动作设计原则并避免常见的陷阱吗.

动画化移动数据可视化的好处

动画不仅仅是数据可视化的点缀. 运动带来无数好处, 它的应用应该以实现特定结果为目标.

帮助用户感知趋势和变化是在数据可视化中使用运动的一个关键优势. 已故学者汉斯·罗斯林(Hans Rosling)以绘制寿命和收入数据的动画而闻名 以显示健康和财富的变化 几十年来几十个国家. 这是一部引人入胜的动画，它阐明了一段时间以来的趋势，并抵消了人们对全球发展的普遍看法.

研究 建议动态静态图表可以提高图形的感知和增加观众的兴趣. 而不是一次显示所有的图表, 例如, 元素可以以不同的速度进入，以免观众被太多的信息淹没. “动作”有助于显示或增强元素的视觉层次, 或者轴的方向以及数据的显示方式,” Tetiana Donska他是Toptal网络公司驻伦敦的UI / UX设计师.

动画还可以帮助设计师有效地利用移动设备屏幕. “数据可视化中的运动有助于创建不同状态之间转换的意识，并在不干扰用户体验的情况下提供更多信息,Donska说. 实时交互可以进一步保持一个干净的界面，因为用户可以通过点击等手势来探索数据, 拖, 滚动, 和缩放. 例如, 用户可以沿着轴滑动手指来显示不同的数值，或者点击显示数字.

将实时更新整合到动画数据可视化中可以使它们对用户更具吸引力. Olajide Akinpelu, 来自尼日利亚的Toptal UI / UX设计师, 说看到眼前的数据更新有助于人类的认知. A user refreshing static data will have a harder time detecting changes; real-time motion helps them identify insights they might otherwise miss.

当然, 在不分散用户注意力的情况下，让过渡和动作显得自然，说起来容易做起来难.

移动动画和数据可视化技术

数据可视化并不局限于传统图表和图形表示的复杂数据集. 甚至在社交应用中，一个“喜欢”按钮也能反映用户的情绪，这也是一种可视化数据的方式.

抛开复杂性不谈，一组常见的 原理和技术 在制作数据可视化动画时发挥作用. The four techniques we focus on in this article—value change; easing, 抵消, 和延迟; parenting; 和缩放—aim to imbue motion in the UX environment with the naturalness of movement in the real world, 符合用户固有的期望、连续性和叙事性. 毕竟，目标是帮助用户理解抽象数据，而不仅仅是吸引或取悦他们.

价值变化

当显示值随动画变化时, 而不是显示一个静态的数字, 一个数字计数器滴答作响或一根杆子上升，然后降落在最后的数字上. 这是传达进步或成长(或缺乏进步)的有力方式. 它还表示数据可能会更改, 在某些情况下, 动画值表示交互性.

价值变化可视化在移动领域非常普遍, 包括在健身方面, 教育, 还有金融应用程序. 在语言学习应用中, 例如, 一个标准可能会逐渐提高，直到达到考试的最终分数. 价值变化显示了进步，可以给用户一种成就感, 鼓励他们继续学习.

将值更改应用于图表中的线条是显示随时间变化的另一种方法. 在显示不同国家国内生产总值(GDP)的条形图中, 例如, 运动可以揭示国家经济相对于彼此的轨迹. 这种视觉效果被称为 柱状图竞赛.

缓动、偏移和延迟

在物理世界中，物体不可能瞬间从0加速到20英里每小时. 然而，在数字世界中，你可以创造没有加速或减速的运动. 但这并不意味着你应该这么做. 对人眼来说, 这样的动作显得不自然。, 这就是为什么赋予图像元素自然的入口和出口速度是有益的，也就是所谓的放松.

抵消不同UI元素的引入并延迟它们的速度可以进一步向用户发出不同变量正在显示的信号, 它可以帮助在他们之间建立一个等级制度. 在一个股票交易应用中, 例如, 用户股票的价值可能首先出现，然后是一般指数的价值. 偏移和延迟使用户更容易理解数字和图表，而不是一次全部呈现.

育儿

父级创建UI组件之间的关系. 当属性(例如position, 规模, (或颜色)在父元素中的变化, 子元素中的属性发生了变化. 例如, 在折线图上, 如果直线上的一个点是父点, 当用户拖动该点时，他们可以看到值(子对象)的变化.

养育子女是增加互动性和建立等级制度的有效方法.

缩放

缩放允许用户轻松地从鸟瞰数据视图切换到更细粒度的视图. 在表示大型数据集时，它可能是一种有用的技术, 通常是在桌面上看的那种. 股票跟踪应用, 例如, 是否可以加载给定股票的每周价格视图，并允许用户放大或缩小以显示每日或年度数据.

最常见的数据可视化形式之一是地图, 哪些在健身中被广泛使用, 自行车分享, 还有叫车软件. 在这种情况下，缩放是一个关键工具，因为移动屏幕的限制极大地限制了可以在单一视觉中呈现的内容.

要避免的动作设计陷阱

爱德华·塔夫特，被认为是 写书 关于现代数据可视化，他有一条简单的格言:“最重要的是显示数据。.”

注重传递信息. 颜色、形状和移动等属性只能用于增强对数据的理解. 无关的视觉元素——或者如Tufte所说的“图表垃圾”——会削弱这一目的.

在移动, 屏幕用户在哪些地方容易分心, 在数据可视化中，太多的活动部分可能会让人不知所措.

资深设计师说道:“在手机领域，你需要专注于较小的形式因素 达雷尔·埃斯塔布鲁克他于2019年加入Toptal的网络. 对于任何移动工作流程，如果没有精心设计的离散步骤，“用户就会出错。.”

埃斯塔布鲁克补充道:“对于所有数据可视化, 你得问, 你给用户提供了什么信息，以便他们做出下一个决定，是按下按钮，还是写一封电子邮件，还是更深入地挖掘. 你需要做些什么来为他们提供这些[信息]?”

通过避免以下陷阱，你可以设计出专注且有效的移动数据可视化:

资源密集的视觉效果不会增加多少价值

在视觉效果中渲染运动在后端可能是资源密集型的，并且可能对前端的性能和用户体验产生负面影响. 大型数据集或需要大量编码的数据会增加这种风险. 在投入资源构建这样的视觉效果之前, 设计团队和客户应该清楚地知道期望的结果，并且这是值得付出努力的.

华丽或多余的动画

动画数据可视化应该支持应用程序的目的. 语言学习应用可能会使用动作来强调用户的进步, 而投资应用可能会巧妙地突出可操作的数据. 不管应用程序的性质如何, 然而, 在大多数情况下，设计师应该避免华丽的动画, 比如飘落的五彩纸屑或烟花. 他们不仅冒着视觉游戏化的风险，这可能会导致 不健康的订婚 但他们可能会模糊或夸大数据实际传达的信息.

过度互动的视觉效果

处理数据需要一定程度的精确度, 而且用户需要智能手机屏幕的相当一部分——7到10毫米通常被认为是一个 最佳实践-成功执行手势. 过多的交互性可能会让人感到麻烦和沮丧. 一次优先处理一件事是有益的.

不一致的风格

数据可视化应该与应用程序的整体风格和功能相匹配, 这是苹果公司一再强调的 人机界面指引 用于绘制数据.

根据Akinpelu的说法, 尼日利亚的UX/UI设计师, 在你所使用的过渡中保持风格的一致性, 动画的类型, “颜色混合”帮助用户浏览数据集.

跟上激增的数据

从工作、学校到健康、金融，数据已经成为我们生活中不可或缺的一部分. 随着越来越复杂的智能手机和5G连接的普及, 数据量和 应用它的潜力——肯定也会长大.

动画可以成为帮助人们理解所有这些信息的重要工具. 动态让用户更容易理解关键指标、趋势和关系. 与任何UX特性一样, 然而, 动画可能被过度使用或误用, 这最终会使数据变得难以理解. 运用运动设计原理和技巧, 设计师可以创建引人入胜且富有洞察力的动画移动数据可视化.