数据可视化

“仪表盘”,“大数目”,“数据可视化”,“数据解析”-在此间,期待利用数据去做一些遗闻的人和商店呈现产生式增加。在自个儿的职业生涯中,笔者曾尤其幸运参预很多重度数据的界面设计工作。对于什么贯彻二个特别和有含义的制品,作者想分享下本人的想法。
很四人早就提起过那些标题,所以我将围绕部分最有震慑的法子。

安插数据可视化交互界面

叙述您多少的传说

*BY  Erik K(Uber设计老板)     *
*翻译:Kevin嚼薯片*

“数据仪表盘”、“大数目”、“数据可视化”、“数据解析”——人们和商家们都在试图用他们的数码做有趣的业务。在自家的职业生涯中,有幸做过几11个以数据为核心的互动产品工作,小编想分享部分关于什么兑现三个奇异而有意义的制品的想法。

无数人已经研讨过这么些题材,所以笔者将深入介绍我们经过中最有影响的一部分。

5.那又何以?

那么为啥我们把具备的多少放在页面上吗?答:那样人们可以用它来-无论是做出决定,调查,还是预测今后。重点是,你的用户不会因为您选取了可以的颜料代表惊叹,他们都在全力做好本职工作。

从而作者的提议是-当你已经获得了您的页面布局,一切都精雕细琢地方便后,反问本人“那又怎么?“。看看每三个图片,小部件,图表,表格,并盘算如什么人会从中收集音信。很多时候你会得出那样的结论:“没关系”,那是减掉或另行考虑的3个要害标志。

那种事时常发生在自己身上-小编创立了分外复杂的仪表板,包括了一层层趋势图、饼图和不少的数据点图。不过客户只问了本身:“作者只是想精晓产品是还是不是有效,我在哪个地方能够观看?”或然“笔者只须求驾驭3件事:X轴、Y轴和Z轴。小编在哪个地方能找到那个?“

哎。在这一阵子,你才察觉到你迷失在杂草中,而错过了大局。

本人想开了一种政策来协理缓解这一个问题,正是尝试和动用文本来公布人们想驾驭的新闻。

从较高层次来看,文本摘要比图表更有用。

地点的图样取自大家近来的七个品种。都直接明了地报告用户他们须要经过文件来领会,而不是凭借于供给解释的图形。

那种办法引起了小编们客户的共鸣,特别是对此高层次的音信。但正如小编日前提到的,总是有五人物角色要考虑,所以要在适用的地方采纳。

像拥有情势的宏图同样,那是一种平衡的章程。

力求以独特的不二法门展现你的数码,但防止超负荷设计和不必
要的扰攘。

为您的数据选取正确的图形,但不用忘记用层次结构营造页面。

译者:安琪Angela
原来的文章作者:Erik K
原稿地址:https://blog.truthlabs.com/designing-data-driven-interfaces-a75d62997631


1.例外的用户,不一致的数据

不论何时你要统一筹划八个错综复杂的系统,都不可制止要为分化的用户或剧中人物设计。高管,管理者,和分析者都以普通的用户,他们每一种人都有她们各自的做事流程和数目要求。
概念杰出的剧中人物和生成洞察力自个儿正是一门艺术,那并不是小编快要在那边详细说的。假设你惊讶如何完结那或多或少,能够在Cooper看看那个实惠的帖子
最需谨记的是在最初分明剧中人物,组织新闻架构职责,以及环绕它们设计线框图。
上面是我们二〇一八年用来临床报告应用程序的交给成品。那几个种类有不一致的用户,每种用户都须要有她们友善的数码工作流程。一旦大家树立了关键人物剧中人物,在各类评定审查会议,大家就把它们放在大家的交付成品中。

专注人物剧中人物顶上的每一个画板。大家的客户已经接受那种办法。

