概念借助于图形化的手段，清晰、快捷有效的传达与沟通信息。从用户的角度，数据可视化可以让用户快速抓住要点信息，让关键的数据点从人类的眼睛快速通往心灵深处。数据可视化一般会具备以下几个特点：准确性、创新性和简洁性。

常用五种可视化方法

下面从最常用和实用的维度总结了如下5种数据可视化方法，让我们来一一看一下：

一、面积&尺寸可视化对同一类图形（例如柱状、圆环和蜘蛛图等）的长度、高度或面积加以区别，来清晰的表达不同指标对应的指标值之间的对比。

这种方法会让浏览者对数据及其之间的对比一目了然。制作这类数据可视化图形时，要用数学公式计算，来表达准确的尺度和比例。

a:天猫的店铺动态评分天猫店铺动态评分模块右侧的条状图按精确的比例清晰的表达了不同评分用户的占比。从下图中我们第一眼就可以强烈的感知到5分动态评分的用户占绝对的比例。

b:联邦预算图如下图，在美国联邦预算剖面图里，用不同高度的货币流清晰的表达了资金的来源去向，及每一项所占金额的比重。

c:公司黄页-企业能力模型蜘蛛图如下图，通过蜘蛛图的表现，公司综合实力与同行平均水平的对比便一目了然。

二、颜色可视化

通过颜色的深浅来表达指标值的强弱和大小，是数据可视化设计的常用方法，用户一眼看上去便可整体的看出哪一部分指标的数据值更突出。a:点击频次热力图比如下面这张眼球热力图，通过颜色的差异，我们可以直观的看到用户的关注点。

b: 2013年美国失业率统计在图中可以看到，通过对美国地图以州为单位的划分，用不同的颜色来代表不同的失业率等级范围，整个的全美失业率状况便尽收眼底了。

c:美国手机用户城市分布图中红点是用iPhone的人，绿点是用安卓的人。这两张在微博上看到的图，第一张是美国一个城市的一览，第二张图特写了纽约的市中心，尤其是曼哈顿地区。我们可以看到在市中心和主干道的人用iPhone居多，而用安卓的人都在郊区。这也引起了人们的热议，有的说在美国富人都住郊区别墅，所以富人爱用安卓手机；有的反驳说曼哈顿地区的人几乎都用iPhone，说明富人喜欢用iPhone手机。不管结论如何，都足以说明用户都被这些图所吸引，所以可视化的方式效果真的很直观。

注：科学家统计了2年里30亿条含有地理数据的twitter推文，根据客户端总结出来的数据。

三、图形可视化在我们设计指标及数据时，使用有对应实际含义的图形来结合呈现，会使数据图表更加生动的被展现，更便于用户理解图表要表达的主题。

Examples:

a: iOS手机及平板分布如下图所示，当展示使用不同类型的手机和平板用户占比时，直接用总的苹果图形为背景来划分用户比例，让用户第一眼就可以直观的看到这些图是在描述苹果设备的，直观而清晰。

b:人人网用户的网购调查下图可以看出，该数据可视化的设计直接采用男性和女性的图形，这样的设计让分类一目了然。再结合了颜色可视化（左面蓝色右面粉色），同时也采用了面积&尺寸可视化，不同的比例用不同长度的条形。这些可视化方法的组合使用，大大加强了数据的可理解性。

四、地域空间可视化当指标数据要表达的主题跟地域有关联时，我们一般会选择用地图为大背景。

这样用户可以直观的了解整体的数据情况，同时也可以根据地理位置快速的定位到某一地区来查看详细数据。

a:美国最好喝啤酒的产地分布下图中，通过以美国地图为大背景，清晰的记录了不同州所产啤酒在1987-2007年间在美国啤酒节中获得的奖牌累计总数。再辅以颜色可视化的方法，让用户清晰的看到美国哪些州更盛产好喝的啤酒。

五、概念可视化通过将抽象的指标数据转换成我们熟悉的容易感知的数据时，用户便更容易理解图形要表达的意义。

a:厕所贴士下图是厕所里贴在墙上的节省纸张的环保贴士，用了概念转换的方法，让用户清晰的感受到员工们一年的用纸量之多。

