8000 字深度长文！B端数据可视化设计指南（信息图表篇）

在现在的作业中（尤其是 B 端）越来越多的会开端呈现数据可视化的身影，关于一部分小伙伴来说这个概念是较为生疏的，面临这道无形之中提高的“门槛”咱们常常会体现的不知所措。所以，为了让咱们关于数据可视化不再那么束手无措，我希望能经过这篇文章和咱们一同沟通学习，处理一些归于咱们共同的问题。

那么咱们仍是老规矩，想要了解一个事物首先需求知道的是它的界说。

数据可视化的根本信息

1. 数据可视化的界说

较为笼统的来说数据可视化是一种由图形、图画、数字等元素组成的语言用于解说、呈现方针数据之间的联络。从这个界说上来看，数据可视化从外观层面来说是与图形、图画这些视觉元素密不可分，这也是数据可视化最为显着的特征。

而结合咱们实践的日子与作业来说，数据可视化是一种以图形符号为首要体现方法，将不可见的、笼统的、杂乱的、单调的、专业的、不直观的数据内容，有趣的、粗浅的传递给用户的有用手段。用户可以经过这样的手段完结自己的方针（例如对选定范围内的数据进行剖析，发现数据的周期与规则、敏捷找到自己方针节点中的要害数值、比照几组数据以了解当下研讨方针的状况等）这也是数据可视化最为显着的价值。

2. 可视化开展简史

关于可视化的开展史上可追溯至 1950 年，当时人们运用计算机创建出了第一批图形图表，可以说是数据可视化图表最为早期的雏形，而在 50-60 年代的可视化中又以查尔斯约瑟夫米纳德的《1812－1813 对俄战役中法武士力继续丢失示意图》为代表。

该图描绘了拿破仑的军队自离开波兰到俄罗斯边界后兵力丢失的状况，也是后世剖析拿破仑对俄战役的重要数据剖析材料，后来这种带状图被称为“桑基图”用来解说能量的活动。

而可视化真正被提到一个运用理论的高度是到了 1987 年布鲁斯麦考梅克和马克沁布朗所编写的美国国家科学基金会陈述《Visualization in Scientific Computing》（科学计算之中的可视化），其意在着重了依据计算机的可视化技术方法的必要性，此刻的概念已经与现在咱们所触摸的作业中的数据可视化是非常挨近。

到了 90 年代初人们发起了一个称为“信息可视化”的研讨领域旨在为许多运用领域（科学、商业、行政、财务、数字媒体）之中关于笼统的异质性数据集的剖析作业供给支持，与前面提到的“科学可视化”交叉构成了现在耳熟能详的“数据可视化”，此刻这个词汇才慢慢的被更多的专业领域的人所承受，并在之后互联网的不断开展中扩充着自己的分支。

3. 为什么会运用数据可视化

现在大量开端运用视觉可视化的原因其实非常简单大致的原因可以分为需求处理的数据量太大了和人脑不够用了。

据不完全计算 IBM 公司每天有 2.5 亿字节数据的吞吐量，麻省理工学院的研讨科学家 Andrew McAfee 和 Erik Brynjolfsson 教授指出，现在在互联网上传递的数据量比过去 20 年的总和还多，而且依据 IDC 猜测，到 2025 年将有 163 万亿 GB 的数据。

这是非常惊人的，而这么多需求的数据量单凭人脑的计算才干和处理才干来说是完全无法与之匹配的，研讨标明人脑很难一起处理 5 组以上的笼统数据，所以这种单线程的处理方法就决议了需求凭借外力。

而关于用户尤其是决策层的用户来说在实际的作业场景中常常需求一起处理超越 5 组以上的数据并需求对其建立精准的剖析模型以便于做出最精确的决策所以依据这样的需求，数据可视化规划氤氲而生。

4. 数据可视化的优势

依据数据可视化的需求来看，数据可视化的优势是显而易见的，可以归纳为两点：认知减负和传递赋能。

认知减负是运用者在运用数据可视化工具时分的最直观感受，当所面临的巨大的、杂乱的单调海量数据集变成了图画化、通俗化、形象化的视觉符号时，咱们会天性的放下关于面临严寒数据时分的抗拒和警戒，这是由于人关于一目了然更加挨近自己了解的有趣事物的时分，会更为亲热和愿意去自动了解。而且被处理过、规划过的简练直观体现方法，能更为直接的让运用者看到数据与数据之间的关联，进而剖分出其潜在联络，在人对数据的认知这个环节上下降了辨认本钱和剖析本钱。