向客户出示艺术品恐怕是一项劳碌的职责。无论你是演讲线框图和流程图或争议视觉处理,很难让各种人都跟上你的笔触。
经过人物角色协会你的文章,将推向你(和您的客户)在这么些议论中保险冷静。

3. 增选“正确”的可视化图表

有那个(真的尤其多)的宏图以美学的名义在滥用图表。

最倒霉的是,那么些“坏习惯”就像正在成倍扩大。笔者时常看看,那么些区域图的地点应该用饼图代替,或线图的地点应当用柱形图代替。所以大家应一并去防止那种境况…那里有一部分小技巧来做多少判断:

4.主导与定制可视化

末段,作为这么些有添加多少的系列的设计师,你必须不断问本身:“小编应当走不平凡的门路去贯彻定制化?如故作者应该用可信经常的图形来发挥新闻?”。
笔者多年来在37
Signals蒙受那篇小说-三个图都是自己急需的。小编强调了为什么可视化的可用性取代其视觉效果。作者一心能清楚在他的地步的感受。可是,笔者认为她的看法是一种十分功利的看法。笔者深信不疑定制可视化往往能够抓实多少的可用性,使其看起来越发和鲜明。

3个为主条形图的例证

对自我的话,那里有“通用”的图纸和“最适合”图表。表、行和条形图能够适应七种类型的数据,但它们也丰硕通用(1个尺寸适合全部的)。作为叁个正式的设计师,我愿意小编的著述的外观和感觉是独特和卓有功用的
比如说,London时报做了一件了不起的事,定制交互可视化来充实他们的文章。你能够在这里探望更加多他们做的事。让我们探究多少个科学的定制可视化的例证:
其一例子是提供点击数据足以钻取下级数据的法力,使贰个线图变得万象更新。

http://www.nytimes.com/interactive/2013/03/29/sports/baseball/Strikeouts-Are-Still-Soaring.html?\_r=0

在那一个3D图中,抽象的变更在视觉上令人民代表大会开眼界,但也有助于用户更好地阅览数据的相关性。

http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?\_r=0

Selfiecity.net以此事例能很好地选择实际的始末来创立可视化。

http://selfiecity.net

末尾,来自大家与美利哥有线TV音讯网做的2个项目,大家采纳彩色编码展现政府偏好,同时用3D突显成效来实现人口总结消息的可视化。

http://truthlabs.com/work/cnn

一般的话,当数码和技艺须求的时候,我们才会试图拿出定制的可视化,但大家向来有二个后备布署防止万一,比如工作不成事或客户喜爱1个不那么消耗财富的措施。

2. 营造页面

多年来笔者获取的一项技艺正是培育页面概念。宗旨绪念相当简单:

向用户展示他们第①需要总的来看的剧情,然后依照用户场景或音信层次来营造页面包车型地铁别的部分。

培植页面概念是写诗文(和不少别的调换格局)的主干标准,在写完一本书后,小编变得更其贯通起来。多年来,笔者花了千千万万光阴去读书《风格:清晰和优雅的底蕴》。除了作为卓绝的作文参考之外,它还层序鲜明地讲述了那些概念:

当您从头时是分散的时候,你的用户不仅很无耻到各个成分是何许,也很难聚焦于一切段落。

那是在UX设计时要切记的贰个卓有成效的尺度。上边是大家培育页面包车型地铁三种常用方法。

给你的仪表盘一些构造。问问你本身——小编用这几个音信来什么讲述场景?(至关心重视要的、方便查看的、消息添加的)(总体预览、详细总计、特定类型/职分)

本人在behance和dribbble上看出的广大仪表盘和数目可视化项目都统一筹划得极美丽(视觉上),但多数都以令人适得其反的。它们依旧是大气的图形小部件被安插在多少个尚无层次结构的pinterest样式的布局中,要么是不相符数据的过分可视化设计。

左手的图像彰显了堆砌式的数据可视化处理方式,左边是贰个从数据的角度出发装饰物的事例。

