酷数目。*

语你关于数据的故事


“仪表盘”,“大数据”,“数据可视化”,“数据解析”-在此间,期待下数据去举行片有意思的从业的食指以及企业表现爆发式增长。在本人的职业生涯中,我就特别幸运与多重度数据的界面设计工作。对于如何落实一个异样和产生意义之活,我怀念享受下自家的想法。
广大人数早已提起过此题目,所以我将圈部分极端有影响的方式。

计划数据可视化交互界面

讲述您多少的故事

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

“数据仪表盘”、“大数据”、“数据可视化”、“数据解析”——人们和供销社等都于计算用他们的数目做有趣的事务。在自我之职业生涯中,有幸做过几十单因数量也骨干之互动产品工作,我怀念享受部分关于什么落实一个异常而发含义之活之想法。

许多人口曾经讨论了此问题,所以自己拿深刻介绍我们经过被极其有震慑的片段。

1.不等之用户,不同之多少

随便何时你如果设计一个错综复杂的系,都不可避免要啊歧的用户还是角色设计。经理,管理者,和分析者都是普普通通的用户,他们每个人还生她们各自的做事流程及数据需求。
概念美的角色跟生成洞察力本身即是如出一辙门艺术,这并无是自家将当这边详细说的。如果你好奇怎好就或多或少,可以于Cooper望这有效的帖子。
极致亟需谨记的是每当头确定角色,组织信息架构任务,以及环绕它们设计线框图。
脚是咱们去年用于治疗报告应用程序的交给成品。这个体系产生两样之用户,每个用户还求发生他们协调之数工作流程。一旦我们成立了关键人物角色,在每个评审会议,我们尽管拿它们放在我们的交付成品吃。

留意人物角色顶上的每个画板。我们的客户都领这种方式。

于客户出示艺术品可能是平等件艰巨的天职。无论你是分解线框图和流程图或争议视觉处理,很不便被每个人犹与达到您的笔触。
透过人角色组织而的创作,将推进你(和你的客户)在这些议论着保持冷静。

1. 见仁见智的用户,需要不同之多少

当您以计划复杂的出品系统时,用户定会是强角色。管理人员、经理与分析师,在这些科普角色里,每个人且有和好之工作流程和数量需求。

概念美的用户角色和展开用户洞察本身就是是同样流派艺术,这不是自个儿于此要深切的事物。如果你对当下大愕然,那就是夺搜寻找Cooper的有关资料吧。

有关用户角色的主要之就算是只要先期定义他们,从而围绕他们失去组织消息架构任务与制图线框图。

下面是咱去年底治病报告应用程序的提交成果。系统具备不同的用户,每个用户都急需自己之数据工作流。一旦我们建立了关键人物,我们会用她们放入到各一样糟糕审查会议的交由物中。

拿人选角色标注在每个设计稿上方。我们的客户已默许了这种办法。

通向同一间的客户去展示作品是均等件艰巨的职责。不管您是以解说线框图还是流程图,还是失去讨论视觉方案,都生不便被每个人犹小心在面。

经过人角色去形象地集团而的创作,可以辅助而(和客户)在这些议论着保持自然水平及的注目。

2适应页面

本人基本上年来效仿到的一个术是造就页面的定义。核心理念真的挺粗略:

先行出示用户要查阅的情,然后因用户之故事要信息层次组织页面的剩余部分。

扶植页面的定义是描写散文(以及许多任何交流形式)的中坚标准,这个是于自身形容了一致本书下所熟识的。多年来,我花费了过多岁月以这按照开《“风格:清晰和雅的根基”》上。它除了是同一依照精美之参照写作,还像地描述了此理念:

当你开始分心时,你的听众不仅十分无耻到各一个元素是啊,而且无法得到全工艺流程的点子。

当进行交互设计时,这是待谨记的有效性原则。下面是咱们经常因此来培养页面的一定量种办法。

深受你仪表板结构。问问你协调 - 我而因此信息阐述什么故事?

不少本身当Behance和Dribbble望的仪表盘和数目就项目则(视觉及)设计精美而频繁极平庸。他们要没层次地以多的图纸组件组织于Pinterest风格的布局里,要么过度设计不适合数据的可视化。

左的图像显示了了多之多少可视化信息。右边的图像像一个装饰品,降低了对数码的关注度。

