2022-6-14 博博
各位數(shù)據(jù)可視化設(shè)計(jì)師們大家好,鑒于平時(shí)有很多同學(xué)對(duì)我們的可視化大屏的設(shè)計(jì)知識(shí)點(diǎn)有很多不理解的地方,阿勇決定花一些時(shí)間去詳細(xì)剖析一下關(guān)于這方面的知識(shí),全部都是多年工作經(jīng)驗(yàn)所得,絕對(duì)有料。
整個(gè)合輯一共有 10 篇文章,分別涉及到設(shè)備篇、風(fēng)格篇、字體篇、色彩篇、組件篇、布局篇、版式篇、視覺篇、團(tuán)隊(duì)篇、技能篇十篇文章,具體展開來(lái)講一講可視化大屏設(shè)計(jì)的知識(shí)點(diǎn)。(我命名為可視化設(shè)計(jì)十要素)
同時(shí)也會(huì)包含 同學(xué)們問(wèn)我的問(wèn)題以及我搜集的問(wèn)題,將會(huì)以問(wèn)答的形式去給大家講一講,如有不對(duì)的地方,還請(qǐng)大家指出,我們一起探討進(jìn)步!
文章較長(zhǎng),請(qǐng)仔細(xì)閱讀,基本涵蓋:設(shè)備信息,分辨率尺寸,大屏適配,投屏事項(xiàng),掌握本文可應(yīng)對(duì)日常可視化設(shè)計(jì)設(shè)備方面的知識(shí)。
1. LED 屏幕
政府大屏主要以點(diǎn)間距去區(qū)分屏幕的精細(xì)度,點(diǎn)間距越小,造價(jià)約昂貴;面積越大越整體,造價(jià)越高。離屏幕越近顆粒感越強(qiáng),設(shè)計(jì)效果也就越不清晰,LED 顯示屏表面不平整是導(dǎo)致 LED 顯示屏圖像失真的主要原因。LED 顯示屏表面粗糙度的好壞主要取決于生產(chǎn)工藝。
屏幕介紹:按照不同點(diǎn)間距進(jìn)行分類,P1.25、P2.5、P3、P4、P5、P6、P8、P10、P12、P20(間距越小,圖像越清晰,價(jià)格也越高,一般政府 led 屏基本都在 P1.25-P6 之間)。
最佳視距=像素間距/(0.3~0.8),這是一個(gè)近似范圍。如 LED 顯示屏 P16mm,最佳視距為 20~54 米。
2. 液晶拼接屏
拼接屏相比于點(diǎn)間距比較小的 LED 屏,價(jià)格方面會(huì)更便宜一點(diǎn),拼接屏設(shè)計(jì)時(shí)最主要就是拼縫的處理,注意拼縫,設(shè)計(jì)時(shí)非必要情況下,都要跳過(guò)拼縫,尤其是“圓”這個(gè)造型。
拼接屏:46 寸,55 寸 物理分辨率:1920*N 1080*N(n 代表屏幕數(shù)量),1.7mm、3.5mm、0.88mm、0.44mm、無(wú)縫隙;企業(yè)常用(1.7mm 和 3.5mm)
大屏拼接縫隙:設(shè)計(jì)時(shí)應(yīng)盡量不要跨屏去設(shè)計(jì),會(huì)使畫面交叉,不重疊,尤其是圓形。
3. 大屏拼接處理器
大屏拼接處理器主要功能是將一個(gè)完整的圖像信號(hào)劃分成 N 塊后分配給 N 個(gè)視頻顯示單元,完成用多個(gè)普通視頻單元組成一個(gè)超大屏幕動(dòng)態(tài)圖像顯示屏。大屏拼接處理器輸入信號(hào)數(shù)量和類型取決于用戶需要,輸出信號(hào)數(shù)量等于顯示單元數(shù)量。
4. 視頻矩陣處理器
矩陣是將多路輸入信號(hào)切換輸出到多個(gè)顯示設(shè)備,一般來(lái)說(shuō)輸入信號(hào)數(shù)量要大于輸出信號(hào)數(shù)量。(我們想在 9 塊顯示器上同時(shí)監(jiān)控 100 個(gè)攝像頭傳來(lái)的信號(hào),就用矩陣來(lái)實(shí)現(xiàn)即可)
視頻矩陣是指通過(guò)陣列切換的方法將 m 路視頻信號(hào)任意輸出至 n 路監(jiān)控設(shè)備上的電子裝置,一般情況下矩陣的輸入大于輸出即 m>n。有一些視頻矩陣也帶有音頻切換功能,能將視頻和音頻信號(hào)進(jìn)行同步切換,這種矩陣也叫做視音頻矩陣。
模擬視頻矩陣的輸入設(shè)備:監(jiān)控?cái)z像機(jī)、高速球、畫面處理器等很多個(gè)設(shè)備,顯示終端一般為監(jiān)視器,電視墻,拼接屏等(通常視頻矩陣輸入很多,一般幾十路到幾千路視頻,輸出比較少一般 2-128 個(gè)顯示器;例如 64 進(jìn) 8 出,128 進(jìn) 16 出,512 進(jìn) 32 出,1024 進(jìn) 48 出等)。
總結(jié):矩陣只能負(fù)責(zé)信號(hào)的切換,不能處理,不能做效果。大屏拼接處理器功能十分強(qiáng)大,具備矩陣功能的同時(shí),還可以實(shí)現(xiàn)任意開窗、漫游、疊加、場(chǎng)景保存與輪換。
5. 液晶拼接屏的優(yōu)勢(shì) – 拼接處理器預(yù)設(shè)場(chǎng)景
4*2 大屏展示端,我們通過(guò)控制端,借由拼接處理器可以對(duì)大屏進(jìn)行隨意開窗,漫游,疊加,畫中畫等效果。在控制端拖動(dòng)布局,大屏?xí)S之改變布局,非常方便。下面我就借由我以前做過(guò)的一個(gè)項(xiàng)目幫助大家理解一下拼接處理器的優(yōu)勢(shì)以及如何設(shè)定不同場(chǎng)景。
如果你們企業(yè)還在因?yàn)槠聊贿m配以及尺寸問(wèn)題而糾結(jié),或者想展示:開窗,漫游,疊加,畫中畫等效果,毫無(wú)疑問(wèn)你們應(yīng)該選擇拼接處理器,這比傳統(tǒng)投屏方式更合適,更沒有比例不對(duì)的困擾。
預(yù)設(shè)場(chǎng)景一:
把控制端的分屏進(jìn)行編號(hào),接下來(lái)移動(dòng)控制端對(duì)應(yīng)的編號(hào)區(qū)塊,就可以對(duì)大屏進(jìn)行重新布局,圖中展示的正是我們的預(yù)設(shè)正常場(chǎng)景。場(chǎng)景為居中布局,左右兩側(cè)為圖表展示。
預(yù)設(shè)場(chǎng)景二:任意窗口布局
對(duì)控制端進(jìn)行隨機(jī)布局,將主視覺模塊移動(dòng)到左側(cè)四塊屏幕,圖表都集中在右側(cè),由此我們就由預(yù)設(shè)場(chǎng)景的居中布局變成了左右布局,左側(cè)為主視覺。
預(yù)設(shè)場(chǎng)景三:任意窗口漫游
可以隨意的關(guān)閉大屏某個(gè)模塊的漫游,通過(guò)控制端進(jìn)行屏幕的顯示以及不顯示。
預(yù)設(shè)場(chǎng)景四:任意窗口平移
畫面的任何一個(gè)模塊都是可以進(jìn)行平移操作的,我們將模塊一和模塊五可以平移拖拽到任何一個(gè)位置。
預(yù)設(shè)場(chǎng)景五:任意窗口疊加
畫面的任何一個(gè)模塊都是可以進(jìn)行疊加到屏幕任何一處,還可以控制模塊置頂和置底,非常靈活。
6. WEB 端大屏
基于 web 網(wǎng)頁(yè)端的展示方式,通過(guò)在 web 開發(fā),有需要時(shí)會(huì)投屏到大屏上去展示。設(shè)備比例一定不能差距過(guò)大,比如 16:9 的投屏到 32:9 的大屏就不是合適,解決方案可以是外接一塊 1920 的顯示器即可。
此處要注意 web 端演示時(shí),記得全屏顯示,瀏覽器邊框滑動(dòng)條等可以不考慮,前端會(huì)做相應(yīng)的瀏覽器細(xì)節(jié)考慮,設(shè)計(jì)按正常分辨率即可。
7. 觸摸屏
觸摸屏(Touch Panel)又稱為“觸控屏”、“觸控面板”、“觸控臺(tái)“,是一種可接收觸頭等輸入訊號(hào)的感應(yīng)式液晶顯示裝置。
當(dāng)接觸了屏幕上的圖形按鈕時(shí),屏幕上的觸覺反饋系統(tǒng)可根據(jù)預(yù)先編程的程式驅(qū)動(dòng)各種連結(jié)裝置可用作控制端操作大屏,原理等同于 iPad 控制,只是載體不同。
設(shè)計(jì)規(guī)范以及按鍵反饋等交互體驗(yàn)與 iPad 類似。
8. 滑軌屏
滑軌互動(dòng)屏系統(tǒng)——又稱為滑軌電視、滑軌播放等,通過(guò)特殊設(shè)計(jì)的機(jī)械滑軌控制裝置,結(jié)合高清液晶拼接幕墻,實(shí)現(xiàn)對(duì)屏幕內(nèi)容的互動(dòng)控制?;瑒?dòng)到不同位置屏幕展示相關(guān)信息,包括圖片、文字、視頻等,是一種全新的互動(dòng)展示形式,可與觸摸同時(shí)使用。
9. 虛擬沙盤
虛擬沙盤/數(shù)字沙盤就是用計(jì)算機(jī)通過(guò)投影儀或者 LED 大屏顯示屏動(dòng)態(tài)/靜態(tài)三維顯示:智慧交通、智慧市政、智慧農(nóng)業(yè)、智慧物流、智慧停車、智慧公交、智慧公安、智慧交運(yùn)等模型,這是一種高科技的模型操作員通過(guò)程序,可以隨意調(diào)整沙盤的尺寸、規(guī)劃區(qū)域、區(qū)域布置,快速展示多種全新的創(chuàng)意。
具有三維顯示效果,并可以從不同角度觀察創(chuàng)意模型,篩選創(chuàng)意方案。注意虛擬沙盤和實(shí)體沙盤的聯(lián)動(dòng)效果,實(shí)體沙盤為底,虛擬沙盤做效果疊加。
分辨率:物理實(shí)際分辨率
Q:原本設(shè)計(jì)尺寸是 1920*1080,使用場(chǎng)景是 PC 端,同時(shí)在大屏中展示,尺寸為 3840*1080,該如何適配?
A:首先我們需要了解適配最主要的痛點(diǎn)就是:靈活,復(fù)用性高,可延展。
圍繞這幾個(gè)點(diǎn)我們可以通過(guò)模塊化開發(fā)去做,將每個(gè)模塊單獨(dú)開發(fā)。我們?cè)O(shè)計(jì)師做這種需求之前,就需要提前去構(gòu)思,在設(shè)計(jì)各模塊時(shí),盡量使用可擴(kuò)展和可自適應(yīng)的圖形,這樣面對(duì)適配的時(shí)候我們可以通過(guò)移動(dòng),縮放這些模塊,來(lái)完成適配。盡量避免二次設(shè)計(jì)以及開發(fā),提升時(shí)間成本。
圖形放大適配:
圖形位移適配:
Q:如果是 16:9 適配非 32:9 是否也是這么去適配的?如果是特殊的形狀或比例該怎么適配?
A:我們適配一定要記住靈活,減少工作量這些原則,如果不遵循這些原則,那么我們做適配的初衷就錯(cuò)誤了。這樣我們還不如直接就重新開發(fā)一套了。就好比我們通過(guò)控制端去控制大屏,如何用開發(fā)一套的時(shí)間去適配兩個(gè)甚至是多個(gè)終端,這是我們需要注意的。當(dāng)然考慮到一些實(shí)際情況,會(huì)有一定程度上的修改,但是一定是要從節(jié)省工作量去出發(fā)的。
場(chǎng)景一:拼接屏分辨率計(jì)算,已知某項(xiàng)目設(shè)備分辨率為寬高 4*2 拼接屏,設(shè)計(jì)稿我們?cè)撊绾稳ザx分辨率?分辨率又是多大?
從命題我們可以看到 4*2 的拼接屏,我們可以通過(guò)一塊屏幕為 1920*1080 去計(jì)算,那么通過(guò)計(jì)算分辨率應(yīng)該是 1920*4 &1080*2,也就是 7680*2160,這樣就計(jì)算出我們的分辨率了。
場(chǎng)景二:LED 屏分辨率計(jì)算,已知某項(xiàng)目 LED 屏幕物理尺寸為寬 15 米,高 4 米,設(shè)備分辨率未知(可以支持 4K 或者 2K 輸出),那么如何去制定分辨率?
工作中相信不少同學(xué)都遇到過(guò)這種只知物理尺寸而不知道分辨率的項(xiàng)目,那么我們只能通過(guò)計(jì)算大概的設(shè)計(jì)分辨率來(lái)出初期的設(shè)計(jì)稿件。
可能一:屏幕支持 4K 輸出,既然支持 4K 輸出,保證畫面輸出的清晰我們可以將設(shè)備的高度設(shè)定為 2160
此場(chǎng)景下公式為:15/4=X/2160 X=8100 那么可以大概得出寬度大概為 8100 像素(只是我們通過(guò)計(jì)算大概得出來(lái)的)
可能二:屏幕支持 2K 輸出
此場(chǎng)景下公式為:15/4=X/1080 X=4050
重點(diǎn)來(lái)了,不要以為這樣就結(jié)束了,我一直強(qiáng)調(diào)的可視化設(shè)計(jì)師為什么一定要在現(xiàn)場(chǎng),為的就是方便各種測(cè)試。剛才我們只是通過(guò)計(jì)算得出的大概數(shù)值,此時(shí)我們可以在紙上畫一個(gè)正方形,并投到設(shè)備上,如圖。
此處圖片上主要是為了測(cè)試計(jì)算出來(lái)的分辨率究竟是拉伸還是被壓縮了,通過(guò)這樣的方式去測(cè)試設(shè)備大概的分辨率的大小比例,在我們產(chǎn)出效果圖之后,也可以投射設(shè)計(jì)圖的方式看看屏幕是否是完美適配,這種方法可以在未開發(fā)之前,盡可能確定屏幕對(duì)設(shè)計(jì)圖的影響,從而避免對(duì)開發(fā)造成大規(guī)模修改。
注意:這樣做也只是在不知道設(shè)備分辨率的情況下,去大概計(jì)算設(shè)備分辨率,僅供參考!
使用場(chǎng)景:會(huì)議室,展廳等
等比例投屏,投屏電腦投到 2*2 大屏(4K)
投屏電腦支持輸出 4K 分辨率,投屏電腦分辨率以 3840*2160 作為設(shè)計(jì),投到 4K 拼接屏上,大屏?xí)昝勒故?,并且畫面非常清晰?
投屏電腦支持輸出 2K 分辨率,投屏電腦分辨率以 1920*1080 作為設(shè)計(jì),投到 4K 拼接屏上,只會(huì)以 1920*1080 進(jìn)行輸出,因?yàn)檩敵鱿袼刂荒苤С?2K,也只是 1920*1080 的放大。
此處需要了解兩個(gè)概念:輸出像素和顯示像素,輸出像素指的是投屏電腦的最大支持分辨率,顯示像素就是我們大屏的支持的最大分辨率。
我們實(shí)際項(xiàng)目中最好以顯示像素的尺寸進(jìn)行設(shè)計(jì)(就是以大屏尺寸為主),但是也要看輸出設(shè)備的像素大小。
使用場(chǎng)景:科技展廳,以及一些帶主機(jī)的設(shè)備。
此種情況,一般我們的大屏?xí)詭е鳈C(jī),大屏本身就可以看成一個(gè)顯示器非常大的電腦。我們?nèi)绻枰M(jìn)行可視化演示,那么我們直接就可以通過(guò)顯示器的尺寸去做設(shè)計(jì),這樣就是大屏的設(shè)計(jì)尺寸。
一般這種靠硬件的投射,都是在拼接處理器的處理下,將多個(gè)屏幕拼合成一個(gè)大的顯示器,再通過(guò)拼控系統(tǒng)(硬件投屏)進(jìn)行輸出。
一般我們可以將我們大屏的(UE4 或者 U3D 開發(fā))應(yīng)用程序打包,打包成一個(gè)后綴為.exe 的應(yīng)用程序,在大屏電腦上直接點(diǎn)擊,程序就可以在大屏上完美的跑起來(lái),也不需要去進(jìn)行電腦投射大屏。
如果通過(guò)控制端去控制大屏,那么投射設(shè)備就可以通過(guò)多種方式去展示了,可以是手機(jī)、平板、觸摸屏、手勢(shì)控制、體感控制等等。
這種情況下投射設(shè)備的尺寸就按照本身設(shè)備的規(guī)范去設(shè)計(jì)就可以了(比如 750*1334,2048*1536),設(shè)計(jì)尺寸就是我們大屏本身的分辨率就可以了。
此種情況主要使用場(chǎng)景:屏幕寬度非常高,并且內(nèi)容可以分很多模塊展示,模塊彼此之間不受影響?yīng)毩⒄故荆@種情況下我們就可以通過(guò)此種方式去投屏。通過(guò)多個(gè)主機(jī)分別去投射大屏的同等大小區(qū)域,比如圖中的場(chǎng)景模塊被我分成了四等份,我們就可以通過(guò)四臺(tái)主機(jī)去分別投射四個(gè)模塊,形成一個(gè)完整的大屏。
此種大屏設(shè)計(jì)尺寸我們以輸出設(shè)備的尺寸為主要參考,四臺(tái)主機(jī)那么整體寬度就是 1920*4=7680,高度就是 1080(如果設(shè)備支持 4k 輸出,那么提升相應(yīng)的設(shè)備尺寸*2 就可以了)。
Q:如果遇到一個(gè)設(shè)備是 16:9,投屏到一個(gè) 20:3 比例的大屏幕, 那我設(shè)計(jì)尺寸以 16:9,還是 20:3?
A:我們要記住,如果面對(duì)的是正常比例投屏到非等比的大屏,我們需要遵守的規(guī)范一定是:一切以大屏展示為主。所以我們?cè)O(shè)計(jì)尺寸一定是按照 20:3 來(lái)設(shè)計(jì)的,大屏展示正常才是我們的唯一標(biāo)準(zhǔn),投屏電腦可能會(huì)出現(xiàn)的問(wèn)題,我們只能妥協(xié)(投屏電腦可能只能展示很小的一部分,但也是沒有辦法的)
那么我們遇到這種是否就沒有辦法了呢?在這阿勇給大家提供了三種解決辦法,在實(shí)際工作中,我也遇到過(guò)這種問(wèn)題,所以在這給大家分享一下。
方案一:外接顯示器(外接多個(gè)顯示器,一般主機(jī)可以另外外接四個(gè)顯示器,這樣就可以解決投屏電腦顯示不全的問(wèn)題了)
方案二:采用拼控系統(tǒng),而不是用純粹的設(shè)備投屏(拼控系統(tǒng)完美解決了尺寸不一致的難點(diǎn))
方案三:設(shè)計(jì)兩稿,16:9,20:3 我們都去做設(shè)計(jì)(做兩套系統(tǒng),相當(dāng)于做的適配)
Q:請(qǐng)教大家一個(gè)問(wèn)題,電腦的分辨率是 3840*2160,單個(gè)大屏的分辨率是 1920*1080,拼 9*6 的大屏,設(shè)計(jì)尺寸該設(shè)置多少???這樣設(shè)計(jì)尺寸會(huì)不會(huì)太大了,如何優(yōu)化這個(gè)設(shè)計(jì)稿尺寸?
A:前面的文章我們已經(jīng)介紹過(guò)拼接屏的尺寸的問(wèn)題,這個(gè)問(wèn)題的解答:1920*9/1080*6,這個(gè)就是設(shè)計(jì)分辨率,通過(guò)計(jì)算得出,最終設(shè)計(jì)稿尺寸為 17280*6480。可以看出設(shè)計(jì)分辨率確實(shí)太大了,設(shè)計(jì)的時(shí)候如何去優(yōu)化設(shè)計(jì)尺寸呢?
通過(guò)命題我們可以看出電腦分辨率是支持 4K 的,就是說(shuō)輸出分辨率和顯示分辨率我們都是可以上 4K 的,而 4K 的分辨率一般會(huì)做 3840*2160,再結(jié)合設(shè)計(jì)稿尺寸 17280*6480,可以將整個(gè)效果圖尺寸縮小三倍,也就 5760*2160。設(shè)計(jì)可以按照這個(gè)分辨率去出圖,最終交付給開發(fā)的就是切三倍圖,并提示開發(fā)是縮小三倍做的。
總結(jié):不管在面對(duì)什么尺寸的設(shè)計(jì),都要記住,萬(wàn)變不離其宗,一切以大屏完美展示為準(zhǔn)則,所有的一切都是要在大屏上觀看,為了完美展示,投屏電腦,設(shè)備控制等頁(yè)面可以適當(dāng)?shù)淖尣健?
通過(guò)以上的知識(shí)點(diǎn)總結(jié),不知道大家對(duì)于數(shù)據(jù)可視化大屏設(shè)計(jì)是否有了新的認(rèn)識(shí),數(shù)據(jù)可視化對(duì)于設(shè)備的尺寸,設(shè)備的信息,以及投屏注意事項(xiàng),都要有更多的了解才可以。下圖就是總結(jié)本篇文章的知識(shí)點(diǎn)。
轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
更多精彩文章:大數(shù)據(jù)可視化界面設(shè)計(jì)之一:可視化大屏設(shè)計(jì)快速入門指南
大數(shù)據(jù)可視化界面設(shè)計(jì)之九:超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:設(shè)備篇
大數(shù)據(jù)可視化界面設(shè)計(jì)之十:數(shù)據(jù)可視化必修課:表格篇