定义
数据可视化是数据内在价值的最终呈现手段，它利用各类图表及图形化的设计手段将复杂不直观的数据有逻辑地展现出来，使用户找到内在规律、发现问题、从而指导经营处理决策，挖掘数据背后的商业价值。
在当前新技术支持下，数据可视化除了｛可视｝，还有可交流、可互动的特点
本质
数据可视化的本质是数据空间到图形空间的映射，是抽象数据的具象表达，数据可视化将分析技术与图形技术结合，清晰有效地将分析结果信息进行解读和传达。
场景
覆盖Toc、Tob、Tog。可视化的表现方式包括各种单色图表的数据统计，也包括了现阶段的大屏，多屏拼接的多数据图表炫酷特效展示。
1.第一类使用场景
以使用为主，tob类系统类PC页面，业务部门及数据分析部门长时间停留在屏幕及数据上做分析统计对比的工作。例如，企业数据报表分析，各类BI等。追求简单简洁高效的传达数据内容，
image.png
2.第二类使用场景
以看为主，并可以快速传达核心数据信息的应用场景。多应用于指挥大厅，科技展厅，数字展厅。多屏幕拼接，展示面积大，数据类型多，展现形式多元化，业内称之为数据可视化大屏。
核心数据通过视觉及动画的表现手法直观地输出给用户，对于数据信息的视觉传达要求比较高。原本看不见的数据可视化后，便能调动人的情绪、引发人的共鸣，传递企业文化和价值。
大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。
难点：效果定位、数据信息传达、表现方式、软硬结合等诸多情况。
如何设计
原则：设计服务需求，先总览后细节。
1.设计服务需求，助力业务。大屏设计要避免为了展示而展示，排版布局、图表选择等应在充分了解业务需求的基础上进行的。什么是业务需求，就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标，是大屏数据可视化的价值所在。
2.先总览后细节
大屏数据多，为了避免用户关注点迷失，大屏信息呈现要有焦点、有主次，通过对比，先把核心数据抛给用户，待用户理解大屏主要内容与展示逻辑后，再逐级浏览二三级内容。部分数据可暂时性隐藏，用户需要时可通过鼠标点击等交互方式唤起。
步骤：理解需求-选择图表类型-确定尺寸（场景）-页面布局、划分（整体，部分，细节，动态）-定义设计风格-可视化设计-设计自检-现场硬件设备校对-定稿开发落地-再次现场校对
image.png
image.png
1.精准把握业务需求，根据业务场景抽取关键指标
关键指标是一些概括性词语，是对一组或者一系列数据的统称。一般情况下，一个指标在大屏上独占一块区域，所以通过关键指标定义，我们可以知道大屏上大概会显示哪些内容以及大屏会被分成几块。确定关键指标后，根据业务需求拟定各个指标展示的优先级（主、次、辅）
主：主要指标位于屏幕中央多为动效丰富的地图或翻牌器
次：次要指标位于屏幕两侧多为各类图表
辅：主要指标的补充信息，可不显示或显示于副屏或鼠标经过显示。
2.确立指标分析维度，选定可视化图表类型
image.png
在选定指标后，就需要跟项目组的其他伙伴讨论：我们的各个指标主要想给大家展示什么，更进一步讲，是我们想通过可视化表达什么样的规律和信息。上图的是数据分析中常用的四个类别
联系：数据之间的相关性。
分布：指标里的数据主要集中在什么范围、表现出怎样的规律。
比较：数据之间存在何种差异、差异主要体现在哪些方面。
构成：指标里的数据都由那几部分组成、每部分占比如何。
基本图表一般有的维度
对照以上图形维度，制定可视化图形。突出关键信息，根据可视化展示目标，将重要信息添加辅助线或更改颜色等手段，进行信息的凸显，将用户但注意力引向关键信息，帮助用户理解数据意义。比如CPU监控案例，可视化的目标就是检测CPU的使用情况，特别是异常使用情况。所以途中将100%最高临界线使用特殊的颜色和线形标示出来，异常的使用段用颜色帮助用户识别。
cpu监控
注意：
a.切记设计时不要过度装饰图表，喧宾夺主造成数据不直观，对观者获取数据产生障碍。
b.图形化要友好，不能一味地追求视觉效果，造成图形识别度降低、友好度下降。
image.png
d.开发可实现。我们需要了解现有数据的信息、规模、特征、联系等，然后评估数据是否能够支撑相应的可视化表现。我们设计的图形图标，要开发能够实现，大屏设计中跟开发沟通非常重要，设计师明确哪些地方可以发挥，哪些地方需要谨慎设计。一个项目总有周期与预算限制，不会无限期的修改叠加，需要抓住重点，有取舍。
3.设计尺寸与大屏的拼接方式
image.png
注意大屏逻辑分辨率（设计稿尺寸）、显卡输出分辨率、视频矩阵切换器(DVI)支持分辨率、大屏实际物理分辨率。容易出问题的是显卡输出分辨率，信号源的分辨率并不是最终显卡传递到DVI借口的分辨率，传递到DVI接口的分辨率是电脑显卡所能输出的最大分辨率。输出分辨率等于DVI支持分辨率时显示效果最佳。此外，多信号源投射效果优于单个信号源投射，对于现场直播数据大屏，一般至少有两个信号源，一个投屏，另一个也投屏但处于备用状态。
方法一：拼接屏按照拼接后的横向像素总和设计（超过4k等比缩放）,LCD和LED同理。
方法二：按照硬件输出（信号源）像素设计，信号源的输出像素一定是和整个拼接屏成比例或者吻合的。当有多个信号源时，有时会通过显卡自定义电脑屏幕分辨率。此外当信号源电脑分辨率的长宽比和大屏物理长宽比不一致时（单信号源），也会对被投电脑分辨率做自定义调整。
注意：拼接屏记得把数据避开拼接缝
4.页面设计及布局思路-主次分明、条理清晰、注意留白
页面的布局主要是依据业务及数据的重要程度来布局，可视化中会把核心指标或业务的要点放在中间，中间是视觉的中心。其余指标按优先级依次在核心指标周围两侧展开，大小比例上进行调整。排列数据要考虑数据的关联性及联动性，应该有意识的把他们放在一起或就近，让他们有关联性，当一组数据变化时联动效果更凸显，减少观者认知上的负担并提高信息传递的效率。明确信息层级及视觉流向的引导，使用户在获取重要信息的同时达到视觉平衡。
在页面布局时考虑到屏幕拼接方式，尽量把数据有序地展示在屏幕内，合理避开拼接缝减少对用户观感的影响。
布局示例(1920*1080)
image.png
image.png
5.设计风格的确定
首先要确定应用场景时怎样的（室内、室外、光照、灯光、硬件等），考虑目标用户身份（给谁用）。大屏实际上也是运行在浏览器里面的Web页面，可以用UI 的方式来定义可视化设计风格，AB测试、情绪版（这种方法也是目前比较科学高效的风格定义手段）。
情绪版步骤：原生关键词通过脑暴衍生关键词或者直接搜索得到相关图片。分类整理得到情绪版，进而提取设计风格，包括质感+构成+字体+色彩+图形。
a.字体
文字和数字是数据信息传达的重要组成部分，为了更加清晰准确的传达信息，增加可读性，从字体选择，字体大小，字体间距都有特定要求。
1.字体选择
a.辨识度
UI设计中使用无衬线字体是UI界的共识，但是对于数据可视化来说，字体大小的跨度可以非常大，在无衬线字体中需要选择辨识度更高的字体，大的宽度比值更有辨识度。推荐优先使用系统默认字体，需要嵌入字体时考虑识别度要高，字体不能太细，不能太圆润，考虑是否免费商用。
中文：微软雅黑
image.png
b.更灵活的字体
支持尽可能多的使用场景，低分辨率小屏和超大屏的终端显示上运行良好
c.字间距
宽松的字母间距（字母间的间距应小于字偶间距）和合适的中文字间距
image.png
2.字体大小
设置小字体的极限值，以保证在最小显示时不影响对文字的辨认和阅读。
3.中西文间隔
中西文混排时，注意中文和西文间的间隔。适当留有间隔，可以帮助用户更快速的扫视文字内容。
4.如果页面云端部署，需要嵌入字体包时，我们可以使用Fontcreator这类软件把那些用不到的字符（外文，符号等字符，仅保留中文、拼音、数字）从字体包中删掉，然后重新打包上传，减小字体包大小，可以优化页面加载体验，避免在替换默认字体的过程中出现页面文字跳动等现象。
image.png
b.颜色
配色方案要充分考虑特殊人群对数据图的可读性。
image.png
1.背景色定义
背景色的选择与可视化展示的设备有关，分为深色、浅色、彩色。
a.大屏背景普遍选择深色系，内容选择需要以深色背景为基础，保持内容与背景有一定的对比关系，色调与明度变化需要有跨度。深色背景可减少拼缝带来的不适感，减少屏幕拖影，暗色背景更能聚焦视觉，方便突出内容，远距离观看也会比较清晰直观。
image.png
b.中小屏背景色
选择比较广，浅色、彩色、深色都可以做出很好设计。相比浅色更适合展示大量的数据信息，因为浅色底上数据图表的识别度比较高。而深色、彩色背景更适合渲染简单数据，用于烘托气氛。
image.png
2.图表色定义
在图表的颜色运用上，色彩是最直接的信息表达的方式，往往比图形或者文字更加直观的传递信息，不同颜色的组合也能体现数据的逻辑关系。颜色的表示方法中，相比RGB\CMYK，可视化中，颜色作为用于数据编码的视觉通道,HSV的颜色表示方式更符合人类感知方式，更适合展示数据。
a.色彩辨识度
确保色彩容易辨识和区分，对于使用单一色相配色，明度差异需要全局考虑，名都跨度一定要够大才能更清晰展示数据。明度跨度可以通过灰度模式下配色的辨识度来判断。
image.png
b.色彩跨度
多色相配色在数据可视化相当常见，多色相配色使用户容易将数据与图像联系起来。
带有明度信息的色环.png
当需要的颜色较少时，避免使用相近的色相：同类色和相近色。尽量选择对比色或互补色，不同属性数据展示更清晰。例：美国大选的红蓝对比色，清晰将选票结果展示在地图上
image.png
当图标需要的颜色较多时，建议最多不超过12种色相。因为通常情况下人在不连续区域内可以分辨6-12种色相，过多的颜色对传达数据是没有作用的，反而会让看者迷惑。
如何让多种颜色看来和谐的取色方法
o 色相提取法：选择同一饱和度和明度的不同色调作为可视化图表的配色，看起来协调统一。
image.png
o 渐变色相色法：不同明度和色相的取色。比如淡紫到深黄的过度，与淡黄到深紫的过度，感觉是一样的配色，但实际两种配色感觉相差很大。
image.png
淡黄到深紫的过度更自然。所以仿用自然的配色方式会让图表更加自然。
取色时，可以在ps做制作出色相变化的色带并叠加明度渐变的色带，获得明度和色相均变化的色带。选择节点取色
image.png
实际案例.png
注意渐变色慎用：大屏普遍色域有偏差，显示偏色，因此使用渐变色需要根据大屏反馈确定是否调整，纯色最佳。
c.动效
越来越多的可视化展示的数据都是实时的，动效肩负着承载更多信息和丰富画面效果的作用
信息承载：可视化项目中，如果非常多的数据信息需要展示在一个大屏幕上，遇到这种情况，需要对信息进行合并整理或通过动画的方式，在有限的屏幕空间里承载更多信息，使信息更加聚合。
画面效果：增加细节及空间感，背景动效使画面更加丰富，考虑单个图表的出场动画。设计上原则是恰当的展示数据。动画尽量简单，复杂的动画会导致用户对数据的理解出错。动画要使用户可预期，可使用多次重复动画，让用户看到动画从哪里开始到哪里停止。
6.可视化设计
根据定义好的设计风格与选定的图表类型进行合理的可视化设计。目前常用的有指标类信息点和地理类的信息点两大可视化数据。指标类信息点可视化效果相对简单容易实现，地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点。对于被投电脑、大屏拼接器等硬件设备的性能会有要求，配置不够可能出现卡顿甚至崩溃情况，需要提前沟通评估。
image.png
注意：极限处理
数据是多种多样不可预知的，在可视化时需要处理各种极限问题，才能使数据清晰表达。
a.数据展示细节处理
image.png
b.选择合适的图表新式
例如，在展示数据占比的图表选择上，过多分项使得类似面积显示变得难以区分，不能很好显示份额。可以换用横向柱状图来清晰表达主题。
image.png
7.样图沟通确认
image.png
样图沟通环节，最初的样图不需要十分精致，我们可以把它理解为一个｛低保真｝原型，然后通过不断沟通修改，让它逐步完善精致起来，也就是小步快跑。避免那种一下子走到终点，然后又大修大改的情况。之前确定了页面布局、图表类型、风格特点，这一步我们尽可能用简单方法，把之前几步的成果在页面上快速体现出来，先进行设计内部自检，尝试确认：
a.之前的布局让在现在的设计中是否合理：信息层级对比与传达
b.确立的图标类型带入数据后是否依然客观准确
c.配色是否合理并能通过色彩传达数据的意义，结构，质感打造出的页面风格是否基本传达出前期的氛围和感受
d.已有的样式、数据内容、动效等在开发实现方面是否存在问题
e.是否存在其他问题等
demo确定后，可以拿设计图去现场测试（硬件，色准，文字大小在合适的观看距离是否清晰可见、现场灯光光照等是否对设计有影响、拼接缝和数据是否有穿插、硬件设备输出是否和设计匹配）
9.页面定稿，落地开发
这里的页面开发仅指前端样式实现，后台数据准备工作在定义好分析指标后就开始进行了，设计师当前的工作是把数据接入到前端，然后用设计的样式呈现出来。
image.png
主要提供：设计规范，标注规范，颜色，字体字号，切图（开发用代码写不出的样式或者动效，比如数据容器的边框、小动效、页面整体大背景、部分图表·。切图按正常网页设计标准切），对于三维场景需要提供三维文件，如obj、fbx等，特殊动效的范例。
需要注意，如果大屏页面需要在不同比例的终端展示，那么此时的标注于开发可以使用rem作为基本单位，这样实现的大屏页面在后期会有更好的扩展性和适应性。
10.整体细节调优和测试
这部分指的是页面开发完成后，将真实页面投放到大屏进行测试与优化。包含两方面
视觉UI走查：关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。
性能与数据方面的测试：图形图表动画是否流畅、数据加载、刷新有无异常；页面长时间展示是否存在崩溃、卡死情况；后台控制系统能否正常切换前端页面显示。
网友评论