遇见大数据可视化：可视化系统搭建

潇湘浪士 2021-04-02

展开全文

CrazyPM产品经理社区阅读数 4391 2019-03-28 12:38:44

怎样搭建数据可视化系统，使复杂和庞大数据用丰厚的设计言语明晰表达，并构成鲜明的设计作风？我们把数据可视化的元素中止拆分并树立相应的规范体系。

图表设计

1.图表基本类型

六种基本图表涵盖了大部分图表运用场景，也是做数据可视化最常用的图表类型：

t
柱状图 用来反映分类项目之间的比较；
t
饼图用来反映构成，即部分占总体的比例；
t
折线图 用来反映随时间变化的趋向；
t
条形图 用来反映分类项目之间的比较；
t
散点图 用来反映相关性或散布关系；
t
地图用来反映区域之间的分类比较。

基本图表类型都有通用的样式，不过多的展开解说。我们更多的思索怎样选择常用图表来呈现数据，抵达数据可视化的目的。基本办法：明白目的 —> 选择图形 —> 梳理维度 —> 突出关键信息。a、明白目的明白数据可视化的目的，经过数据可视化我们要处置什么样的问题，需求探求什么内容或陈说什么事实。b、选择图形盘绕目的找到能提供信息的指标或者数据，选择合适的图形去展示需求可视化的数据。Andrew Abela 整理的图表类型选择指南图示，将图表展示的关系分为四类：c、选择维度分辨哪些是有价值的值得关注的维度，选择数据展示的视角。基本图表普通有哪些可用维度呢？基本图表维度对照以上图形维度，制造可视化图形。d、突出关键信息依据可视化展示目的，将重要信息添加辅助线或更改颜色等伎俩，中止信息的凸显，将用户的留意力引向关键信息，辅佐用户了解数据意义。CPU 运用率监控案例，可视化的目的就是检测 CPU 的运用状况，特别是异常运用状况。所以图中将 100%最高临界线运用特殊的颜色和线形标识出来，异常的运用段用颜色辅佐用户辨认。

2.图表排布

在可视化展示中，常常有多组数据中止展示。经过信息的构图来突出重点，在主信息图和次信息图之间的排布和大小比例上中止调整，明白信息层级及信息流向，运用户获取重要信息的同时抵达视觉均衡。常用的图表排布方式以扶贫展示项目为例，以地图的方式展示出扶贫的概略信息，两边排布扶贫的细致内容信息，在构图和上突出主次。并在主要信息的背景上做动画处置，进一步增强信息层级及视觉流向的引导。

3.动效设计

目前越来越多的可视化展示的数据都是实时的，所以动效在可视化项目中的应用越来越普遍，动效设计肩负着承载更多信息和丰厚画面效果的重要作用。a、信息承载在可视化设计中经常遇到，十分多的数据信息需求展示在一个大屏幕上。遇到这种状况，需求对信息中止兼并整理或经过动画的方式，在有限的屏幕空间里承载更多的信息，使信息愈加聚合，同时使信息展示愈加明晰，突出重点。b、画面效果增加细节及空间感，背景动效使画面愈加丰厚。单个图表的出场动画，使画面均衡而流利。减少了图表在呈现或数据变化时的生硬呆板。数据可视化动画在设计上重要的准绳是恰当的展示数据。动画要尽量的简单，复杂的动画会招致用户对数据的了解错。动画要运用户可预期，可运用多次重复动画，让用户看到动画从哪里开端到哪里中止。配色计划由于图表的特殊性，数据可视化的配色计划和配色央求具有共同性。配色计划要充沛思索到特殊人群对数据图的可读性。丰厚的色系，至少 6 种才可满足图表应用的各种场景。同时配色需求有可辨识性，颜色选择需求有跨度。

1.背风光定义

配色体系分为深色底、淡色底、彩色底的图表设计。背风光的选择与可视化展示的设备相关。a、大屏背风光在大屏设备中普遍用黑色（深色）作为底色，以减少屏幕拖尾，观众在视觉上也不会觉得刺眼。一切图表的配色需求以深色背景为基础。保证可视化图的明晰辨识度，颜色与明度变化需求有跨度。淘宝双 11 大屏设计遇见大数据可视化：可视化系统搭建 b、中小屏背风光中小屏幕显现选择范围就比较广，淡色、彩色、深色均能够做出很好的设计，但是相比之下，淡色底会使数据愈加突出。中小屏幕淡色、深色、彩色设计

