WEB的10种数据可视化最佳做法

用户头像
北京/教育工作者/6年前/1102浏览
WEB的10种数据可视化最佳做法

数据可视化已迅速成为在网络上传播信息的标准。从商业智能到新闻业,它广泛用于各个行业,其帮助我们理解和交流数据。

我们的大脑已经准备好处理可视化呈现的信息,这使我们比图表和电子表格中列出的数据更容易理解图表和图形中可视化的数据。出色的数据可视化应该利用人类视觉系统的这些优势来显示数据,以便可以轻松地理解数据。它应该考虑到我们对视觉处理的认知,以增强或减轻观看者对数据的体验。

现在有如此多的工具和框架可用于构建这些图形,现在该回到基础知识了。是什么使数据可视化有效?使用数据进行设计时应遵循哪些指导原则?

以下最佳做法将帮助您设计丰富而有见地的数据体验。

1.针对特定受众的设计

可视化用于揭示模式,提供上下文并描述数据内的关系。尽管设计师对给定数据集中的模式和关系没有影响,但可以根据受众的需求选择要显示多少数据以及要提供什么上下文。毕竟,就像其他任何产品一样,如果查看者无法使用可视化,它就毫无意义。

新手的可视化应该结构化,明确且具有吸引力。他们应该用语言直接说明观众应该从数据中获取的内容。


另一方面,面向专业浏览者的可视化可以显示更细致的数据视图,从而允许浏览者进行驱动的探索和发现。细节和数据密度应胜过简单性和清晰度。


2.使用交互性来促进探索

这是一个令人震惊的数字:“纽约时报”网站上交互式可视化效果的访问者中只有10-15%实际上点击了按钮。《纽约时报》图形团队制作了业务中一些最好的作品,几乎没有人与他们互动!

这表明交互式可视化设计的意义在于,我们不能依靠交互来建立理解。关键数据不得隐藏在交互元素后面,而应在不交互的情况下可用。

但是,交互的最大好处是允许集成其他数据,以使感兴趣的观看者可以更深入地探索数据集。

一个吸引注意力的设计,可以使您的听众亲自投资于该项目,然后他们才能导航至更远的地方。看看Quartz 撰写的有关手写和文化的有趣文章。该文章首先要求读者简单地画一个圆,然后再概述对文化形状绘图的分析,该分析具有一些简单但有效的可视化效果。


3.使用视觉显着性集中注意力并引导体验

视觉显着性是使视觉元素与周围环境脱颖而出的特征,是数据可视化中的强大工具。它可以用来引导用户注意可视化中最重要的信息,以帮助防止信息过载。通过使用视觉显着性突出显示某些细节而压制其他细节,我们可以使我们的设计更清晰,更容易理解。

一些视觉变量(主要是颜色和大小)是我们创建和控制视觉显着性的关键。

配色方案是实现出色数据可视化的关键,因为众所周知,色彩特别擅长打破平衡。我们可以使用温暖的,高度饱和的颜色突出显示关键数据点,并应用凉爽的,不饱和的颜色将不太重要的信息推入背景。


4.使用位置和长度对定量信息进行编码,并使用颜色对分类信息进行编码

克利夫兰和麦吉尔在信息可视化方面的著名工作研究了视觉编码的有效性。在他们的发现中,他们根据我们对它们的准确度对视觉编码的不同类型进行了排序,从而为我们提供了以下(简化的)列表:

沿通用比例尺定位

  1. 长度

  2. 角度

  3. 区域

  4. 颜色

对于数据可视化设计,这意味着我们显示定量信息的首选应该是按位置对数据进行编码(如经典散点图和条形图中所示)。与基于角度的编码(如饼图)或基于区域的编码(如气泡图)相反,基于位置的编码可帮助观看者在更短的时间内进行更准确的比较。

但这并不是说所有可视化必须是条形图或散点图。在探索新颖的数据可视化方法时,牢记这些基本原理是一个好主意。

我在这里真正要强调的是,颜色不应该用于编码定量信息,而应该用于编码分类信息。也就是说,我们可以使用颜色显示不同的数据位属于不同的类别。


5.使刻度线和轴等结构元素清晰但不显眼

无论您是否支持极简设计方法,请转换一下角度,并从图表中消除视觉混乱。通过在数据元素和非数据元素之间创建视觉对比来使数据发光,就像Nadieh Bremer在她屡获殊荣的美国出生时间可视化中所做的那样。


