可视化大屏设计快速入门指南，看这篇就够了！ - 优设网 - UISDC

随着大数据产业的蓬勃发展，很多企业都开始应用数据可视化。智慧城市、智慧交通、智慧医疗等等越来越多的行业都有了可视化的需求，可视化行业也迎来了迅速发展的成长期。

往期回顾：

数据可视化释义

数据可视化就是把一些相对复杂、抽象的、我们看不懂的数据数据通过“可视化”的方式，运用图形化的手段清晰有效地将数据信息进行解读和传达，帮助我们发现其中的规律和特征，挖掘数据背后的价值。

可视化大屏

可视化大屏是以 大屏 为主要展示载体的数据可视化设计。它的应用场景非广泛如 ToC、ToB、ToG 等都会存在。一般应用在会议展厅、园区管理、城市交通调度中心、公安指挥中心、企业生产监控等重要场所。

可视化用户群体相对比较明确，主要是单位领导及一些一线人员。通过交互式实时数据监测，洞悉运营增长，助力智能高效决策。

伴随行业的发展，行业内也对可视化进行了一些行业细分。常见的一些类别：行业可视化（如交通、医疗、金融、军警部队、农业、工厂、化工等）、智能终端系统类（定制化终端产品）、演示 demo（数据演示、展览展示、数据看板 ）、可视化分析系统（通过对数据的分析监控辅助决策，如交通预警平台、天气监控平台等）。

1. 平台化

由于近几年可视化的需求越来越大，一般的公司都会有一些可视化的需求，各大厂商也逐渐整合可视化资源，实现平台化、低代码化。满足了大多数公司的可视化需求。国内比较知名的可视化厂商：光启元（Ray design）、Data V、优诺科技（森工厂）、袋鼠云（Easy V)、数字冰雹、图扑、等等。他们将一些可视化效果组件化集成在平台，拖拖拽拽就能实现一些不错的效果，满足了一些公司的展示需求。

2. 实现方式

目前可视化框架是大多数都是基于 Web 端的（基于 web 开发或者 web 封装）而非 PC 端。常见的可视化实现方式是二维加三维相结合，比如大屏两侧的可视化图表可以用 Echarts 这种第三方的轻量化图表控件或者 Vue 去实现。

主视觉部分会基于 Unity3D、虚幻引擎（UE4）、Ventuz、threejs 等工具去实现。满足三维炫酷的效果需求。使整个可视化大屏效果有了质的提升。这些三维工具的优势是三维粒子效果能很好的支持，且效果非常炫酷。多平台支持，可通过 webgl 封装在浏览器里打开使用。缺点就是维护成本较高，需要相关的专业人员去开发维护，有一定的使用门槛。一般公司如果不是专门做可视化相关业务不会配备相关专业人员。

说下几种工具的优缺点：

Ventuz 国内用的相对较少，相关专业人员也较少。虚幻引擎效果上是比较好的，但是对 WebGL 参数支持的较少。Threejs 虽然支持三维但是没有 Unity 那么强大的编辑器，一些复杂的效果实现不了。相对于前者 Unity 相对成熟一些，也是目前市场上用的比较多的，不过 three 对于前端开发同学更友好一些，容易上手，学习成本相对低一些。

可视化设计师应了解的知识

可视化设计是相对新兴的行业，就目前市场来看也是当今比较火的行业。作为一名设计师，不仅仅是只做完效果图就能行的，是一个结合 硬件设备、UI 设计、三维建模、三维渲染、动态设计、数据可视化、图形技术、GIS 数据、渲染引擎、交互技术等等综合类的交叉学科。

1. 硬件设备

硬件设备信息是做大屏一切的开始，我们首先要了解它的尺寸、比例、屏幕种类（拼接屏、LED 屏）投影方式 等等 一系列的信息，方便后续的设计工作。

上图为一些常见的屏幕拼接方式，确认好屏幕的拼接方式就可以计算出整个大屏的物理分辨率。举个例子：上图中最后一个的拼接方式为横向3块屏，竖向2块屏幕。他们每块的屏幕分辨率为 宽1920px 高1080px，那么这块2×3的拼接屏幕的尺寸就应该是：宽度 1920乘以3（横向3块屏）高度1080乘以2（竖向2块屏）得出 整个屏幕的物理分辨率为：5760×2160。

物理分辨率 VS 输出分辨率

