所有分类
  • 所有分类
  • VIP素材
  • APP模板
  • 图标
  • 插画
  • 样机

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

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

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

 

 第一部分: 图表布局 

图表的基本构成(来源网易 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. 规划设计,输出方案

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

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

欢迎交流、批评和指正。

 

原文地址: 花厂设计招待所 (公众号)

作者:又彬

 


 

本页地址:https://www.uime.cn/28437.html; 所有素材与文章均来自于互联网,经网友投稿后发布,如有侵权,请联系 99898566@qq.com。如果下载失败可提交工单哦。
0
分享海报

早鸟限时特价,年会员半价,限量1000份哦

点击购买

没有账号?注册  忘记密码?