如果只是描述擦手纸的量及堆积可达高度，我们还没有什么显性化概念。但当用户看到用纸的堆积高度比世界最高建筑还高、同时需砍伐500多颗树时，想必用户的节省纸张甚至禁用纸张的情怀便油然而生了。所以可见用概念转换的方法是多么的重要和有效。

b: Flickr云存储空间达1TB的可视化描述Flickr对云存储空间升至1TB确实是让人开心的事情，但相信很多人对这一数量级所代表的含义并不清晰。

所以Flickr在宣传这一新的升级产品时，采用了概念可视化的方案。从下图可以看出，用户可以动态的选择照片的大小，之后Flickr会采用动态交互的方式计算和显示出1TB能容纳多少张对应大小的图片。这样一来，用户便有了清晰的概念，知道这1TB是什么量级的容量了。

注意事项在总结了常见维度的数据可视化方法和范例之后，要再次总体强调下做数据可视化设计时的注意事项，总结了三点如下：

1）设计的方案至少适用于两个层次：一是能够整体展示大的图形轮廓，让用户能够快速的了解图表所要表达的整体概念；之后再以合适的方式对局部的详细数据加以呈现（如鼠标hover展示）。

2）做数据可视化时，上述的五个方法经常是混合用的，尤其是做一些复杂图形和多维度数据的展示时。

3）做出的可视化图表一定要易于理解，在显性化的基础上越美观越好，切忌华而不实。

总结：作为设计师，除了掌握方法来有针对性的设计之外，还要在平时多留心积累素材，同时培养自己的创造力和专业素养，保持一颗好奇心，才能真正的设计出样式精美又实用的数据可视化图表。

[数据可视化]

本文编译自：Ross Crooks

数据可视化是指将数据以视觉的形式来呈现，如图表或地图，以帮助人们了解这些数据的意义。通过观察数字、统计数据的转换以获得清晰的结论并不是一件容易的事。而人类大脑对视觉信息的处理优于对文本的处理——因此使用图表、图形和设计元素，数据可视化可以帮你更容易的解释数据模式、趋势、统计数据和数据相关性，而这些内容在其他呈现方式下可能难以被发现。

数据可视化可以是静态的或交互的。几个世纪以来，人们一直在使用静态数据可视化，如图表和地图。交互式的数据可视化则相对更为先进：人们能够使用电脑和移动设备深入到这些图表和图形的具体细节，然后用交互的方式改变他们看到的数据及数据的处理方式。

我们必须用一个合乎逻辑的、易于理解的方式来呈现数据。但是，并非所有数据可视化作品的效果都一样好。那么，如何将数据组织起来，使其既有吸引力又易于理解？让我们通过下面的16个有趣的例子获得启发，它们是既注重风格也注重内容的数据可视化经典案例。

1：为什么会有“巴士群”现象

这里有一个关于复杂数据集的很好的例子，它看起来感觉像一个游戏。在这个例子里，Setosa网站为我们呈现了“巴士群”现象是如何发生的，即当一辆巴士被延迟，就会导致多辆巴士在同一时间到站。

只用数字讲述这个故事是非常困难的，所以取而代之的是，他们把它变成一个互动游戏。当巴士沿着路线旋转时，我们可以点击并按住一个按钮来使巴士延迟。然后，我们所要做的就是观察一个短暂的延迟如何使巴士在一段时间以后聚集起来。

2：世界上的语言

这个由DensityDesign设计的互动作品令人印象深刻，它将世界上众多(或者说，我们大多数人)语言用非语言的方法表现出来，一共有2678种。

这件作品可以让你浏览使用共同语言的家庭，看看哪些语言是最常用的，并查看语言在世界各地的使用范围。这是一种了不起的视觉叙事方法：将一个有深度的主题用一种易于理解的方式进行解读。

3：按年龄段分布的美国人口百分比

应该用什么方式去呈现一种单一的数据？这是一个令人信服的好榜样。