大屏的投射方式大致分为三种：1、电脑屏幕 1 比 1 等比例投屏。2、通过主机直接输出给拼接屏（这种大多都是一些自定义比例屏幕和分辨率超大的情况会应用到）。3、投影仪投射。

一般大屏的物理屏幕分辨率大小都有不同，有的是极大的，几万像素，如果我们按照物理分辨率来去做设计的话会很卡，所以这里设计尺寸建议按照输出分辨率设计。输出分辨率会受到硬件的限制（超大情况下需等比缩放），我们一般会采用输出分辨率作为最终 的设计尺寸。针对硬件设备设计时要关注以下几点：屏幕拼接方式、单屏幕像素及拼接后像素、输出像素等这些决定了设计尺寸、内容排布、拼接缝的规避等问题。

2. GIS 数据

通常应用于参数化建模，主要是通过一些地理位置高程数据进行模型的生成。属于智慧城市可视化设计的基础设施。

常见的一些格式：Openstreetmap（多用于生成模型）、Shapefile（多用于生成模型）、Geojson（主要用于基于 Web 的映射）、TIFF（多用于贴图处理）。

一些常用的工具：Qgis、Arcgis、Google mapper。

3. 三维建模

在可视化设计中，一般我们会结合生成 参数化模型 加 定制化手工模型 的方式处理整体效果。这么处理的目的：一是设计上能突出主体，增加画面的层次感。二是在性能上能很好地优化，提高整体性能。

下图为设计侧到开发侧对接流程：

4. 动效设计

常见的一些动效对接格式：GIF、MP4、APNG、Lottie、序列帧。感兴趣的小伙伴可看这篇：

5. 图形技术

了解图形成像原理，是由一个个的粒子点生成的画面。

下图是由一个 50×100 的粒子组成的平面，每个粒子都会对应的 xy 轴的坐标位置，我们通过控制的粒子透明度、大小、颜色、位置、旋转等参数呈现不同的视觉效果。

世界地图的是通过一个一个粒子成像形成的画面，其中黑色=0、白色=1。比如粒子大小是 1，它对应的位置是黑色，黑色是 0，1×0 就=0 显示为黑色。

我们常做的粒子世界地图就是通过控制粒子黑白 x 粒子大小叠加出来的。

比如我们做粒子地球的时候是通过一张贴图来去控制黑白度 海洋是黑色所以就不显示粒子，陆地为白色显示 为白色粒子，最终呈现了一个粒子地球的效果。

6. 渲染引擎的技术架构

前面实现方式里讲到市面上可视化落地基本都是基于于 Unity3D、虚幻引擎（UE4）、Ventuz、threejs 等工具实现的。它们的底层是由 BS（Browser-Server）架构和 CS（Client-Server）架构两大架构组成的。

BS 架构与 CS 架构特点

BS:（Browser-Server）浏览器/服务器模式，web 应用可以实现跨平台，客户端零维护，但是个性化能力低，响应速度较慢。WebGL 就属于 BS 架构的一种。优点就是使用便捷、数据实时更新、跨平台。缺点是渲染效果较差，大场景支持差。

CS:（Client Server,客户端/服务器模式），桌面级应用响应速度快，安全性强，个性化能力强，响应数据较快。Unreal Engine、Unity3D、Ventuz 属于 CS 框架。优势就是整体渲染视觉效果棒，大场景支持好，缺点是必须安装客户端、电脑性能要求高、不同平台需要不同文件。

可视化大屏 UI

可视化设计是一个综合类交叉学科，同样在大屏 UI 设计中也是一个相对复杂的流程，我们需要对大屏的布局、风格、主视觉、信息图表、字体、规范、动效等方面综合考虑，推导设计方案。

设计前：一定要对用户需求充分分析和理解，要知道大屏的展示场景及设计分辨率，大屏的拼接方法都要有一定的了解，最后是跟开发沟通下实现的工具与方法。

设计中：构思布局，可以在纸上简单画一下。根据业务需求定义设计关键词进行设计的提炼与分析，方便自己找参考。颜色上背景深色为主，为了更好地聚焦，数据可以采用亮色，有一定的对比关系，便于业务信息传达。字体上可以采用系统默认字体 数字采用特殊字体包的形式（这块根据实际需求，切记不要照搬）。图表选择恰当的展示形式，同时保证视觉上的统一（分清页面的主次关系，图表的展示切莫设计过度，容易造成抢主体）

