上次整理了一些大厂的可视化服务平台，平台的优势显而易见，组件化的操作，快速搭建的方式节省了很多的开发和时间成本。有兴趣的戳这里：数据可视化大屏设计工具整理（上）。

对于上期的一些更正：8月28日百度Suger更新了收费标准，也就是说现在百度Suger也收费了！目前是分版本收费，但是对新老用户还是提供了30天的全功能试用的。

本次整理的是下半部分的内容：

一、数据大屏与数据可视化

二、大厂的可视化服务

三、技术开源库

四、设计辅助工具

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

三、技术开源库

了解一些技术开源库，一方面可以参照其图表案例，了解各类不同图表的展示方式；另一方面是为了保证自己设计的可实现度，不然再炫酷的设计效果最终如果因为技术开发能力无法实现也是徒劳的。

△来源Amchats官网

D3.js - 数据驱动的文档

https://d3js.org/

D3js 是一个基于数据来操作文档的JavaScript 库，适宜用来建造各类可视化图表。支持大型数据集和交互与动画的动态行为。

△来源D3js官网

billboard.js - 简易界面的可交互图表库

https://naver.github.io/billboard.js/

这是一个基于D3 V4+的JavaScript的图表库。可以对数据进行视图缩放、展示细节等交互操作。

△来源billboard官网

FusionCharts

https://www.fusioncharts.com/

FusionCharts提供了100多个交互式图表和2,000多个数据驱动的地图，对不同平台都可兼容。同时提供了前端和后端各类框架及代码语言的插件来方便开发快速入门。不过这款是收费的，根据不同的使用环境定价不同。

△来源FusionCharts官网

四、设计辅助工具

Kitchen - 蚂蚁金服官方插件

http://kitchen.alipay.com/

这是一个sketch的插件工具。主要功能如下图。

△来源Kitchen官网

Iconfont 图标库我比较常用，可以直接在sketch中搜索拖拽，不用再去打开网页查找了。其次数据填充也比较常用，自动填充时间地址城市等挺方便的。sketch也有自带的功能，但毕竟自带的填充都是英文，想要中文的需要自己编写填充文档，相对还是比较麻烦。其他是像智能排版、色板等功能，我用的不多，还是以sketch自带功能为主。

另外，与可视化设计相关的就是里面的图表生成器了。不过Kitchen当前只有一些常规的图表，不过胜在简洁明了，很适合在此基础上进行二次设计。该插件还是蚂蚁Ant系列的官方插件，可以自动配置符合Ant Design 规范的组件，配合公司采用的Ant系列的框架，会方便不少。

△来源Kitchen插件界面

FusionCool - 阿里Fusion Design开源中后台UI解决方案辅助工具

https://fusion.design/tool

这也是一个sketch的插件工具。分为图标、图表、组件、模块和模板五大功能区。

Fusion Design作为一个开源中后台解决方案，和Ant Design有一定类似，但也有所差别。Ant Design 是一套组件库, Fusion Design 更像是一个组件库生成工厂。

直接下载安装FusionCool的话，打开sketch看到的将是一个默认组件库，图表部分的种类样式比Kitchen多了不少。而更厉害的是，你可以在Fusion Design上基于官方库编辑改造成属于你自己的设计系统，发布主题后获得新的主题包，此时你在FusionCool中就可以看到专属于你的主题包了，在sketch中完成设计后，开发使用Iceworks安装你的主题库就可以直接编码实现你的设计。

△来源FusionCool插件界面

Map Generator - 快速地图生成填充

https://github.com/eddiesigner/sketch-map-generator

这是一款基于谷歌地图的自动填充的Sketch插件，输入地址后就可以自动生成不同风格样式的地图，个人比较喜欢第三款灰色的。

△图为Map Gnerator生成效果

Amcharts - 矢量地图定制下载

http://pixelmap.amcharts.com/#

这个网站上面提过，但其实设计师用来获取矢量地图也很好用，选择地图样式和地区之后，右下方即可以下载SVG、HTML、Image格式的图，十分方便。点击“Generate Ppxel Map”还可以转化为像素圆点形式的地图。

如果需要省份的地图，网站上无法直接下载，但可以要先下载中国svg地图，然后再打开svg选择自己需要的省份模块就可以了。

另外，在使用地图的时候，要注意正确用图，规范用图。要有国家版图意识，符合测绘法。

标准地图可以参考国家自然资源局提供的标准地图服务，服务网址：http://bzdt.ch.mnr.gov.cn/index.html

Chart - 图表插件

https://github.com/pavelkuligin/chart

这个插件是收费的，每年10美元，但是你可以去找那啥啥的（我知道你懂）。优势在于可以在Sketch中创建包含随机、表格或者JSON数据的图表。图表样式也是非常的丰富了。

△来源Chart官网

-END--

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

数据可视化是目前对数据展示最常用的方式。数据的可视化设计有助于将复杂的数据用最易理解的方式展示在用户的面前。

数据可视化在中后台的设计中很常见，通常主要用于分析和决策，对实时性要求不高，从一部分功能上讲，其实也有着报告数据的作用。设计以2D平面展示为主，几乎不会有3D设计出现，视觉设计重点更注重简单直接，一目了然。

△来源 dribbble  作者wuze，侵删

数据大屏在上面的基础上，对实时性要求较高，会更强调数据展示的效果，这也是会流行FUI未来主义科幻风格设计的原因，追求视觉上的酷炫效果。设计上2D、3D皆有，还可以伴随着动效搭配一些可交互的设计，来展示数据之间联动。 

△来源 dribbble  作者William Chen，侵删 

关于制作数据大屏的一点小建议：

△来源Suger编辑平台

△2018天猫双11大屏 

△DataV平台创建编辑界面

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

致数据可视化设计师-设备篇详解

各位数据可视化设计师们大家好，鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方，阿勇决定花一些时间去详细剖析一下关于这方面的知识，全部都是多年工作经验所得，绝对有料。

整个合辑一共有10篇文章，分别涉及到设备篇、风格篇、字体篇、色彩篇、组件篇、布局篇、版式篇、视觉篇、团队篇、技能篇十篇文章，具体的详细的展开来讲一讲可视化大屏设计的知识点。（我命名为可视化设计十要素）

同时也会包含一些工作中的同学们问我的一些问题以及我搜集的一些问题，将会以问答的形式去给大家讲一讲，如有不对的地方，还请大家指出，我们一起探讨进步！

文章较长，请广大读者仔细阅读，基本涵盖：设备信息，分辨率尺寸，大屏适配，投屏事项，掌握本文可应对日常可视化设计设备方面的知识。

LED屏幕

政府大屏主要以点间距去区分屏幕的精细度，点间距越小，造价约昂贵；面积越大越整体，造价越高。离屏幕越近颗粒感越强，设计效果也就越不清晰，LED显示屏表面不平整是导致LED显示屏图像失真的主要原因。LED显示屏表面粗糙度的好坏主要取决于生产工艺。

屏幕介绍：按照不同点间距进行分类，P1.25、P2.5、P3、P4、P5、P6、P8、P10、P12、P20（间距越小，图像越清晰，价格也越高，一般政府led屏基本都在P1.25-P6之间)。

