数据可视化设计浅析与研究(二)

这是数据可视化设计系列文章的第二篇,我们重点探讨设计执行相关的话题,我主要从布局和配色两方面进行阐述。

往期文章:《数据可视化设计浅析与研究(一)》

第一部分:图表布局

图表的基本构成(来源网易 UEDC)

图表标题

标题一般居中或居左对齐,但是布局时,需要综合考虑副标题、图例甚至筛选器控件等元素的位置。

坐标轴

坐标轴包括 X 坐标轴和 Y 坐标轴,有时还会出现次坐标轴。

1. X 轴刻度方向的改变,如果维度过多,则横向刻度的展示范围会非常有限,为了展示更多内容,通常会用其他替代图表(比如横向柱状图),不能替代的情况下,可以考虑将标注文案进行倾斜(不鼓励)。

2. 数据类刻度值尽量转化为千位分隔符(如 K,M,B),保持简洁,以节省空间。坐标轴上的最大值取值要恰当,保证图表占据 2/3 以上,画面更饱满。

3. 还需考虑坐标轴上的极值。

坐标轴

图例

离散型数据包括横向排列和纵向排列,连续型数据包括连续图例。

1. 所有图表类型的排列方式要统一,所以要考虑整体的图表空间是适合横向排列,还是纵向排列。

2. 所有形式总长度超过内容区换行或换列。

3. 双轴图包含了 2 种图表类型,不同类型的图例样式要有所区分。

4. 连续型数据通过渐变色来展示数据大小的变化,具体渐变颜色定义在下文中有详细介绍。

图例

背景栅格

背景栅格主要用来帮助用户快速读取数据值,方便参考和对比。背景栅格一般有网格线、虚线、点阵、斑马纹等。在设计栅格时,应该尽可能减少对数据的干扰,在合适的场景下,甚至可以去掉背景栅格。

栅格

Hover 态(或点击态)

用户在查看某一项数据指标时,给出明确的反馈和提示。数据详情多时,还会通过浮窗的形式展现。此时该状态下数据可以突出显示,可以变化颜色、增加背景元素(线/面)、或者增加动态变化等。

字体

数据图表的字体一般采用无衬线体,另外需要考虑字体的辨识度,防止在显示上产生歧义。多数情况下,数据图表会运行在不同分辨率的大小屏中,所以在文字排版上。

做到以上几条,我们在设计图表时就可以避免掉绝大多数的坑,不过毕竟图表类型这么多,在实际场景中也会遇到各种情况。总之有这么几条总的原则

1. 保持数据图表简洁、清晰、易读

2. 强调用户的数据,帮助用户快速聚焦

3. 弱化次要元素,如栅格、图例等

4. 删除不必要的元素,阴影效果、酷炫动画

5. 合理布局图表的间距、留白等

6. 充分考虑页面的适配效果

7. 最好使用真实的数据进行设计排版

第二部分:图表配色

考虑到图表颜色在设计中至关重要,我把它单独分出来讨论。由于数据的复杂性和趋势变化,配色方案需要考虑非常多的因素,比如可辨识度、舒适性,还需要考虑特殊人群(色盲色弱人士等)对颜色的可读性等等。在配色过程中我们需要区分背景色和图表配色。

背景配色

背景色一般分为深色、浅色、彩色。在很多 LED 大屏上展现数据时,多采用深色背景,比如即将到来的天猫双十一活动,官方数据展示基本上会用深蓝色作为背景,这样可以减少屏幕拖尾,观看时也不会过于刺眼。深色背景中的图表配色一般不会采用太多的色彩,且图表也不会设计得过于复杂。

中小屏幕的背景选择性更大,中小屏幕背景色选择范围就比较广,浅色、彩色、深色均可以做出很好的设计。在 Web 端,大多数场景下,我们会采用浅色甚至白色作为背景,浅色背景更适合展示大量的数据信息,而且识别度更高。

图表配色

图表配色最关键的一点,就是要有辨识度。

我们可以通过明度上的变化增加辨识度,也可以采用大跨度的不同色相来增加辨识度,另外这两者也可以有机结合,常用于色彩较多的图表中。

明度变化

当我们需要使用单一色相配色时,势必要用明度差来进行设计,明度的跨度也要尽可能大才能更清晰。我们可以通过在灰度模式下配色的辨识度来判断明度差是或否合适。

(Google Material Colors 中的 Light Blue 色卡)

需要注意的是,采用单一色相的配色种类不宜太多,建议不超过 6 种。一旦种类过多,色彩之间的明度差异势必会变小,因而影响辨识度。

色相跨度变化

通过色相跨度来增加颜色辨识度也是我们常用的方式。

色环

需要的颜色较少时,我们尽量避免使用相近的色相,比如同类色和相近色。尽量选择对比色或互补色,这样可以使不同属性数据在图表中展示更加清晰。

美国大选图

所需颜色较多时,建议最多不超过 12 种色相。