设计后：再次校验信息层级、文字大小、图表等各层级间的对比关系是否传达准确，与技术同步沟通下技术的实现性。最后开发完成后，要拿演示 demo 去现场测试，看下整体展示效果，测试输出是否有问题，有无拉伸问题，拼接缝与内容有无穿插，及时与开发进行页面的校验工作，最终才算是设计完成。

下面针对可视化设计中 布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向细节点的拆解

1. 布局

通过硬件设备信息可以得到可视化的设计尺寸，基于尺寸新建设计画布后，第一件事就需考虑页面的整体布局。可视化大屏设计从信息布局到数据表达，都需要设计师对业务深入了解后才能用数据助力业务决策。

常见的大屏布局：居中结构、左右结构两种种常见的布局形式以常规的 16：9 模板为例，下面列举的一些常见的布局形式，供大家参考。

异形超宽拼接屏幕

布局的原则一定要主次分明，根据业务需求抽取关键性的指标，提取主要信息。可以在纸上大概画一下，然后在软件里具体细化布局。避免次要信息的面积过大，喧宾夺主，影响整体的视觉效果。

2. 风格

提起可视化大屏，大家都会联想到：科技感、FUI、HUD 这些关键词，可以说可视化大屏跟科技、数据这两词是强关联的，风格上也基本是这一类方向。

定义设计风格：一般会基于业务需求场景去定义几个设计关键词，根据关键词去找一些参考图，推导出贴合业务的设计风格。

我们可以通过调整颜色、装饰细节、主视觉、字体等一些细节点控制区分不同的设计风。下面拿图表举例，我们在做设的时候，只需调整卡片和标题的装饰，就能够展现出不同的设计风格。

3. 主视觉

主视觉部分大致分为：地球、地图、智慧城市、行业类业务展示等。目前比较容易出效果的都会采用三维模型的处理方式。地球：粒子地球、地图贴图、地球模型。

地图：第三方在线地图（百度、高德、腾讯、谷歌）基于 地图开放平台进行个性化配置。或者通过地理位置数据建模：如全国和各个省份的轮廓模型。

智慧城市：GIS 参数化生成简模和重点楼宇定制化建模。

行业类：多数为定制化建模。如工业类、医疗类、能源类、园区、学校、港口、工厂、仓储库房、零售、工程、安防、国防军工等。

以上图片源于 DAT

主视觉是可视化设计中的一大难点，不光是设计落地的时候也会有需要注意的点，这里建议大家在做之前一定要充分跟开发沟通，确认好技术选型，方便后期输出跟开发更加高效的对接。

4. 信息图表

图表的设计原则是易理解、可实现，能够准确表达数据意图，给用户传达明确信息。

以上图片源于网络，如侵删

上图通过通过使用场景可分为比较、联系、构成、分布四个维度解释图表的不同属性类别。在做可视化大屏设计的时候可以参照上图，选择对应的数据图表。

两个及以上变量数据，一是基于分类不同的对比，二是基于时间维度的对比。常见的图表：条形图、柱状图、雷达图、玫瑰图、桑基图等

两个及以上数据之间的相关性，随时间变化比较关联。常见的图表：散点图、气泡图、多级饼图、热力图、力导向图等。

指标里的数据都由哪几部分组成、每部分占比如何。常见的图表：饼图、环形图、堆积面积图、堆积柱状图、瀑布图等。

指标里的数据主要集中在什么范围、表现出怎样的规律，想表达两个数据点之间数量的演变过程。常见的图表：阶梯折线图、面积图、直方图等。

基于图表的类型可分为：饼图、线形图、柱状图、混合图、面积图、散点图、极坐标图、关系图、树图、桑基图、漏斗图、热力图、还有其他图表类型等。

适合展示分类的占比情况，不适合展示分类过多（超过 9 条数据）或者差别不明显的场景。

折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。

当水平轴的数据类型为无序的分类或者垂直轴的数据类型为连续时间时，不适合使用折线图。同样，当折线的条数过多时不建议将多条线绘制在一张图上。

柱状图提供了分类数据的可视化展示，基于不同的数据类型有以上几种不同的形式。分类数据是将数据分组成离散的组，例如月份、年龄组、鞋码和动物。这些类别通常是定性的。图表上的条形图可以按任何顺序排列。