最佳视距=像素间距/（0.3~0.8），这是一个近似范围。如LED显示屏P16mm，最佳视距为20~54米。

液晶拼接屏

拼接屏相比于点间距比较小的LED屏，价格方面会更便宜一点，拼接屏设计时最主要就是拼缝的处理，注意拼缝，设计时非必要情况下，都要跳过拼缝，尤其是“圆”这个造型。

拼接屏：46寸，55寸  物理分辨率：1920*N 1080*N（n代表屏幕数量），1.7mm、3.5mm 、0.88mm、0.44mm、无缝隙；企业常用（1.7mm 和3.5mm）

大屏拼接缝隙：设计时应尽量不要跨屏去设计，会使画面交叉，不重叠，尤其是圆形。

大屏拼接处理器

大屏拼接处理器主要功能是将一个完整的图像信号划分成N块后分配给N个视频显示单元，完成用多个普通视频单元组成一个超大屏幕动态图像显示屏。大屏拼接处理器输入信号数量和类型取决于用户需要，输出信号数量等于显示单元数量。

视频矩阵处理器

矩阵是将多路输入信号切换输出到多个显示设备，一般来说输入信号数量要大于输出信号数量。（我们想在9块显示器上同时监控100个摄像头传来的信号，就用矩阵来实现即可）

视频矩阵是指通过阵列切换的方法将m路视频信号任意输出至n路监控设备上的电子装置，一般情况下矩阵的输入大于输出即m>n。有一些视频矩阵也带有音频切换功能，能将视频和音频信号进行同步切换，这种矩阵也叫做视音频矩阵。

模拟视频矩阵的输入设备：监控摄像机、高速球、画面处理器等很多个设备，显示终端一般监视器，电视墙，拼接屏等（通常视频矩阵输入很多，一般几十路到几千路视频，输出比较少一般2-128个显示器；例如64进8出，128进16出，512进32出，1024进48出等）。

总结：矩阵只能负责信号的切换，不能处理，不能做效果。大屏拼接处理器功能十分强大，具备矩阵功能的同时，还可以实现任意开窗、漫游、叠加、场景保存与轮换。

液晶拼接屏的优势 - 拼接处理器预设场景

4*2大屏展示端，我们通过控制端，借由拼接处理器可以对大屏进行随意开窗，漫游，叠加，画中画等效果。在控制端拖动布局，大屏会随之改变布局，非常方便。下面我就借由我以前做过的一个项目帮助大家理解一下拼接处理器的优势以及如何设定不同场景。

如果你们企业还在因为屏幕适配以及尺寸问题而纠结，或者想展示：开窗，漫游，叠加，画中画等效果，毫无疑问你们应该选择拼接处理器，这比传统投屏方式更合适，更没有比例不对的困扰。

预设场景一

把控制端的分屏进行编号，接下来移动控制端对应的编号区块，就可以对大屏进行重新布局，图中展示的正是我们的预设正常场景。场景为居中布局，左右两侧为图表展示。

预设场景二：任意窗口布局

对控制端进行随机布局，将主视觉模块移动到左侧四块屏幕，图表都集中在右侧，由此我们就由预设场景的居中布局变成了左右布局，左侧为主视觉。

预设场景三：任意窗口漫游

可以随意的关闭大屏某个模块的漫游，通过控制端进行屏幕的显示以及不显示。

预设场景四：任意窗口平移

画面的任何一个模块都是可以进行平移操作的，我们将模块一和模块五可以平移拖拽到任何一个位置。

预设场景五：任意窗口叠加

画面的任何一个模块都是可以进行叠加到屏幕任何一处，还可以控制模块置顶和置底，非常灵活。

WEB端大屏

基于web网页端的展示方式，通过在web开发，有需要时会投屏到大屏上去展示。设备比例一定不能差距过大，比如16:9的投屏到32:9的大屏就不是合适，解决方案可以是外接一块1920的显示器即可。

此处要注意web端演示时，记得全屏显示，浏览器边框滑动条等可以不考虑，前端会做相应的浏览器细节考虑，设计按正常分辨率走即可。

触摸屏

触摸屏（Touch Panel）又称为“触控屏”、“触控面板”、“触控台“，是一种可接收触头等输入讯号的感应式液晶显示装置。

当接触了屏幕上的图形按钮时，屏幕上的触觉反馈系统可根据预先编程的程式驱动各种连结装置可用作控制端操作大屏，原理等同于ipad控制，只是载体不同。

设计规范以及按键反馈等交互体验与ipad类似。

滑轨屏

滑轨互动屏系统——又称为滑轨电视、滑轨播放等，通过特殊设计的机械滑轨控制装置，结合高清液晶拼接幕墙，实现对屏幕内容的互动控制。滑动到不同位置屏幕展示相关信息，包括图片、文字、视频等，是一种全新的互动展示形式，可与触摸同时使用。

虚拟沙盘

虚拟沙盘/数字沙盘就是用计算机通过投影仪或者LED大屏显示屏动态/静态三维显示：智慧交通、智慧市政、智慧农业、智慧物流、智慧停车、智慧公交、智慧公安、智慧交运等模型，这是一种高科技的模型操作员通过程序，可以随意调整沙盘的尺寸、规划区域、区域布置，快速展示多种全新的创意。

具有三维显示效果，并可以从不同角度观察创意模型，筛选创意方案。注意虚拟沙盘和实体沙盘的联动效果，实体沙盘为底，虚拟沙盘做效果叠加。

分辨率：物理实际分辨率

Q：原本设计尺寸是1920*1080，使用场景是PC端，同时在大屏中展示，尺寸为3840*1080，该如何适配？

A：首先我们需要了解适配最主要的痛点就是：灵活，复用性高，可延展。

围绕这几个点我们可以通过模块化开发去做，将每个模块单独开发。我们设计师做这种需求之前，就需要提前去构思，在设计各模块时，尽量使用可扩展和可自适应的图形，这样面对适配的时候我们可以通过移动，缩放这些模块，来完成适配。尽量避免二次设计以及开发，提升时间成本。

图形放大适配

图形位移适配

Q：如果是16:9适配非32:9是否也是这么去适配的？如果是特殊的形状或比例该怎么适配？

A：我们适配一定要记住灵活，减少工作量这些原则，如果不遵循这些原则，那么我们做适配的初衷就错误了。这样我们还不如直接就重新开发一套了。就好比我们通过控制端去控制大屏，如何用开发一套的时间去适配两个甚至是多个终端，这是我们需要注意的。当然考虑到一些实际情况，会有一定程度上的修改，但是一定是要从节省工作量去出发的。

场景一：拼接屏分辨率计算，已知某项目设备分辨率为宽高4*2拼接屏，设计稿我们该如何去定义分辨率？分辨率又是多大？

从命题我们可以看到4*2的拼接屏，我们可以通过一块屏幕为1920*1080去计算，那么通过计算分辨率应该是1920*4 &1080*2，也就是7680*2160，这样就计算出我们的分辨率了。

场景二：LED屏分辨率计算，已知某项目LED屏幕物理尺寸为宽15米，高4米，设备分辨率未知（可以支持4K或者2K输出），那么如何去制定分辨率？