传递赋能上图画传递更挨近人类最天性的获取信息的方法，比起文字来说图画更像是一个解密的进程，经过解开文字描绘这重“暗码”将最本质的信息进行呈现，而且比照文字，图画所可以承载的信息其实更为广泛，而且人类读图的功率要远远高于阅览文字。

无论是一个约定俗成的语义符号形象仍是契合语境的配色都可以起到比文字直白表述更为激烈的深入人心作用，而且图解的方法并不受限于语言的障碍，极大的下降了沟通本钱。

5. 运用方针

依据用户的运用方针来说，运用数据可视化其实就像是一个侦察用“蛛网图”辅佐自己整理思绪进行破案的进程：将一些有关的，可是较为零散信息数据用一根根头绪交叉起来，构成体系化的联络，便利运用者敏捷掌握各个节点之间的联络进行推导。

所以说咱们在规划数据可视化的时分并不是对咱们拿到的数据的无脑映射，而是要依据用户的方针经过必定的处理和优化后才干进行呈现，随时记住咱们是给用户在打辅佐，所以咱们每一步的规划必定要依据用户的考虑。

用户的期望是可以高效、明晰、简练地完结数据的比照、要害节点的查询、每组数据之间的剖析等一系列交互，提高自己的作业功率，下降自己的学习和运用本钱。

6. 运用场景

数据可视化的运用领域较为广泛触及医疗、计算、办理、金融、文娱、人工智能等一系列领域，在 UI 的规划中咱们最常触摸到的包括：PC 后台的数据概览、数据可视化大屏、游戏 UI、后台实时监控等。

规划师们的使命

当咱们大致了解了数据可视化的前史、运用原因、优势、用户方针、运用领域后下面就要切入咱们规划师最为关心的论题：咱们在规划中的使命。

1. 规划难点

数据可视化作为一门跨领域的学科，本身关于从业者而言就有着必定的归纳本质要求，但由于国内教育并没有笔直教学学科，所以在现在的阶段从业人员一部分由纯视觉规划专业的同学组成，另一部分由纯工科类型的专业的同学组成。

所以这就导致了非视觉规划师在进行规划时，会将全副精力放在强数据的精确性、合理性上，从而让视觉的易读性上有必定的丢失，体现方法也较为单一单调，视觉感官较差，反观视觉规划师一般会将数据可视化在视觉体现方法上过度用力，尽管营建了很好的视觉体会，可是从其有用度、可用性上来说会大打折扣。

所以规划的难点许多时分就会会集在平衡视觉与有用之间的联络。

2. 规划方针

经过以上剖析，不难看出规划的首要方针，而面临这句较为笼统的“掌握规划与有用之间的平衡”其实无外乎也便是拆解到功用和视觉这两个方面。

从功用上来说，我的方针是提高用户的数据阅览功率、让用户可以敏捷 Touch 到方针信息，提高交互功率，一切都是以结果为导向，以处理用户问题为导向，必定记住人们不愿意承受未处理过的数据。

而从视觉上来说，咱们的方针是处理好在视觉上各个模块之间的一致、透气联络，将数据进行可视化的一起尽量提高感官上的审美体会与传达上的有趣。

以上会作为后文中咱们每一步规划的辅导和检验的方法，从实践操作的维度上来说二者也并不是五十比五十的分配，遵从的原则是：体会必定要让坐落功用，所以在视觉的层面发挥的空间其实需求比较克制。

事例制造

了解了数据可视化的规划难点，明晰了数据可视化的规划方针，那么我下面进入咱们最要点的环节：可视化页面事例制造，由于数据可视化的方法较多，这次咱们以作业中常常触摸得到的 PC 页面数据概览页为例。

1. 明晰性质

相同的，细化到数据概览这个分支项目，咱们相同需求明晰了解其根底界说和性质，严厉含义上来说数据概览部分归于 Dashboard design（仪表盘规划）的一种，其首要的意图和功用可分为剖析和操作两块。

所以从归纳的视点来说数据概览部分可以了解为：

其它模块的摘要视图，并显示来自运用程序各个部分的要害信息，从这点上来说主张此模块可以在其余模块规划完后再进行规划，如此有利于规划师从一个全局的视角切入进行规划，了解上也会更加透彻，否则很或许会陷入在你规划其他模块的时分不断地回来对其进行修正的怪圈。

它也是中心功用、常用功用的快速操作助手和便利页面跳转（有点相似于导航），交互功用的排布和要害信息的显示，其共同的要求点是显而易见的，即明晰各个模块之间的层级，做好次序、优先级排布。这就需求你对事务方针有必定的了解，记住，对事务方针不了解，你的规划将毫无含义。