每当上头的图片(左边),报告仪表盘下任务控制的道来呈现信息……这是一定有压迫感的。为了避免这种场面,我们准备通过规划信息来拍卖这些类别的界面,让那重像是若当读书杂志上读之一模一样篇稿子。

唯独连无是说于任务控制界面凡是从未机会和景象下的…我个人喜欢设计这样的物。但以大多数气象下,没有必要一直看各个一个。

顶要紧要考虑的是-避免创建有一致知道半解的可视化。在页面及组织消息,使得向用户率先提供重要信息,然后跟提供支撑内容。

2. 栽培页面

差不多年来我取的同等桩技术就是是塑造页面概念。核心理念非常简单:

朝用户展示他们首先需要张的情,然后因用户场景或信息层次来构建页面的其余部分。

养页面概念是描摹诗文(和广大另交流形式)的着力标准,在形容了一本书后,我换得愈会起来。多年来,我花了无数日子去读《风格:清晰和古雅的基础》。除了当帅的做参考之外,它还有条理地讲述了此概念:

当你开时是散落的时刻,你的用户不仅充分掉价到每个元素是啊,也蛮为难聚焦让全体段落。

立刻是在UX设计时要牢记的一个有效之准。下面是咱们培育页面的蝇头种常用方法。

深受您的仪表盘一些结构。问问你自己——我用这些信来安讲述场景?(至关重要的、方便查看的、信息添加的)(总体预览、详细总结、特定项目/任务)

我当behance和dribbble上看看底过剩仪表盘和多少可视化项目还计划得挺美(视觉及),但大部分都是让人失望的。它们还是是大气的图样小部件被布置在一个从未有过层次结构的pinterest样式的布局中,要么是休符合数据的过分可视化设计。

左的图像显示了堆砌式的数可视化处理办法,右边是一个起数额的角度出发装饰物的例证。

当上图(左边),仪表板展示文档采用指挥为主的道来呈现信息…显得非常堆砌。为了避免这种情形,我们品尝通过团体消息的艺术来设计这好像界面,使其再次如是在看杂志文章。

切莫是说没时间及职位去开这看似指挥中心式的UI…我个人要计划这样的事物。但于大部情下,在同一时间看到所有消息是不必要之。

而失去考虑的严重性是——避免创建一个简的可视化界面。在页面及显示信息,这样用户就是好事先抱重点信息,然后重新冲需要之内容进行操作。

3.选择“正确”可视化

起许多(太多)的规划为为难而滥用图表。
太不好之是-这些“坏习惯”似乎成倍增加。在我看来,我见到底区域图应该是饼图,或折线图应该是长达形图。因此,让我们一齐全力停止这种作为……这里出几个专业数据的建议:

自从数量开始
原本表格的数码是匪直观形象的。然而,这是极好的开始。它将救助而起来想数据被生出安变量,以及各种数码实体是如何干的。

初数据的扁平性质将帮助你想系统面临实体之间的干。

除外从一无所有的多少开始,期待灵感最终溜进你的不知不觉,你可以更积极地审视这些丰富的资源,借这发现数目里有趣的牵连:

  • Charted-一个是因为Medium开发之,可以以数据自动可视化的工具。
  • 从而Google
    Sheets,Illustrator和Sketch设计更好的图纸
  • Tableau-在此是家伙是极度好的,但老高昂。

是有些的历程并未技术。不要惧怕摸索数据,尝试通过混合及相当不同的变量来做中心图表。它用时,但是值得的。我眷恋生的片段好之想法,都是起摆弄原始数据文件开始之。

行使离散和连续数
自己花费了一段时间才察觉及马上或多或少,有些图表比另外图表更好地发挥了您的数码。你晤面怪随意地只站在公自己之角度挑选好看的图片,从而希望团结的多寡来作用。我充分自责在品尝大频繁才察觉(我是一个散点图爱好者)。
因你所拍卖的数据类型,某些种类的可视化比其他见效还好。选择当的图形的平种方式是评估你所怀有的数据类型。数据要出星星点点种植档次:

离散数据-可算的非同值。例如,一些进球分数或脸谱网的点赞数。

条形图太会见离散数据

连接数-范围内的外价值。例如,一个喷的降雨量或一个总人口的身高/体重。

丝图太能见连续数

总之,线图最适合连续数,条形图太能表现离散数据。

本着我的话,真正巩固自己的见识的一个资源是由Dona
Wong创作的“华尔街日报:引导信息图片”。但愿我几年前就是具有这本书。对于选择适用的图形以及展示信息应留神的事项,这按照开有难得的参阅意义。

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

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