工作中相信不少同学都遇到过这种只知物理尺寸而不知道分辨率的项目，那么我们只能通过计算大概的设计分辨率来出初期的设计稿件。

可能一：屏幕支持4K输出，既然支持4K输出，保证画面输出的清晰我们可以将设备的高度设定为2160

此场景下公式为：15/4=X/2160     X=8100    那么可以大概得出宽度大概为8100像素（只是我们通过计算大概得出来的）

可能二：屏幕支持2K输出

此场景下公式为：15/4=X/1080     X=4050  

重点来了，不要以为这样就结束了，我一直强调的可视化设计师为什么一定要在现场，为的就是方便各种测试。刚才我们只是通过计算得出的大概数值，此时我们可以在纸上画一个正方形，并投到设备上，如图。

• 结果一：如果正方形比例不变，设计尺寸无限接近于大屏实际比例；

• 结果二：如果正方形比例被拉伸，设计尺寸小于大屏实际尺寸；

• 结果三：如果正方形比例被压缩，设计尺寸大于大屏实际尺寸。

此处图片上主要是为了测试计算出来的分辨率究竟是拉伸还是被压缩了，通过这样的方式去测试设备大概的分辨率的大小比例，在我们产出效果图之后，也可以投射设计图的方式看看屏幕是否是完美适配，这种方法可以在未开发之前，尽可能确定屏幕对设计图的影响，从而避免对开发造成大规模修改。

注意：这样做也只是在不知道设备分辨率的情况下，去大概计算设备分辨率，仅供参考！

电脑直接投屏

使用场景：会议室，展厅等

等比例投屏，投屏电脑投到2*2大屏（4K）

投屏电脑支持输出4K分辨率，投屏电脑分辨率以3840*2160作为设计，投到4K拼接屏上，大屏会完美展示，并且画面非常清晰。

投屏电脑支持输出2K分辨率，投屏电脑分辨率以1920*1080作为设计，投到4K拼接屏上，只会以1920*1080进行输出，因为输出像素只能支持2K，也只是1920*1080的放大。

此处需要了解两个概念：输出像素和显示像素，输出像素指的的是投屏电脑的最大支持分辨率，显示像素就是我们大屏的支持的最大分辨率。

我们实际项目中最好以显示像素的尺寸进行设计（就是以大屏尺寸为主），但是也要看输出设备的像素大小。

硬件投屏本地运行

使用场景：科技展厅，以及一些带主机的设备。

此种情况，一般我们的大屏会自带主机，大屏本身就可以看成一个显示器非常大的电脑。我们如果需要进行可视化演示，那么我们直接就可以通过显示器的尺寸去做设计，这样就是大屏的设计尺寸。

一般这种靠硬件的投射，都是在拼接处理器的处理下，将多个屏幕拼合成一个大的显示器，再通过拼控系统（硬件投屏）进行输出。

一般我们可以将我们大屏的（UE4或者U3D开发）应用程序打包，打包成一个后缀为.exe的应用程序，在大屏电脑上直接点击，程序就可以在大屏上完美的跑起来，也不需要去进行电脑投射大屏。

控制端操控大屏

如果通过控制端去控制大屏，那么投射设备就可以通过多种方式去展示了，可以是手机，平板，触摸屏，手势控制，体感控制等等。

这种情况下投射设备的尺寸就按照本身设备的规范去设计就可以了（比如750*1334，2048*1536），设计尺寸就是我们大屏本身的分辨率就可以了。

多主机多信号投屏

此种情况主要使用场景：屏幕宽度非常高，并且内容可以分很多模块展示，模块彼此之间不受影响独立展示，这种情况下我们就可以通过此种方式去投屏。

通过多个主机分别去投射大屏的同等大小区域，比如图中的场景模块被我分成了四等份，我们就可以通过四台主机去分别投射四个模块，形成一个完整的大屏。

此种大屏设计尺寸我们以输出设备的尺寸为主要参考，四台主机那么整体宽度就是1920*4=7680，高度就是1080（如果设备支持4k输出，那么提升相应的设备尺寸*2就可以了）。

不同比例投屏及解决方案

Q：如果遇到一个设备是16:9，投屏到一个20:3比例的大屏幕， 那我设计尺寸以16:9，还是20:3？

A：我们要记住，如果面对的是正常比例投屏到非等比的大屏，我们需要遵守的规范一定是：一切以大屏展示为主。所以我们设计尺寸一定是按照20:3来设计的，大屏展示正常才是我们的唯一标准，投屏电脑可能会出现的问题，我们只能妥协（投屏电脑可能只能展示很小的一部分，但也是没有办法的）

那么我们遇到这种是否就没有办法了呢？在这阿勇给大家提供了三种解决办法，在实际工作中，我也遇到过这种问题，所以在这给大家分享一下。

方案一：外接显示器（外接多个显示器，一般主机可以另外外接四个显示器，这样就可以解决投屏电脑显示不全的问题了）

方案二：采用拼控系统，而不是用纯粹的设备投屏（拼控系统完美解决了尺寸不一致的难点）

方案三：设计两稿，16:9，20:3我们都去做设计（做两套系统，相当于做的适配）

Q：请教大家一个问题，电脑的分辨率是3840*2160，单个大屏的分辨率是1920*1080，拼9*6的大屏，设计尺寸该设置多少啊？这样设计尺寸会不会太大了，如何优化这个设计稿尺寸？

A：前面的文章我们已经介绍过拼接屏的尺寸的问题，这个问题的解答：1920*9/1080*6 ，这个就是设计分辨率，通过计算得出，最终设计稿尺寸为17280*6480。可以看出设计分辨率确实太大了，设计的时候如何去优化设计尺寸呢？

通过命题我们可以看出电脑分辨率是支持4K的，就是说输出分辨率和显示分辨率我们都是可以上4K的，而4K的分辨率一般会做3840*2160，再结合设计稿尺寸17280*6480，可以将整个效果图尺寸缩小三倍，也就5760*2160。设计可以按照这个分辨率去出图，最终交付给开发的就是切三倍图，并提示开发是缩小三倍做的。

总结：不管在面对什么尺寸的设计，都要记住，万变不离其中，一切以大屏完美展示为准则，所有的一切都是要在大屏上观看，为了完美展示，投屏电脑，设备控制等页面可以适当的让步。

全篇知识点

通过以上的知识点总结，不知道大家对于数据可视化大屏设计是否有了新的认识，数据可视化对于设备的尺寸，设备的信息，以及投屏注意事项，都要有更多的了解才可以。下图就是总结本篇文章的知识点。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一、图表的分类介绍以及应用范围

一提到图表，大家脑海里浮现的，通常是柱状图、饼图、趋势图等等。这是按照图形等维度对图表进行分类，经常会导致图表的误用。

图表的作用，是帮助我们更好地看懂数据。选择什么图表，需要回答的首要问题是『我有什么数据，需要用图表做什么』，而不是 『图表长成什么样』 。因此我们从数据出发，从功能角度对图表进行分类。

二、画面布局在实战中的应用