你可以经过查询一些内部材料、陈述、也可以询问产品经理等相关负责人，还可以经过用户调研得出，这儿不打开说，在着手之前你需求搞清楚：各模块之间优先级怎么、你需求在一张独自的图表内展现多少变量、想展现一段时刻内的值是项目和项目之间仍是组与组之间、每段变量中有多少要害数据需求展现等问题。

2. 界说模块优先级

如上图所示，在作业中咱们接到需求的时分是面临一堆冗杂的数据集，组成了若干个模块，可是正如上文所说，咱们并不能对其进行无脑的可视化映射，所以首先要做的便是要对各个模块进行优先级的整理排序

明晰了各个模块的优先级排布之后，咱们开端对每一个独自模块进行可视化转化，即哪一个部分分别用什么类型的可视化方法体现，这一步非常相似于土地运用规划，当你在将土地区分完后，为每一块土地界说其运用类型。

3. 明晰图表选择

想精确的将图表与所要体现的数据进行对应，需求了解图表本身所包含的根本元素。

在这些元素中正常状况下必定在图表中的有：标题、时刻范围、图形主体，常常呈现的有：坐标系、图例、提示信息，有时分会有的有：切换选项和值域。

知道了这些重要的根底信息了，那么在面临这么多图表的时分咱们该怎么正确的选择来进行运用呢？

其实和之前说的相同：依据意图来进行考虑，所谓的依据意图来进行考虑也便是要明晰你所建立的数据方针需求剖析的维度，而日常运用的数据需求剖析的维度无外乎：比较、构成、散布联络。

比较类图表

比较类图表应该是咱们最为了解的领域，第一时刻可以想到的便是柱状图，这也是运用最为广泛的图表之一，常常呈现在 PC 端之中，用于描绘分类数据之间的比照，描绘的数据可所以区域、品类甚至一个时刻周期，但由于其扩展才干有限，所以一般不主张项目超越 12 条。

条形图与柱状图相似，看上去只是交换了 X 轴与 Y 轴，功用和承载数据品种较为相似，但不同的是，条形所能承载的项目数量相关于柱状图而言更多，由于其优秀的纵向延展性一般用于手机端较多，而且从上到下的阅览方法契合人眼阅览习气，所以也会常常用于排行榜的规划中。

分组条形图是条形图的衍生之一用于比较多个变量在不同区域之间的数量联络，比方当想比较相同一款衣服和鞋子在四个门店中的一个季度的营业额时就可以运用分组条形图。

双向条形图表合适比较两组以上的分类数据比较，和分组条形图较为相似，可是由于本身外观特征更合适用于比较两组含义相反的数据，也正是如此，双向条形图的组内二级分类数量一般不要超越 3 条最好。

折线图与前者最大的不同就在于在坐标轴中加入了连续类别这个概念，数据依据时刻等因素变得动态了起来，注重改变趋势的展现。

面积图是折线图的延伸，除了表明改变趋势之外还能比较所选范围内积累的值。

玫瑰图应该算是可视化图表中的“网红”，由于咱们从小学的讲义中就知道它还有一个别称叫“南丁格尔玫瑰图”。它是一种圆形的直方图，运用半径长短表明数值巨细，其特点就在于由于其独特的外观可以将数值之间的距离在视觉层面进行扩大，和将坐标轴范围缩小来提高视觉上数值的碾压是一个道理，发布会吹水独爱，可是要留意的是这不是一个表明占比构成的图，由于玫瑰图的每一份视点是相同的，必定要和饼状图等图区分开来，它用来表明的仍是数值与数值之间的巨细

雷达图常常用于剖析一些多维的性能数据、评分数据，常常打游戏的朋友应该不生疏，有多少五边形选手可以扣个 1，每一项方针越挨近圆心阐明状况越差，越向外阐明越佳。

子弹图用于比较当时数值与方针之间的联络，比方看当时成绩是否合格，也可以经过标记区分区域来进行更好的评价。

漏斗图适用于事务流程比较规范、周期长、环节多的单流程单项剖析，必定要有明晰的环节，比方监控买家从阅览到最终下单的数量计算以求得转化率，不合适无逻辑、无流程的分类比照。

构成类图表

构成类图表全体上来说首要用于调查部分和全体的占比联络，最经典的莫过于饼状图，这个不必多说，经过每一份半圆视点所占整个圆的巨细来表明部分和全体的联络，可是由于其所占面积较大，常常会让视觉过于会集，影响留意力。

