干货 | 揭秘信息可视化图表的设计方法

信息可视化包括了信息图形、知识、科学、数据等的可视化表现形式,以及视觉可视化设计方面的进步与发展。地图、表格、图形,甚至包括文本在内,都是信息的表现形式,无论它是动态的或是静态的,都可以让我们从中了解到我们想知道的内容,发现各式各样的关系,达到最终解决问题的目的。信息可视化的意义就是在于运用形象化方式把不易被理解的抽象信息直观地表现和传达出来。

我们用一个简单的例子来说明一下信息可视化:


上图所示是信任圈,一款基于Google+的信息可视化应用。Google+是一款类似于微博的社交软件,图中我们可以看到绿色为相互关注的人,黄色为你关注了他而对方没有关注你的人,红色为单方面关注你的人。这样一个信息图就可以清楚的反应出在Google+上,人与人之间的信任关系,这一抽象概念。


从上图看三位名人的信任圈就可以非常清楚明了的了解他们的交友状态这一更为抽象的概念。1为小甜甜布莱尼,2为英国著名音乐制作人,3为Facebook 马克。而图表呢?根据道格·纽瑟姆2004年定义,从表现形式的角度“信息图表”作为视觉工具应包括以下六类:图表、图解、图形、表格、地图、列表。


信息可视化图表则隶属于视觉传达的一种设计,是以凝练、直观和清晰的视觉语言,通过梳理数据构建图形、通过图形构建符号、通过符号构建信息,以视觉化的逻辑语言对信息进行剖析视觉传达方式。

图表类型

信息可视化图表能使复杂问题简单化,能以直观方式传达抽象信息,使枯燥的数据转化为具有人性色彩的图表,从而抓住阅读群体的眼球。

设计的目的决定了图表设计的形式,按照形式特点我们常把图表分为关系流程图、叙事插图型、树型结构图、时间分布类及空间解构类五种类型。不管何种类型,都是运用列表、对照、图解、标注、连接等表述手段,使视觉语言最大化的融入信息之中,使信息的传达直观化、图像化、艺术化。

1、关系流程类图表

我们用语言难以表述清楚的东西,如果借助于图形来说明,效果就会好的多。如果想说明的事情需要费劲脑筋、费劲口舌来表述,而且也许自己讲起来也会是一团乱麻,即使从头至尾的给阅读群体讲一遍内容都会有遗漏或乱头绪的地方。如果有图形辅助就不一样了,我们可以迅速的找到表述亮点或表述事件的主干,这样能让你的主题和思路清晰动人。

2、叙事插图型图表


叙事性图表就是强调时间维度,并随着时间的推移,信息也不断有变化的图表。插图型图表就是用诙谐幽默的图画表达信息的图表。

3、树状结构示意图

树状结构图具有非常有序的系统特征,可以把繁复的数据通过分支梳理的方式表达清楚。运用分组,每组再次分类的主体框架表示主从结构,让数据与示意图有效的结合在一起。

4、时间表述类示意图

时间表述类示意图只要以时间轴为中心加入文字数据即可。从设计的角度来看,将主题融入图形设计中,挑选重要事件点解读,就可以使画面精美,加深理解力度。

5、空间结构类示意图

运用设计语言把繁杂结构模型化、虚拟化是空间结构示意图存在的意义。大篇幅的文字讲不清楚的事情,也许需要的仅仅是一个简单的空间结构示意图。

图表设计流程

设计流程又是如何的呢?数据内容从哪里来?图表内容怎么取舍?


从上面产出图中可以看出这个流程需要协作完成,数据需要筛选和整理 ,精准是首要条件,其次是梳理。找出出主线逻辑,筛选次要内容从而进行精心的设计。图表作为信息传达中的一种独特的表现方式,已经渗透到生活的各个方面。它不仅仅是文字的补充说明更可以独立表现内容。完美的图表创意是任何人都感到清晰明了的作品。我们现在就来关注它必备的几大要素。

1、基础图形创意

在设计中基础图形创意是重中之中,柱状图和饼状图是最常用的两种基础图形,但是简单的几何形态很难给人设计感。通过对基础图形的创意来突出设计主题,就可以取得一举多得、事半功倍的效果。

