数据可视化在移动端的应用

随着大数据行业的快速发展，数据可视化设计在移动端的应用越来越多。今天我们就数据可视化在移动端的使用场景、特点、注意事项以及各个使用场景进行一次简单的分享。

 

目录

1.应用场景

2.数据可视化的特点

3.使用原则

4.图表分析

5.画重点

 

1.应用场景

数据可视化在移动端的主要体现是“数据图表”，我们最常用的数据设计组件就是：柱状图、折线图、环形图等，它们简单易懂，容易被用户接受。它们常常出现在与我们生活息息相关的产品当中，例如健身 app 中使用图表记录我们体重的变化；效率工具型的 app 记录分析你在某一件事情的花费的时间；金融理财展示股市中某一支股票的价格走势等等。

 

2.数据可视化的特点

数据可视化属于一种理性思维，产品通过图表可以向用户清晰的反应用户在每一个项目中所花费的时间和精力，用户可以通过数据可视化的图表形式快速了解到其中的信息。现在iOS 和 Android 平台暂时没有推出在数据可视化的设计规范，但是大家只要按照平台的基本规范设计，相信都能设计出美观、大方数据图表。如果大家对数据可视化有兴趣，这里向大家推荐 ANtv（
https://antv.alipay.com/zh-cn/index.html）蚂蚁数据可视化团队，ANtv 是国内在数据可视化发展最完善的团队之一。 

 

3.使用原则

在数据可视化设计的时候我们首先要注意的是尽量避免使用“复杂”的数据表现形式，针对于普通用户我们要始终坚持 – 简单易懂的原则。其次在选择数据表现形式的时候一定要考虑到是否适用于目标数据，如果不能清晰的向用户清晰的传递出数据背后的信息，那么建议你重新进行分析，更换数据表现形式。在我们经常使用的数据图表中，柱状图擅长数值比较；折线图擅长做数据趋势展示；饼图和环形图适用于各类数据比例比较。这里我们需要注意的是折线适用于具有连贯关系数据纬度进行比较，而柱状图则不需要。我们以不同蔬菜的价格比较和单个蔬菜价格趋势为例，例如当我们在比较各种蔬菜的价格的时候，由于各品类蔬菜没有任何连贯性的逻辑关系，所以折线图不合适，而柱状图则能清晰的表达蔬菜之间价格比对。

蔬菜品种之间没有任何连续性，所以不适合用折线图来表示；而单个蔬菜的价格走势是通过具有连续性的“时间”纬度进行比较的，所以趋势图选择折线图更加合适。

饼图不适用于分类过多的数据展示，随着数据种类的增加切片的数量也随之增加，每个切片的大小过于相似，无法达到数据对比的目的。

相对PC，手机屏幕展示的区域有限，不适宜展现数据纬度过多的数据。假设我们遇到数据纬度众多的数据，我们可以通过横轴交互来增加数据展示区域。

我们还可以对数据进行梳理清洗，通过增加交互步骤减少用户的记忆负担，分段查看数据。例如灯塔专业版中的行业数据将电影行业中涵盖的信息分成票房、影片数、影院数、银幕数等维度进行分析。

 

4.场景分析

柱状图

柱状图擅长对不同类型的数据进行数值比较，柱状图之间的条目相对独立，数据之间不需要有逻辑的关联性。我们常用的柱状图分为横向柱状图和纵向柱状图，如下图：

两者的区别在于纵向柱状图带有一定的逻辑关系，可用于 TOP 排名，数值越大的位置越靠上。例如 iOS 系统中会记录你最常使用的 App 形成纵向柱状图，并按照使用 App 的时长大小进行一次排列。

 

横向柱状图

横向柱状图只需在以 X 轴为基线通过对比柱形图的长短就可以进行数据比较，因其简洁、直白的设计形式深受用户们的喜爱，应用领域极广，是我们最常见到的图表形式之一。例如在支付宝中会显示用户每月的消费，并能通过横轴交互查看更多数据。

 

纵向柱状图

纵向柱状图以 Y 轴为基线通过对比柱形图的长短就可以进行数据比较，纵向柱状图区别于横向柱状图的地方在于：在具有一定关联性的数据种类进行比较的时候，可以通过数值的大小依次排列显示明确数据等级关系。例如网易有钱中会按照你消费的品类数值的大小进行排布，让用户明确知道自己在那一方面消费最多，并且依靠 Y 轴交互我们可以向下滑动查看更多数据信息。

 

折线图

折线图通过线链接横向相邻数据的数据表现形式，通常相邻数据之间都有一定的逻辑关系，一般以时间属性为主，表达一定周期之内的趋势走向。

折线图在金融领域的产品应用极其广泛，“折线图+涨幅数据”无疑是吸引用户理财的利器。这时折线图不单单代表数据，在用户心中已经成为一种标志。

当然折线图最重要还是记录段时间之内的趋势变化，例如微信运动中记录用户每天的运动量，用户可以根据折线图反馈的信息来调整自己的运动计划。

 

饼状图

饼状图是通过将一个圆饼按照分类的占比划分成多个区块，整个圆饼代表数据的总量，每个区块（圆弧）表示该分类占总体的比例大小，所有区块（圆弧）的加和等于 100%。

现在 App 较少用到饼状图而更多的采用环形图，因为饼状图和环形图两者有异曲同工之妙，都是应用于表示不同分类的占比情况，通过弧度（角度）大小来对比各种分类。但相对于饼状图，环形图的空间利用率更高。

 

环形图

由两个及两个以上大小不一的饼图叠在一起，挖去中间的部分所构成的图形。通过弧长来比较各类数据的占比大小。

在灯塔专业版中通过环形图能够准确的表达出各个电影所占总场次的比例。

 

5.画重点

1.在数据可视化的设计当中我们要是始终坚持“简单易懂”的原则，选择最合适的数据表达形式

2.柱状图擅长数值比较；折线图擅长做数据趋势展示；饼图和环形图适用于各类数据比例比较。

3.在有限的移动端的显示区域，我们可以借助于 XY 轴交互手段和对数据进行梳理增加交互步骤分段查看更多数据。 

 

原文地址：海盐社（公众号）

作者：姜正