致數(shù)據(jù)可視化設計師-設備篇詳解

各位數(shù)據(jù)可視化設計師們大家好础芍，鑒于平時有很多同學對我們的可視化大屏的設計知識點有很多不理解的地方汉额，阿勇決定花一些時間去詳細剖析一下關(guān)于這方面的知識，全部都是多年工作經(jīng)驗所得被冒，絕對有料军掂。

整個合輯一共有10篇文章，分別涉及到設備篇昨悼、風格篇蝗锥、字體篇、色彩篇率触、組件篇终议、布局篇、版式篇、視覺篇穴张、團隊篇细燎、技能篇十篇文章，具體的詳細的展開來講一講可視化大屏設計的知識點皂甘。（我自己命名為可視化設計十要素）

同時也會包含一些工作中的同學們問我的一些問題以及我搜集的一些問題玻驻，將會以問答的形式去給大家講一講，如有不對的地方偿枕，還請大家指出璧瞬，我們一起探討進步！

文章較長渐夸，請廣大讀者仔細閱讀嗤锉，基本涵蓋：設備信息，分辨率尺寸捺萌，大屏適配档冬，投屏事項膘茎，掌握本文可應對日程掖浚可視化設計設備方面的知識。

LED屏幕

政府大屏主要以點間距去區(qū)分屏幕的精細度披坏，點間距越小态坦，造價約昂貴；面積越大越整體棒拂，造價越高伞梯。離屏幕越近顆粒感越強，設計效果也就越不清晰帚屉，LED顯示屏表面不平整是導致LED顯示屏圖像失真的主要原因谜诫。LED顯示屏表面粗糙度的好壞主要取決于生產(chǎ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米惯退。

液晶拼接屏

拼接屏相比于點間距比較小的LED屏，價格方面會更便宜一點从藤，拼接屏設計時最主要就是拼縫的處理催跪，注意拼縫，設計時非必要情況下夷野，都要跳過拼縫懊蒸，尤其是“圓”這個造型。

拼接屏：46寸悯搔，55寸? 物理分辨率：1920*N 1080*N（n代表屏幕數(shù)量）

1.7mm骑丸、3.5mm 、0.88mm妒貌、0.44mm通危、無縫隙；企業(yè)常用（1.7mm 和3.5mm）

大屏拼接縫隙：設計時應盡量不要跨屏去設計灌曙，會使畫面交叉菊碟，不重疊，尤其是圓形在刺。

大屏拼接處理器

大屏拼接處理器主要功能是將一個完整的圖像信號劃分成N塊后分配給N個視頻顯示單元逆害，完成用多個普通視頻單元組成一個超大屏幕動態(tài)圖像顯示屏。大屏拼接處理器輸入信號數(shù)量和類型取決于用戶需要蚣驼，輸出信號數(shù)量等于顯示單元數(shù)量魄幕。

視頻矩陣處理器

矩陣是將多路輸入信號切換輸出到多個顯示設備，一般來說輸入信號數(shù)量要大于輸出信號數(shù)量颖杏。（我們想在9塊顯示器上同時監(jiān)控100個攝像頭傳來的信號纯陨，就用矩陣來實現(xiàn)即可）

視頻矩陣是指通過陣列切換的方法將m路視頻信號任意輸出至n路監(jiān)控設備上的電子裝置，一般情況下矩陣的輸入大于輸出即m>n输玷。有一些視頻矩陣也帶有音頻切換功能队丝，能將視頻和音頻信號進行同步切換，這種矩陣也叫做視音頻矩陣欲鹏。

模擬視頻矩陣的輸入設備：監(jiān)控攝像機机久、高速球、畫面處理器等很多個設備赔嚎，顯示終端一般監(jiān)視器膘盖，電視墻胧弛，拼接屏等（通常視頻矩陣輸入很多，一般幾十路到幾千路視頻侠畔，輸出比較少一般2-128個顯示器结缚；例如64進8出，128進16出软棺，512進32出红竭，1024進48出等）。

總結(jié)：矩陣只能負責信號的切換喘落，不能處理茵宪，不能做效果。大屏拼接處理器功能十分強大瘦棋，具備矩陣功能的同時稀火，還可以實現(xiàn)任意開窗、漫游赌朋、疊加凰狞、場景保存與輪換。

液晶拼接屏的優(yōu)勢 - 拼接處理器預設場景

4*2大屏展示端沛慢，我們通過控制端赡若，借由拼接處理器可以對大屏進行隨意開窗，漫游颠焦，疊加斩熊，畫中畫等效果。在控制端拖動布局伐庭，大屏會隨之改變布局，非常方便分冈。下面我就借由我以前做過的一個項目幫助大家理解一下拼接處理器的優(yōu)勢以及如何設定不同場景。

如果你們企業(yè)還在因為屏幕適配以及尺寸問題而糾結(jié)，或者想展示：開窗着绷，漫游颇玷，疊加，畫中畫等效果坡椒，毫無疑問你們應該選擇拼接處理器扰路，這比傳統(tǒng)投屏方式更合適，更沒有比例不對的困擾倔叼。

預設場景一

把控制端的分屏進行編號汗唱，接下來移動控制端對應的編號區(qū)塊，就可以對大屏進行重新布局丈攒，圖中展示的正是我們的預設正常場景哩罪。場景為居中布局授霸，左右兩側(cè)為圖表展示。

預設場景二：任意窗口布局

對控制端進行隨機布局际插，將主視覺模塊移動到左側(cè)四塊屏幕碘耳，圖表都集中在右側(cè)，由此我們就由預設場景的居中布局變成了左右布局框弛，左側(cè)為主視覺辛辨。

預設場景三：任意窗口漫游

可以隨意的關(guān)閉大屏某個模塊的漫游，通過控制端進行屏幕的顯示以及不顯示瑟枫。

預設場景四：任意窗口平移

畫面的任何一個模塊都是可以進行平移操作的愉阎，我們將模塊一和模塊五可以平移拖拽到任何一個位置。

預設場景五：任意窗口疊加

畫面的任何一個模塊都是可以進行疊加到屏幕任何一處力奋，還可以控制模塊置頂和置底榜旦，非常靈活。

WEB端大屏

基于web網(wǎng)頁端的展示方式景殷，通過在web開發(fā)溅呢，有需要時會投屏到大屏上去展示。設備比例一定不能差距過大猿挚，比如16:9的投屏到32:9的大屏就不是合適咐旧，解決方案可以是外接一塊1920的顯示器即可。

此處要注意web端演示時绩蜻，記得全屏顯示铣墨，瀏覽器邊框滑動條等可以不考慮，前端會做相應的瀏覽器細節(jié)考慮办绝，設計按正常分辨率走即可伊约。

觸摸屏

觸摸屏（Touch Panel）又稱為“觸控屏”、“觸控面板”孕蝉、“觸控臺“屡律，是一種可接收觸頭等輸入訊號的感應式液晶顯示裝置。

當接觸了屏幕上的圖形按鈕時降淮，屏幕上的觸覺反饋系統(tǒng)可根據(jù)預先編程的程式驅(qū)動各種連結(jié)裝置可用作控制端操作大屏超埋，原理等同于ipad控制，只是載體不同佳鳖。

設計規(guī)范以及按鍵反饋等交互體驗與ipad類似霍殴。

滑軌屏

滑軌互動屏系統(tǒng)——又稱為滑軌電視、滑軌播放等系吩，通過特殊設計的機械滑軌控制裝置来庭，結(jié)合高清液晶拼接幕墻，實現(xiàn)對屏幕內(nèi)容的互動控制淑玫〗硗螅滑動到不同位置屏幕展示相關(guān)信息面睛，包括圖片、文字尊搬、視頻等叁鉴，是一種全新的互動展示形式，可與觸摸同時使用佛寿。

虛擬沙盤

虛擬沙盤/數(shù)字沙盤就是用計算機通過投影儀或者LED大屏顯示屏動態(tài)/靜態(tài)三維顯示：智慧交通幌墓、智慧市政、智慧農(nóng)業(yè)冀泻、智慧物流常侣、智慧停車、智慧公交弹渔、智慧公安胳施、智慧交運等模型，這是一種高科技的模型操作員通過程序肢专，可以隨意調(diào)整沙盤的尺寸舞肆、規(guī)劃區(qū)域、區(qū)域布置博杖，快速展示多種全新的創(chuàng)意椿胯。

具有三維顯示效果，并可以從不同角度觀察創(chuàng)意模型剃根，篩選創(chuàng)意方案哩盲。注意虛擬沙盤和實體沙盤的聯(lián)動效果，實體沙盤為底狈醉，虛擬沙盤做效果疊加廉油。

分辨率：物理實際分辨率

Q：原本設計尺寸是1920*1080，使用場景是PC端舔糖，同時在大屏中展示娱两，尺寸為3840*1080，該如何適配金吗？

A：首先我們需要了解適配最主要的痛點就是：靈活，復用性高趣竣，可延展摇庙。

圍繞這幾個點我們可以通過模塊化開發(fā)去做，將每個模塊單獨開發(fā)遥缕。我們設計師做這種需求之前卫袒，就需要提前去構(gòu)思，在設計各模塊時单匣，盡量使用可擴展和可自適應的圖形夕凝，這樣面對適配的時候我們可以通過移動宝穗，縮放這些模塊，來完成適配码秉。盡量避免二次設計以及開發(fā)逮矛，提升時間成本。

圖形放大適配

圖形位移適配

Q：如果是16:9適配非32:9是否也是這么去適配的转砖？如果是特殊的形狀或比例該怎么適配须鼎？

A：我們適配一定要記住靈活，減少工作量這些原則府蔗，如果不遵循這些原則晋控，那么我們做適配的初衷就錯誤了。這樣我們還不如直接就重新開發(fā)一套了姓赤。就好比我們通過控制端去控制大屏赡译，如何用開發(fā)一套的時間去適配兩個甚至是多個終端，這是我們需要注意的不铆。當然考慮到一些實際情況蝌焚，會有一定程度上的修改，但是一定是要從節(jié)省工作量去出發(fā)的狂男。

場景一：拼接屏分辨率計算综看，已知某項目設備分辨率為寬高4*2拼接屏，設計稿我們該如何去定義分辨率岖食？分辨率又是多大红碑？

從命題我們可以看到4*2的拼接屏，我們可以通過一塊屏幕為1920*1080去計算泡垃，那么通過計算分辨率應該是1920*4 &1080*2析珊，也就是7680*2160，這樣就計算出我們的分辨率了蔑穴。

場景二：LED屏分辨率計算忠寻，已知某項目LED屏幕物理尺寸為寬15米，高4米存和，設備分辨率未知（可以支持4K或者2K輸出）奕剃，那么如何去制定分辨率？

工作中相信不少同學都遇到過這種只知物理尺寸而不知道分辨率的項目捐腿，那么我們只能通過計算大概的設計分辨率來出初期的設計稿件纵朋。

可能一：屏幕支持4K輸出，既然支持4K輸出茄袖，保證畫面輸出的清晰我們可以將設備的高度設定為2160

此場景下公式為：15/4=X/2160? ? X=8100? ? 那么可以大概得出寬度大概為8100像素（只是我們通過計算大概得出來的）

可能二：屏幕支持2K輸出

此場景下公式為：15/4=X/1080? ? X=4050?

重點來了操软，不要以為這樣就結(jié)束了，我一直強調(diào)的可視化設計師為什么一定要在現(xiàn)場宪祥，為的就是方便各種測試聂薪。剛才我們只是通過計算得出的大概數(shù)值家乘，此時我們可以在紙上畫一個正方形，并投到設備上藏澳，如圖仁锯。

結(jié)果一：如果正方形比例不變，設計尺寸無限接近于大屏實際比例笆载；

結(jié)果二：如果正方形比例被拉伸扑馁，設計尺寸小于大屏實際尺寸；

結(jié)果三：如果正方形比例被壓縮凉驻，設計尺寸大于大屏實際尺寸腻要。

此處圖片上主要是為了測試計算出來的分辨率究竟是拉伸還是被壓縮了，通過這樣的方式去測試設備大概的分辨率的大小比例涝登，在我們產(chǎn)出效果圖之后雄家，也可以投射設計圖的方式看看屏幕是否是完美適配，這種方法可以在未開發(fā)之前胀滚，盡可能確定屏幕對設計圖的影響趟济，從而避免對開發(fā)造成大規(guī)模修改。

注意：這樣做也只是在不知道設備分辨率的情況下咽笼，去大概計算設備分辨率顷编，僅供參考！

電腦直接投屏

使用場景：會議室剑刑，展廳等

等比例投屏媳纬，投屏電腦投到2*2大屏（4K）

投屏電腦支持輸出4K分辨率，投屏電腦分辨率以3840*2160作為設計施掏，投到4K拼接屏上钮惠，大屏會完美展示，并且畫面非常清晰七芭。

投屏電腦支持輸出2K分辨率素挽，投屏電腦分辨率以1920*1080作為設計，投到4K拼接屏上狸驳，只會以1920*1080進行輸出预明，因為輸出像素只能支持2K，也只是1920*1080的放大耙箍。

此處需要了解兩個概念：輸出像素和顯示像素贮庞，輸出像素指的的是投屏電腦的最大支持分辨率，顯示像素就是我們大屏的支持的最大分辨率究西。

我們實際項目中最好以顯示像素的尺寸進行設計（就是以大屏尺寸為主），但是也要看輸出設備的像素大小物喷。

硬件投屏本地運行

使用場景：科技展廳卤材，以及一些帶主機的設備遮斥。

此種情況，一般我們的大屏會自帶主機扇丛，大屏本身就可以看成一個顯示器非常大的電腦术吗。我們?nèi)绻枰M行可視化演示，那么我們直接就可以通過顯示器的尺寸去做設計帆精，這樣就是大屏的設計尺寸较屿。