在上海教室(左边),仪表板展现文书档案选拔指挥为主的主意来显现新闻…显得煞是堆砌。为了制止那种气象,我们品尝通过组织新闻的章程来设计那类界面,使其更像是在翻阅杂志小说。

不是说没有时间和地方去做那类指挥宗旨式的UI…作者个人希望安排这样的事物。但在大部状态下,在同权且间看到有着音信是不须求的。

要去考虑的显即便——制止创立一个大致的可视化界面。在页面上展现新闻,这样用户就足以先拿走重点音讯,然后再根据供给的内容实行操作。

2适应页面

自家多年来学到的多个技能是培训页面包车型客车概念。核情感念真的很简单:

先出示用户须要查阅的内容,然后依据用户的遗闻或消息层次组织页面包车型地铁盈余部分。

铸就页面包车型大巴定义是写随笔(以及众多任何交换情势)的中央标准,那一个是在自身写了一本书以后所熟知的。多年来,作者花了成都百货上千岁月在那本书《“风格:清晰和高雅的根基”》上。它除了是一本精美的参照写作,还形象地讲述了这些视角:

当你从头分心时,你的观者不仅非常难看到每二个因素是如何,而且不可能获取全方位流程的点子。

当举办交互设计时,那是急需谨记的得力原则。上面是大家常用来构建页面包车型大巴三种方法。

给你仪表板结构。问问你自身 - 作者要用新闻演讲如何遗闻?

习以为常本身在BehanceDribbble来看的仪表盘和数据即项目即便(视觉上)设计出色但屡次极其平庸。他们照旧没有层次地将广大的图纸组件协会在Pinterest风格的布局里,要么过度设计不相符数据的可视化。

右侧的图像展现了过多的多寡可视化新闻。右侧的图像像2个装饰,下降了对数码的关心度。

在上头的图样(左侧),报告仪表盘选拔职责决定的艺术来呈现音讯……那是卓殊有压迫感的。为了防止那种境况,我们打算通过统一筹划新闻来拍卖那个类别的界面,让其更像是你在读书杂志上读的一篇文章。

但并不是说对于职分决定界面是从未有过机会和情景使用的…作者个人爱好设计那样的事物。但在超过49%情状下,没有供给一向看到每个。

最要重要考虑的是-制止创制一些一叶障目的可视化。在页面上集体信息,使得向用户率先提供至关首要音讯,然后跟踪提供支撑内容。

始于数据

原始的表格行——它一点也不性感。不过,那是最好的起源。它将扶持你去考虑数据中的可用变量以及各个数据实体是什么样关联的。

固有数据的扁平化特性将援救您去想想系统中数量里面包车型客车涉嫌。

除去瞧着一排排的数码和梦想灵感到来,你能够更积极一点,看看这一个伟人的能源,扶助您去发现有意思的维系:


Charted
—  由Medium开发的活动可视化数据工具。

– 用 Google Sheets、Illustrator 和
Sketch

去规划更好的图片。

Tableau — 
这是最好的工具之一,然而很贵。

在那个过程中,没有何样灵丹妙药。决不惧怕投入到多少中,尝试通过混合和匹配差别的变量来制作中央图表。那亟需时刻,但很值得。笔者的有的最好的想法都以从修改原始数据文件早先的。

报告您至于数据的故事

离散的 和 连续的 数据

自个儿花了一段时间才发觉到那点,有个别图表比其余图表更能表达您的数码。在您的库中甄选雅观的图形很简单。作者早已多次犯过这样的谬误(笔者很喜爱用散点图)。

依照你所运用的数据类型去挑选,某个品种的可视化效果要比任何类型更好。选拔适合的图形的一种方法是评估您所全体的数据类型。那有两种重庆大学的数据类型:

离散数据
你用来测算的两样数值。例如,多少个得分数据,或推特的点赞数。

柱形图最契合于离散数据

接连数据
在一定限制内的此外值。例如,一个季节的降水量,或一位的身高/体重。

