UE设计中设计有效的信息图表

UE视界网    ()  ()

2019-12-11 14:45:49

信息图形将数据转换为易于理解和参与的可视媒体。目标是将文本和图片融合在一起,从而实现视觉效果,但很难实现。


随着我们收集数据的方式以及用于分析数据的工具的发展,我们的世界变得异常丰富。在日益量化的世界中,设计师面临的最激动人心的挑战之一是如何将数据转换为易于被广大受众理解的媒体。信息图形(更好地称为信息图表)是一种强大的讲故事工具,它使用户能够理解,分析和探索数据。社交媒体共享的希望已使信息图表在注重内容营销的网站上流行。


数据可视化和信息图形之间的区别是微妙的,但很重要。信息图表通常包含数据可视化,但是单独的数据可视化不是信息图表。


定义:数据可视化是一组数据的图形表示。图表,图形和地图是最常用的数据可视化类型。


在人机交互中,信息可视化领域研究交互式数据表示。与通常是静态的数据可视化不同,信息可视化允许用户操纵可视化以获取数据的不同方面。


信息和数据可视化可以揭示仅凭数字难以识别的模式。但是,对于某些类型的受众或在某些情况下,可视化可能不足以传达您的消息。在这种情况下,信息图形可以使您的观点更加清晰。


定义:信息图是一种多媒体图形,旨在以易于理解的方式呈现复杂的信息和数据。信息图表通常包括数据或(很少有)信息可视化,但也必须以插图,事实,引号和标题的形式提供上下文。因此,信息图表可以单独作为单独的内容(尽管也可以在带有附加文本的文章中显示)。

1576046511474_2.png

图表与数据可视化之间的区别说明

BBC.com:此图上根据我们的定义,不同行业自动化的可能性是一个图表。另一方面,左下方的图表是数据可视化图表,如果它是单独显示的,则可以按原样使用,而其余屏幕截图均不提供解释性上下文。

信息图形设计准则

信息图上的每个项目-从图表到说明它们的图像-都应传达有意义的信息。爱德华·塔夫特(Edward Tufte)在1983年的著作《定量信息的可视显示》中提出了数据墨水比的概念,以总结可视化中的数据密度。该比率将有价值的信息(数据)与完整图形(总“墨水”)进行比较。理想情况下,数据可视化具有很高的数据墨水比率:图形中的所有或大多数可视元素都传达有关数据集的有意义的信息。


Tufte提倡以简约的方式呈现图表,将观众引导至所呈现的信息,而不是设计师的艺术作品。他的方法消除了所有装饰(具有理想数据比率的图表),不仅省略了插图,还删除了背景图像,图表项目的装饰甚至网格线等项目。


信息图表是一种混合媒介,但是这里有创造许可证的空间。插图,照片和图标等视觉兴趣元素在媒体中是可以接受的,甚至可以预期的。使用视觉主题可能会使您的作品陷入隐喻,使抽象概念易于理解。不会分散图表注意力并增加数字含义的元素可能会有所帮助。他们还可以增加信息图表和帮助3的可共享性RD三方用户,当他们遇到未经原网站提供的附加方面,比如说,Twitter或Instagram的转载视觉理解消息。


信息诚实

设计信息图形时要记住的最重要的事情是清楚真实地呈现数据。以显示数据差异并准确传达值范围的方式缩放图表。如果在图形中包括摘要统计信息,请明确指出用于计算这些数字的信息来源。 


统计人员和信息设计人员数十年来一直在争论图表缩放的细节。一个特别有争议的话题是y轴的起点。达雷尔·霍夫(Darrell Huff)在1954年出版的《如何用统计谎言》中告诫读者注意不要以y轴开头的任何图表。一些专家不同意。爱德华·塔夫特(Edward Tufte)认为,只要图表清楚地表明比例尺已被截断,就不需要此规则。为图表选择一个比例,以便在清晰地显示趋势和传达原始数据集的比例之间取得平衡。数据可视化的y轴应显示数据集的基线状态。在许多情况下,0是自然的起点,但是当存在另一个逻辑起点时,不必强制可视化从0开始。