2.图表色定义

在图表的颜色运用上，颜色是最直接的信息表达的方式，常常比图形和文字愈加直观的传送信息，不同颜色的的组合也能表现数据的逻辑关系。a、颜色辨识度要确保配色十分容易辨识与辨别，关于运用单一色相配色，明度差别需求全局思索，明度跨度一定要够大。能够在灰度方式下测试配色的辨识度。b、颜色跨度多色相配色在数据可视化中是相当常见的，多色相配色运用户容易将数据与图像联络起来。怎样有效应用颜色的变化来传达数据信息？带明度信息的色环当需求的颜色较少时，避免运用相近的色相同类色和相近色。尽量选择对比色或互补色，这样能够使不同属性数据在图表中展示愈加明晰。例如：美国大选，运用红色和蓝色两种对比色，将明晰的将选票结果展示于地图上。当图表需求的颜色较多时，倡议最多不超越 12 种色相。通常状况下人在不连续的区域内能够分辨 6~12 种不同色相。过多的颜色对传达数据是没有作用的，反而会让人产生迷惑。怎样让多种色相的颜色看来调和？有几种取色的办法：色环提取法：选择同一饱和度和明度的不同颜色作为可视化图表的配色，这样能够使图表看起来调和统一。突变色取色法：不同明度和色相的取色，淡紫到深黄的过渡，与淡黄到深紫的过渡，觉得是一样的配色，但是理论两种配色理论觉得却差别很大。淡黄到深紫的过渡看起来愈加自然，这是由于我们在自然中大多存在的都是淡黄向深紫的过度。如下图，所以采用仿自然的配色方式会让图表愈加自然。在取突变色时，能够在 Photoshop 中依据数据的数据量，拉辅助线到取色点的位置，从断点处选取颜色，然后对突变中止测试与调整，测试配色在理论运用中的效果，选取最优的配色。取色的理论应用：

字体设计

文字是数据可视化的中心内容之一，文字和数字是数据信息传达的重要组成部分，为了愈加明晰精确的传达信息，增加信息的可读性，从字体选择，到字体大小，字体间距都有特定的央求。

1.字体选择

a、辨识度UI 设计中运用无衬线字体是 UI 界的共识，但是关于数据可视化设计而言，字体大小的跨度能够十分大，所以在无衬线字体中需求选择辨识度更高的字体，大的宽度比值和较高的 x-height 值的字体有更高的辨识度，选择字母容易辨识不会产生奇特的字体更有利于用于数据可视化设计。b、愈加灵活的字体字体需求愈加灵活，应该支持尽可能多的运用场景，数据可视化项目经常显现在不同大小、不同的终端上，需求选择愈加灵活的字体能够在低分辨率的小屏或超大屏幕上运转良好。c、字间距宽松的字母间距（字母之间的间距应小于字偶间距）和合适的中文字间距。

2.字体大小

文字的可读性对数据可视化起着至关重要的作用，设置小字体的极限值，以保证在最小显现时不影响对文字的辨认与阅读。

3.中西文距离

中西文混排时，要留意中文和西文间的距离，普通排版的状况都是中文中混排有西文，所以需求在中西文间留有距离，辅佐用户更快速的审视文字内容。

极限处置

很多数据是多种多样不可预知的，所以在可视化时需求处置各种极限问题，才干使数据明晰表达。

1.数据展示细节处置

如下图，当水平排列数据时，图表空间不够，招致数据不可辨识，对数据中止旋转处置，不利于阅读，能够选择简写的方式来排布展示数据，或经过改动图表方式来处置问题。

2.选择合适的图表方式

固然饼图能够展示份额，但过多的分项曾经使饼图不堪重负，不能很好的传达数据的意义，所以需求运用横向柱状图。举荐运用国内新一代大数据用户行为剖析平台：数极客，新一代支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式;自动监测网站、APP、小程序等多种渠道推行效果剖析，是增长黑客必备的互联网数据剖析工具。数极客支持实时多维剖析、漏斗剖析、留存剖析、途径剖析等十大数据剖析办法以及APP数据剖析、网站统计、网站剖析、小程序数据统计、用户画像等应用场景，国内首创6大提升转化率的数据剖析模型，是用户行为剖析范畴首款应用定量剖析与定性剖析办法的数据剖析产品。。基于用户行为的大数据剖析智能系统，提供了会员营销和AB测试两大数据智能产品，使得企业能够快速的提升用户转化率和留存率，完成数据驱动增长。