这些天, with technology driving the collection and production of massive quantities of data, it’s relatively easy to get your hands on information that can guide your daily decisions. 移动 apps draw on heart rate and other biometric data to track health and exercise goals. They provide real-time data on investments, personal spending, and budgeting. 它们甚至可以帮助父母评估他们的新生儿。 饮食和睡眠模式.

To grasp the sheer volume of data available, look no further than designer Nicholas Felton’s 年度报告 根据他自己的个人资料构建的. With so much information at your fingertips, the hard part is making sense of it.

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

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

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

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

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

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

动画 also helps 设计师 make efficient use of mobile device screens. “数据可视化中的运动有助于创建不同状态之间转换的意识，并在不干扰用户体验的情况下提供更多信息,Donska说. 实时交互可以进一步保持一个干净的界面，因为用户可以通过点击等手势来探索数据, 拖, 滚动, 和缩放. 例如, users could slide a finger along an axis to reveal different values or tap to unveil numbers.

将实时更新整合到动画数据可视化中可以使它们对用户更具吸引力. 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.

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

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

数据可视化并不局限于传统图表和图形表示的复杂数据集. Even a “like” button that tallies user sentiment on a social app is a way to visualize data.

抛开复杂性不谈，一组常见的 原理和技术 在制作数据可视化动画时发挥作用. 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, conforming to users’ innate expectations and senses of continuity and narrative. 毕竟，目标是帮助用户理解抽象数据，而不仅仅是吸引或取悦他们.

价值变化

当显示值随动画变化时, 而不是显示一个静态的数字, a numerical counter ticks up or a bar rises before landing on a final figure. This can be a powerful way to convey progress or growth—or lack thereof. 它还表示数据可能会更改, 在某些情况下, 动画值表示交互性.

价值变化可视化在移动领域非常普遍, 包括在健身方面, 教育, 还有金融应用程序. 在语言学习应用中, 例如, a bar may rise incrementally until arriving at a final score on a test. Value change shows progress and can provide the user with a sense of accomplishment, 鼓励他们继续学习.

将值更改应用于图表中的线条是显示随时间变化的另一种方法. In a bar chart showing different countries’ gross domestic product (GDP), 例如, motion can reveal the trajectories of national economies relative to one another. 这种视觉效果被称为 柱状图竞赛.

缓动、偏移和延迟

In the physical world, an object can’t instantaneously go from zero to 20 mph. In the digital world, 然而, you can create movement without acceleration or deceleration. 但这并不意味着你应该这么做. 对人眼来说, 这样的动作显得不自然。, 这就是为什么赋予图像元素自然的入口和出口速度是有益的，也就是所谓的放松.

抵消不同UI元素的引入并延迟它们的速度可以进一步向用户发出不同变量正在显示的信号, 它可以帮助在他们之间建立一个等级制度. 在一个股票交易应用中, 例如, the value of a user’s stocks might appear first followed by those of general indices. 偏移和延迟使用户更容易理解数字和图表，而不是一次全部呈现.

育儿

父级创建UI组件之间的关系. 当属性(例如position, 规模, (或颜色)在父元素中的变化, 子元素中的属性发生了变化. 例如, 在折线图上, 如果直线上的一个点是父点, as the user drags the point they could see the value (the child object) change.

育儿 is an effective way to increase interactivity and create hierarchy.

缩放

缩放 allows users to easily go from a birds-eye view of data to a more granular one. 在表示大型数据集时，它可能是一种有用的技术, 通常是在桌面上看的那种. 股票跟踪应用, 例如, 是否可以加载给定股票的每周价格视图，并允许用户放大或缩小以显示每日或年度数据.

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

要避免的动作设计陷阱

爱德华·塔夫特，被认为是 写书 on modern data visualization, had a simple maxim: “Above all else, show the data.”

注重传递信息. 颜色、形状和移动等属性只能用于增强对数据的理解. Extraneous visual elements—or “chart junk” as Tufte referred to it—detract from this purpose.

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

“With mobile you have a small form factor already that demands focus,” veteran designer 达雷尔·埃斯塔布鲁克他于2019年加入Toptal的网络. For any mobile workflow, without well-designed, discrete steps, “the user kind of goes awry.”

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

You can design focused and effective mobile data visualizations by avoiding these pitfalls:

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

在视觉效果中渲染运动在后端可能是资源密集型的，并且可能对前端的性能和用户体验产生负面影响. Large data sets or data that requires extensive coding elevates this risk. 在投入资源构建这样的视觉效果之前, 设计团队和客户应该清楚地知道期望的结果，并且这是值得付出努力的.

华丽或多余的动画

动画数据可视化应该支持应用程序的目的. ​​A language learning app might use motion to emphasize users’ progress, 而投资应用可能会巧妙地突出可操作的数据. 不管应用程序的性质如何, 然而, 在大多数情况下，设计师应该避免华丽的动画, 比如飘落的五彩纸屑或烟花. 他们不仅冒着视觉游戏化的风险，这可能会导致 不健康的订婚 with an app, but they can obscure or exaggerate what the data actually conveys.

过度互动的视觉效果

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

不一致的风格

Data visualizations should mesh with the overall style and functionality of an application, 这是苹果公司一再强调的 人机界面指引 用于绘制数据.

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

跟上激增的数据

Data has become a fixture in our lives, from work and school to health and finance. With ever more sophisticated smartphones and the spread of 5G connectivity, 数据量和 应用它的潜力——肯定也会长大.

动画 can be an important tool in helping people make sense of all this information. Motion makes it easier for users to comprehend key metrics, trends, and relationships. 与任何UX特性一样, 然而, 动画可能被过度使用或误用, 这最终会使数据变得难以理解. 运用运动设计原理和技巧, 设计师 can create animated mobile data visualizations that are 引人入胜的 and insightful.