线条图最适合延续的数量

简言之,线条图最适合连续的数额,而柱形图最适合离散数据。

贰个自身真的必用的资源是 Dona
Wong的《华尔街晚报:音讯图片指南》。作者真希望能提早几年前遇到这本书。它对于选用适合的图形和判断是还是不是出示对应音信,非凡实用。

http://www.amazon.com/Street-Journal-Guide-Information-Graphics/dp/0393347281

3.选择“正确”可视化

有很多(太多)的筹划为了为难而滥用图表。
最不好的是-这一个“坏习惯”仿佛成倍扩大。以笔者之见,我看出的区域图应该是饼图,或折线图应该是条形图。由此,让我们一齐尽力甘休那种作为……那里有几个正式数据的建议:

从数额开端
原本表格的数码是不直观形象的。然则,那是最好的发轫。它将援救您初阶斟酌数据中有啥样变量,以及各样数码实体是何许关联的。

原来数据的扁平性质将援救你想想系统中实体之间的涉嫌。

除却从一文不名的数量开始,期待灵感最后溜进你的下意识,你可以更积极地审视这么些充分的财富,借此发现数目间有趣的关系:

其一有些的历程并未技术。不要惧怕摸索数据,尝试通过混合和相当不一致的变量来塑造中央图表。它必要时间,不过值得的。作者想出的片段好的想法,都以从摆弄原始数据文件早先的。

选拔离散与一而再数据
本身花了一段时间才察觉到那一点,有个别图表比此外图表更好地公布了您的数码。你会很随便地只站在你协调的角度挑选雅观的图纸,从而希望自个儿的多寡产生效果。小编很自责在品味很频仍才发觉(小编是贰个散点图爱好者)。
依照你所拍卖的数据类型,某些项指标可视化比任何见效更好。选用合适的图纸的一种方法是评估你所拥有的数据类型。数据主要有三种档次:

离散数据-可计算的区别值。例如,一些进球分数或推文(Tweet)网的点赞数。

条形图最能展现离散数据

一而再数据-范围内的别的值。例如,多少个时节的降雨量或壹人的身高/体重。

线图最能突显延续数据

简单的讲,线图最符合再而三数据,条形图最能展现离散数据。

对我来说,真正巩固本身的意见的1个能源是由Dona
Wong创作的“华尔街日报:引导音信图片”。但愿自己几年前就持有那本书。对于接纳稳妥的图样和出示新闻应留神的事项,那本书有金玉的参阅意义。

https://www.amazon.com/Street-Journal-Guide-Information-Graphics/dp/0393347281

1. 不等的用户,要求差异的多少

当您在规划复杂的成品系统时,用户必然会是多样剧中人物。管理人士、COO和分析师,在这么些大规模剧中人物里,各类人都有本人的劳作流程和数目须要。

概念杰出的用户剧中人物和进行用户洞察本人就是一门艺术,那不是本身在此地要深深的东西。纵然您对那很奇怪,这就去找找Cooper的连带质地啊。

有关用户剧中人物的首要性的就是要先行定义他们,从而围绕他们去组织音信架构职务和制图线框图。

上面是我们二零一八年的医疗报告应用程序的交由成果。系统全体不一致的用户,各样用户都亟需团结的多少工作流。一旦大家成立了关键人物,大家会将他们放入到每三回审查会议的付出物中。

把人物角色标注在种种设计稿上方。大家的客户已经默认了那种措施。

向一屋子的客户去显示文章是一项勤奋的职分。不管你是在分解线框图照旧流程图,依旧去商量视觉方案,都很难让种种人都小心在地点。

经过人物角色去形象地社团你的著述,能够扶持您(和客户)在这么些议论中保险自然程度上的瞩目。

5. 那又何以?