折线图和堆叠柱状图的组合图表。同时显示两个坐标轴，用于展示两种不同类型的数据。 适用于带有细分分类的累计数据大小以及与之相关的趋势数据，例如在过去十年全国三大产业的具体产值，以及 GDP 增长率。

面积图强调数量随时间而变化的程度，也可用于引起人们对总值趋势的注意。适合于比较多个变量随时间间隔变化趋势。

散点图是一种使用直角坐标来显示一组数据的两个变量值的图表。数据显示为一个点的集合，每个点都有一个变量的值决定水平轴上的位置，另一个变量的值决定垂直轴上的位置。

通常用于显示和比较数值，不光可以显示趋势，还能显示数据集群的形状，以及在数据云团中各数据点的关系。

基于直角坐标系的径向变形（相当于把直角坐标卷起来）。适用于显示三个或更多的维度的变量对比或者部分与整体的趋势。

可以展示数据的占比情况，还能厘清多级数据之间的关系。 通常用于可视化大量元素之间的复杂关系

树图是一种流行的利用包含关系表达层次化数据的可视化方法，是研究多元目标问题的一般工具。 适合展示数据之间的层级关系，适合 6 条以上数据。

一种特定类型的流程图，用于描述一组值到另一组值的流向，图中延伸的分支的宽度对应数据流量的大小。用以展示数据的层级关系。常用于可视化能源或成本转移，也帮助我们确定各部分流量在总体中的大概占比情况。

一种直观表现业务流程中转化情况的分析工具，总是开始于一个 100%的数量，结束于一个较小的数量。通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节，进而做出决策。 适用于业务流程比较规范、周期长、环节多的流程分析，比如流程流量分析、转化率分析。

将数值大小通过色块有序且紧凑地在坐标系中呈现。 适合呈现多组数据连续的数值分布，适合做数据的预测统计，可以在图片上直接展示热度。例如展示城市在不同时间段打车热度情况。

词云图适用于对比大量文本或绘制特定形状的词云。水球图适用于多个百分百数据呈现。子弹图用于表达多项同类数据的对比，可以表达一项数据与不同目标的校对结果。 维诺图适用于层级数据比较大小，同时能看到各层级之间的情况。金字塔图适合展示分类的占比情况，不适合展示分类过多或者差别不明显的场景。

5. 字体

文字是可视化展示中最重要的构成要素之一，可视化大屏设计中字体的运用其实原理跟网页 app 的 逻辑基本一致。在字体选择上会基于业务需求选择对应的字体，一会会与设计风格相结合。这里要注意的是字体有无衬线、字重、字距等。

大屏设计中，中文字体一般会采用浏览器默认字体（微软雅黑、思源黑体、苹方等）页面中标题会采用特殊字体处理，常用的字体有：优设标题黑、旁门正道标题体、时尚中黑简体、方正正中黑体等。英文数字字体推荐：Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。

6. 规范

建立规范的主要目的是：保证设计的一致性、提高开发效率和还原度、方便迭代 ，辅助设计和开发更好地完成设计的协作。可视化设计中规范一般会分为：色彩、文字、图表、标题控件等，跟网页端规范同理，这里就不一一赘述了。

7. 动效

大数据可视化大屏设计少不了动效，动效是可视化重要的组成部分，动效能增加观感体验，凸显关键产品内容、强调功能信息关联，帮助用户理解产品、情感化互动。但过分的动效极其容易喧宾夺主，影响用户阅读，反而弱化了数据的展示。

动效的设计原则

动效应优先满足核心内容、故事线。常见的大屏动效 – 展示类，用于突出产品核心功能和特点。界面信息按照一定的规律呈现，引导用户的视觉流向。

好的大屏设计应该是数据展示模块最好动效不易过多，要有一定的主次关系变化，例如一个动画表现的视觉强，另一个就表现稍弱化，有强有弱、有主有次节奏才会舒服，同时动效要结合数据变化，考虑极端情况的展示效果，最终输出一套完整的动效方案。

以上是我对可视化参差不齐的一些认知，主要是给大家普及可视化设计的一些流程以及相关的专业知识,希望能够帮助你快速进入大屏设计及避免一些坑。由于篇幅原因字体、规范、动效没有详细拆解说明，后面会陆续更新相关文章，感谢大家支持。可视化体验远远不止这些。欢迎大家提出更多意见和建议，我们一起前行。