在画面中我们经常会遇到各式各样的屏幕分辨率，有大屏的LED屏，有平面显示屏，数字拼接屏等等。那么具体的项目中我们如何去定义这些不同尺寸的屏幕来进行画面布局呢？

如若有其他分辨率下的屏幕，按照这个规律的基本布局，尽量使组件呈现16：9比例排布是最好的；超长分辨率下的大屏设计或者拼接很多块显示器的大屏可以通过具体业务内容来展示，按模块去划分，功能点明确即可。

此处布局只是我个人觉得比较合适的展示方式，并不代表一定是需要这么排布，还可以有很多的形式去布局。也可能因为业务不同，版式也会有调整，不过万变不离其中，掌握基础要素，其他分辨率下照样可以有很多编排形式！

三、硬件常用尺寸以及设备

Led屏幕

1、点间距不同

p3点与点之间的距离是3毫米，p4点与点之间的距离是4毫米。

2、清晰度不同

P后面那个数字越小，代表两个灯珠之间的距离越小，清晰度越高，相对应，价格也会高，因为每平方的像素点P3比P4多很多，成像效果好。

3、最佳可视距离不同

点间距P3（3mm）的显示屏，它的最佳可视距离是3.5~10米，点间距P4（4mm）的显示屏，它的最佳可视距离是5~13.5米。可以根据自己的实际情况，选择最适合的型号。

拼接屏

拼接的每块小屏一般是16:9的高清屏，设计尺寸可以把上下高度设定为1080px，长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕，高度3块屏设为1080，每块高就是360，360除9乘16等640，640就是一块屏幕的长度，640乘5块屏＝3200最后得出设计稿尺寸就是：高1080px乘宽3200px（在这里感谢我的数学老师）

现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏，缝隙越小越贵。

另外大屏设计还有一个比较重要的问题就是注意拼接屏之间的缝隙，设计时千万不能跨屏设计，不然很影响美观。

控制端

目前企业用的最多的控制端为ipad控制，需要在ipad上制作出控制端页面，一般尺寸为2048*1536，控制端大多数为按钮操作，页面尽量简单明了。

四、字体字号以及画面配色631

字体字号

在数据可视化设计中,一般选中的字体有如下几种:

1. 中文字体:苹方,思源黑体

2. 英文字体:DIN,DIN-PRO

3. 数字字体:Exo

正常1080P情况下，由于甲方大多数为政府机构，文字要求会比一般的要求大一点，一般都是选择最小16px。字号不是固定的，人是活的，规范是由人制定的，切勿迷信规范。

配色法则以及颜色选用

运用配色631法则，将配色定义为主色60%，辅助色30%，对比色10%去贯穿整套界面文字的颜色通过重要、普通、次要去分配，是带有色彩倾向丰富页面视觉。

在数据可视化设计中，由于大屏是偏暗的，所以需要选择高饱和度的色彩，并且需要选择统一的颜色，保持画面协调。

有时候会遇到客户需要高饱和度的颜色并且多个颜色的时候，在选用时尽量选用饱和度不要太高的颜色，不然画面会很不协调，也就是所说的晃眼。

在设计过程中尽量选用深色背景作为画面主背景，这个可以解决大屏因为色差问题，对整体页面的影响，用户也比较容易忽略拼缝中的存在的跨屏感。同时深色背景时更容易突出主体,画面效果更好，更能体现流光、粒子、发光等酷炫效果。

同时，大屏由于有色差，尽量不要使用渐变色，如若需要使用需要到达现场，根据大屏反馈的色差，现场调整，但还是推荐尽量使用纯色。

五、画面饱满以及页面装饰点线面

画面如何饱满

方式一：字体的饱满

将字体处理后，空白面积减少，整体更饱满了些

方式二：文字的饱满

正常情况下为使阅读更方便，标题间距给-10%~20%为佳。

通常数字会比汉字小，为使基线对齐，数字与汉字需分开设置字号。

主副标题字号比例过大过小会导致界面不平衡，建议主标题是副标题的1.5倍。

方式三：关系的饱满

当A=B时，图标和文字的关系会混淆，这种情况下要满足B>A，用间距分层次

采用黄金分割0.618值。也就是横向21个小方块，竖向13个小方块。此时，最优雅的板式是A＞B的间距，1＞2＞3的间距。

方式四：图标的饱满

页面如何装饰会更丰富(如何运用点线面三大构成)

我们在设计的过程中，经常会因为画面不够饱满页面太空，收到客户的吐槽，下面就讲讲如何通过点线面来丰富画面，使画面更丰富更有层次感。

1.原画面设计完成

2.添加装饰线(点线面构成)

3.调整位置,丰富画面

在画面添加装饰的情况下需要给画面留足位置，数据可视化大屏本身面积就比较大，合理运用画面以及拼接屏缝隙添加装饰线,可以更好的减轻拼缝所带来的影响。装饰线的添加还可以在后期丰富画面动效，科技感十足，在页面中添加装饰线在我看来，非常的有意义，既可以丰富画面，又可以完善动效，一举两得。

在装饰线添加这一块，推荐大家多去看看国外的可视化设计，哪些几乎将点线面构成发挥到了极致。

六、画面动效以及素材灵感收集

动效制作

C4D+AE

在很多设计项目中会用到很多酷炫的科技模型，比如汽车、人物、地球模型等等，我们可以运用C4D来进行主视觉建模，再通过AE进行动效输出。

有的人可能会问在导入数据之后可能由于数据量不大的原因，动态效果不是很明显，在这种情况下，咱们可以把不变的数据量，做成AE动效，可以把动效导成json文件直接发给前端，能很大程度上保障画面动态效果。

素材灵感收集

Behance

在behance上有很多国外的设计师，他们的数据可视化设计做的都非常漂亮，极具代表性风格，我们可以通过behance搜索HUD 即可搜出来一大堆精美的高清原尺寸设计图，同时可以把这些作品保存到自己情绪版中，非常的方便。

pinterest

从“书签”这个角度出发，我们可以发现其实Pinterest的本质就是一张张精美绝伦的图片书签。每一个在Pinterest上的图片其实都是一个个网页上所提取浓缩而成的书签。pinterest对图片的关注是最用心的，去除了其他的各种干扰，Pinterest只注重图片的呈现。

而且Pinterest有个非常独特的功能,就是他能够自动筛选同类型图片，并且精准度非常高。

Videohive

这是一个专注视频模板和素材的网站(收费)，在此可以搜索出很多的HUD动效视频以及高清图片。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

为什么说是撕开 B 端封印呢？没接触过 B 端的同学，很大一部分都认为 B 端不就是简单的列表和图形吗？拿开源组件拼拼凑凑就可以了，有什么可设计的？

其实这个想法完全错了，你如果接触后就会发现，B 端所需要的掌握的产品知识、思维逻辑、规范意识等等太多了。

而且近几年 B 端这个词出现的频率越来越高了，因为前几年大家都在争 C 端市场，纯 C 端的流量争夺已经进入了尾声，B 端产品反而带来了新的机会点，同时也被慢慢的重视起来，比起以往 B 端设计师，现在需要掌握的技能也越来越多。你可以查阅一下一些招聘网站，现在 B 端可视化方面的岗位是非常火爆，与 C 端相比，人才缺口更大，未来几年 B 端也会更加火爆，有机会接触 B 端的话就不要错过机会。我们团队平均招聘一个合适的设计师基本要两个月的时间。

