主页 > D生活墙 >说出数据的故事:设计资料视觉化的要点 >

说出数据的故事:设计资料视觉化的要点

D生活墙 2020-08-06 648
说出数据的故事:设计资料视觉化的要点

本文编译自 〈Designing Data-Driven Interfaces〉。

说出数据的故事

「仪表板」、「大数据」、「资料视觉化」、「分析」——有太多太多人和企业想拿数据来玩花样。而我很幸运地在自己的生涯中,从事过许多数据扮演吃重角色的介面设计工作。今天我想跟大家分享,到底该怎幺做才能完成与众不同、有意义的产品。

许多人已经谈过这个议题,所以本文会尝试聚焦于我们流程中影响力最的的那些部份。

1. 不同的使用者,不同的数据

当你在设计一个複杂的系统时,无可避免地会需要针对多名使用者或是多种「人物誌」去设计。执行长、经理人和分析师都是常见的、拥有自己工作流程和数据需求的人物誌。

定义出好的人物誌、产生好的洞察,本身就是一门艺术,这并非我要在本文细谈的东西,如果你对这些议题感兴趣,可以参考 Cooper 这篇 文章 。

重要的是,请记得人物誌是要能够区分的,而且要让你能够为绕这些人物誌去组织资讯结构的任务和框架。

下面是一些我们去年曾用于一个医疗报告 app 的东西。这个系统里面不同的使用者会需要他们自己的数据工作流程,每当我们建立了一个关键的人物誌,就会加入下一次 app 开发的审查会议。

说出数据的故事:设计资料视觉化的要点

在满桌的客户面前简报设计画面是一件很困难的任务。不管你是在解释框架、流程图还是辩论视觉上的设计,你很难让大家跟着你的脚步走。

把你设计好的画面按照人物誌来组织,对你在讨论过程中会很有帮助。

2. 页面布局

过去几年我学到一项技巧,就是页面布局的概念。这东西的核心很简单:

页面布局的概念是诸如撰写散文的核心原则,我在 写了一本书 之后对这个概念也有更深一层的认识。过去一年我花了不少时间在读这本书《Style: The Basics of Clarity and Grace》,它除了是一本关于写作很好的参考书,更是精彩地表现出页面布局的概念:

对于设计 UX 来说,这是一个很好用的原则。下方是两个我们常用来安排页面布局:

说出数据的故事:设计资料视觉化的要点

给你的仪表板一些结构吧。问问你自己,到底要告诉使用者什幺样的资讯。

许多我在 behance 和 dribbble 上看过的仪表板和资料视觉化专案设计,在视觉上都很美,但常常会在看完之后出现压倒性地,令人毫无印象的感觉。他们要不是: A)仿照 Pinterest 风格去安排无数个图像、线图,毫无层次;或是 B)在视觉上对数据做了不合适的过度设计。

说出数据的故事:设计资料视觉化的要点

左边的塞入太多东西,右边则是让人难以聚焦在资料上。

上方左侧的图採用中控台的设计去呈现资讯,那样的作法塞入太多东西了,让人受不了。为了避免这样的情况,我们会尝试用「策展」的方式去安排这些资讯,让你在看这些资料像是在读一篇杂誌文章。

更不用说我们通常没时间去弄一个 任务控制中心 般的介面。我个人蛮乐意去设计一些像那样的东西,但是大多数情况下,一次就要看到所有的东西是没有必要的。

你需要考量的重点是:避免做出东拼西凑的琐碎视觉。好好安排页面上的资讯,让使用者容易在一开始就掌握住关键资讯,然后才是承接的相关内容。

3. 选择「正确」的视觉化

有太多因为美学观点而选择错误设计的图表在你我周遭流窜着。

最糟糕的是,这些坏习惯似乎会有与日渐增的现象。我常常会看到该用圆饼图的却用区域图,该用长条图的却用折线图。让我们一起停止这样的现象吧,请尝试用以下的方法还你的数据一个公道:

从资料着手

虽说原始资料一点也不性感,然而,却是我们最好着手的地方。这可以协助你开始思考,资料里含有哪些变数,以及各种数据所代表的东西有何关联。

说出数据的故事:设计资料视觉化的要点

除了呆呆的盯着一排排数据,希望一些点子可以溜进你的脑海之外,你其实可以主动一点,以下几个资源是你可以利用的:

这部分的流程没有万灵丹,但也别怕去碰那些数据,试着混合、搭配那些变数,从一些基本的图表着手。这很花时间,不过很值得你去做。我最棒的几个想法就是透过这样的方法就是从这些原始数据开始思考而得来的。

不连续资料 vs. 连续资料

我花了一些时间才领悟到这件事:有的图表类型就比另一种更能表达出你的数据。如果只是挑一种看起来不错的图表套上去,然后希望你的数据因此变得有用,那当然很简单,我以前就做过几次。