那正是说大家为啥要把这么些数量放在页面上吗?回答:因为那能够令人们做一些政工——做决定,调查,预测今后,等等。重点是,你的用户并不曾对您所采用的佳绩颜色感到惊喜,他们只关注他们正在做的作业。

就此这是自己的提出——在你把你的页面安插好之后,全体的业务都方便后,问问你协调:“这又怎样?”看看每贰个图片、小部件、表格,并考虑1位会从它们上赢得什么。日常你会汲取那样的定论:“那毫不相关重要”,那是一种要求简单和反思的信号。

自个儿遇上过四回那样的情景——作者创设了二个分外复杂的仪表盘,它有一多重的主旋律图、饼图和重重个数据点的地图。但客户却只是问:“作者只是想掌握产品是或不是在运转…作者在何地能够见见?”
或 “笔者只供给领悟三件事…X、Y和Z。作者在哪儿能够找到这几个?”

在这一刻,你发觉到你迷失在了细节中,而忽略了完全。

自个儿使用的一种艺术是尝试使用文本来规范地球表面述某人想知道的始末。

对于高等级音信,文本摘要大概比图表更有用。

地点的图纸取自我们近期的五个门类。两者都简短地通过文件告诉用户他们必要明白哪些,而不是凭借图表去解释。

我们与客户对于那种方案达到规定的产量生了共鸣,尤其是对此高等级音讯。但正如自身前边提到的,总是有多少个角色必要去考虑,所以请在合适的地点中运用。

就如拥有格局的布置性同样,这是二个平衡的行为。

尽力以一种特有的法子突显你的数据,但要制止过度设计和不须要的干扰。

为你的多寡选用正确的图纸,但并非遗忘创设的页面结构必要带有层次。


英文原稿:https://blog.truthlabs.com/designing-data-driven-interfaces-a75d62997631

get到新技巧后,欢迎在下边【赞赏支持】。

打赏后,能够继承旁观作者简书中其余产品运行设计类小说。开卷越来越多>>

4. 通用的 与 自定义的 数据可视化方案

最后,作为那一个多少拉长的种类的设计者,你必须不断地问本人“笔者是或不是相应采用更少路径,也许应用定制化?又大概本人应当用靠得住的图样来发布音信?

自己多年来从 37 Signals
中窥见了这篇文章——《作者只须要三张图片》。小编提议了1个有关可视化“解决方案”天性怎么样取代其视觉个性的视角。笔者完全同意他的视角。然则,作者觉着他的见解相当功利主义。作者信任自定义可视化通常能够增长数据的可用性,并且看起来很特别和综上可得。

一个基本柱形图的事例

对小编来说,有“一刀切”的图样和“最契合”的图片。表格、线图和柱形图在适应多样类型的数目方面做得很好,但它们也是一定通用的(一刀切的)。作为一名专业的设计师,小编愿意小编的作品的外观和感到是十分的和与别不相同的

譬如说,《伦敦时报》做了一项伟大的工作,用自定义的交互式可视化来完善他们的篇章。你能够点击那里观望越来越多他们的作品。让大家来打通多少个圆满的自定义可视化例子:

其一事例通过在图片的数据底部扩大“简要音讯”来宏观线形图。

http://www.nytimes.com/interactive/2013/03/29/sports/baseball/Strikeouts-Are-Still-Soaring.html?\_r=0

在那个3D图中,视角的变通是非凡有吸重力的,同时也扶助用户更好地打听多少的相关性。

http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?\_r=0

以此事例来自
Selfiecity.net
用实际的始末来展示了1个可视化的好方案。

http://selfiecity.net/

末段,在大家给CNN做的三个项目中,大家应用颜色编码和3D方块来呈现政坛偏好,以同时可视化人口总括新闻。

http://truthlabs.com/work/cnn

作为一种经验——当数码和技艺能促成时,我们试着做出自定义的可视化方案,但是大家总是有四个后备方案,避防事情并未开始展览,只怕客户更爱好五个不那么独特的方案。

相关文章