例如,截断股票图表的y轴是金融业普遍接受的做法。用户通常会关心股票价格的细节以及价格随时间的变化。图表无需从0开始就可以建立有意义的基线。

1576046548189_4.png

Google的AAPL股票图表

Google.com的股价图表以一种信息诚实的方式截断了y轴。y轴从所选时间间隔的第一个价格点开始,这是图表的逻辑起点。

但是,如果主要用户任务是比较图形上的不同值,则截断y轴是不可接受的。在上面的股票图表中,如果用户对2017年10月相对于2018年6月的股票相对价值感兴趣,他们可能会基于图表上数据点的位置错误地推断出股价翻了一番。


同样,由于y轴的截断方式,以下图表很容易造成误解。该图表已发布,显示了美国人对有争议的法院判决的看法。它从视觉上暗示民主党人和共和党人之间存在截然不同的观点。实际上,绝对数字显示62%的民主党人和54%的共和党人同意法院的判决。

1576046570289_0.jpg

来自《今日美国》的图形显示错误地截断了y轴

USAToday.com:此图表中的y轴被截断,使得不同党派成员之间的意见分歧似乎比民意调查的实际结果更为明显。

极简主义和信息图表设计

尽管在信息图表世界中设计规则相当宽松,但简约的方法还是有帮助的。极简主义是一种设计哲学,可以减少内容表示的复杂性。


选择可读的字体,而不是装饰性的字体。选择缩放比例合适的字体是关键。媒体需要多种不同的文本大小:标题,标题,引号,统计信息和标题的大小应不同,以在图形中建立清晰的层次结构。应避免使用脚本字体和过于复杂的衬线字体,因为它们通常会分散查看图表时人眼所见的视觉信息的许多点。


选择一个有限的调色板。与许多颜色相比,一些独特的颜色在视觉上更具吸引力,并且能更好地吸引注意力。颜色是在图表上快速传达差异或突出显示信息图表各个部分的一种极好的方法,但是太多的颜色是压倒性的。


请记住,尽管色彩是强大的交流工具,但绝不应将其用作唯一的视觉区别。色盲和视力障碍的用户将很难理解仅使用颜色即可传达重要点的信息图表。最小的调色板要求设计师意识到他们如何使用颜色以及可以使用哪些其他视觉工具来表达信息。

1576046600817_0.png

Upwork关于吸引远程人才的信息图

Upwork.com:  有关吸引远程人才的信息图  是根据许多极简主义原则而设计的。它使用少量不同的颜色,使插图保持简单,并使用易读的字体。(但是,笔记本电脑旁边的灯图示对整体信息图没有太大价值。)

呈现简单的插图。选择简单干净的插图可以使信息图表的重点固定在相关数据上。这些插图应支持作品的整体信息,但不一定需要直接解释数据。上面的信息图讨论了公司如何招聘远程开发人员。


此信息图中的图形元素是现代且简约的。线条整洁,图形不包含任何复杂的纹理。全部遵循相同的美学惯例。对所有图形元素保持简单但一致的样式,使信息图感觉像是一个统一且视觉上令人愉悦的整体。


互动性

交互式信息图表包括用户可以直接操纵的数据或信息可视化。这种类型的信息图提供了上下文和叙述,同时允许用户控制他们看到的数据的哪个方面。交互式信息图表近年来变得很流行。主要新闻媒体经常以互动信息图表为特色,以使读者能够浏览他们所发表故事的背后数字。

1576046626324_3.png

彭博亿万富翁指数是一个交互式信息图

彭博社:  彭博亿万富翁指数  是一个多页的信息图表,用于比较和描述世界上最富有的人。提供了传统信息图的元素,例如插图和说明文字,但用户还可以选择与数据进行交互,按时间间隔过滤某些图表以及更改其他可视化效果上的比较变量。