说了这么多，我们开始今天的主题吧！

首先在座的可能有部分设计师没有接触过数据可视化的设计，那么第一个问题来了，什么是可视化？大家想一想。给大家三秒钟~

通过可视的表达来增强用户处理数据的效率。

接下来我会从三个方面来讲解如何构建可视化：

    · 灵感需要迸发，更需要积累

    · 从零到一设计驱动

    · 设计度量

一、灵感需要迸发，更需要积累

1.1  数字时代下，99%的问题都是旧问题

数字时代下仍有信息不对称的情况，尤其是关键技术和设计上的问题，但是如果你用心寻找，就会发现你的新问题则是别人很久之前的旧问题了。所以要做个有心人。

但是问题又来了，有时候真的不知道该怎么找、去哪找？这是个很常见的问题。因为可视化不比插画、平面等这些成熟的领域，他是比较小众的，所以灵感以及素材的搜寻是一个令新手设计师头疼的事情，再加上对关键词的熟悉程度不够，导致很多设计师只停留在【可视化】这个关键词里，最后感觉搜来搜去都是见过的图，没有新意。

1.2  明确目标，知道自己想要找什么

互联网信息太多了，漫无目的的找灵感，只会浪费时间，一会看到这张图好看，一会看到那张图好看。不知不觉几个小时就过去了。

1.3  建立关键词词库

确定目标后，就要细化关键词了。怎么建立关键词词库呢？

关键词词库由3部分组成：终端、设计类型、业务类型。

    · 终端：大屏、移动端、web 等等。

    · 设计类型：每个细分的数据可视化类别都是有一些专有名词的，比如最近比较热门的车载HMI系统，那他的类型关键词就是 HMI。通过这些关键词，你会搜到更精准的结果。设计类型关键词比如：AR/VR、HUD、HMI、FUI等等，你要了解你们公司相关类型的关键词，记录下来。以及跟你们有关联的，都记下来，补充自己的词库。

    · 业务类型：智慧城市、生物医疗、监控部署等等。

这三类单独或组合进行搜索，就会看到更多可视化产品了。把关键词词库建立起来后，就可以去常用的网站上搜索了，最好用的还是 behance 和 Pinterest。

1.4  除了常用的设计网站，还有哪里可以看？

企业官网：很多做数据可视化的公司，会在官网展示一些能体现自己业务特点、业务实力的案例，而这些案例就是这些企业最好的数据可视化设计作品了， 所以但凡有案例展示的官网，案列基本都是最典型最好的设计，所以从这些案例中找灵感，也是一个有意思且有效的方法和途径。

1.5  你看到了别人看不到的，设计才能有所不同

总结一句话：你看到了别人看不到的，设计才能有所不同。如果你和别人看到的是一样的，你怎么比别人做的更优秀？

1.6  兴趣推送

经常刷短视频/新闻网站的应该知道，系统会根据你的点赞、收藏、浏览等数据来给你安排后面的内容推送，以保证给你推送更精准的内容。设计网站亦是如此，behance 等网站上也都是千人千面，它会根据你的点赞收藏等来读取你的喜好，进而推送更精准的作品。所以假设你是一个B端数据可视化方向的，你就经常搜、点赞收藏相关作品，之后你的首页出现相关内容的几率也会变大。

1.7  定期清理，更新迭代

最后一点，这个也是好多设计师的通病，收藏即学到。

灵感库要求精而不是多，每隔一段时间，回来翻一翻自己之前收藏的作品，会发现有些作品自己已经看不上了，因为在做灵感收集的过程中，我们的审美会自然有所提高，当输入的作品样本越来越多，我们对作品评价的维度也会更多，之前那些觉得好的作品，现在看来也就会有缺陷和不满，这是一个很正向的结果，成长就是一个不断剔除的过程。删掉那些自己觉得不满意的作品，添加更符合自己当前审美的作品到灵感库里。

这样慢慢完善你的地基，才能更高的向上走。

二、从零到一  设计驱动

讲完第一部分，我们开始搭建产品。

我负责从零到一的项目大大小小的得有10来个了，我认为在产品整个产品周期中设计师的话语权最高的时候就是项目初期，是可以做到设计驱动的。既然设计可以有足够的的话语权，你就得规划好未来的设计走向。

产品初期，经常会有几个争议比较大的问题，我们来聊一下。

2.1  设计先行还是调研先行？

这是新项目必须要做的选择题，再讲之前你先想一下，如果是你，你会如何选择？

我的观点是设计先行。（当然设计先行是建立在你至少对这个项目的行业有个简单的了解之后，先设计再用户调研），为什么呢？因为如果用户调研先行的话，用户只会反馈当下最想要的东西，从而有可能给你带来误导。就比如我们经常举的一个例子：汽车出来之前，人们只想要一匹更快的马。

我们要解决的不是用户当下想要的东西，而是痛点背后用户真正需要的东西是什么。在 0-1 的这种创造性的项目，往往设计者才是当下最懂产品的人，你把决策权交给一些不懂产品的人，做到最后只能是迷失了方向，锅还是设计来背。所以一开始设计师要把决策权拿在手中，掌握航向。

2.2  设计先行还是规范先行？

这个问题在现在看来相对比较统一，但有的同学还是有疑惑，所以我拿出来再跟大家聊一下。

首先我的观点是设计先行，在设计之前就定好规范的基本都是自己YY的，返工率极高。等你在做具体设计的时候就知道之前做的规范都是白费力气了。一般都会选用在项目完成之后或者主风格及主要页面完成后再输出规范，这样既可以减少规范的改动，也可以保证后面功能延用规范，一举两得。

当然了，设计规范不是所有项目都要有的，它是为了减少工作而不是增加工作，如果是一次性项目，就不需要再额外花费精力去输出规范了，浪费资源~

2.3  完成和完美那个更重要？

现在都是争分夺秒的时代，任务是无止境的，没有做完的时候。造成这个局面的无非就是一个问题：时间不够用。通常的做法就是先完成再迭代，做产品久了你就会发现，完成比完美更重要，不完美你还可以再迭代，完不成就有可能错过一个风口，从而失去了变完美的可能~

聊完这三个问题，我们在设计的时候也要有一些注意项，真正的做到设计驱动。

2.4  把复杂变得清晰简单而且美

对于设计师来说，我们的任务就是把复杂问题变得清晰简单而且美，所以我们应该成为企业和客户之间沟通的“架桥人”。通过设计的方法，把无形的、复杂的技术，通过有形的、可视化的方式展示出来，让客户更直观、清晰的感受到产品的功能，看得懂其在业务场景中产生的价值。

2.5  转换视角，建立共鸣

站在客户视角，聚焦客户关注的核心问题，通过情景把内容有序组织起来，快速与客户建立共鸣，有效降低内容理解难度。

2.6  产品架构可以不那么复杂