上面图片中左右的内容是完全一致的,但右图即使读者不详细关注也可心领神会。

2、高吸引度与视觉亮点

在读者阅读过程中,如果想要设计作品始终占据视觉的主导地位,就需要作品本身具有很好的表现力。这需要我们费尽心思去让读者以最直观的方式去理解作品所要传达的信息内容。互联网的发展使信息的更新速度非常快速,从传统网页到社交微博,用户对信息的浏览速度也越来越快,高吸引度便是最宝贵的财富点。如下面两张图片,风趣幽默的表现手法,时下最新的热点,都是我们设计的入手点。

3、画面简洁明了

图表设计是直观的、形象的、准确的、明了的,它的表现手法虽然多种多样,但是在信息传达方面始终要坚持可读性和条理性共存。

上面两个图表的优势就在于简化了表格信息的同时让人身临其境。信息的整理和归纳也并不是越多越好,力求以最精简的数据产出最清晰的效果,使人一目了然。

4、视觉导向与秩序

图表的版面设计要充分尊重人们的阅读习惯,当一张图表中充斥了大量的信息时,需要设计者合理地利用视线移动规律,将信息顺畅有效地传达给读者。


如上图所示,遵循视觉导向规律的设计往往可以提高人们对信息的理解力,给人舒适的阅读感受。反之,则会失去图文重点,让人不解其意,给人以杂乱无章的感觉。

5、象征图释

在图表设计中,我们尽可能少用文字来表达信息含义,用图说话,用图沟通。其实在我们生活中,部分公共标识就已经很好的做到了这一点,公共场所出现的各种导视图形,就起到了很好的指示说明作用,象征性图释要以受众广为前提和目标。


如图上图所示,在设计的上要注重保持风格的统一,这样才能让人视觉连贯、赏心悦目。

信息图表不仅优化了传统的图文阅读方式,而且已经成为当下视觉传达发展的必然趋势。信息图表不仅把枯燥的文字、数据变成美好的阅读体验,而且刷新了设计师们的设计思维方式,焕发出他们更丰富的设计潜能

时间: 2024-10-28 00:21:46

干货 | 揭秘信息可视化图表的设计方法的相关文章

揭秘信息可视化图表的设计方法

  今年最火的信息图教程来了!本文是百度同学总结的,包括信息图的6大类型和信息图设计流程两个方面,每方面都有细致展开,包同学们看得懂,学得来 >>> 信息可视化包括了信息图形.知识.科学.数据等的可视化表现形式,以及视觉可视化设计方面的进步与发展.地图.表格.图形,甚至包括文本在内,都是信息的表现形式,无论它是动态的或是静态的,都可以让我们从中了解到我们想知道的内容,发现各式各样的关系,达到最终解决问题的目的.信息可视化的意义就是在于运用形象化方式把不易被理解的抽象信息直观地表现和传达出

《信息可视化:交互设计(原书第2版)》——1.6节术语

1.6 术语本章主要介绍了信息可视化的定义.发展.用途以及用户在信息可视化过程中扮演的重要角色.虽然我们已经遇到了一些影响应用设计有效性的重要术语,但本章并未对它们做特别的解释.这些重要术语包括数据描述(representation,数据编码方法,通常是视觉的).数据表示(presentation,将已编码数据在一定的时间和空间内表示出来)和交互(interaction,用户为实现数据视图切换所采取的动作).在第2章中,我们将以汽车购买这一具体任务为例来展示信息可视化工具的设计过程并介绍以上三个

《信息可视化:交互设计(原书第2版)》——第1章什么是可视化

第 1 章 什么是可视化 在过去15-20年间,信息可视化应用得到了飞速发展,这一发展得益于计算机及相关技术的普及.信息可视化(Information Visualization, IV)的本质可以通过以下四个诞生时间远早于计算机的经典例子得以充分展示. 图1-1是一幅由拿破仑的绘图师Monsieur Minard绘制的地图.该图描述了拿破仑的军队从波兰和俄罗斯交接处东征莫斯科以及之后的撤退.大多数看到这幅地图的人都不需要询问就可以看出地图中线条的粗细代表军队中的士兵数,灰色表示进军而黑色表示撤