Pew Research创造了这个GIF动画，显示人口统计数量随着时间推移的的变化。这是一个好方法，它将一个内容较多的故事压缩成了一个小的动图包。此外，这种类型的微内容很容易在社交网络上分享或在博客中嵌入，扩大了内容的传播范围。

4：NFL(国家橄榄球联盟)的完整历史

体育世界有着丰富的数据，但这些数据并不总是能有效地呈现。然而，FiveThirtyEight网站做得特别好。

在下面这个交互式可视化评级中，他们对国家橄榄球联盟史上的每一场比赛计算“等级分”––根据比赛结果对球队实力进行简单的衡量。总共有超过30,000个评级，观众可以通过比较各个队伍的等级分来了解每个队伍在数十年间的比赛表现。

5：Google Flights上的美国感恩节

下面是将一段时间内在空中移动的物体进行可视化的好方法。这是由Google Trends驱动的项目，它跟踪感恩节前出发、到达和穿越美国的航班。

可视化始于当天很早的时间，随着时间的推移，像播放电影一样显示在全国各地飞行中的航班。不需要显示时间外的任何数字，观众即可以看到当天哪段时间是国际航班、国内航班以及往返于全国各地不同枢纽的航班的热门时间。

6：是什么真正造成了全球变暖?

我们都知道，“不要只简单地展示数据，讲个故事吧”。这正是彭博商业正在做的可视化——用互动的方式来讲述故事的来龙去脉。。

此图的关键是要反驳用自然原因解释全球变暖的理论。首先你会看到从1880年至今观测到的温度上升情况。为了使故事内容更加丰富，当你向下滚动时，这个可视化图会让你清楚的了解到相较于已被观测到的因素，造成全球变暖的不同因素到底有多少。作者希望观众能够得到非常清晰的结论。

7：在叙利亚，谁和谁在战斗？

许多不同的团体之间的关系可能令人很难理解–尤其是当有11个这样的团体存在的时候。这些团体之间有的结盟，有的敌对，反之亦然。这让人难以理解。

但是，Slate网站通过表格的形式和熟悉的视觉表达，将这些数据简化为一种简单的、易于理解和可交互的形式。观众可以点击任一张脸来查看双方关系的简要描述。

8：最有价值的运动队

这是通过叠加数据来讲述深层故事的一个典型例子。

这个交互由Column Five设计，受福布斯“2014年最具价值的运动队50强”名单得到的启发。但是它不仅将列表可视化，用户还可以通过它看到每支队伍参赛的时间以及夺得总冠军的数量。这为各队的历史和成功提供了更全面的概况信息。

9：美国风图

下面是一个类似感恩节航班的可视化图，除了图中显示的时刻，它还能实时显示美国本土的风速和风向。

它是直观设计的一个很好的案例：风速用线条移动的快慢来表示，方向通过线条移动的路径来表示。它会即时显示美国风向的总体趋势，无需任何数字，除非你在地图上点击鼠标。另外，使用时设定最多两个变量会使它更容易操作。

10：政治新闻受众渠道分布图

据Pew研究中心称，当设计师在信息内容很多又不能删的时候，他们通常会把信息放到数据表中，以使其更紧凑。但是，他们在这里使用分布图来代替。

为什么呢？因为分布图可以让观众在频谱上看到每个媒体的渠道。在分布图上，每个媒体的渠道之间的距离尤为显著。如果这些点仅仅是在表中列出，那么观众就无法看到每个渠道之间的对比效果。

11：著名创意人士的日程安排

这个数据可视化图是用奇特的想法描绘出的一个简单概念。这个表格利用Mason Currey的《日常惯例》一书中的信息展示了那些著名创意人士的日程安排，解读其时间和活动安排。这不仅是一个数据分析的例子(因为你可以通过单独的活动来浏览日程安排)，也是一个品牌宣传的佳作。

12：今年发生了哪些新闻?

最好的数据可视化方式，就是用直观和美丽的方式传达信息。Echelon Insights致力于这一方式，将2014年Twitter上最受关注的新闻进行了可视化。

1亿8450万条推文是什么样子？就是如下图所示的艺术品。

13：问题的深度