请认清一件事:根据数据类型的不同,有些类型的视觉化就是会比其他的好。找出最佳的视觉化,方法之一就是先分辨你的数据属于哪一类。数据主要可以分为两类:

不连续资料:你可以计算个别的数值。例如:比赛的得分或是 Facebook 按讚数。

说出数据的故事:设计资料视觉化的要点

长条图很适合用来表现不连续资料

连续资料:在一个区间内的任何数值。例如一季的雨量或是一个人的身高、体重。

说出数据的故事:设计资料视觉化的要点

折线图很适合用来表现连续资料

这个部分有一个非常棒的参考资料:Dona Wong 写的《The Wall Street Journal: Guide to information Graphics》,真希望多年前我就能有这本书可看。这本书对于选择合适的图表类型、在表达资讯时什幺该做/不该做,是极有价值的参考。

4. 基本款 vs. 客製的资料视觉化

最后,身为一名设计师,你必须不断地自问:「我该放弃那些有前例可循的路走向客製化吗?还是我该选择那些经过验证的图表去传递数据背后的讯息?」

我最近读到这篇 37Signals的部落格文章 〈 Three charts are all I need〉。作者对于资料视觉化的「问题解决」特性是如何取代掉了视觉上的美感提出了强力的论点。我完全同意这篇文章的说法。然而,我想他的意见属于非常功利的角度,我相信客製的资料视觉话总是能强化资料的可用性,而且又能看起来相当独特、引人注目。

对我而言,图表的选择可分为「万用」与「最适用」两种。表格、折线和长条图对于很多种类型的资料来说都很好用,但他们是比较通用的。身为一个专业的设计师,我会希望自己的作品同时兼具实用性以及独特的美感。

说出数据的故事:设计资料视觉化的要点

举例来说,《纽约时报》的客製化互动图表充实了他们的文章内容。你可以在 这边 看到他们的作品。我们来看看一些无可挑剔的客製化视觉作品:

说出数据的故事:设计资料视觉化的要点

大联盟各队平均一场比赛的三振数。

这个例子是将折线图稍微改造了一番,折线图代表的是大联盟平均每一队在一场比赛里的三振数,蓝色线图背后的灰点则是每一队的平均值。

说出数据的故事:设计资料视觉化的要点

各年份对于未来 30 年的殖利率预测变化 3D 图。

上面这张 3D 图表看起来相当惊人,但同时也能让读者明白数据间的关联性。

说出数据的故事:设计资料视觉化的要点

上图是利用真实内容来做资料视觉化。

最后,是我们为 CNN 做的一个 专案 ,我们利用 color-coding 秀出政党喜好,以及 3D 的视觉化人口统计资讯。

说出数据的故事:设计资料视觉化的要点

作为一种经验法则,当数据和技术上有需要的时候,我们就会尝试做客製化的资料视觉,但我们总是有备案,以便万一客製化进行得不顺利,或是顾客偏好野心不是那幺大的方案。

所以呢?

或许有人会问:为何要把资料都放到页面上?

答案:这样一来人们才能运用那些数据——做决定、调查、预测等等。重点是,使用者不会因为你的用色而感到惊叹,他们有自己的工作要做。

我的意见是,当你安排好页面的布局了,所有的东西都打磨得恰到好处。这时你要问自己:然后呢?审视每一个图形、每个小工具、图表、表格,去思索使用者会从中得到什幺。往往你会得到一个结论:这不重要。这时就等于是竖起了红旗,你必须减去一些东西,或是重新思考。

我自己曾经遇过几次这样的状况。我做了一个很美观、很複杂的仪表板,上面有一堆趋势图、圆饼图和地图,上面有成千上万的资料点。结果客户问:「我只想知道产品到底行不行,我该怎幺看?」或「我只需要知道三件事:X、Y 和 Z,我要怎幺找到他们?」

唉,这时候你才会明白自己已经在草丛里迷失,而看不见整个局面。

所以我会利用一种技巧去应付这样的状况:尝试利用文字去沟通:「到底对方想知道什幺?」

说出数据的故事:设计资料视觉化的要点

透过高阶的、文字化的结论会比图表更有用。

上面的两张图表来自我们最近的专案。他们都只是简单地用文字告诉使用者他们需要知道的东西,而非透过图表或图像来解释。

我们的客户很认同这样的做法,特别是在处理高阶的资讯时。但正如同我前面提到的,永远有不同的人物誌要考量,所以请选择最合适的方案。

如同所有形式的设计,资料视觉化讲究的也是平衡。

努力用独特方式去展示你的资料,但要避免过度设计,以及不必要、使人分心的东西。

为你的数据选择正确的图表,同时不要忘了按照层级去安排你的页面布局。

无论再怎幺令人沮丧、令人感到烦琐,都要为了小细节而烦恼,而且别忘了问自己:「所以呢?」

欢迎加入「Inside」Line 官方帐号,关注最新创业、科技、网路、工作讯息
说出数据的故事:设计资料视觉化的要点
说出数据的故事:设计资料视觉化的要点