隨著可視化大屏需求的增加，越來(lái)越多的UI設(shè)計(jì)師轉(zhuǎn)去專(zhuān)做可視化大屏，但是可視化大屏的尺寸的確定，一直以來(lái)是設(shè)計(jì)師非常頭痛的問(wèn)題，往往因?yàn)榍捌跍?zhǔn)備工作不足，導(dǎo)致設(shè)計(jì)效果和最后開(kāi)發(fā)呈現(xiàn)的結(jié)果偏差頗大，比如內(nèi)容展示不全、字體太小看不見(jiàn)、圖表被壓縮、拉伸變形等問(wèn)題，出現(xiàn)了這類(lèi)問(wèn)題就會(huì)造成大量的調(diào)整返工。不僅浪費(fèi)了時(shí)間，而且給需求方造成不專(zhuān)業(yè)的極差印象。
結(jié)合工作中踩到的坑和查找多方資料，下面根據(jù)大屏可視化硬件設(shè)備，以及常見(jiàn)的拼接形式做以下分析。
大屏成像原理
可視化大屏的成像原理就是投屏，把電腦屏幕上的內(nèi)容通過(guò)有線、無(wú)線信號(hào)投放在大屏上，電腦屏幕上展示什么內(nèi)容，大屏上就會(huì)呈現(xiàn)什么內(nèi)容。在電腦上做的任何交互動(dòng)作，因?yàn)槭峭镀猎?，大屏上也?huì)同步出現(xiàn)。
【總結(jié)】電腦屏幕上有什么內(nèi)容，大屏上就會(huì)顯示什么樣的內(nèi)容。如需上下滾動(dòng)時(shí)，滾動(dòng)條需要做隱藏處理。
大屏的類(lèi)別
可視化大屏可分為兩類(lèi)，一類(lèi)是拼接屏、另外一類(lèi)是LED屏。
拼接屏
拼接屏：是用相同比例尺寸的液晶顯示屏拼接而成。因?yàn)橛布墓逃刑匦裕ê谏吙颉惭b方式等），會(huì)有一定的縫隙和黑色邊框。通常用于數(shù)字指揮中心、展廳、大型展會(huì)等。
拼接的方式和現(xiàn)場(chǎng)需求有很大的關(guān)系，如下所示：
上圖是4*4的拼接屏，不同的場(chǎng)景下會(huì)有不同的拼接方法。不管拼接方法如何，輸出設(shè)計(jì)稿時(shí)方法是一致的。
大屏和電腦同比例設(shè)計(jì)
如電腦分辨率為1920px*1080px（16:9）時(shí)，推薦使用1920px*1080px。
當(dāng)電腦分辨率為3840px*2160px（4K 16:9）時(shí)，推薦使用3840px*2160px。
當(dāng)電腦是4K屏幕時(shí)，我們使用1920px*1080px（16:9）的設(shè)計(jì)尺寸是可以實(shí)現(xiàn)的，在最終使用時(shí)會(huì)感覺(jué)畫(huà)面的清晰度不夠。這是因?yàn)槌绦蜷_(kāi)發(fā)時(shí)使用1920px*1080px（16:9）適配了4K屏幕，同比例情況下放大了設(shè)計(jì)稿，再加上投放大屏?xí)r，畫(huà)質(zhì)損失會(huì)更明顯。
大多數(shù)屏幕的分辨率為1920px*1080px，如果按照上方拼接屏的排列順序，寬度1920px*4=7680px，高度1080px*4=4320px，最后得出分辨率為4320px*7680px（16:9）就是大屏的分辨率，如果以當(dāng)前分辨率作為設(shè)計(jì)分辨率就不合適，太大的分辨率會(huì)造成設(shè)計(jì)稿件時(shí)卡頓，CPU過(guò)載等一系列問(wèn)題。
同比例正常情況下設(shè)計(jì)稿以保持在4K內(nèi)為最佳，即3840px*2160px（16:9），在這個(gè)分辨率下既能保證操作的流暢度，又能保證視覺(jué)上的清晰度。
注：大分辨率時(shí)，字號(hào)要同比例放大。
【總結(jié)】當(dāng)大屏電腦比例一致時(shí)
大屏和電腦不同比例設(shè)計(jì)
同比例設(shè)計(jì)來(lái)看很舒服，下面我們來(lái)說(shuō)下不同比例，一般出現(xiàn)問(wèn)題，都是出在了不同比例的適配問(wèn)題上。
當(dāng)大屏和電腦屏比例不同時(shí)，請(qǐng)優(yōu)先保證大屏展示是正常的，這是首要級(jí)。
例如在一個(gè)4*7分辨率13440*4320（28:9）的拼接大屏上，按照電腦屏幕比例設(shè)計(jì)，最后的投屏結(jié)果如上圖所示，整個(gè)畫(huà)面會(huì)被拉伸和壓縮。
那我們應(yīng)該怎么做呢？
在一個(gè)4*7的拼接大屏，分辨率為13440*4320（28:9），這樣一塊大屏如何設(shè)置設(shè)計(jì)稿尺寸呢？
需求方的電腦一般都是1920*1080（16:9）的顯示屏，你不可能讓他們?nèi)ザㄖ埔粋€(gè)28:9的顯示屏。上面講過(guò)首要級(jí)是請(qǐng)優(yōu)先保證大屏展示是正常的，電腦上差點(diǎn)無(wú)關(guān)緊要。
順著這個(gè)思路，我們可以使用兩臺(tái)16:9的顯示器組合成一個(gè)32:9的屏幕，這個(gè)比例是最接近28:9的的，所以最為合適。
注：如果需求方有4K（16:9）的顯示屏，優(yōu)先使用4K屏，這樣顯示效果最佳。
理論上我們找到了最優(yōu)解決方案，但實(shí)際工作中卻是又不一樣，如果需求方一直使用的都是16:9的顯示屏投放在28:9的大屏上，你說(shuō)加個(gè)顯示器吧，如果需求方同意還好說(shuō)，如果不同意，項(xiàng)目也得進(jìn)行下去。還是上面講過(guò)的首要級(jí)是請(qǐng)優(yōu)先保證大屏展示是正常的，電腦上差點(diǎn)無(wú)關(guān)緊要。請(qǐng)記住我們的最終目的是大屏的完美呈現(xiàn)。
【總結(jié)】
大屏分辨率設(shè)計(jì)稿尺寸如何來(lái)計(jì)算
拼接屏的每一塊小屏分辨率一般為16:9，工作中我們可以把高度設(shè)置為2160px，寬高按照拼接屏的數(shù)量比例計(jì)算出尺寸。
例如3*6的一塊大屏上，高度3塊屏設(shè)為2160，每塊屏的高=2160÷3=720，每塊屏的寬度=720÷9×16=1280，3*6的大屏寬度=1280×6=7680。最后得出3*6大屏設(shè)計(jì)稿尺寸為：2160px*7680px
LED屏
LED屏：LED屏是現(xiàn)在可視化大屏中常見(jiàn)的硬件，他的設(shè)計(jì)尺寸計(jì)算方式和拼接屏有很大的區(qū)別，具體拼接方式會(huì)根據(jù)現(xiàn)場(chǎng)情況有所不同，拼接方式的不同會(huì)影響到設(shè)計(jì)尺寸的計(jì)算。
LED大屏是由若干小LED顯示模塊組成的，越小的點(diǎn)間距也意味著越高的清晰度。LED屏有很多種規(guī)格，各規(guī)格計(jì)算方式相同，我們用單體為500mm*500mm的作為標(biāo)準(zhǔn)計(jì)算，每個(gè)單體模塊像素點(diǎn)為128px*128px，如上圖所示，橫向12塊，豎向6塊。
橫向像素為：128*12=1536px，豎向像素為：128*6=768px。這里的設(shè)計(jì)稿尺寸為：1536px*768px，這里的尺寸定義規(guī)則和上述拼接屏相同，當(dāng)總體分辨率超過(guò)了4K像素時(shí)可等比例縮放至4K以下。另外一種情況，LED大屏有設(shè)置好的輸出像素值，按照其設(shè)計(jì)即可。
大屏字號(hào)設(shè)置問(wèn)題
都知道大屏的開(kāi)發(fā)是基于WEB端，網(wǎng)頁(yè)中最小字號(hào)為12px，如果項(xiàng)目中使用這個(gè)字號(hào)，在大屏幕中就會(huì)顯示很小。
因?yàn)榇笃恋钠聊缓艽?，人員要站在較遠(yuǎn)的地方才可以看到全部畫(huà)面，所以在字號(hào)上要相對(duì)大一些。對(duì)于一些非重要信息比如：圖標(biāo)刻度、裝飾性文字等，小一些也是影響不大的。
當(dāng)大屏比例較大時(shí)，字號(hào)也要相應(yīng)的加大，這樣信息呈現(xiàn)清洗可見(jiàn)。
設(shè)計(jì)師一定要去大屏投放現(xiàn)場(chǎng)，調(diào)研項(xiàng)目現(xiàn)場(chǎng)環(huán)境、人員位置，定義字號(hào)大小的運(yùn)用。要了解不同廠家顯示屏偏色情況，綜合各項(xiàng)信息才能呈現(xiàn)一個(gè)完美的可視化大屏。
【總結(jié)】
上面說(shuō)的是一些常規(guī)情況，還有一些其他投屏方式
電腦屏幕非直接投屏
在一些指揮大廳、會(huì)議室、展會(huì)、展廳上使用的較為廣泛，在實(shí)際場(chǎng)景中，會(huì)根據(jù)內(nèi)容需求產(chǎn)生不同的拼接方式，例如：3*3、3*6、3*9、2*4等各種不同組合，這種情況下一般不會(huì)采用屏幕直投的形式，甚至用不到電腦的顯示器，都是主機(jī)直接輸出給拼接屏現(xiàn)場(chǎng)調(diào)試。
這種過(guò)程基本是通過(guò)軟硬件配合完成最終實(shí)現(xiàn)大屏適配。電腦信號(hào)會(huì)通過(guò)軟件及硬件處理后對(duì)接到大屏。
這種情況下就不要考慮電腦屏幕和大屏都適配，沒(méi)必要。這種情況應(yīng)用最多的是小屏控制大屏的形式，設(shè)計(jì)時(shí)按照控制端（電腦屏）實(shí)際尺寸設(shè)計(jì)即可。
多臺(tái)主機(jī)同時(shí)投屏
通過(guò)多個(gè)信號(hào)源控制大屏的分屏，一個(gè)信號(hào)源鏈接一臺(tái)電腦，所以在設(shè)計(jì)的時(shí)候，一臺(tái)電腦的顯示器就是一個(gè)設(shè)計(jì)稿。這種情況通常會(huì)出現(xiàn)在非常寬的大屏上，過(guò)寬的大屏不適用寓多個(gè)顯示屏組合投屏，如下圖由6個(gè)信號(hào)源組成的大屏。
每一個(gè)信號(hào)源對(duì)應(yīng)一張?jiān)O(shè)計(jì)稿，N個(gè)信號(hào)源就是N張?jiān)O(shè)計(jì)稿。
大屏設(shè)計(jì)運(yùn)用越來(lái)越廣泛，它和APP一樣都需要考慮使用場(chǎng)景，不同于網(wǎng)頁(yè)設(shè)計(jì)，需要根據(jù)他的特性，定義設(shè)計(jì)流程及規(guī)范。相信認(rèn)真看完此文章，對(duì)于大屏可視化設(shè)計(jì)稿尺寸的定義有了一個(gè)清晰的認(rèn)識(shí)。
Powered by Froala Editor
16
作品
118
粉絲
0
關(guān)注
分享能獲取更多贊？
密碼登錄
大牛，別默默的看了，快登錄幫我點(diǎn)評(píng)一下吧！:)
登錄 立即注冊(cè)