在添加交互式元素之前,请考虑所创建作品的需求。用户将对数据的哪些方面感兴趣?如果您只是想提出一个观点,那么支持它的静态可视化可能就足够了。如果您希望用户操纵并深入了解数据集的各个方面,那么交互式信息图可能是合适的。


分享和社交媒体

信息图表通常在Twitter,Facebook和LinkedIn等社交媒体平台上共享。这些渠道有助于增加内容访问量。但是,社交媒体上共享的图形通常会在没有原始来源链接的情况下重新发布。考虑将水印或徽标添加到您创建的任何信息图中。此附加功能将帮助遇到图形的未归类版本的用户找到原始图形。


常见错误

  • 分散视觉元素。信息图的图形元素应增加兴趣并增强信息图的要点。过于依赖主题或视觉双关语会使观众的注意力从您尝试发送的消息转移开。

1576046671298_2.jpg

此热暴露信息图以图表为代价强调了插图

USAToday.com:此图表显示了暴露于热的危险,强调了插图,但以图表为代价。太阳图是如此之大,色彩丰富且详细,以至于将注意力从图形中的其他项目移开。爱德华·塔夫特(Edward Tufte)将在野外活动中胜出数据墨水 比率在这里。

  • 规模扭曲。正如我们先前讨论的那样,这个常见错误破坏了可视化的信息诚实度。当图表的比例不能准确表示数据点之间的差异时,则会给原始数据带来不正确的印象。图表中的图表已被裁剪,拉伸或以其他方式变形,从而给可用数据带来了错误的印象。

  • 复制是事后的想法。信息图表是一种主要的视觉媒介,但观众阅读的内容仍然很重要。许多信息图表设计师在设计过程的最后添加文本,并使用模糊的副本,这有损于整体图形。此外,某些信息图表忽略了优化格式的文本。冗长且无结构的段落会产生大量信息。简洁的写作更难,但影响更大。

1576046700341_0.png

关于信息图表的信息图表的一部分,在狭窄的列中显示文本

InfographicLabs.com:此信息图讨论信息图形的设计。有关媒体受欢迎程度的信息被组织成四个段落,并在狭窄的栏中显示。很难阅读,甚至很难扫描。这是带有图片的文本,而不是集成的视觉效果。

  • 等级不清楚。视觉层次结构可指导您的观众浏览信息图表中显示的各种信息。当物品大小随意调整并在没有明显原因的情况下进行排序时,信息图的消息将变得难以辨认。

1576046727300_1.png

维亚康姆的Scratch代理商提供的千禧一代和金融信息图表

Viacom.com:不清楚的层次结构使Viacom的Scratch代理机构  难以理解这张醒目的图表  。插图很大,引起了人们对图形图表,统计数据和文本内容的关注。这是带有文字的图片,但不是集成的视觉效果。

关于常见错误的说明

设计数据可视化和信息图表并不是一门精确的科学。这里讨论的常见错误之所以普遍存在,部分原因是该学科发展如此之快。数据可视化已经打印了几个世纪,但互联网的最新发展已使我们消耗材料的方式发生了巨大变化。交互式信息图表十年前在Flash中呈现时速度慢且难以使用,但在现代浏览器中可以实现高响应度的图形。最佳实践将随着技术的进步而变化,视觉趋势将发生变化,但是无障碍信息设计的基本原理将保持不变。


当您创建图表时,请争取清晰和可访问性,而不是绝对的完美。迭代生成的图形,以发现如何以目标受众容易理解的方式更好地呈现内容。


结论

信息图表是一种以可访问甚至娱乐的方式传达复杂概念的绝佳方法。这种混合媒体将数据可视化与图形和文本结合在一起,使信息易于理解。可以将许多已建立的用户界面设计试探法应用于数据可视化和信息图表,以创建具有教育意义的精美数据表达。


责任编辑:网络UESJ网:   UE视界网,未经授权不得转载
关键词 >> 视觉设计,应用设计

还可以输入0个字

(审核后展示)
打开目录