当你想强调规模的时候，静态数据可视化是表达你的观点的极佳方式。下面这张来自《华盛顿邮报》的信息图长得令人难以置信…这是故意的。他们在图中展示了一架飞机可以探测到的深海信号是多么的深，通过比较飞机的探测深度与高层建筑、已知哺乳动物的最大深度、泰坦尼克号沉船的深度等。这是简单的视觉效果和颜色梯度的极佳使用方式。

最后，将数据添加到新闻报道中(文中为失踪的马航)是提供背景的好方式。

14：前沿预算

上述图表相对简单，以下是创造设计精致的、传递大量数据的图表的方法。秘诀何在？——用简单和干净的格式，便于读者理解数据。

这个由GOOD Magazine和 Column Five制作的图表，解读了NASA的五年预算，显示资金将怎么花、花在哪里。此外，它还有一个主题设计，这真是一个全面成功的作品！

15： Kontakladen慈善年报

不是所有的数据可视化都需要用动画的形式来表达。当现实世界的数据通过现实生活中的例子进行可视化，结果会令人惊叹。设计师Marion Luttenberger把包含在Kontakladen慈善年报中的数据以一种独特的方法表现出来。

该组织为奥地利的吸毒者提供支持，所以Luttenberger就通过现实生活中的视觉元素来宣传他们的使命。例如，这辆购物车的形象表现出受助者每一天可以负担得起多少生活必需品。

16：奥地利太阳能年报

虽然有许多方法都能使数据可视化，但是其中，使用真实信息主体去创建数据可视化作品的做法非常了不起。这份来自Austria Solar的年度报告，通过在页面上使用太阳光感墨水，用真正的太阳能给公司数据赋予生命。

一句话总结：他们是天才。

说起数据可视化设计，如今绝对是热门的设计之一，而真正懂数据可视化设计的设计师却不多，随着大数据产业的蓬勃发展，很多企业都开始应用数据可视化。很多UI设计师突然会接到公司数据可视化设计的需求，如果不了解数据可视化的设计，那么肯定是一头雾水，不知从何入手。

首先看下线上旧版的设计，分析存在的问题。（长屏需要横屏观看）

问题

1、左侧大面积文字导致视觉不平衡，且密集

2、整体用色暗淡，图表用色没有规则

3、图表运用不恰当，不能有效传达数据信息

4、缺标题，数据信息优先级排列不恰当

结合这些问题作出了改版，（长屏需要横屏观看）

因为是改版所以能够看到线上真实的数据信息，这样旧版的数据呈现就能给到重要的设计参考价值，例如能够知道TOP10热门关键字大概是几个字，在设计图表时就会依据字数的长短来参考设计，也可以知道是否有极端数据，从而运用更适合的图表呈现等等。

下面依次对照新改的版本，解决旧版出现的问题。

问题一：

1、左侧大面积文字导致视觉不平衡，且密集

注解：

由于左半部分有大篇幅的文字，视觉上会显得密集，容易视觉疲劳，右半部分大面积的色块图表使得整个界面视觉上不平衡。

解决方案就是在把文字用排行榜图形分开，放到文字中间部分，这样就丰富了只有文字的单调设计，整体视觉较为平衡和谐，并且这样还能够突出强调重要数据信息。

问题二：

2、整体用色暗淡，图表用色没有规则

注解：

提取旧版的颜色，色彩很暗淡，对于深色背景来说，这样的配色方式并不会有好的视觉表现。

暗色背景通常用高饱和高明度的颜色，对比暗色背景更能聚焦视觉，突出数据可视化的表现，亮丽的色彩能够让数据可视化设计的更加绚丽。

数据可视化大屏设计慎用大面积的渐变色，小面积可尝试，一般大屏都是拼接屏，品牌不一样色差会表现不一，所以初稿出来后可以先去大屏上看下效果。

注解：

图表用色没有规则，上图三个图表都表现“正面”“中立”“负面”三个维度数据信息，但在用色上没有一个统一的规则，例如三个图表中黄色分别代表不同的维度信息，这样就无法建立观者的认知。