把复杂的业务/功能简单化、傻瓜化，最大的降低学习成本，能帮用户操作的绝不让用户亲自去操作。你要让用户在1分钟之内了解你的产品是做什么的、有什么功能，你就成功了。

2.7  大胆隐藏冗余内容

B 端项目中内容量是巨大的，面对庞杂的信息，去粗取精，提炼各场景的核心内容，避免冗余信息阻碍内容有效传达。话术语言不单要简单易懂，还要严格控制文字长度，保证内容可以被快速扫描和理解。

2.8  尊重用户习惯

不要妄想改变用户养成的惯性思维，你要记住惯性思维大于设计思维，他的阅读习惯、操作习惯都是不易改变的，不要为了个性化而尝试去改变，大部分情况下结果不会是那么的理想，除非你有极大的把握。

2.9  选用合适的图表

这个是常提到的，我就在这里简单给大家提个醒。比如做数据对比，柱状图更能清晰表达出用户想要的结果，你却非要放个酷炫的雷达图，他的本质目的都没达到，要美观有何用？

每个图表都适合哪些场景使用，像 antv、hicharts 等都有介绍，我就不一一赘述了，我之前也写过一篇关于如何合理利用图表的文章，大家有兴趣的可以去看一下。

三、设计度量

产品设计的好与坏我们需要去验证、去度量。我们怎么去验证可视化的好与坏呢？

美与丑也是主观的，没有绝对的美，也没有绝对的丑。一个产品，总会有人喜欢有人不喜欢，但是我们要迎合大多数人的审美。

所以就需要一个方法论来验证产品的好与坏，现在各大厂都在做自己的一套产品验证的方法论，阿里在这方便算是国内做的不错的，我举几个常用的度量模型。

    · 阿里云：UES

    · 蚂蚁金服：PTECH与易用度

    · 1688：五度模型

    · 优酷：DES

UES 目前是国内最好的，在 5 月份的阿里设计周上也正式对外讲解了 UES 模型。我拿阿里云的 UES 简单讲一下吧，这么多度量模型，无论他的方法、维度有所不同，但他们的目的是相同的：通过模型来度量设计成果。

    · 易用性：易操作性、易学性、易见性 ...

    · 一致性：整体样式、通用框架、常用场景及组件 ...

    · 任务效率：任务完成率、任务完成时间、功能使用率 ...

    · 性能：首屏渲染时间、API 请求响应时间、页面请求响应时间 ...

    · 满意度：产品满意度 ...

UES 分为 5 个模块，这 5 项是整个产品生命周期需要验证的。

关于 UES 我就介绍到这里吧，UES 模型要是展开讲的话，半天都讲不完，感兴趣的话可以去阿里云官方发布的 UES 模型的相关资料中深度研究一下，看看适不适合自己的产品。

上面是度量产品的模型，接下来针对我们 B 端设计师，我们也要有一些指标来度量自己是否合格。

3.1  设计效率

现在内卷盛行的时代，各大厂都在讲人效，毕竟时间才是最珍贵的，所以现在都在想方设法的提高人效。而且 B 端相对 C 端来说，可以有更多自动化的工具。

举个我公司的例子，我刚去的时候基本没有自动化工具，每个设计师每天也都在忙碌，谁也没偷懒闲着。但是我发现有很多重复性的体力劳动是不需要多少思考就能完成的，但是却耗费了将近 1/3 的时间。所以我就在想如何提高人效，把一些体力劳动用一些工具来代替，这样就能释放设计资产，去做更重要的事情。

当时就做了第一个自动化的工具：设计系统，现在大家对这个词应该不陌生，但是我们刚开始做的时候比较早，还没有一些比较完善的设计系统供我们参考，所以我们也算是前几批摸索设计系统的团队。设计系统做好后是可以把这1/3 的设计时间节省了下来，而且团队的规范性更加统一。

后面的话我们也是做了一些其他的自动化工具，比如结合一些插件做到 icon、组件等发布的自动化，并且与研发同学打通，有相应的自动化提醒工具，这样也节省了与研发的沟通成本。

在工作中，流程上能减少一步就是成功，慢慢来，万里长征就是一步一步走出来的。

3.2  增长设计

增长这个词来源于【增长黑客】这本书，顾名思义这个词的就是通过设计来促进产品增长。

这个词用在 C 端上比较多，因为 C 端可验证的方法比较多，见效快，所以我们常见的一些增长设计的案例都是关于 C 端的，而 B 端的话，受限制的因素较多，设计只是影响增长的一部分，而且见效慢。

但是虽说影响因素多、见效慢，我们还是可以抓住机会、多去尝试一些方法来做到设计增长。我这个方法不行，我就换一种尝试。大家都是在摸索中过河~

3.3  为业务赋能

所有的设计都是要为业务赋能、为商业买单。我们设计的本质就是为用户解决问题，让用户以最直观的方式理解产品。不要为了所谓“我认为很美”而与业务背道而驰。

3.4  体验创新

用户体验设计师会越来越重要，近两年逐步被重视，而且未来几年会越来越重视。行业内需要更多动脑的人而不是仅仅会动手的人。

现在到了互联网下半场，拼的不仅是功能，用户体验的重视程度已经被提升了上来，在工作中的占比也越来越重。

再加上现在这个超级内卷的时代，你不提升，你的竞争对手就把你干掉了。而且你如果只是一成不变的维护老版本，你去下家面试的时候都没有拿得出手的产品。

3.5  善用工具

现在各种办公类工具、软件层出不穷，而且很多工具是比较类似的，有的设计师再选工具的时候就很纠结，我认为完全没必要纠结，首先你要明确我想要达到什么目的，只要某个软件满足着你的需求就可以用。

工具是为人服务的，我们的设计软件从 PS – Sketch – Figma，无论怎么变化总要围绕一个目的：更高效的完成工作。

尤其是一些自动化工具，现在人工智能升级很快，要多关注设计自动化方面的工具，让他来解放我们的双手。

总结

最后送给大家一句话：

这时代唯一不变的，就是变化。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷    作者：胖kuan 

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

我们毫无疑问已经处在一个大数据的时代。各行各业都在快速产生和积累数据。 本文结合 UED 团队过去所参与 B 端数据可视化项目分享一些经验及思考。

• 背景
• 什么是数据可视化
• 数据可视化的应用价值
• 如何做好数据可视化设计
• 数据可视化发展趋势
• 结语

背景

“得益于计算机技术和海量数据库的发展，个人在真实世界的活动得到了前所未有的记录……社会科学将脱下‘准科学’的外衣， 在21世纪全面迈进科学的殿堂。”- 雅虎首席科学家Duncan J. Watts

“大数据的影响，就像四个世纪前人类发明的显微镜一样……而大数据，将成为我们下一个观察人类自身社会行为的‘显微镜’。” – 麻省理工教授Erik Brynjolfsson

从数据，到海量数据，再到大数据，对人类的做事和思维方式都有很大的影响。在《大数据时代：生活、工作与思维的大变革》一书中，作者归纳了大数据的三个特点:

• 更多：不是随机样本，而是所有的数据;
• 更杂：不是精确性，而是混杂性;
• 更好：不是因果关系，而是相关关系。 [1]