发生成百上千(真的非常多)的计划性以美学的名义在滥用图表。

绝不好之是,这些“坏习惯”似乎正在成倍增加。我常常来看,那些区域图的地方应据此饼图代替,或线图的地方应该用柱形图代替。所以我们承诺并错过避免这种气象…这里来一对稍微技巧来做多少判断:

4.核心和定制可视化

末,作为这些发生长多少的网的设计师,你得不断发问自己:“我应当倒不平庸的不二法门去实现定制化?还是自己该用可靠寻常的图来表达信息?”。
自己多年来于37
Signals遇这篇稿子-3独图都是自我用之。作者强调了为何可视化的可用性取代该视觉效果。我意能够分晓在他的地步的感触。然而,我觉着他的眼光是相同种植十分便宜的观点。我深信定制可视化往往得提高多少的可用性,使其扣留起特别和肯定。

一个着力条形图的例子

对自家吧,这里产生“通用”的图纸和“最契合”图表。表、行和条形图可以适应多种类型的数额,但它也坏通用(一个尺寸适合有的)。作为一个专业的设计师,我想我之作品的外观和感到是出奇和管事之
譬如,纽约时报做了扳平项了未起的从事,定制交互可视化来充实他们之章。你得当这里看又多他们举行的行。让咱探讨几单科学的定制可视化的例证:
这个事例是供点击数据可钻取下级数据的效力,使一个线图变得耳目一新。

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

终极,来自我们与美国有线电视新闻网做的一个项目,我们用彩色编码显示政党偏好,同时用3D凸显成效来兑现人口统计信息的可视化。

http://truthlabs.com/work/cnn

相似的话,当数码与技能需要的时候,我们才见面计算以出定制的可视化,但咱总有一个后备计划以防万一,比如工作未成事还是客户喜爱一个无那么吃资源的道。

起为数据

原之表行——它一点乎无浪漫。然而,这是极致好之起点。它以帮你失去考虑数据中之可用变量和各种数码实体是怎么样干的。

原有数据的扁平化特性将援助您错过思辨系统遭到数里面的涉及。

除却盯在一排排底数量和盼灵感到来,你可以更主动一点,看看这些巨大的资源,帮助您错过发现有意思之牵连:


Charted
—  由Medium开发的自行可视化数据工具。

– 用 Google Sheets、Illustrator 和
Sketch
去规划更好的图纸。

– Tableau — 
这是极好的工具有,但是生贵。

以斯过程被,没有啊灵丹妙药。甭害怕投入到数码中,尝试通过混合及兼容不同之变量来做中心图表。这需要时间,但老值得。我之有些无比好的想法还是打修改原始数据文件开始之。

5.那又何以?

那么为什么咱们拿装有的数据在页面上吧?答:这样人们可据此她来-无论是做出决定,调查,还是预测未来。重点是,你的用户不见面因为你选择了优质的颜色代表惊呆,他们都当全力以赴做好本职工作。

于是我的建议是-当你既沾了公的页面布局,一切还精雕细琢地适当后,反问自己“那以怎?“。望每一个图片,小部件,图表,表格,并想什么人会从中收集信息。很多时刻你晤面汲取这样的下结论:“没关系”,这是减少或再考虑的一个着重标志。

这种从时发出在我身上-我创建了非常复杂的仪表板,包含了千篇一律多样趋势图、饼图和广大的数据点图。但是客户就问了自身:“我只是怀念了解产品是否有效,我于哪好望?”或者“我特需要知道3宗事:X轴、Y轴和Z轴。我在哪里能找到这些?“

哟。在马上一阵子,你才意识及您迷失在荒草中,而错过了全局。

我想开了千篇一律种政策来提携缓解者问题,就是尝试和采用文本来发表人们怀念清楚之音讯。

于比较高层次来拘禁,文本摘要比图表更发生因此。

方的图片取自我们最近之简单个档次。都直接明了地告诉用户他们需要通过文件来打探,而非是赖让用说明的图样。

这种方式引起了咱客户之共鸣,特别是于大层次之信息。但正而本人前提到的,总是有差不多只人物角色要考虑,所以如果当方便的地方采取。

如所有形式的计划性同样,这是同等种植平衡的主意。

力求以超常规之法门呈现你的数量,但避免超负荷设计与不必
如的干扰。