相关于饼状图而言，环状图非常有用的防止的搅扰视觉的问题，其本质是将饼图中心掏空，功用与饼图根本共同，可是视觉上做到了轻量化，现在在日常规划中较为常用。

旭日图相当于前面二者的结合，适用于展现多层级数据的占比联络，距离圆心越近代表层级越高，下一层级的总和构成上一层级，存在必定的父子层级联络。

堆叠面积图出了可以表达趋势外，其优势在于可以表达总量和重量的构成联络，堆叠面积图上的最大的面积代表了一切的数据量的总和，是一个全体。各个叠起来的面积表明各个数据量的巨细。

堆叠柱状图的优势在于它既可以表达一级分类的比较，一起还能看出二级分类在其一级分类中的占比，可是缺点在于二级分类并不是依照同一基准线对齐的，相比于堆叠面积图更为常用。

瀑布图用表达两个数值之间的改变进程，进程值为正的时分，向上加，进程值为负的时分向下减。

散布联络类图表

散布联络类地图在这两年在国人的心中其实已经非常了解了，由于疫情今年的地图可视化的运用常常呈现在咱们的日子中，地图可以结合不同的表达方法：

可以结合散点、可以结合动画、还可以结合引导线以及热力图的方法，图的方法运用视详细的事务需求来定

最终便是气泡图，这是在查看散布联络中最为经典的视觉模型，用气泡的面积巨细表明数量，结合辅佐线可以更好地调查散布状况

4. 匹配图表 重构布局

当咱们对每种图表的功用和运用范围有了一个较为明晰的认知之后，下面咱们就可以对咱们之前所规划好的优先级的模块进行可视化方法（图表）的匹配了。

进行匹配往后，咱们将对布局进行重构，全体重构需求遵从的原则是

• 布局层级明晰，首屏尽量曝光更多内容
• 一致透气，具有呼吸感

布局层级明晰，首屏尽量曝光更多内容

从首屏曝光更多内容来说，首要是由于依据剖析类的数据概览作业场景和 Analytical dashboard 本身特征决议的，用户希望可以经过只是一屏的的巨细进行对各类信息的状况有根本的把控，到达一眼全局的意图，其首要留意力都会放在首屏，所以咱们需求尽或许的在首屏安排更多的信息。

当然首屏内容也并不是越多越好，一般主张也尽量不要超越 7 组模块，而在层级明晰这块儿首要是依据人眼阅览习气所发生的优先级排布：正常状况下都是左上为优先级最高，而右下优先级较低，这是无数经典的眼动测验和规划总结发生的最常用结论，就不打开叙述了，所以当咱们依照优先级、首屏曝光更多内容的原则进行处理后会得到如上图的布局。

一致透气 具有呼吸感

这首要是视觉层面的问题，一致透气的要求在主页概览中可以依靠栅格系统来处理，它可以有用的坚持页面布局共同性，为页面建立根底布局框架，将页面中的一切元素都捆绑在一个体系之中，一起还能有用处理适配问题。

5. 模块拆解

完结了大规划之后，下面咱们开端对一个一个的模块进行拆解，相同的以方针辅导规划，边规划边验证

层级明晰 杰出要点

和大规划相同，独自到每一个图表相同要时刻留意层级的整理，销售渠道部分很明晰应该是运用一个折线图的方法，由于事务方针上来说更关注销售额而不是销售额和订单数的比较，所以咱们选用了一个带有切换选项的折线图方法。

可是咱们会很简单发现在读图时会呈现较大的视觉搅扰，并没有可以很好地杰出要点信息，视觉层级不明晰、混乱。

所以咱们对没有要点的视觉层级进行整理，像之前区分模块那样，对视觉元素进行高、中、低的 P0、P1、P2 的设定，提高易读性

P0：层级最高的自然是要点信息杰出部分，所以咱们需求在其之上做加法，给予内容异形悬停款式进行详细着重，合作投影加强视觉作用，有用传递用户，摆开与其他元素的层级，一起数据部分用特别字体并恰当加大字号进行规划，便运用户第一时刻可以看到所要着重的数据详细值。

P1: 其次便是主体图形部分，这是用户需求看到的重要部分，在运用场景中会长时刻凝视，所以选用更低的明度与更高的饱满色色彩保证易读性，可是也不致于会让用户太晃眼发生视觉疲劳，最终考虑到该模块所在方位归于页面中较为中心的地带，给予必定的色彩透明度渐变装饰，在强化主体图形的一起不致于太显单薄。