“负面”有警示的作用，运用红色调较为合理，“中立”色彩情绪上适合黄色调，黄色会给人中性的感受，例如马路上的等待的黄灯，例如一片树叶从绿色到黄色再到枯萎灰色，给人一种过程中的中立情绪感受等，“正面”就是给人积极的一面，所以绿色或者主题色蓝色都是很恰当的。

问题三：

3、图表运用不恰当，不能有效传达数据信息

注解：

同一个界面中左侧文字TOP10属性类似的“核心媒体TOP10”展示形式最好能有共性。旧版运用了柱状图并不恰当，尤其是标题字数过多时候并不推荐使用柱状图文字倾斜的展示方式，改版后加上相同的排行榜图标，数据直接展示出来，TOP10的效果会更好。

注解：

数据需要对比分析，显然这个玫瑰图表并不能很好的说明对比，每个维度大小排列没有规律，实际数据分布不均匀，导致没有对比的效果，改版后突出总的数据，用条形图从大到小依次排列各维度数据，数据上有对比，视觉上更有主次。

注解：

首先是旧版用色不恰当，最严重的问题是图表上没有任何数据，因为展示型的大屏，很少有交互行为，这样的设计是不可取的，不能让观者去猜百分比数据，数据可视化就要用图表数据的形式展示出来最直接的信息，除非是展示趋势并不是准确的数据。

注解：

旧版用的条形堆积图，其实更适合百分比数据的对比呈现，一个维度下面有若干个子项，比较适合分组柱状图（新改版为分组柱状图）或者分组条形图更为恰当。

注解：

旧版色彩搭配不和谐，趋势图需要突出趋势线，而不是体现数据的面积，红框注释不够直接尤其在颜色过多时，更不好分辨各个颜色指向的维度，新版的设计则能够准确指出各个维度的趋势线。

问题四：

4、缺标题，数据信息优先级排列不恰当

注解：

新闻的标题跟转发数才是观者的，而来源和时间就是次要信息，所以视觉上要为观者分出层级，这样不仅能够使观者看着更舒适，视觉上也很有层次，不杂乱。

旧版标题、来源、时间、转发数、都是相对于内容居中的状态，这种排版是不符合表格排版规则的，简单的做法就是文字左对齐，数字右对齐，数字右对齐能够更快速识别数据量大小，跟其他数据的对比，文字左对齐则是根据人从左到右的阅读习惯。

之前专门总结过一篇数据表格如何排版的文章，想了解的朋友，文章下面有数据可视化系列文章链接。

注解：

设计数据可视化大屏时一定要考虑用户浏览数据的优先级的构架，例如要遵循先总后分，先具体后抽象的逻辑，上图旧版把趋势放到了页面的第一视觉位置，就有点宣兵夺主了，根据先具体后抽象，改版后具体数据放到第一视觉位置，趋势信息排后。

旧版大屏没有标题，我是谁？我在干什么？我要去哪里？所以标题务必得有。

说了这么多设计要点，新手可能还是不知道设计的切入点在哪里，所以总结一个数据可视化设计分三步走法。

第一步：了解数据要表达的本质。

拿到一组数据，先分析主次，这组数据要表达什么？是展示数据，还是对比数据，或是实时监控数据，从而确定展示的优先级。

第二步：确定使用图表。

通过了解数据要表达的本质后，选择适合他的图表，这时候就需要打开几个开源的图表网站找图表，记住你的图表用的是网站的哪一个，开发如果找不到就丢给他网址。

网站有：Fusion Design、蚂蚁数据可视化-AntV、ECharts Examples、Highcharts

第三步：整体效果调整

功能性的数据展示都没问题，还要看下整体效果，例如用了过于多的柱状图，可能就会影响了整体的美感，图表尽可能多样性，数据表达信息就要用不同的图表展示。

数据可视化设计核心就是，通过美学设计形式把数据精准和高效的分析和表达。

数据可视化设计是目前较为热门的设计工种，通过本文分享的项目迭代案例，希望能够让你对数据可视化有些许了解。

互联网设计帮（公众号）

作者：吴星辰

转载请注明：片头模版 » 信息可视化设计案例分析(数据可视化的16个经典案例)