《信息可视化:交互设计(原书第2版)》——1.1节可视化

1.1 可视化以上四个例子的共性在于读者观看这些图表后得到的结论.人们无须画草图或记笔记,也没有用到任何的计算机技术,结论完全产生于观者的大脑中.我们可以说:得出这些结论需要信息启示(insight)或理解,这和可视化的字典定义一致:可视化 对某事物建立心理模型(mental model)或心理图像(mental image).因此,可视化是和计算机无关的纯粹的人类认知活动.需要指出的是,可视化的"视觉"含义并不表示这些活动只涉及视觉经验.除了图形之外,声音和其他感知形式都可以用作数据

《信息可视化:交互设计(原书第2版)》——2.15节定位帮助

2.15 定位帮助当用户设置了一定的属性范围对数据进行筛选时,通常会有这样一个想法:"如果再增加1000美元预算会怎样?"为了回答这类"如果--怎样"的问题,可以选择下一个高价位范围然后观察相应的变化.但是为了回答"如果保持价格范围不变,降低MPG值,又会怎样?"的新问题,就必须重复以上操作.事实上回答这类"如果--怎样"的问题的更有效的方法是对图表向量做一个简单的修改."边界图标"(图2-14)是指不符合

《信息可视化:交互设计(原书第2版)》——2.17节感知与解释

2.17 感知与解释在汽车购买一例中我们讨论了可视化活动中的人类行为.感知(perception)与解释(interpretation)是其中最本质的两种行为(图2-17).视觉感知,即观看数据描述,发生在对描述(无论它是条形图上方的高显图标还是旁边的拖动栏)进行解释之前.根据当前的普遍理解,在信息可视化范围内对这些人类行为进行研究是可能的而且是有用的.本书没有编写单独的章节来介绍这些概念,而是把相应的内容放在各章节的适当位置来介绍.对该课题的深入研究可以参考Colin Ware所著的<Info

《信息可视化:交互设计(原书第2版)》——1.3节人类用户

1.3 人类用户我们在1.2节中讨论了计算机及其相关技术在信息可视化领域(特别在近几十年间)的重要性.我们应该意识到人类用户是如何进行数据交互的,交互设计者只有在理解了用户的需求及行为特点后才能更好地设计数据描述和图形表示.为了强调这一认知的重要性,我们将讨论三个和信息可视化直接相关的人类行为模式.可能有些读者会觉得有些发现是令人难以置信的.第一个实验的素材是一段视频,主要内容是6个人在一个狭小空间内跑动并相互传球.参与者被要求观看这段视频一分钟,并统计某个特定女生接触到球的次数.在这段视频中出

《信息可视化:交互设计(原书第2版)》——1.5节相关领域

1.5 相关领域科学可视化和地理可视化是两个和信息可视化相关并且有一定交叉的研究领域.它们的共同目标是帮助用户加深对数据的理解.在科学可视化中,用户所见通常和某一具体物理"事物"相关.例如,用不同的颜色代表有角蜥蜴表皮和骨骼间的距离(见图1-12),或者在等高线的基础上对云层成因进行分析.相对而言,信息可视化主要关注"抽象"概念,如价格.棒球比赛得分.汇率浮动以及家庭关系等.虽然这些抽象概念对应于硬币.棒球棍.美元外债和人等具体的物理事物,但并不需要对这些物理事物进

《信息可视化:交互设计(原书第2版)》——2.9节细节

2.9 细节和总图相比,细节(detail)一词对应于对象多个不同属性的聚合.细节的察觉需要耗费用户的认知成本.除非支持快速认知的数据编码设计完美,否则细节信息的察觉通常不会是一个快速过程.一辆汽车的可能细节是"12万,低MPG,强力推荐的,1990年生产的别克牌,比买Chevy划算".细节不强制要求精度.由于信息可视化的定义中显示其主要目的是为数据创建心理模型,因此总图不需要始终出现在细节认知之前(Shneiderman, 1996).例如,消费者可能首先选择一辆汽车,通过查看价格.