实用篇：可视化投屏指南

可视化作为近些年风生水起的设计方向，虽然发展迅速，但是由于行业自身偏向B/G端，带有很多的隐秘性，整个行业都是每个公司在各自运作，其实并没有C端起他公司一样，拥有一整套科学细致的设计流程，特别是这次我要讲的投屏方向的小细节，其实很多设计师并不明白。接来下就让我带大家一起来看下吧，哈哈。

我们将主要从了解投屏的原因，解析投屏的成像原理及问题案例带入，三个大方向来想大家详解

1、为什么要了解投屏，大家对这个问题可能也会有些费解🤔

不光是我们，就算是其他同事，也会对这部分不是很清晰，无论是从责任归属、了解到价值，以及重要性，似乎都和某个特定的岗位没有太多关联。

很多时候，设计师会认为：这东西和我们没什么关系吧？

但是，举个例子，大家在做web和app的时候，会不会考虑适配呢，那为什么会有适配呢，这个不需要我解释，各位友友们肯定都明白了哈哈。我们了解投屏就和我们刚入门时的那张各类设备尺寸表一样，是我们做可视化的基础。点虽然很小，但是关键时刻，却很致命。

或许你会觉得我上面问的1、2、3多少有点离谱。但是作为一个从业时间几年的可视化设计师，可以很负责的告诉你，真实的可视化项目中，这些问题比比皆是。

项目中的同事，不光设计师入行没几年，技术支持、项目经理、甲方一样也是一知半解，这个时候，把这个问题弄清楚，就显得尤为重要，它不仅可以真实的帮助到我们的设计，也可以快速在项目现场建立起设计师的专业度，哈哈，这玩意儿真的很重要。

如果如果你觉得我说的有些虚无缥缈，那不妨代入一下下面的场景，这是真实发生在现场一幕，我去到了某个市局的现场，结果...

一般来说，我们设计师是输入软件研发序列的，多数G端可视化项目因为收到专网限制，都是需要到现场去开发调试的，所以会有一个技术支持人员来做软件的安装调试，但是他们的jd里也没写需要会调试大屏设备，即使是我们公司这种大量可视化项目的团队，也没有一个专门的投屏人员，求人不如求己啦。这个问题，作为一个低频问题，虽然冷门但是也足够致命，我们还是需要正视他。

2、解析投屏的成像原理

这个小问题既然拿出来说了，自然需要把它讲透

我们将主要从分辨率、硬件解析、软件解析并到最后的投屏方法，争取将投屏的成像原理讲清楚。

01-首先，大家真的知道分辨率是什么么？

日常生活中，我们会用分辨率表示各种各样的尺寸，但是似乎也不是很清楚。

还是之前那张UI规范尺寸表，手机的1080*1920和电脑的1920*1080为啥不一样大？刚入行时我也有这个问题，相信有很多友友已经在那上面明白了分辨率到底是什么。

常规设备的成像原理如下，都是通过显示适配器将主机视频信息传输到显示设备上。显示适配器就是我们常规说的显卡，可视化中还有另外一种更强的设备也就是超高分辩率显示适配器。

显示适配器/显卡：可以调整电脑的输出分辨率，Nvidia/AMD设置里就都拥有自定义分辨率。

显示适配器决定了设备的打印分辨率、输出分辨率；而显示设备则确定了设备的显示分辨率、图像分辨率。

可视化项目中的显示设备基本就是电脑显示器和大屏了。下面让我们看下物理分辨率和输出分辨率的定义：

02-硬件解析

讲完分辨率之后，我们就需要根据上面的原理情况，解析一下硬件部分的信息。这块主要是分为输出部分和显示部分：

输出部分主要是看下常规的显示器接口，因为具体的视频转码是如何实现的我们不需要知道，哈哈。我们需要了解的是如何把视频数据从电脑传输到显示设备中。

常规的显示接口就是VGA、DP、HDMI，通过对应的传输线将视频信息从电脑传到显示设备中。

后面那个问题：我们平时在win电脑的分辨率设置中，可以调整的分辨率及显卡的输出分辨率，但是基本是推荐好的，例如1920*1080，1440*960这类的，如若想自定义输出分辨率，可以进入显卡设置中自定义。（注：具体设置范围后面会提到）

