随着可视化大屏需求的增加，越来越多的UI设计师转去专做可视化大屏，但是可视化大屏的尺寸的确定，一直以来是设计师非常头痛的问题，往往因为前期准备工作不足，导致设计效果和最后开发呈现的结果偏差颇大，比如内容展示不全、字体太小看不见、图表被压缩、拉伸变形等问题，出现了这类问题就会造成大量的调整返工。不仅浪费了时间，而且给需求方造成不专业的极差印象。
结合工作中踩到的坑和查找多方资料，下面根据大屏可视化硬件设备，以及常见的拼接形式做以下分析。
大屏成像原理
可视化大屏的成像原理就是投屏，把电脑屏幕上的内容通过有线、无线信号投放在大屏上，电脑屏幕上展示什么内容，大屏上就会呈现什么内容。在电脑上做的任何交互动作，因为是投屏原因，大屏上也会同步出现。
【总结】电脑屏幕上有什么内容，大屏上就会显示什么样的内容。如需上下滚动时，滚动条需要做隐藏处理。
大屏的类别
可视化大屏可分为两类，一类是拼接屏、另外一类是LED屏。
拼接屏
拼接屏：是用相同比例尺寸的液晶显示屏拼接而成。因为硬件的固有特性（黑色边框、安装方式等），会有一定的缝隙和黑色边框。通常用于数字指挥中心、展厅、大型展会等。
拼接的方式和现场需求有很大的关系，如下所示：
上图是4*4的拼接屏，不同的场景下会有不同的拼接方法。不管拼接方法如何，输出设计稿时方法是一致的。
大屏和电脑同比例设计
如电脑分辨率为1920px*1080px（16:9）时，推荐使用1920px*1080px。
当电脑分辨率为3840px*2160px（4K 16:9）时，推荐使用3840px*2160px。
当电脑是4K屏幕时，我们使用1920px*1080px（16:9）的设计尺寸是可以实现的，在最终使用时会感觉画面的清晰度不够。这是因为程序开发时使用1920px*1080px（16:9）适配了4K屏幕，同比例情况下放大了设计稿，再加上投放大屏时，画质损失会更明显。
大多数屏幕的分辨率为1920px*1080px，如果按照上方拼接屏的排列顺序，宽度1920px*4=7680px，高度1080px*4=4320px，最后得出分辨率为4320px*7680px（16:9）就是大屏的分辨率，如果以当前分辨率作为设计分辨率就不合适，太大的分辨率会造成设计稿件时卡顿，CPU过载等一系列问题。
同比例正常情况下设计稿以保持在4K内为最佳，即3840px*2160px（16:9），在这个分辨率下既能保证操作的流畅度，又能保证视觉上的清晰度。
注：大分辨率时，字号要同比例放大。
【总结】当大屏电脑比例一致时
- 电脑分辨率为1920px*1080px（16:9），设计稿的分辨率为：1920px*1080px；
- 电脑分辨率为3840px*2160px（16:9），设计稿的分辨率推荐使用：3840px*2160px；
- 注意：设计画面内容时应规避拼接缝的问题。
大屏和电脑不同比例设计
同比例设计来看很舒服，下面我们来说下不同比例，一般出现问题，都是出在了不同比例的适配问题上。
当大屏和电脑屏比例不同时，请优先保证大屏展示是正常的，这是首要级。
例如在一个4*7分辨率13440*4320（28:9）的拼接大屏上，按照电脑屏幕比例设计，最后的投屏结果如上图所示，整个画面会被拉伸和压缩。
那我们应该怎么做呢？
在一个4*7的拼接大屏，分辨率为13440*4320（28:9），这样一块大屏如何设置设计稿尺寸呢？
需求方的电脑一般都是1920*1080（16:9）的显示屏，你不可能让他们去定制一个28:9的显示屏。上面讲过首要级是请优先保证大屏展示是正常的，电脑上差点无关紧要。
顺着这个思路，我们可以使用两台16:9的显示器组合成一个32:9的屏幕，这个比例是最接近28:9的的，所以最为合适。
注：如果需求方有4K（16:9）的显示屏，优先使用4K屏，这样显示效果最佳。
理论上我们找到了最优解决方案，但实际工作中却是又不一样，如果需求方一直使用的都是16:9的显示屏投放在28:9的大屏上，你说加个显示器吧，如果需求方同意还好说，如果不同意，项目也得进行下去。还是上面讲过的首要级是请优先保证大屏展示是正常的，电脑上差点无关紧要。请记住我们的最终目的是大屏的完美呈现。
【总结】
- 要以最终投放的大屏比例来规定设计稿，以保证大屏的完美呈现。
- 优先使用4K屏分辨率作为设计稿尺寸，以保证大屏呈现的清晰度。
- 使用最接近投放大屏比例的显示屏比例投屏（一台不够两台来组合）。
大屏分辨率设计稿尺寸如何来计算
拼接屏的每一块小屏分辨率一般为16:9，工作中我们可以把高度设置为2160px，宽高按照拼接屏的数量比例计算出尺寸。
例如3*6的一块大屏上，高度3块屏设为2160，每块屏的高=2160÷3=720，每块屏的宽度=720÷9×16=1280，3*6的大屏宽度=1280×6=7680。最后得出3*6大屏设计稿尺寸为：2160px*7680px
LED屏
LED屏：LED屏是现在可视化大屏中常见的硬件，他的设计尺寸计算方式和拼接屏有很大的区别，具体拼接方式会根据现场情况有所不同，拼接方式的不同会影响到设计尺寸的计算。
LED大屏是由若干小LED显示模块组成的，越小的点间距也意味着越高的清晰度。LED屏有很多种规格，各规格计算方式相同，我们用单体为500mm*500mm的作为标准计算，每个单体模块像素点为128px*128px，如上图所示，横向12块，竖向6块。
横向像素为：128*12=1536px，竖向像素为：128*6=768px。这里的设计稿尺寸为：1536px*768px，这里的尺寸定义规则和上述拼接屏相同，当总体分辨率超过了4K像素时可等比例缩放至4K以下。另外一种情况，LED大屏有设置好的输出像素值，按照其设计即可。
大屏字号设置问题
都知道大屏的开发是基于WEB端，网页中最小字号为12px，如果项目中使用这个字号，在大屏幕中就会显示很小。
因为大屏的屏幕很大，人员要站在较远的地方才可以看到全部画面，所以在字号上要相对大一些。对于一些非重要信息比如：图标刻度、装饰性文字等，小一些也是影响不大的。
当大屏比例较大时，字号也要相应的加大，这样信息呈现清洗可见。
设计师一定要去大屏投放现场，调研项目现场环境、人员位置，定义字号大小的运用。要了解不同厂家显示屏偏色情况，综合各项信息才能呈现一个完美的可视化大屏。
【总结】
- 大屏字号要使用大字号。
- 大屏比例变大时，要调整对应的字号大小。
- 要调查大屏投放使用环境。
上面说的是一些常规情况，还有一些其他投屏方式
电脑屏幕非直接投屏
在一些指挥大厅、会议室、展会、展厅上使用的较为广泛，在实际场景中，会根据内容需求产生不同的拼接方式，例如：3*3、3*6、3*9、2*4等各种不同组合，这种情况下一般不会采用屏幕直投的形式，甚至用不到电脑的显示器，都是主机直接输出给拼接屏现场调试。
这种过程基本是通过软硬件配合完成最终实现大屏适配。电脑信号会通过软件及硬件处理后对接到大屏。
这种情况下就不要考虑电脑屏幕和大屏都适配，没必要。这种情况应用最多的是小屏控制大屏的形式，设计时按照控制端（电脑屏）实际尺寸设计即可。
多台主机同时投屏
通过多个信号源控制大屏的分屏，一个信号源链接一台电脑，所以在设计的时候，一台电脑的显示器就是一个设计稿。这种情况通常会出现在非常宽的大屏上，过宽的大屏不适用寓多个显示屏组合投屏，如下图由6个信号源组成的大屏。
每一个信号源对应一张设计稿，N个信号源就是N张设计稿。
大屏设计运用越来越广泛，它和APP一样都需要考虑使用场景，不同于网页设计，需要根据他的特性，定义设计流程及规范。相信认真看完此文章，对于大屏可视化设计稿尺寸的定义有了一个清晰的认识。
Powered by Froala Editor