也汝的数码选择对的图,但绝不忘记用层次结构构建页面。

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

离散的 和 连续的 数据

自己花费了一段时间才发觉及马上或多或少,有些图表比其它图表更能印证您的数码。在公的仓库中挑选好看的图纸很易。我一度多次犯过这样的错误(我颇喜爱用散点图)。

据悉你所使用的数据类型去挑选,某些品种的可视化效果使比其它门类又好。选择适合的图样的同一种植办法是评估您所怀有的数据类型。这出三三两两栽要的数据类型:

离散数据
你用来算的不比数值。例如,多个得分多少,或Facebook的点赞数。

柱形图太适合给离散数据

连续数
于必限制外的旁价值。例如,一个时节的降雨量,或一个丁的身高/体重。

线条图太可连续的数额

简言之,线条图太适合连续的多寡,而柱形图太契合离散数据。

一个本人的确必用的资源是 Dona
Wong的《华尔街日报:信息图片指南》。我真想会取早几年前相遇这本书。它对于选择当的图样和判是否出示对承诺信息,非常管用。

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

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

最终,作为这些数据增长的系的设计者,你必须不断地问自己“我是否该采取还不见路径,或者利用定制化?又要自身应当用靠得住的图纸来表述信息?

我多年来从 37 Signals
中发觉了马上篇稿子——《我只需要三布置图片》。作者提出了一个有关可视化“解决方案”特性如何取代该视觉特性的观。我完全同意他的见。然而,我以为他的意大功利主义。我相信由定义可视化通常可以加强数据的可用性,并且看起老新鲜和明显。

一个基本柱形图的例子

对自我吧,有“一刀切”的图片以及“最适合”的图片。表格、线图和柱形图在适应多种类型的数据方面开得好好,但它也是一对一通用的(一刀切的)。作为同样曰正式的设计师,我想我之著述之外观以及感到是异常之同同转变不同之

譬如说,《纽约时报》做了同一宗宏大的劳作,用从定义之交互式可视化来圆他们之章。你可以点击这里探望更多他们的作品。让咱们来打通几只健全的自定义可视化例子:

夫例子通过以图纸的数量底部多“简而信息”来圆线形图。

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/

最终,在我们被CNN做的一个列被,我们利用颜色编码和3D方块来展示政党偏好,以以可视化人口统计信息。

http://truthlabs.com/work/cnn

用作一如既往种涉——当数和技术会兑现时,我们尝试着做出自定义的可视化方案,但是我们总是有一个后备方案,以防事情没进行,或者客户又欣赏一个非那么独特之方案。

5. 那么还要如何?

那么我们为什么要拿这些多少在页面上吧?回答:因为马上可以给人们做片事情——做决定,调查,预测未来,等等。重点是,你的用户并从未指向您所选择的不错颜色发惊喜,他们只有关注他们正在做的政工。

之所以这是自我的建议——在你将您的页面布置好后,所有的政工都适用后,问问你协调:“那以怎么样?”看看每一个图片、小部件、表格,并考虑一个丁会晤起它上取什么。通常你会得出这样的结论:“这无关紧要”,这是平等栽消简单和反省的信号。

我赶上过几差这样的情状——我创建了一个非常复杂的仪表盘,它发出平等层层之倾向图、饼图和重重独数据点的地图。但客户可仅是咨询:“我只是想了解产品是否以运作…我于哪好视?”
或 “我只有需要明白老三桩事…X、Y和Z。我以乌可以找到这些?”

在当时一刻,你意识及公迷失在了细节中,而忽略了完整。

本人下的同栽艺术是尝试下文本来规范地表述有人思念知道的内容。

对高等级信息,文本摘要可能比较图表更有因此。

地方的图形取自我们近年来之少只项目。两者都简单地经文件告诉用户他们待了解什么,而休是借助图表去说。

咱们与客户对这种方案上来了同感,特别是对于高等级信息。但刚使我前面提到的,总是发出多独角色要去考虑,所以告以适用的地方吃使。

纵使如所有形式的筹划同样,这是一个抵的表现。

全力以赴以平等栽奇特的道呈现你的多寡,但若避超负荷设计以及非必要的干扰。

否汝的数选择对的图片,但绝不遗忘构建的页面结构亟待带有层次。


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

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

打赏后,可以继承看我简书中另外产品运营设计类文章。翻阅更多>>

相关文章