B端数据可视化系列，我们将从「交互」「视觉」「落地」三个视角进行全方位的解读复盘，欢迎大家关注和探讨，本篇从数据可视化的「视觉呈现」视角结合实际案例进行分享。
我们来回顾下，数据可视化的定义：
将不可见的数据转化为可见的图形符号，从中发现规律和特征，以获取更多的信息和价值。
我们可以将其理解成一条连贯的思路，首先是有数据集，其次是有个图形映射，然后从图形映射中去做分析和预测。
由此我们将数据可视化设计流程分为以下几个步骤：
在「交互篇」中，我们可视化图表分为比较、构成、分布&联系三大类。并以“直营连锁百货商城”为例，每种图表一个小案例，通过确立指标分析维度、定义图表使用场景，熟练运用18种可视化图表来匹配业务需求。
本次「视觉实战篇」，我们依旧通过理论+案例实战的方式，聚焦如何围绕业务目标，搭建可视化页面布局、确立可视化视觉风格，最后得到一个高保真的可视化设计页面。
01 可视化设计规范
在讲设计规范之前，我们先由远到近了解下数据可视化页面的构成，图表的构成，以及图表元素的构成。
1.1.可视化页面的构成
一个典型的可视化数据概览页一般可分为标题栏、数据统计、排行榜、可视化图表。
- 标题栏：页面的名称，以及时间范围，内容区的切换导航，概括整个页面的功能属性
- 数据统计：对当前数据的总览
- 排行榜：根据业务信息进行的排布
- 可视化图表：页面的主体部分，可以包含一个或多个图表信息
1.2.图表的构成
我们将镜头往近拉，会发现可视化图表通常由标题、坐标系、图形主题、图例、提示信息、切换选项、值域这几个部分构成。
需要注意的是，数据可视化图表除了上述常规元素外，还有个很重要的的概念—时间范围。因为数据的统计一定要有时间范围，否则这个数据图表就是无意义的，所以大家在设计图表时一定要体现出“时间范围”，它可以不出现在具体的某一个图表中，但是要通过标题或者其它方式表现出来。
图表中一定要有的
- 标题：图表内容概述，让用户获取有意义的信息。
- 时间：通常是时间范围。
- 图形主体：由选择的图表类型决定，有时也会多个图表类型组合使用。
图表中常常有的
- 坐标系：由X轴，Y轴，标识线，轴标题构成。一般场景中，坐标轴是图表中必须存在的元素之一，AntV官方给出的迷你图表（Minichart）中，坐标轴可以被省略，只保留图形基本姿态。
- 图例：通常在图形主题的右侧或顶部，用来区分不同类别代表的数据含义。
- 提示信息：多为hover或者选择状态，对选择的位置数据进行详细展示。
图表中有时会有的
- 切换选项：可以是tab类的切换，也可以是下拉选择，根据具体场景设计，用于同类型图表的切换。
- 值域：当屏幕不足以容纳图形，选择可视范围的工具，当图表足够复杂时会用到。
1.3.图表的Z轴拆分
为了让同学们更方便的理解，我们根据元素重要程度和视觉强度，将图表拆分为“底层”、“中层”和“顶层”。
a.底层元素
在图表中，我们把坐标系，刻度等称为底层。为了保证视觉上的舒适和清晰，设计底层元素时，需要考虑到底层元素和背景的对比度；
当对比度在1.2:1时，底层背景过弱，人眼较难读取具体的数值；当对比度在2.5:1时，底层背景元素过强，容易干扰用户注意力，妨碍对主体图形的读取；通过不断的调研和尝试，最终确定元素与背景对比度在1.6:1左右，底层背景适中，人眼刚刚好可以看清。
基于1.6:1这个对比度数值的特性，还可以运用到分割线、搜索框等元素。
这里推荐一个查看对比度的网址(领取方式在文末），大家可以根据自己设计的图表，把背景层和前一层的色值输入，网站就会自动算出两者的对比度值，非常方便，也为我们的设计提供了一个可靠的依据。
b.中层元素
图形主体、图例等承载主要数据信息的元素我们称为中层元素，为了保证中层元素的可读性，设计时应该采用更低明度与更高饱和度的色彩来表现，保证图形的层次和对比分明。
如何设计合适的色板从而达到清晰传递和美观的目标呢？这里建议大家基于辨识度和统一性，使用HSL色彩模式，搭建色板。
同样推荐给大家一款好用的sketch插件Create color scale(领取方式在文末），使用HSL色彩模式，搭建色板，只需把起始颜色和终止颜色的色值输入，选择过渡颜色的数量，将会自动生成一个合适的色板，然后在此基础上进行微调，便可使用。
我们选用HSL模式的原因在于，相比于RGB模式，HSL模式在色相、饱和度、明度三个维度上都能有相应的差异，还可以保持一定的统一度。它不仅能用到可视化图表中，也可以运用到整个产品中。
c.顶层元素
提示信息就是我们的顶层，鼠标悬停后的详细数据说明，在设计上最好能体现出明显的视觉强调效果，并结合动画，投影等，给用户最明显的强调效果。
1.4.依据元素复杂度分类
根据图表的元素构成，可将其分为“大图表”、“中图表”、“迷你图表”。
- 大图表：不限制数据密度，给用户最全的信息，常用于数据详情页。
- 中图表：限制数据密度和图表尺寸，常用于数据概览页，是比较常见的类型。
- 迷你图表：舍弃了y轴等不重要信息，只保留最关键的信息，肠结核数据统计做预览用。
Tips：常用图表设计小贴士
1· 柱状图
a.矩形间距和宽度适中，推荐间距大于等于1.5倍柱宽。
b.避免使用大圆角，因为可能会导致数据读取误差。
c.Y轴取值从0基线开始，避免用户做出错误判断。
d.当x轴文字过长，推荐使用条形图，保持最佳的阅读体验。
2.折线图
a.横轴需表示连续数值，否则折线图意义不大。
b.在使用折线图时，图形主体要保持可识别性，不建议在曲线下方着色，曲线下方着色容易让人联想到面积图，有时为了视觉辅助加成，可以在下面做一个微渐变。
3.环图
a.设计时根据面积占比，顺时针从大到小环绕。
b.和页面中其他图表视觉上保持协调。
c.图例加起来必须是100%。
4.多图表混合使用时
当填充较多的图表，和折线图标放在一起时，注意控制不同图表的视觉重量感，使其更均衡。
1.5.可视化页面布局
a.一致性
在可视化页面中，往往会由各类不同图表类型组成，如何保持整体页面的一致性呢？我们可以通过规范卡片的内边距，文字，颜色等来统一可视化页面。
b.灵活性
图表内的元素可以根据空间和卡片形状，灵活选取放置位置，例如图例，可以放在图形的右上方，右侧，或者图形底部。
c.栅格的使用
栅格系统可以让页面设计变得有规律，栅格化布局也能提升页面的一致性和复用性。栅格系统由栏(column)、水槽(gutter)、页边距(grid)构成。
B端产品设计中，建议使用24栅格布局，这样能把页面拆的更细。
当定义好栅格系统后，我们可以通过定义水槽和页边距的大小、模块的比例，来布局整个页面，从而提升整个设计开发流程的效率，并能帮助开发者实现较为理想的设计还原。
需要注意的是，栅格系统只用于页面的内容层，当导航类型为顶部导航时，此时内容区为整个页面。
02 PC数据概览案例实战
我们以一个CRM系统数据概览为例，基于以上的知识，一步步的来拆解，如何搭建一个可视化页面。
我们拿到一个可视化页面设计需求时，我们要主动去搞清楚三件事情：
·明确这个页面的使用角色
·业务需要重点突出的信息
·设计要求
首先我们来看看案例的需求。
明确了需求后，将设计分为以下几个步骤：
2.1.定义模块类型
2.2.确定模块优先级
2.3.布局重构
2.4.通用视觉规范
2.5.模块逐个拆解
2.6.模块组装并自查
2.1.定义模块类型
将产品经理交接的数据图表集转化为图形符号，通过前面提到过的知识点，根据业务目标，确立分析维度，选择合适的可视化图表，做一个数据到图形的转化。对于无法确定具体图表形式的模块，可以先根据其性质进行初步定义。
2.2.确定模块优先级
第一步拆解各个模块的类型后，第二步就需要确立模块的优先级。信息的优先级一般可由产品经理提供，或者通过调研，埋点等方式。当确定优先级之后，可在页面中进行标注。
2.3.布局重构
a.布局更加紧凑
为了让布局更加紧凑，首屏曝光更多内容，根据定义的图表类型所具有的特性，进行布局重构。例如漏斗图和排行榜，大多数情况下是竖向结构，可以将其调整至侧边，从而提升首屏信息的展示效率。
b.应用栅格做规范
把重构的布局套入前面做的栅格规范，规定好每个模块的比例。
2.4.通用视觉规范
通用视觉规范包括颜色，字号，字重，间距，圆角等，把这些已有的设计资产套入可视化页面中，从而保证整个产品视觉体验的一致性。
2.5.模块逐个拆解
根据我们暂定的模块宽度，从上到下，从左到右一步一步完成设计。
a.标题栏
针对不同tab，做形式区分，根据亲密性原则，缩小属性相近的元素之间的距离，用不同的样式做层级区分。
b.数据统计
数据统计卡片的设计目标是优化信息层级，增加易读性，那么就需要对卡片内信息优先级进行区分，前面已经根据栅格确定好了卡片的宽度，我们可以根据字体、大小、颜色区分信息层级，也可使用特殊字体包（推荐DIN pro 需购买）和迷你图表进一步进行层级区分。
tips：在国内，通常是红涨绿跌；在国外，通常是绿涨红跌；分享给大家一个记忆小技巧，人民币是红色，所以是红涨；美元是绿色，所以是绿涨；
P0信息设计完成后，可将其放入页面中预览，观察整体的视觉层级是否协调，规范使用是否统一，对有问题的地方进行及时的调整。
c.折线图-渠道销售情况
确定了每个模块的图表类型后，我们就可以根据前面提到的可视化设计规范进行设计；注意元素的层级区分，突出标题和图形本身，可以运用渐变投影，弱化坐标系，切换tab等。
d.柱状图-城市销售情况
这里我们的业务目标是展示各城市之间“销售情况”和“订单数”之间的对比，所以选用了柱状图，同样需要注意各元素的层级区分，以及矩形的宽度和间距。
e.漏斗图-销售转化率
漏斗图从上到下，有逻辑上的顺序关系，表现了随着业务流程的推进业务目标完成的情况，从“添加渠道”到“签约成功”需要展示出流量的流失情况，所以这里选用漏斗图，我们可以通过漏斗的斜率来判断销售转化率的高低。
需要注意的是，在设计漏斗图时，需要突出漏斗和转化率，弱化图例、减少不必要的颜色干扰。
f.排行榜-渠道经理销售额排名
在排行榜中，根据业务，对人物和金额进行层级区分，还可以通过图标的方式进一步突出排行。
g.柱状图/环图-订单分布
最后一个模块“订单分布”，前期并没有确认具体的图表，对于这种情况我们可以进行多图表组合尝试，多分类数据比较，可以先尝试分组柱状图，同时用环图表示三类订单的占比。
当我们使用分组柱状图进行尝试后发现，信息读取效率不高，因为很难对比出城市之间的订单总和，于是我们调整方向，使用堆叠柱状图，既可以看到各类订单占比，也可以比较各城市订单总量。
2.6.模块组装与自查
a.模块组装
将模块嵌入页面中，得到了最终的高保真数据可视化页面。
b.视觉自查
我们主要通过三个方面进行自查，布局划分和占比、信息视觉降噪、规范统一。
03 数据可视化大屏
数据可视化大屏相比于PC数据概览，有以下几个特点。
a.尺寸
尺寸更大，而且长款比没有固定的约束。
b.视觉
深色底视觉更聚焦，更加炫酷，具有科技感，配色也更加丰富、鲜明；细节上也有更多装饰。
c.内容
一屏比PC承载的信息更多，很少切换和操作。
d.使用
需要长时间盯着看（有些甚至需要24小时轮岗值班）。
3.1.设计风格
1.0 时代
整个页面的立体感和质感极强，更注重元素的光影，也会加入各种FUI和3D的元素来突出可视化大屏的特性。
2.0 时代
开始趋向扁平，对图形元素进行降噪处理，渐渐弱化元素的质感。
3.0 时代
进一步的削弱不必要的辅助元素，简化图形表达，突出图形主体，设计更加简洁、美观、实用。
根据业务需求，三维立体的风格也在沿用，例如一些做地理可视化、或是数字孪生业务的，只是相比于1.0时代，会弱化其他模块的视觉表达，从而达到突出三维主体的目的。
3.2.设计建议
a.颜色
用色要鲜明、肯定和大胆，建议使用高对比度的颜色进行设计，底层元素和背景的对比度依然保持在1.6左右，只不过背景使用暗色系。
b.字体
使用特殊字体，更能突显出数据大屏属性。(领取方式在文章末尾）
c.布局
数据大屏会根据业务模块来进行相应的布局，这里根据业务信息的优先级，提供几种常见布局参考。
d.设计尺寸
可视化大屏大多都是由拼接屏组成，设计稿是依据拼接完成后的长宽比而定的，在设计前，设计师可以主动和业务方进行对接。这里以5*3块1920*1080的屏幕拼接为例，具体计算公式如下：
当展示屏幕是拼接屏时，可以在设计稿上用辅助线标注，确保最终展示效果和视觉稿的一致性。【注意：文字信息尽量避开拼接缝，会影响阅读。】
f.组件化
如果公司的可视化需求量巨大，或者业务本身就是BI，同学们也可以总结规范，做成可视化的组件库，设计的一致性和效率都会大大提高。
g.第三方工具
当然也不同学们所在每家公司，都有能力独立完成可视化大屏的研发落地。我们也可以借助第三方工具来降本提效，这里推荐一些相对成熟的可视化大屏工具服务商及BI工具，供君选择。
3.3.可视化大屏实战
我们以一个风电系统可视化大屏改版为例，来讲解可视化大屏的设计方法。
首先我们先来梳理当前页面的问题。
- 定义模块类型
- 确定模块优先级
- 布局重构
- 重新梳理视觉规范
- 模块逐个拆解
- 模块组装并自查
a.定义模块类型
确定风电系统的模块类型，将页面模块分为“当前天气实况”、“预警统计信息”、“未来天气预报”、“地图可视化预警信息”、“线路天气预警列表”、“官方天气预警列表”。
b.确定模块优先级
根据业务梳理重点信息，在页面中标注出来。
c.布局重构
按照信息优先级，调整占比、位置、亲密性；突出地图可视化预警信息。然后应用栅格调整模块占比，到最合适的比例和呼吸感。
d.重新梳理视觉规范
推荐使用3.0视觉风格，整体呈现年轻化、科技感、呼吸感。
e.模块逐个拆解
拆解方法同PC端数据概览页面，逐步拆解。
地图可视化预警
结合业务分析原地图可视化预警页面发现地图占比小、统计数据占比太大，且辅助信息太分散。
尽可能的提升地图占比，在不影响信息传递效率的前提下，可以让筛选类信息，通知信息等其他元素浮在地图上方，以提升地图的层级。
当前天气实况
把不属于过去和未来的辅助信息删除，聚焦当前的天气实况，同时加入相应的天气图形展示，把不同业务属性的元素进行模块拆分。
未来天气预报
背景层的信息弱化，主体信息强化，突出hover状态的对比，图例和图表信息对应。
天气预警列表
规范表格样式，根据业务属性，将“线路级预警”进行相应扩张，提升“最新”预警信息的层级。
f.模块组装并自查
将优化后的模块嵌入页面进行视觉走查。
总结
以上就是从数据可视化图表的【视觉呈现】出发，结合实际案例，教大家如何完成一个布局合理、美观实用的可视化页面，希望能给正在从事或准备入局B端的小伙伴们带来启发和帮助。