当前对大数据的研究涉及计算机科学、数学、生物学等多个领域。大数据尤其是对数据存储、数据挖掘等提出了重大挑战。而数据可视化也将在大数据时代扮演一个重要的角色。数据可视化可以将纷繁复杂的大数据集、晦涩难懂的数据报告变得直观易读、易于理解，通过图表将杂乱的数据进行科学有序的呈现，使用户找到数据的变化规律以及潜在价值，帮助用户作出决策。就数据可视化的应用来看，应用范围极其广泛，如政府应用、商业决策、公共服务等等。

什么是数据可视化

顾名思义，数据可视化就是将数据转换成图或表等形式，以一种更直观的方式呈现数据。通过可视化的方式，我们可以将大量复杂的数据通过图形化的手段进行有效地表达，帮助用户发现规律和特征，发掘数据背后的价值。

图 1 @Marco Zemolin Siresia Bagnoli

数据可视化的应用价值

1. 易于理解，有利于发现信息特征

使用可视化的方式来表达复杂的数据，可以确保对关系的理解要比那些混乱的报告或电子表格更快。通过图形化的表现方式，我们可以以清晰和连贯的方式解释大量的数据，从而让我们理解数据，得出结论。

案例：流媒体平台节目数量的变化

以下图为例，当用户希望了解 2011 至 2020 下图四大流媒体平台节目的数量变化情况时，以表格方式呈现效果如下图：

未经可视化设计的表格数据图

如果通过可视化设计处理后效果如下图：

经可视化设计后的数据图

在这个案例中，我们可以看到，通过文字信息表达的方式，所有的数据在文字信息的表达中都只是零散的个体，我们很难在短时间内对列举数据有一个大致的了解，更不用说发现特征得到结论了；而在可视化表达中则不同，所有的元数据通过图表形成一个整体，数字信息被转化为视觉信息，通过可视化图表，通过观察点的位置和颜色即可感知到数据的差异，原本需要通过计算数字大小完成的对比，变成了肉眼可见的点的颜色与间距对比，我们可以迅速了解到近十年四大流媒体平台每年节目数量、每年不同平台节目数量的对比以及各个流媒体平台节目数量的增长趋势等。

2. 将数据转化为更具吸引力的故事

据研究发现：人脑处理图片信息的速度显著快于处理文字信息，例如一篇 300 字的小故事，看一遍需要数十秒，而转化成图片后则只需要一眼即可记在脑海里。

这表明，在信息的类型中，人脑对图片信息的接收和处理效率远高于文字信息。而数据可视化则可以将数据通过可视化的方式转化一个以图片形式展示的故事，帮助用户快速接收、处理信息，激发用户联想并产生情感共鸣。

案例一：新冠病毒如何通过空气传播

随着新冠疫情在全球各个地区的蔓延，如何做好疫情防控已经成为了每个民众的头等大事 。Mariano 和 Javier 用可视化的方式生动形象地传达了新冠病毒是如何通过空气传播的以及可以通过哪些措施来降低传染风险。

图 2 @Mariano & Javier

案例二：在叙利亚，谁和谁战斗？

许多不同的团体之间的关系可能很难理解 – 尤其是当有11个这样的团体存在的时候，这些团体之间有的结盟，有的敌对，这让人难以理解。但是，Joshua Keating 和Chris Kirk通过表格的形式和熟悉的视觉效果和色彩，将这些数据简化为一种简单的、易于理解和可互动的形式，让人们可以轻松了解这些团体之间的关系和故事

图 3 @Joshua Keating and Chris Kirk

3. 帮助人们作出决策，加快决策过程

现实生活中大部分的人是视觉学习者，他们倾向于在与视觉元素相关联的情况下进行学习并与信息互动。[2] 人类大脑识别并理解一张图像最快仅需 13 毫秒。[3] 因此，相比起阅读和理解文本，大部分人更容易通过图表或其他可视化形式来理解数据，合理的数据可视化设计可以提高他们作出决策的速度。

图 4 @Bea Vaquero

如何做好 B 端数据可视化设计

1. 明确客户需求

设计师在设计数据可视化项目的开始阶段应该尽量与客户进行深入沟通，确定他们的业务诉求，也可以理解为确定客户的初衷与目的，从企业客户对数据可视化的需求看来，通常会有两种类型：

• 侧重于汇报展示，主要用途是为了对外宣传、对内展示等，对于这类需求，设计时可强化视觉效果的呈现，对数据进行场景化设计，尝试让数据以一种新的载体，有趣的互动等形式结合展现。
• 侧重于数据分析和协助决策，对于这类需求，一定要清晰了解需求方的业务内容和重点指标，重点关注数据的维度、种类、数量等信息，视效设计上应该优先满足业务诉求。

明确客户诉求，通过设计手段帮助客户达成目标，这才是 B 端数据可视化设计的关键所在。只有当我们了解客户的需要，我们才能快速推导产品结构、关键数据、视效风格等信息。

图 5 @Daria

2. 确定关键指标与优先级

关键指标是对一组或者一系列数据的统称。一般情况下，一个指标在屏幕上独占一块区域，所以通过关键指标定义，我们就知道数据大屏上大概会显示哪些内容以及数据大屏会被分为几块。

那么关键指标的选取依据是什么呢？我个人认为主要还是依据客户诉求，数据可视化的最终目的就是帮助客户达成业务目标。需要思考的是，哪些数据通过何种呈现方式能够帮助客户解决问题、达到目的、满足他们的期望，选择出一系列关键指标。

对于这些选取出来的关键指标，我们需要对其进行优先级的排列，一般来说，主要指标能够呈现业务的主要逻辑，一般放在显眼位置，用重点元素标识；次要指标围绕主要信息进一步阐述；辅助指标是对主要信息的补充，一般放在非核心区域，或者二级结构中。

通过合理优化关键指标并进行优先级排列，能够保证数据可视化的核心设计的重点，避免数据空洞散乱。

3. 合理使用数据图表

在选择图表展示相关数据指标时我们要思考各个指标的主要呈现，更进一步的讲，是我们想通过可视化表达怎样的信息。下面这张图就清晰告知了我们如何从数据的展示目的出发，选择合适的可视化方式来呈现数据。

图 6 翻译自@Stephen Few

4. 合理进行页面布局

数据可视化页面布局的设计是相对灵活的，为了保证数据呈现最佳效果需要结合实际需求来合理规划。关注核心数据的比例和位置，横向布局最为常见（人眼的水平运动比垂直运动快，会先注意水平方向的事物），核心数据场景划分在中心位置，占较大面积；其余的指标按优先级遵循人们的浏览习惯在核心指标周围依次展开。将类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。

@布局设计案例

5. 制定设计方向

在定义设计风格的阶段，从项目背景出发，综合行业类型、产品定位、品牌传播等因素，提取关键信息，构建设计框架。

数据可视化的设计风格主要根据客户要求、行业特性、数据指标等因素决定。通常我们很容易看到的可视化设计以深色为主，是因为相比于浅色基调，深色背景设计能够有效缓解视觉疲劳，其次深色设计能够更好地营造对比差异以及数据层级，再者深色设计更容易呈现丰富的动态效果，营造出强烈的空间感等。配色的设计使用应该充分考虑项目背景以及项目属性，例如党政机关类项目会慎重考虑用色，应当确保设计严肃，庄重。