通常情况下人在不连续的区域内可以分辨 6〜12 种不同色相。过多的颜色对传达数据是没有作用的,反而会让人产生迷惑。

三种常用的取色方法

01. 色环提取

可以采用色环中同一明度下的不同色调作为图表颜色。前面提到的单色相内取色,也可以在这个色环中进行采集,此外 Google Material Colors 是一个不错的色板,可以结合使用。

02. 借鉴自然界中的色彩

自然界中有非常丰富的渐变色彩,而且被大家所熟知,这些色彩更容易给人们带来愉悦感。

自然界中的色彩

在借鉴过程中,我们需要注意,比如天空经常会出现红、蓝、紫的渐变色,但这颜色的明度会有其规律,通常是浅黄到深紫,但绝对不会出现浅紫到深黄色。还有一些自然界其他的配色,比如浅绿色到紫蓝色,浅黄色到深绿色,橙棕色到冷灰色。

03. 渐变与明度叠加取色

在正常渐变色的基础上叠加一层只有明度变化的灰色渐变,形成既有明度差异也有色相跨度变化的配色。

渐变与明度叠加取色

渐变色应用案例

好了,配色部分就探讨到这里。除了以上关键内容以外,我们平时还需要注意数据图表的适配效果、交互细节、以及动画设计方面的问题,由于篇幅的关系暂不展开,以后有机会进一步探讨。

说在最后

我们在参与此类项目设计时,通常会通过以下的流程去思考:

1. 为谁设计,用户想要什么

2. 明确设计目标和价值

3. 明确数据指标

4. 选择最合适的数据图表

5. 规划设计,输出方案

前三步更多会由产品经理、运营人员去思考并输出结果,最后两步则由我们设计师来完成,这两步也正是这两篇系列文章的主题所在。

在学习过程中,我们每个人可有不同的思考方式和侧重点,以我个人的角度出发:能够读懂常见的数据可视化图表,并从图表中能获取到关键信息。当有一堆数据摆在面前,能根据业务目标选择合适的数据展示类型,并运用设计手段完整的表达给用户。有了这些沉淀,我就能更好的和产品、运营打交道,更多的链路上游的信息,从而进一步提升设计的产出质量。

欢迎交流、批评和指正。

花厂设计招待所(公众号)

作者:又彬

(0)

相关推荐

  • 大屏数据可视化设计指南

    一.基础概念 1.什么是数据可视化 把相对复杂.抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应 ...

  • 数据可视化设计在PPT中的运用

    图表数据的展示,是PPT设计中最常用的功能。要想让听众能快速理解PPT数据的内容,需要我们对PPT图表的数据进行可视化的设计处理。今天为大家带来Visage的数据可视化设计指南,我们可以了解到数据可视 ...

  • 数据可视化大屏设计经验分享 【进阶篇】

    说起数据可视化设计,如今绝对是热门的设计之一,而真正懂数据可视化设计的设计师却不多,随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化.很多UI设计师突然会接到公司数据可视化设计的需求,如果不了解 ...

  • 大屏监控系统数据可视化界面设计

    随着社会信息化的高速增长,信息的可视化需求也急剧扩大,特别是一些监控中心.指挥中心.调度中心等重要场所,大屏幕显示系统已经成为信息可视化不可或缺的核心基础系统.下面我们来一起分析下大屏监控系统数据可视 ...

  • 有哪些不为人知的超实用数据可视化工具?

    碰巧自己也是一个工具迷,对数据可视化和信息可视化也有一点点研究,在这分享一些简单好玩的可视化工具,大家可能会用得上. 说到可视化,肯定少不了信息图表,首先介绍几个信息图表制作神器: 神器1:在线信息图 ...

  • 21款超实用的酷炫「数据可视化工具」

    辛辛苦苦分析一堆大数据,竟然没人看!到底怎么办?俗话说,有图有真相,一图胜千言,取悦了眼球,剩下的都好说.如果你正着手于从数据中洞察出有用信息,那你所需要的正是--数据可视化.本文挖掘了21款炙手可热 ...

  • FineReport数据可视化分析的图文步骤

    在FineReport这款报表软件的使用过程中,经常需要使用到功能是数据分析.而如何将繁杂的数据,进行整理分析,从而得出清晰的调查结论,正是我们学习FineReport这款软件的关键.下面小编为大家分 ...

  • 提升数据可视化的7个实用技巧

    今天的文章不长,但是干货还是不少的.对于数据可视化,我觉得在设计原理上其实是相通的,都是为了更好的传达信息.所以,同样的,核心信息,剔除信息杂质,就能使数据表信息的传达更有效. 以下是译文 良好的数据 ...

  • 如何从零开始学数据可视化图表制作?

    当我们面临的数据量呈现指数级增长,当我们对数据的运用越来越重视,数据可视化图表可以帮助我们更准确而高效.精简而全面的理解数据,从而获得更有价值的洞见和价值.那么这一技能要如何掌握呢? 操作方法 01 ...