一般這種靠硬件的投射，都是在拼接處理器的處理下卓练，將多個屏幕拼合成一個大的顯示器隘蝎，再通過拼控系統(tǒng)（硬件投屏）進行輸出。

一般我們可以將我們大屏的（UE4或者U3D開發(fā)）應用程序打包襟企，打包成一個后綴為.exe的應用程序嘱么，在大屏電腦上直接點擊，程序就可以在大屏上完美的跑起來顽悼，也不需要去進行電腦投射大屏曼振。

控制端操控大屏

如果通過控制端去控制大屏，那么投射設備就可以通過多種方式去展示了蔚龙，可以是手機冰评，平板，觸摸屏木羹，手勢控制甲雅，體感控制等等。

這種情況下投射設備的尺寸就按照本身設備的規(guī)范去設計就可以了（比如750*1334汇跨，2048*1536）务荆，設計尺寸就是我們大屏本身的分辨率就可以了。

多主機多信號投屏

此種情況主要使用場景：屏幕寬度非常高穷遂，并且內(nèi)容可以分很多模塊展示函匕，模塊彼此之間不受影響獨立展示，這種情況下我們就可以通過此種方式去投屏蚪黑。

通過多個主機分別去投射大屏的同等大小區(qū)域盅惜，比如圖中的場景模塊被我分成了四等份，我們就可以通過四臺主機去分別投射四個模塊忌穿，形成一個完整的大屏抒寂。