P2：前两者都是必定程度的做加法，那么层级最低的元素需求开端做减法，此刻轴线、刻度、切换选项等元素需求弱化视觉层级，下降透明度，尤其是背后的刻度线与背景的明度比照大约控制在 1.6:1 上较为合适。

销售总额、订单数、渠道数同归于一个数据计算的领域，最忌讳的便是把以上供给的三个信息给做平，让用户抓不住要点，面临这样的状况仍是相同，建立需求杰出的要点信息给予特别文字和巨细的规划，选择合适的主体图形。

但在这儿需求留意的是由于在这个模块中 P0 是金额数、订单数、渠道数这些重要值，所以可视化图形需求恰当为其让步，不要放在阅览中心方位，依照 P1 来进行处理，而订单数、转换率这样的标题就成了 P2 需求恰当下降透明度和文字巨细，不搅扰首要信息的表达。

一致营建

提到一致，最早想到的必定是色彩，无非也便是需求处理好对立一致联络，而这其中一致的份额又要大于对立，配色上尽量选用同类色系，不宜太过花哨，尤其是关于 B 端而言，主张在或许的状况下不要超越 5 种，而且主色、辅佐色，比照色的份额主张控制在 6:3:1 的份额（但不绝对），既能做到有所区别又不致于过于艳丽搅扰视觉。

你的主色不必定要迁就你的品牌色，可是必定要是如上文说的尽量低明度高饱满，以适应于长时刻的凝视。

色彩往后便是字体，字体的运用需求极为慎重，假如可以尽量只呈现一种字体（但不要超越三种），而且只选用根底字体，正常状况下都是将其作为一个需求被降噪了的视觉元从来对待（比方下降透明度），在 PC 端中尽量也不要呈现较多不同的字号、字重，造成没有必要的视觉搅扰。

除了字体之外，在一致感的营建上卡片的布局结构也需求尽量坚持共同，这是为了提高易用性，同一个产品内，相同布局会给予用户相同交互、相同功用的暗示，也更简单培养用户习气，提高操作功率。

呼吸适中

呼吸感是留白的艺术，很检测规划师的排版才干，在独自的模块内，元素与元素之间尽量不要用实线进行间隔，可以的话运用亲密性原则经过元素距离的远近进行布局。

而柱状图的规划上，柱与柱之间的距离最好大于柱宽的 1.5 倍，这样才显得视觉上较为透气，不致于太臃肿。

最终便是模块中的边距留白部分，这点必定要重视，否则不只你的版心会变散，还会严重影响你的页面呼吸感。

细节处理

细节上首先要说的便是横纵坐标轴上的文字，上面的文字必定不要过长，最好的方法是将文字进行精简。然后横、竖排对齐处理，假如实在不能精简那么再进行斜排的方法。

第二点便是横纵坐标轴有的时分会由于需求展现的数据过多而过于密布影响阅览，这个时分可以选用恰当添加一个值域的划定的方法来进行坐标距离的缩放。

第三点便是，在排行榜等模块可以恰当添加一些小规划，比方金、银、铜的规划，提高情感化元素的融入。

第四点便是，尽量不要选用一些 3D 的酷炫作用来做可视化，由于这种作用很简单对数据进行遮挡和歪曲，不是非常适用于高效阅览，也不合适 PC 页面上的交互，而且也不利于开发，比较因小失大。

6. 拼装自检

当一切的模块规划完结后，像拼高达相同进行拼装，拼装完结后恰当调整其过于搅扰视觉的地方，然后进行自检。

自检不只是从查看你的视觉、你的模块间的布局，更重要的是带入运用人物来进行查看，你可以模仿用户运用中的各种需求场景，对已经制造好的页面进行交互和阅览，看是否可以快速高效地完结运用方针。

当然除了自己之外，你还能在有条件的状况下找专家用户进行运用，即使记录运用中存在的问题并及时进行调整，当初步运用大致无问题后便可以交付。

结语

好了以上便是在 B 端规划中关于数据可视化尤其是 PC 端数据概览的规划讨论，当然其实关于数据可视化的范围还远远不止于此，感谢你可以耐性看到最终，假如这关于你的作业有一点帮助那么备感荣幸，也很感谢留下你的沟通意见，咱们下一期见。

更多可视化神器：

参阅：

• 《10 rules for better dashboard design》Taras Bakusevych
• 《Data Visualization-Best Practives and Foundation》Cameron Chapman
• 且曼 B 端产品规划 美芳老师 《数据可视化规划之视觉篇》
• 知网文库
• 维基百科等