2024-6-21 濤濤
合輯一共有10篇文章，分別涉及到設(shè)備篇、風(fēng)格篇、字體篇、色彩篇、組件篇、布局篇、版式篇、視覺(jué)篇、團(tuán)隊(duì)篇、技能篇十篇文章。
各位數(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)格篇、字體篇、色彩篇、組件篇、布局篇、版式篇、視覺(jué)篇、團(tuán)隊(duì)篇、技能篇十篇文章，具體的詳細(xì)的展開(kāi)來(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í)。
政府大屏主要以點(diǎn)間距去區(qū)分屏幕的精細(xì)度，點(diǎn)間距越小，造價(jià)約昂貴；面積越大越整體，造價(jià)越高。離屏幕越近顆粒感越強(qiáng)，設(shè)計(jì)效果也就越不清晰，LED顯示屏表面不平整是導(dǎo)致LED顯示屏圖像失真的主要原因。LED顯示屏表面粗糙度的好壞主要取決于生產(chǎn)工藝。
拼接屏相比于點(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ì)使畫(huà)面交叉，不重疊，尤其是圓形。
大屏拼接處理器主要功能是將一個(gè)完整的圖像信號(hào)劃分成N塊后分配給N個(gè)視頻顯示單元，完成用多個(gè)普通視頻單元組成一個(gè)超大屏幕動(dòng)態(tài)圖像顯示屏。大屏拼接處理器輸入信號(hào)數(shù)量和類(lèi)型取決于用戶(hù)需要，輸出信號(hào)數(shù)量等于顯示單元數(shù)量。
矩陣是將多路輸入信號(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ī)、高速球、畫(huà)面處理器等很多個(gè)設(shè)備，顯示終端一般監(jiān)視器，電視墻，拼接屏等（通常視頻矩陣輸入很多，一般幾十路到幾千路視頻，輸出比較少一般2-128個(gè)顯示器；例如64進(jìn)8出，128進(jìn)16出，512進(jìn)32出，1024進(jìn)48出等）。
4*2大屏展示端，我們通過(guò)控制端，借由拼接處理器可以對(duì)大屏進(jìn)行隨意開(kāi)窗，漫游，疊加，畫(huà)中畫(huà)等效果。在控制端拖動(dòng)布局，大屏?xí)S之改變布局，非常方便。下面我就借由我以前做過(guò)的一個(gè)項(xiàng)目幫助大家理解一下拼接處理器的優(yōu)勢(shì)以及如何設(shè)定不同場(chǎng)景。
如果你們企業(yè)還在因?yàn)槠聊贿m配以及尺寸問(wèn)題而糾結(jié)，或者想展示：開(kāi)窗，漫游，疊加，畫(huà)中畫(huà)等效果，毫無(wú)疑問(wèn)你們應(yīng)該選擇拼接處理器，這比傳統(tǒng)投屏方式更合適，更沒(méi)有比例不對(duì)的困擾。
把控制端的分屏進(jìn)行編號(hào)，接下來(lái)移動(dòng)控制端對(duì)應(yīng)的編號(hào)區(qū)塊，就可以對(duì)大屏進(jìn)行重新布局，圖中展示的正是我們的預(yù)設(shè)正常場(chǎng)景。場(chǎng)景為居中布局，左右兩側(cè)為圖表展示。
對(duì)控制端進(jìn)行隨機(jī)布局，將主視覺(jué)模塊移動(dòng)到左側(cè)四塊屏幕，圖表都集中在右側(cè)，由此我們就由預(yù)設(shè)場(chǎng)景的居中布局變成了左右布局，左側(cè)為主視覺(jué)。
可以隨意的關(guān)閉大屏某個(gè)模塊的漫游，通過(guò)控制端進(jìn)行屏幕的顯示以及不顯示。
畫(huà)面的任何一個(gè)模塊都是可以進(jìn)行平移操作的，我們將模塊一和模塊五可以平移拖拽到任何一個(gè)位置。
畫(huà)面的任何一個(gè)模塊都是可以進(jìn)行疊加到屏幕任何一處，還可以控制模塊置頂和置底，非常靈活。
基于web網(wǎng)頁(yè)端的展示方式，通過(guò)在web開(kāi)發(fā)，有需要時(shí)會(huì)投屏到大屏上去展示。設(shè)備比例一定不能差距過(guò)大，比如16:9的投屏到32:9的大屏就不是合適，解決方案可以是外接一塊1920的顯示器即可。
此處要注意web端演示時(shí)，記得全屏顯示，瀏覽器邊框滑動(dòng)條等可以不考慮，前端會(huì)做相應(yīng)的瀏覽器細(xì)節(jié)考慮，設(shè)計(jì)按正常分辨率走即可。
觸摸屏（Touch Panel）又稱(chēng)為“觸控屏”、“觸控面板”、“觸控臺(tái)“，是一種可接收觸頭等輸入訊號(hào)的感應(yīng)式液晶顯示裝置。
當(dāng)接觸了屏幕上的圖形按鈕時(shí)，屏幕上的觸覺(jué)反饋系統(tǒng)可根據(jù)預(yù)先編程的程式驅(qū)動(dòng)各種連結(jié)裝置可用作控制端操作大屏，原理等同于ipad控制，只是載體不同。
設(shè)計(jì)規(guī)范以及按鍵反饋等交互體驗(yàn)與ipad類(lèi)似。
滑軌互動(dòng)屏系統(tǒng)——又稱(chēng)為滑軌電視、滑軌播放等，通過(guò)特殊設(shè)計(jì)的機(jī)械滑軌控制裝置，結(jié)合高清液晶拼接幕墻，實(shí)現(xiàn)對(duì)屏幕內(nèi)容的互動(dòng)控制。滑動(dòng)到不同位置屏幕展示相關(guān)信息，包括圖片、文字、視頻等，是一種全新的互動(dòng)展示形式，可與觸摸同時(shí)使用。
虛擬沙盤(pán)/數(shù)字沙盤(pán)就是用計(jì)算機(jī)通過(guò)投影儀或者LED大屏顯示屏動(dòng)態(tài)/靜態(tài)三維顯示：智慧交通、智慧市政、智慧農(nóng)業(yè)、智慧物流、智慧停車(chē)、智慧公交、智慧公安、智慧交運(yùn)等模型，這是一種高科技的模型操作員通過(guò)程序，可以隨意調(diào)整沙盤(pán)的尺寸、規(guī)劃區(qū)域、區(qū)域布置，快速展示多種全新的創(chuàng)意。
具有三維顯示效果，并可以從不同角度觀察創(chuàng)意模型，篩選創(chuàng)意方案。注意虛擬沙盤(pán)和實(shí)體沙盤(pán)的聯(lián)動(dòng)效果，實(shí)體沙盤(pán)為底，虛擬沙盤(pán)做效果疊加。
分辨率：物理實(shí)際分辨率
A：首先我們需要了解適配最主要的痛點(diǎn)就是：靈活，復(fù)用性高，可延展。
圍繞這幾個(gè)點(diǎn)我們可以通過(guò)模塊化開(kāi)發(fā)去做，將每個(gè)模塊單獨(dú)開(kāi)發(fā)。我們?cè)O(shè)計(jì)師做這種需求之前，就需要提前去構(gòu)思，在設(shè)計(jì)各模塊時(shí)，盡量使用可擴(kuò)展和可自適應(yīng)的圖形，這樣面對(duì)適配的時(shí)候我們可以通過(guò)移動(dòng)，縮放這些模塊，來(lái)完成適配。盡量避免二次設(shè)計(jì)以及開(kāi)發(fā)，提升時(shí)間成本。
圖形放大適配
圖形位移適配
A：我們適配一定要記住靈活，減少工作量這些原則，如果不遵循這些原則，那么我們做適配的初衷就錯(cuò)誤了。這樣我們還不如直接就重新開(kāi)發(fā)一套了。就好比我們通過(guò)控制端去控制大屏，如何用開(kāi)發(fā)一套的時(shí)間去適配兩個(gè)甚至是多個(gè)終端，這是我們需要注意的。當(dāng)然考慮到一些實(shí)際情況，會(huì)有一定程度上的修改，但是一定是要從節(jié)省工作量去出發(fā)的。
從命題我們可以看到4*2的拼接屏，我們可以通過(guò)一塊屏幕為1920*1080去計(jì)算，那么通過(guò)計(jì)算分辨率應(yīng)該是1920*4 &1080*2，也就是7680*2160，這樣就計(jì)算出我們的分辨率了。
工作中相信不少同學(xué)都遇到過(guò)這種只知物理尺寸而不知道分辨率的項(xiàng)目，那么我們只能通過(guò)計(jì)算大概的設(shè)計(jì)分辨率來(lái)出初期的設(shè)計(jì)稿件。
此場(chǎng)景下公式為：15/4=X/2160 X=8100 那么可以大概得出寬度大概為8100像素（只是我們通過(guò)計(jì)算大概得出來(lái)的）
此場(chǎng)景下公式為：15/4=X/1080 X=4050
結(jié)果一：如果正方形比例不變，設(shè)計(jì)尺寸無(wú)限接近于大屏實(shí)際比例；
結(jié)果二：如果正方形比例被拉伸，設(shè)計(jì)尺寸小于大屏實(shí)際尺寸；
結(jié)果三：如果正方形比例被壓縮，設(shè)計(jì)尺寸大于大屏實(shí)際尺寸。
等比例投屏，投屏電腦投到2*2大屏（4K）
投屏電腦支持輸出4K分辨率，投屏電腦分辨率以3840*2160作為設(shè)計(jì)，投到4K拼接屏上，大屏?xí)昝勒故荆⑶耶?huà)面非常清晰。
投屏電腦支持輸出2K分辨率，投屏電腦分辨率以1920*1080作為設(shè)計(jì)，投到4K拼接屏上，只會(huì)以1920*1080進(jìn)行輸出，因?yàn)檩敵鱿袼刂荒苤С?K，也只是1920*1080的放大。
使用場(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開(kāi)發(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就可以了）。
A：我們要記住，如果面對(duì)的是正常比例投屏到非等比的大屏，我們需要遵守的規(guī)范一定是：一切以大屏展示為主。所以我們?cè)O(shè)計(jì)尺寸一定是按照20:3來(lái)設(shè)計(jì)的，大屏展示正常才是我們的唯一標(biāo)準(zhǔn)，投屏電腦可能會(huì)出現(xiàn)的問(wèn)題，我們只能妥協(xié)（投屏電腦可能只能展示很小的一部分，但也是沒(méi)有辦法的）
那么我們遇到這種是否就沒(méi)有辦法了呢？在這阿勇給大家提供了三種解決辦法，在實(shí)際工作中，我也遇到過(guò)這種問(wèn)題，所以在這給大家分享一下。
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è)分辨率去出圖，最終交付給開(kāi)發(fā)的就是切三倍圖，并提示開(kāi)發(fā)是縮小三倍做的。
藍(lán)藍(lán)設(shè)計(jì)(www.devb.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。
關(guān)鍵詞：UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司
銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.devb.cn