此種大屏設計尺寸我們以輸出設備的尺寸為主要參考，四臺主機那么整體寬度就是1920*4=7680掠剑，高度就是1080（如果設備支持4k輸出屈芜，那么提升相應的設備尺寸*2就可以了）。

不同比例投屏及解決方案

Q：如果遇到一個設備是16:9，投屏到一個20:3比例的大屏幕井佑，?那我設計尺寸以16:9属铁，還是20:3？

A：我們要記住躬翁，如果面對的是正常比例投屏到非等比的大屏焦蘑，我們需要遵守的規(guī)范一定是：一切以大屏展示為主。所以我們設計尺寸一定是按照20:3來設計的盒发，大屏展示正常才是我們的唯一標準例嘱，投屏電腦可能會出現(xiàn)的問題，我們只能妥協(xié)（投屏電腦可能只能展示很小的一部分宁舰，但也是沒有辦法的）

那么我們遇到這種是否就沒有辦法了呢拼卵？在這阿勇給大家提供了三種解決辦法，在實際工作中明吩，我也遇到過這種問題间学，所以在這給大家分享一下。

方案一：外接顯示器（外接多個顯示器印荔，一般主機可以另外外接四個顯示器低葫，這樣就可以解決投屏電腦顯示不全的問題了）

方案二：采用拼控系統(tǒng)，而不是用純粹的設備投屏（拼控系統(tǒng)完美解決了尺寸不一致的難點）