显示部分就是看下显示设备是如何承接显示信息的，主要还是以可视化为主，看下各类大屏的视频数据接收原理。

单块、电视墙都是单个显示单元，比较好理解，但是其实拼接屏也是直接收一个视频输出信号，他们只是用了更多的屏幕来显示一个视频数据而已，具体的分辨率计算也是简单粗暴，如下：

大家可能会疑惑我为啥不解释下双屏，这里就涉及下面我们说的软件解析了，请继续往下看～

03-软件解析，这边正好可以解决大家双屏的困惑。

我们所做的可视化项目，最终是最为软件交付给甲方的，下面我们就稍微的了解下软件的架构有哪些，以及我们对应的设计策略。

目前我们做的可视化项目，无论是用基本的js，还是three.js、unity3d、unreal4技术，都是通过浏览器来承载项目的。

分析这块，也主要是为了告诉大家结论二：我们其实是靠一个软件去显示，双屏是很不现实的。

04-投屏原理

接下来，我们需要自己看下投屏的方法，这块其实是这次分享的主要内容。

投屏的方法主要是3种：投屏、拓展屏、投影。

这三种方式都是将视频信息传输到大屏的一种方法，并没有绝对的好和坏，根据客观条件下适合项目的，就是最好的方法。

第一种：投屏

上图可知，这种情况中，需要让显示器和大屏的比例保持一致，才能让画面不拉伸，然后让我们用示例看下具体的几种情况吧。

情况一：显示器和大屏比例一致，但是分辨率有所不同

1920*1080投屏到3840*2160的大屏上，由于输出像素为1920*1080，所有像素点被放大，故而画面会模糊。

3840*2160投屏到1920*1080的大屏上，由于显示像素为1920*1080，输出像素会被缩放至1920*1080，故而画面也会模糊。

由此可见，投屏中比例一致的情况下，分辨率也尽量保持一致，这样能使洁面效果达到最佳。

情况二：显示器和大屏比例不一致，这种情况下分辨率自然也不同😭

这，就没什么好说的了，哈哈，会被扯的乱七八糟的。

投屏的结果即是所见即所得，他会把我们电脑显示上的信息，一比一的映射的大屏上，使用同一个输出源，这种情况下，我们需要做的是：一是尽量让显示器和大屏的分辨率保持一致，情况特殊比例一致也行（这个特殊情况大概率是设计完了但是大屏采购出问题了，哎。）；然后是根据显示器的分辨率来确定可视化的尺寸。

第二种：拓展屏

上图可知：拓展屏的话，是视频信息直接从显示适配器到显示设备的，所以他不会在意电脑显示器的分辨率，这个时候更在意的是显卡的输出设置和显示设备（大屏）的显示分辨率。

下方是显示分辨率和输出分辨率设置的一些情况和分析：

看完与原理以后，我们直接代入项目，因为工作原因，内容信息必须要脱敏，所以将就看吧。

我们根据显卡和大屏分辨率的每个情况逐一介绍，注：拓展屏状态下，视频信号是从主机到显卡直接到大屏的，与电脑显示器无关。

情况一：显卡可以承受1920*1080，可视化尺寸与大屏比例一致

情况二：显卡可以承受3840*2160，可视化尺寸与大屏比例一致

情况三：显卡可以承受3840*2160，大屏尺寸也支持3840。可视化与大屏幕比例不一致

情况四：异性分辨率设置

根据以上四个情况的演示，大家基本可以清楚：拓展屏时，需要将输出分辨率和显示分辨率调成一致，特殊情况下也要比例一致，然后根据输出分辨率去确定可视化尺寸。

第三种：投影

投影就基本和投屏是一样的了，只是说承载设备不一样，这种情况其实比较少，但是也有部分展厅的可视化是通过投影设备直接投在屏幕或者白墙上的，这个时候保持比例一致即可。

根据上面一系列的分析，我们也可以得出以下结果：

结论就是：确定可视化的分辨率主要依据于输出分辨率。显示设备决定了显示分辨率的上限，对应的，只需要我们选择争取的的显卡能支撑到达上限即可。