数据可视化的设计除了对数据进行合理设计，还需要注重场景感的塑造，例如，我们通过场景化设计可以让某大数据平台成为大型“图书馆”，查看数据的过程就跟图书馆看书一致，场景化设计的优势是能够让用户能够以一种具象的互动方式来理解十分抽象的业务数据，当然合理的构建动态数据效果能够让数据具备“生命力”。

图 7 @Gan Gryc

6. 设计对比

除了尺寸和位置，我们还可以通过配色来突出数据。

无论是通过颜色或形状对比设计，容易产生强烈的视觉冲击力。

图 8 @Bureau Oberhaeuser

利用明度的对比，我们可以用深色烘托鲜明的色彩，或者用鲜明的色彩衬托某一块暗沉的色彩，亮色靠附近的暗色衬托显得更加鲜明，其色彩特征表现得更加充分；

图 9 @Zoey Shen

正确的对数据进行配色，让数据传递出的信息更清楚、更明白，例如国内 A 股，红色代表涨，绿色代表跌（美股绿涨红跌）如果给国内的股票、金融等相关客户做数据可视化设计时，需要避免不同地区文化所产生的差异。

图 10 @Dima Groshev

7. 选择 2D or 3D?

随着数字孪生概念的火热，越来越多的企业热衷于打造自己的 3D 数据可视化产品，那么 3D 可视化就一定比 2D 强吗？

数据可视化设计本身就是为了高效传达数据信息而服务的，相比平面呈现，3D 最大的优势在于多了空间维度，适合那些需要跟空间结合的数据呈现，例如地理信息、建筑楼宇、工业生产等场景。那么 3D 数据可视化相比 2D 就一定能够展示更多的信息吗，显然不是绝对的；需要根据实际业务需求出发。

通常我们所说的数据 3D 可视化，就是把大量复杂抽象的数据信息，通过 3D 模型以视觉方式呈现出来，帮助人们理解和分析数据。相比于数据 2d 可视化，数据 3d 可视化具有以下的优势：

• 展示空间相关的数据，因为空间数据具有三个维度，如果想要将其以视觉方式直观呈现出来，就必须要借助 3d 模型。例如显示一栋大楼不同楼层的人员分布情况，此时只有 3D 数据可视化能够帮助我们达到目标；
• 视觉冲击力更强，相比于 3D 可视化从视觉上表现力更强；
• 场景/对象仿真，在一些需要高度仿真的项目，例如与军事、地理勘测相关的项目中，数据 3D 可视化就不可或缺了，无论宏观态势还是细微结构的精密运行，数据 3d 可视化都可以将相关信息清晰呈现给使用者，将真实的环境、对象搬到屏幕上，降低使用者的认知成本。

在一个实际的数据可视化产品项目中，有必要应用 3D 数据可视化的情形；

• 需要展示多维空间数据
• 需要通过对场景/对象进行仿真，减少使用者的认知成本和学习成本
• 需要依靠 3D 效果来提升视觉冲击力

相比 2D，3D 的设计与开发成本相对较高；其次 3D 场景会容易产生视角遮挡以及操作成本等问题，那么从实际项目出发合理选择才是最重要的。

亚信数字楼宇@PRD MO UED

8. 设计还原

设计稿完成了并不代表设计师在这个项目中的工作就结束了，在后续的开发工作中，设计师还要与开发人员合作，减少上线产品与设计稿的差异。

这个阶段的工作也并非听上去那么容易，尤其是 3D 可视化设计，我们会使用相关 3D 工具制作设计效果，但 3D 设计工具与最终开发引擎存在着色、渲染等差异；在这个时候我们需要灵活运用开发引擎特性，提供对应的美术资源。作为设计师同样需要了解相关引擎着色器知识，帮助设计效果实现同时也提升对接效率。

亚信数字楼宇@PRD MO UED

9. 调优与测试

测试客户终端上线是否正常，有无适配所造成的兼容性问题；排查有无视效及体验问题，同时也要考虑极端场景下所产生的问题及应对方案。

对于大型 3D 可视化场景会存在性能卡顿，加载缓慢等问题，在保证视效基础上尽可能压缩相关美术资源，减少不必要的效果计算和内存占用量，根据实时效果需要不断优化性能提升产品体验度。

数据可视化发展趋势

趋势一：数据可视化 ╳ AI人工智能

随着企业发展数据量日益庞大，通过人脑分析复杂数据变得越来越困难，我们需要借助 AI 人工智能的帮助。AI 人工智能可以通过强大的算法快速识别分析数据，为企业节省了宝贵的时间和资源，目前人工智能已经被广泛应用于医疗保健服务、销售、供应链、客户分析和欺诈预防的数据可视化项目中。

IBM 数据可视化专家 Mauro Martino 创建的仪表板，允许用户可视化新闻中出现的主题

趋势二：数据可视化 ╳ XR

AR 和 VR 技术的应用可以增强数据在空间上的感知，从而帮助人们更好地使用数据。通过结合 VR、AR 技术，用户能够更好，更快地理解、分析数据。最近进行的许多研究表明，VR 和 AR 具有较强的感官体验，可以促进更快的学习和理解。帮助用户对业务问题进行多维度的分析，并更快速地找到解决方案。

图 11 LM9000@5puj47980xk

趋势三：数据可视化 ╳ 实时数据

在数字时代，事物变化很快，企业需要对数据告诉他们的信息做出快速反应——正因为如此，实时可视化数据比以往任何时候都更重要。

在 COVID-19 大流行期间，企业能够迅速作出反应更加重要。各国政府和卫生当局已经使用实时数据可视化来跟踪感染情况并据此进行调整。越来越多的公司正在将实时数据集成到他们的产品中。

实时数据可视化可以采取一些简单的形式，如实时更新的折线图或使用新信息(如销售)快速更新的交互式地图。

图 13 @Esri & The Science of Where Podcast

趋势四：数据可视化 ╳ 全面体验设计

以用户体验为核心的数据可视化设计是一种重要趋势，将用户放在第一位，然后是数据。无论处在哪个行业，设计师都应该遵循类似的思考过程，从思考用户需求及其痛点开始, 用户正在尝试解决哪些问题，以及他们面临哪些可能的困难？他们需要什么信息和功能来解决这些问题？我们如何以最佳方式为他们打造数据可视化？

最新的趋势之一是将用户的工作流与可行的见解、建议、预测以及针对当前任务或决策的最佳后续操作合并，帮助用户进一步钻研数据并发现模式、趋势和相关性。

结语

数据可视化是一门同时结合了科学和艺术的复杂学科，其核心意义在于清晰的叙述和艺术化的呈现，这些需要依靠数据工程师和设计师的精心策划而不是仅仅考虑如何实现炫酷的效果 ，只有最终达到帮助用户理解数据和做出决策的目标，才能发挥它巨大的价值和无限的潜力。

文章来源：优设 作者：AsiaInfo Design

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务