数据可视化的图表设计

数据可视化是传达数据信息非常友好的方式,能够直观地呈现数据,快速吸引用户的注意力,所以一个优秀的数据搬运工一定深谙图标设计之道。本文将从功能、交互、UI等方面深挖图表设计。

本文脉络概览

一、图表的基本概况

1、什么是图表?

图表是可以直观展示统计信息属性的图形结构,是一种可以将对象属性数据直观、形象地“可视化”的手段。如果说表格可以承载数据的全面性,那么图表可以完美展现数据的特点和变化,它对数据的解读能力是表格无法做到的。

表格展示
图表展示

2、图表的使用场景?

比较数据差异情况,基于分类的数据,可以通过比较数据来了解不同分类的差异,比如柱状图。基于流程的数据,可以通过比较数据了解数据的变化趋势,比如折线图。

分析数据关联情况,展现数据间相互关系和数据流向,比如桑葚图。

查看数据分布情况,对于错综复杂的变量之间关系。可以通过图表来找规律,比如利用气泡图进行回归分析。

了解数据构成情况,发现各变量的占比情况,比如饼图。

3、设计原则

轻量原则:表格可以承载数据的全面性,但是在做数据可视化的时候,如果设计师将所有的信息堆砌在图表上,图表将变得非常笨重,反而增加了用户的思考时间。本着轻量的原则,将主要信息呈现在图表上或分层展示图表。

直观原则:设计师应该将数据信息清晰而直观地表达出来,使用户一眼就能洞察事实,更快地发掘商业价值并作出决策。

二、图表功能

双轴图

1、标题。包括左对齐、居中对齐和右对齐。在选择某种对齐方式前,请兼顾图例的摆放位置。

标题对齐

2、栅格,包含点状、线状和斑马线。根据数据特点选择横纵向辅助线,横向引导线增强水平方向的导视。纵向引导线增强垂直方向的导视。线状建议用虚线,因为不是用户确定指向值。

栅格

3、坐标轴(既要全面,又要简洁)

坐标轴示例

4、提示信息(查看多个数据点或单个数据点)

单变量的浮层提示内容为相同维度下选择的变量,多变量的浮层提示内容是相同维度下所有的变量。直联表的图例是展示所有变量,但是交叉表不是,是“变量+列维度”的排列组合。

查看提示信息

5、预警线,数据超过阈值就会报警,帮助用户监控异常数据。

预警线最好使用实线,并用警示的颜色引起用户的注意,最好用邮件或短信通知用户。

三、交互方式

1、加载方式,图表的加载动画建议使用与图表相关的样式。

加载动画

2、排除异常值,允许用户剔除高度异常点,因为异常值会影响用户对整个图表的分析。

异常值可剔除

3、数据钻取,单击某个数据可以看到该数据的详细信息,变换分析的维度。

数据钻取

四、UI 界面

1、颜色

深色背景适合较少信息内容的展示,可以通过布局建立良好的视觉层次,深层次地反映内容,而且视觉吸引力强,给人以高端的视觉感受。但是,可读性低,而且页面太过聚焦所以对留白的平衡要求较高。

深色背景

浅色背景适合较多信息内容的展示,增加了页面的空间,更多展示信息可读性高。但是,内容不聚焦,信息过少则页面显得太空。

浅色背景

视觉缺陷,世界上有一部分人群有视觉缺陷,他们无法通过颜色来得到来精准地区分图表的维度和变量。作为设计师不能忽略这部分较为庞大的特殊群体。

视觉缺陷模拟板

2、布局

视觉层级要符合逻辑层级,利用信息深度引导用户阅读。每个元素要保持一致,保证布局的整体协调。

布局的逻辑层级

3、插画

符合主题和整体基调,简单易懂,数据可视化具有一定的认知门槛,有时候需要插画来提高用户的理解力。

插画示例

五、工具

1.使用大厂开放的图表库,图表库的图表类型丰富且统一,而且大大节省了开发时间,比如百度的Echart阿里的G2

2.在专业的数据分析网站获取灵感,这里推荐一份数据可视化网站名单

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,755评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,369评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,799评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,910评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,096评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,159评论 3 411
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,917评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,360评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,673评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,814评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,509评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,156评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,123评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,641评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,728评论 2 351

推荐阅读更多精彩内容