下面是显卡的天梯图，但是推荐仅个人意见，如果有误，请大家伙儿及时指出。

3、问题案例代入

那么我们分析了一堆原理得出了一堆结论，最终还是为了解决问题，让我们来看下一些具体的问题案例：

问题一：你知道你的可视化是怎么实现的么？投屏的原理有人了解么

可视化上屏流程大致的流程分为以下几步，虽然看起来上屏是最后的步骤、也不涉及到具体的设计，但是他可以决定我们可视化的最佳尺寸，是我们可视化设计中尤为关键的一步。

投屏的原理相信通过上面一系列的叭叭大家应该都明白了，就是将视频数据从电脑传输到显示设备上，根据现场情况选择和调试视频输出设备、显示设备，从而确定项目最佳分辨率，帮助我们的可视化上屏效果达到最佳。

问题二：如果现场没有技术支持或者专门投屏人员呢，如何确定分辨率

可以考虑按照以下步骤推进项目：

01-与项目负责人及用户确定投屏方案

02-检查输出及显示两个设备的分辨率

03-然后尝试调整输出分辨率，4k以下常规16:9的大屏基本可以调整为一致

04-上屏测试

如果可以一致，那么我们可以确定分辨率。

如果不一致，考虑给用户推荐下一步的解决方案：

1、常规4k大屏、比例16:9，显示适配器（显卡）仅支持1080p，建议更换显卡即可（注：购置前用商家沟通分辨率上下线即可，基本分为2k 4k）

2、异形屏，分辨率横向15000以下，建议使用超高分转换视频信息（一，超高分最高支持15k横向分辨率；二，分辨率太大需要考虑浏览器能否承载，一般是在20k以下）

问题三：如果没有屏，如何确定分辨率

这种情况下，可以考虑以下步骤：

01-与项目负责人及用户确定投屏方案

02-常规1080p 4k尺寸，投屏方案合理的情况下，按照要求设计即可

如果有超高分，按照用户要求制作设计图即可

如果有没有超高分，询问用户输出设备与显示设备参数，若不相同，辅助用户调整采购方案或更换设备，如果不一样，一定要让他换，不要让他自己害自己！！！！！！😖。

相信通过上面的内容，常规的问题大家都可以做到了，那么就让我们来看下奇奇怪怪的问题吧。

问题四：项目尺寸5600*1400，去到现场投屏测试，超高分尚未安装，如何测试

因为在项目开始之初的现场调研中，除了确定分辨率外，我们还需要检查屏幕的显色，以及根据现场可视化观测环境确定字号等测试工作，如果现场有屏幕但是没有超高分，我们如何确定字体就成了一个棘手的问题。

解决方案如下：

01-确定用户目标尺寸，制作对应的投屏测试文件即可

02-查看用户当前投屏设备分辨率

03-将投屏文件长宽缩放至当前设备分辨率即可

原理解析：因为没有超高分，我们只能通过映射方法投屏；现场投屏后，映射原理会是被压缩过的图片在大屏上拉伸至目标宽高，完成全屏假象，但对于测试字体及硬件色彩无大碍。

问题四：项目尺寸5600*1400，去到现场投屏测试，没有超高分，如何调整项目

解决方案如下：

01-参照上述原理，请求前端同事帮助，制作开发demo，前往投屏（前端同事可以使用插件帮助我们将画面在浏览器中自动撑满，间接帮助我们让项目在大屏中看起来不会拉伸，但是这种方法只是救火的时候用一下，不建议大家学习。）

02-现场投屏后，映射原理会是被压缩过的图片在大屏上拉伸至目标宽高，完成全屏假象，但是如果分辨率差距过大 会有图片模糊现象

注：此方法基本处于，项目开发完了 硬件也不能更换的情况下了，建议大家不要去用，告诉大家只是为了无可奈何的时候救一把团队，我搞了好几年也就遇到这么一次活宝项目😭

如果能看到这里，说明友友一定是一个想深入可视化的设计师了，讲的有问题或不对的地方请友友们谅解，也是第一次写，ppt中的许多图片也是网上（主要是这个几个表情）寻找，如果侵权，请及时告知，立马下架。谢谢大家😁