删除所有对澄清数据无效的结构元素(例如背景,线条和边框)。衰减基本的结构元素(如轴,网格和刻度线),否则这些结构元素会与您的数据竞争以引起注意。样式网格为浅灰色,最大权重为0.5 pt,样式轴为黑色或灰色,最大权重为1 pt。

6.直接标记数据点

每个对某些数据进行编码的视觉元素都需要标记,以便观看者理解它代表什么。

太多的设计人员依靠图例告诉读者哪些符号或颜色代表其图表中的哪些数据系列。图例虽然对设计人员很容易,但对读者却很难。它们迫使读者在图例和数据之间来回扫描,从而给读者的工作记忆带来不必要的压力。

更好的替代方法是直接在图表上标记数据系列。通常这是一个更大的挑战,在下面的示例中,Nathan Yau已经完成了避免使用图例的工作,创建了带有许多直接标签的交互式小倍数显示。


7.使用消息传递和视觉层次结构创建叙事流程

最好的可视化效果可以讲述引人入胜的故事。这些故事来自数据的趋势,相关性或离群值,并被围绕数据的元素所加强。这些故事将原始数据变成有用的信息。

从表面上看,数据可视化似乎就是数字,但如果没有文字,就无法说出一个伟大的数据故事。消息传递具有清晰的视觉层次结构,可用于逐步引导读者浏览数据。

例如,可视化的标题应该通过明确说明读者应该从可视化中带走的单个关键见解开始叙述。分散在数据中的微小注释可以通过吸引人们注意离群值或趋势来为叙述提供支持。


8.将上下文信息直接覆盖到图表上

正如我刚才提到的,我们可以在可视化中使用注释来帮助创建叙事流程。有时,我们可以添加图形元素以使这些注释更加有意义-从而将信息更直接地连接到我们的数据。

以Susie Lu的这张图片为例。“夏季重磅炸弹”和“奥斯卡季节”叠加图赋予了山峰和山谷以其他含义的含义。它们可以帮助观看者以比仅提供字幕或注释更直接的方式来理解数据的重要性。


9.移动体验设计

静态可视化通常以JPG和PNG等位图图像格式发布,这对移动查看器构成了明显的挑战。许多数据可视化的优点在于它们的视觉细节,而许多这些细节在静态格式的小屏幕上丢失了。

举个例子:Accurat工作室关于诺贝尔奖的精美复杂的作品,在移动设备上几乎难以辨认,在印刷品和高分辨率视网膜显示屏上看起来像是全尺寸的神话般。


为了设计移动体验,可以使用JavaScript可视化库构建响应式可视化,或者为台式机和移动设备创建同一静态可视化的多个变体。

10.平衡清晰与清晰以促进理解

我今天谈到的所有最佳实践都归结为一件事:在复杂性和清晰度之间找到合适的平衡点,以符合受众的需求。

进行精美,细致,探索性的可视化总是很诱人的,但这很少是最合适的方法。设计图形时要考虑周全-允许听众的知识和目标来决定应包含哪些数据以及应包含多少数据,并整理数据以讲述您要讲述的故事。


4
举报
|
4
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
三个青年站在网页周边矢量插画
卡通女孩与网页表格3D渲染
网页页面矢量插画
一个男生和两个女生站在网页前面打招呼矢量
男生坐在网页面前办公矢量插画
三个青年正在装修网页矢量插画
三位美女围着网页看信息矢量插画
四个人物分别在上网贴纸合集
网页设计——纸杯蛋糕
卡通风格网页页面3D渲染
卡通风格网页页面3D渲染
互联网,互联网插画,商务,数据,项目,合作,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,沟通,渐变,蓝色插画,商铺,覆盖,管理,项目管理,效率,提升,高效,关系,拓展,
商务网页
网页背景
卡通风格网页页面3D渲染
男生和女生站在网页面前矢量扁平插画
 网页背景
网页图标
banner
运动风人物插画
互联网,互联网插画,商务,数据,项目,合作,精准,投放,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,交流,沟通,渐变
新年快乐送福网页矢量图banner
一个人拿着优惠券准备支付购物电商矢量插画
卡通女孩与网页表格3D渲染
浏览电脑网页的元素
你可能喜欢
相关收藏夹
大家都在看
登录注册