动态生活：移动数据可视化动画指南

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

要掌握大量可用数据，只需看看设计师 Nicholas Felton 根据他自己的个人数据构建的年度报告。 触手可及的信息如此之多，最难的部分是理解它。

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

同时，过度或误导的动画可能会破坏其目的，模糊而不是阐明洞察力。 在为移动数据可视化制作动画时，设计师应该使用运动设计原则——并避免常见的陷阱。

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

动画不仅仅是数据可视化的点缀。 运动提供了无数的好处，它应该以实现特定结果为目标而应用。

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

研究表明，动画静态图表可以改善图形感知并增加观众的兴趣。 例如，元素可以以不同的速度进入，而不是一次显示所有图表，以免过多的信息使查看者不知所措。 动作“有助于显示或增强元素的视觉层次结构，或轴的方向以及数据的显示方式，”Toptal 网络中驻伦敦的 UI/UX 设计师 Tetiana Donska 说。

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

将实时更新整合到动画数据可视化中可以使它们对用户更具吸引力。 尼日利亚 Toptal UI/UX 设计师 Olajide Akinpelu 表示，在我们眼前看到数据更新有助于人类认知。 用户刷新静态数据将更难检测到变化； 实时运动可帮助他们识别否则可能会错过的洞察力。

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

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

数据可视化并不局限于传统图表和图形所代表的复杂数据集。 即使是在社交应用上记录用户情绪的“赞”按钮也是一种可视化数据的方式。

无论复杂程度如何，在动画数据可视化时，一套通用的原则和技术都会发挥作用。 我们在本文中关注的四种技术——价值改变； 放宽、抵消和延迟； 育儿； 和缩放——旨在为 UX 环境中的运动注入现实世界中运动的自然性，符合用户与生俱来的期望以及连续性和叙事感。 毕竟，目标是帮助用户理解抽象数据，而不仅仅是让他们参与或取悦他们。

价值变化

当显示值随动画变化时，不是显示静态数字，而是数字计数器滴答作响或条形上升，然后到达最终图形。 这可能是传达进步或增长（或缺乏）的有力方式。 它还表示数据可能会发生变化，在某些情况下，动画值表示交互性。

价值变化可视化在移动领域很普遍，包括健身、教育和金融应用程序。 例如，在语言学习应用程序中，条形可能会逐渐上升，直到达到测试的最终分数。 价值变化显示了进步，可以为用户提供成就感，鼓励他们继续学习。

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

缓动、偏移和延迟

在物理世界中，一个物体不可能瞬间从零加速到 20 英里/小时。 然而，在数字世界中，您可以在没有加速或减速的情况下创建运动。 但这并不意味着你应该这样做。 在人眼看来，这样的运动显得不自然，这就是为什么给图形元素以自然的进出速度（称为缓动）是有益的。

抵消不同 UI 元素的引入并延迟它们的速度可以进一步向用户表明正在显示不同的变量，并且可以帮助在它们之间建立层次结构。 例如，在股票交易应用程序中，用户股票的价值可能首先出现，然后是一般指数的价值。 偏移和延迟使用户更容易理解数字和图表，而不是一次性呈现它们。

育儿

Parenting 创建 UI 组件之间的关系。 当父元素中的属性（例如位置、比例或颜色）发生变化时，子元素中的属性也会发生变化。 例如，在折线图上，如果一条线上的一个点是父级，当用户拖动该点时，他们可以看到值（子对象）发生变化。

育儿是增加互动性和创建层次结构的有效方式。

缩放

缩放允许用户轻松地从数据的鸟瞰图变为更细化的数据。 在呈现大型数据集时，它可能是一种有用的技术，这种技术通常可以在桌面上查看。 例如，股票跟踪应用程序可以加载给定股票的每周价格视图，并允许用户放大或缩小以显示每日或每年的数据。

最常见的数据可视化形式之一是地图，广泛用于健身、自行车共享和叫车应用程序。 在这种情况下，缩放是一个关键工具，因为移动屏幕的限制极大地限制了可以在单一视觉中呈现的内容。

要避免的运动设计陷阱

爱德华·塔夫特（Edward Tufte），这位真正撰写了现代数据可视化书籍的人，有一个简单的格言：“最重要的是，展示数据。”

专注于传递信息。 颜色、形状和运动等属性只能用于增强对数据的理解。 无关的视觉元素——或者 Tufte 所说的“图表垃圾”——有损于这个目的。

在移动设备上，屏幕用户可能容易分心，数据可视化中太多的移动部分可能会让人不知所措。

2019 年加入 Toptal 网络的资深设计师 Darrell Estabrook 说：“对于移动设备，您已经拥有需要关注的小外形尺寸。对于任何移动工作流程，如果没有精心设计的离散步骤，“用户就会出错。”

Estabrook 补充道：“对于所有数据可视化，你必须问清楚，你向用户提供了哪些信息，以便他们做出下一个决定……按下按钮、写一封电子邮件或深入挖掘。 你需要做什么来为他们提供这些[信息]？”

您可以通过避免以下陷阱来设计集中且有效的移动数据可视化：

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

在视觉效果中渲染运动在后端可能会占用大量资源，并且可能会对前端的性能和用户体验产生负面影响。 需要大量编码的大型数据集或数据会增加这种风险。 在将资源用于构建此类视觉效果之前，设计团队和客户应该清楚预期的结果——并且值得付出努力。

华而不实或多余的动画

动画数据可视化应该支持应用程序的目的。 ​​语言学习应用程序可能会使用动作来强调用户的进步，而投资应用程序可能会巧妙地突出可操作的数据。 然而，无论应用程序的性质如何，在大多数情况下，设计师都应避免使用华丽的动画，例如掉落的五彩纸屑或烟花。 他们不仅冒着将视觉效果游戏化的风险，这可能导致对应用程序的不健康参与，而且他们可能会掩盖或夸大数据实际传达的内容。

过度交互的视觉效果

处理数据需要一定程度的精确度，用户需要在智能手机屏幕上占据相当大的一部分——通常认为 7 到 10 毫米是最佳做法——才能成功执行手势。 太多的交互性可能会变得麻烦和令人沮丧。 一次优先考虑一项操作是有益的。

风格不一致

数据可视化应该与应用程序的整体风格和功能相结合，Apple 在其人机界面指南中将其称为美学完整性。

根据尼日利亚的 UX/UI 设计师 Akinpelu 的说法，“在您使用的过渡类型、动画类型、颜色混合方面”保持风格一致性有助于用户导航数据集。

与激增的数据保持同步

从工作和学校到健康和财务，数据已经成为我们生活中的固定装置。 随着越来越复杂的智能手机和 5G 连接的普及，数据量——以及应用它的潜力——肯定也会增长。

动画可以成为帮助人们理解所有这些信息的重要工具。 Motion 让用户更容易理解关键指标、趋势和关系。 然而，与任何 UX 功能一样，动画可能会被过度使用或误用，这最终可能会降低数据的可理解性。 通过使用运动设计原则和技术，设计师可以创建具有吸引力和洞察力的动画移动数据可视化。

进一步阅读 Toptal 设计博客

• 引人注目和感动：运动设计原则指南
• 运动设计行业不断扩大的影响
• 使用这些移动应用程序设计最佳实践取悦用户