方案三：設計兩稿仍律，16:9嘿悬，20:3我們都去做設計（做兩套系統(tǒng)，相當于做的適配）

Q：請教大家一個問題水泉，電腦的分辨率是3840*2160善涨，單個大屏的分辨率是1920*1080，拼9*6的大屏草则，設計尺寸該設置多少案峙　？這樣設計尺寸會不會太大了炕横，如何優(yōu)化這個設計稿尺寸源内？

A：前面的文章我們已經(jīng)介紹過拼接屏的尺寸的問題，這個問題的解答：1920*9/1080*6 份殿，這個就是設計分辨率膜钓，通過計算得出，最終設計稿尺寸為17280*6480卿嘲∷绦保可以看出設計分辨率確實太大了，設計的時候如何去優(yōu)化設計尺寸呢拾枣？

通過命題我們可以看出電腦分辨率是支持4K的沃疮，就是說輸出分辨率和顯示分辨率我們都是可以上4K的，而4K的分辨率一般會做3840*2160，再結(jié)合設計稿尺寸17280*6480忿磅，可以將整個效果圖尺寸縮小三倍糯彬，也就是5760*2160。設計可以按照這個分辨率去出圖葱她，最終交付給開發(fā)的就是切三倍圖，并提示開發(fā)是縮小三倍做的似扔。

總結(jié)：不管在面對什么尺寸的設計吨些，都要記住，萬變不離其中炒辉，一切以大屏完美展示為準則豪墅，所有的一切都是要在大屏上觀看，為了完美展示效果黔寇，投屏電腦偶器，設備控制等頁面可以做適當?shù)淖尣健?/b>

全篇知識點

通過以上的知識點總結(jié)，不知道大家對于數(shù)據(jù)可視化大屏設計是否有了新的認識缝裤，數(shù)據(jù)可視化對于設備的尺寸屏轰，設備的信息，以及投屏注意事項憋飞，都要有更多的了解才可以霎苗。下圖就是總結(jié)本篇文章的知識點。

寫作不易榛做，請大家點個贊吧Ｑ湔怠！检眯！也歡迎大家跟我一起交流數(shù)據(jù)可視化＠謇蕖！锰瘸！

我是阿勇刽严，專注數(shù)據(jù)可視化設計

BY AYONG BDR

下期《風格篇》