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