說(shuō)到大屏，雙十一的大屏肯定不陌生吧！

接下來(lái)，我們來(lái)討論討論，數(shù)據(jù)可視化大屏如何設(shè)計(jì)吧！

拼接大屏：大屏幾乎都是拼接屏，UI設(shè)計(jì)時(shí)不用考慮屏幕縫隙影響內(nèi)容的呈現(xiàn)，內(nèi)容不會(huì)丟失，但有可能影響視覺(jué)的表現(xiàn)，例如一個(gè)很大的人物圖像被縫隙正中“劈成”兩半，或者“劈中”了眼睛，看起來(lái)很不舒服，所以設(shè)計(jì)時(shí)可以建立縫隙位置的參考線避免類(lèi)似情況發(fā)生。（現(xiàn)在企業(yè)常用的有無(wú)縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏，縫隙越小越貴）

設(shè)計(jì)尺寸：拼接的每塊小屏一般是16:9的高清屏，設(shè)計(jì)尺寸可以把上下高度設(shè)定為1080px，長(zhǎng)度按照拼接屏的數(shù)量比例得出長(zhǎng)度的設(shè)計(jì)尺寸。例如3乘5的一塊大屏幕，高度3塊屏設(shè)為1080，每塊高就是360，360除9乘16等640，640就是一塊屏幕的長(zhǎng)度，640乘5塊屏＝3200最后得出設(shè)計(jì)稿尺寸就是：高1080px乘寬3200px（在這里感謝我的數(shù)學(xué)老師）

拼接屏設(shè)計(jì)尺寸圖解
視覺(jué)設(shè)計(jì)：首先了解需求，整合數(shù)據(jù)，分析出主要數(shù)據(jù)次要數(shù)據(jù)、總量數(shù)據(jù)細(xì)分?jǐn)?shù)據(jù)、各數(shù)據(jù)的維度等等，通過(guò)了解這些可以先設(shè)計(jì)出一個(gè)布局模版，也可以在紙上畫(huà)出來(lái)，布局可以在設(shè)計(jì)過(guò)程中隨時(shí)調(diào)整。

設(shè)計(jì)的風(fēng)格，背景色一般用深色調(diào)，深色調(diào)緊張感強(qiáng)，讓視覺(jué)更好的聚焦，大屏暗色調(diào)看上去更柔和舒服不刺眼，也會(huì)較省電。

大屏設(shè)計(jì)跟網(wǎng)頁(yè)不一樣，頁(yè)面不能有滾動(dòng)條，大屏的長(zhǎng)寬都是固定的。

字號(hào)跟網(wǎng)頁(yè)設(shè)計(jì)一樣不小于12號(hào)字，可以用于圖表的標(biāo)注，數(shù)據(jù)信息建議14號(hào)字以上，大屏觀者遠(yuǎn)距離才能看全內(nèi)容，所以字號(hào)可以稍大一點(diǎn)。字體不一定只用一種，可以用到一些科技感強(qiáng)的字體，這里要注意，記得把字體給開(kāi)發(fā)一份。

設(shè)計(jì)完成先去大屏上看一下效果，大屏的品質(zhì)不一樣色調(diào)也會(huì)有很大的差別，要根據(jù)自家的大屏呈現(xiàn)效果做調(diào)整。
交互設(shè)計(jì)

我把大數(shù)據(jù)可視化大屏分為兩種，一種“純展示型”另一種“展示＋功能型”，具體怎么區(qū)分！

純展示型幾乎沒(méi)有交互，后臺(tái)錄入數(shù)據(jù)，在大屏上展示就行了。

展示＋功能型，例如實(shí)時(shí)監(jiān)控?cái)?shù)據(jù)、采集數(shù)據(jù)、數(shù)據(jù)對(duì)比功能、云計(jì)算數(shù)據(jù)、分析與預(yù)警等等。

這里就著重說(shuō)一下帶有功能型的大屏產(chǎn)品的結(jié)構(gòu)層（信息架構(gòu)）。一切功能結(jié)構(gòu)都要圍繞核心數(shù)據(jù)主頁(yè)面來(lái)架構(gòu)，因?yàn)榇笃琳故镜暮诵木褪菍⒁恍I(yè)務(wù)的關(guān)鍵指標(biāo)數(shù)據(jù)以數(shù)據(jù)可視化的方式展示出來(lái)。

1. 設(shè)計(jì)稿投到大屏上顯示效果不佳怎么辦？
大屏的分辨率、比例、使用環(huán)境、投射方式等均會(huì)對(duì)設(shè)計(jì)造成影響。理想情況下，我們應(yīng)該在設(shè)計(jì)開(kāi)始前，就能打開(kāi)大屏系統(tǒng)做一些簡(jiǎn)單測(cè)試。我們可以從網(wǎng)上收集不同設(shè)計(jì)師不同風(fēng)格的大屏設(shè)計(jì)作品，然后投上去查看實(shí)際效果。

因?yàn)榇蠖鄶?shù)時(shí)候大屏都會(huì)存在色彩偏差，這時(shí)通過(guò)測(cè)試我們就能發(fā)現(xiàn)漸變色、鄰近色等不同類(lèi)型的色彩搭配是否可以在目標(biāo)大屏上良好呈現(xiàn)。如果不可以，那我們?cè)O(shè)計(jì)進(jìn)行時(shí)就不要使用顯示效果不佳的色彩搭配。另一方面，樣圖溝通環(huán)節(jié)及時(shí)測(cè)試也很重要。

2. 大屏設(shè)計(jì)定稿后，切圖切幾倍圖？
由于是將我們電腦屏幕投射到了大屏，大屏上的內(nèi)容是運(yùn)行在我們電腦瀏覽器上的頁(yè)面。所以切圖根據(jù)我們電腦的分辨率，正常切1倍圖就可以。

3. 1920*1080的設(shè)計(jì)稿，投到9000*4320的屏幕上，文字圖片會(huì)發(fā)虛么？
看情況，視大屏系統(tǒng)硬件規(guī)格與觀看距離來(lái)定。這塊有四個(gè)概念需要跟大家交流下：大屏邏輯分辨率（設(shè)計(jì)稿尺寸）——顯卡輸出分辨率——視頻矩陣切換器（DVI）支持分辨率——大屏實(shí)際物理分辨率。

一般后兩個(gè)是沒(méi)問(wèn)題的，大屏跟矩陣切換器是由大屏廠商提供，一般剛好配套大屏。容易問(wèn)題的是顯卡輸出分辨率，我們電腦屏幕分辨率并不是最終顯卡傳遞到DVI接口的分辨率，傳遞到DVI接口的分辨率是電腦顯卡所能輸出的最大分辨率（部分電腦可設(shè)置或自定義輸出分辨率）。

輸出分辨率等于DVI支持分辨率時(shí)顯示效果最佳；輸出分辨率低于DVI支持分辨率，DVI會(huì)將信號(hào)放大后傳遞到大屏，放大的過(guò)程中就有圖像信息丟失，雖然此過(guò)程中有各種算法支持去保證圖像盡可能清晰，但算法再好，跟真實(shí)圖形還是有差距的。

此外，多信號(hào)源投射效果優(yōu)于單個(gè)信號(hào)源投射。對(duì)于現(xiàn)場(chǎng)直播數(shù)據(jù)大屏，一般至少有兩個(gè)信號(hào)源，一個(gè)投屏，另一個(gè)也投屏但是處于備用狀態(tài)。

離大屏的距離也影響觀感，一般離得近，顆粒感明顯，距離稍遠(yuǎn)，會(huì)顯的較為清晰。

4. 設(shè)計(jì)稿完成開(kāi)發(fā)后，發(fā)現(xiàn)在大屏上頁(yè)面有被拉伸或者壓縮的情況，怎么補(bǔ)救？
一般來(lái)講，開(kāi)發(fā)只需要對(duì)設(shè)計(jì)圖做還原即可。但特殊情況下，比如顯示器擴(kuò)展不正確導(dǎo)致頁(yè)面被拉伸或壓縮，這時(shí)就需做處理：我們可以先得到被拉伸/壓縮的比例，然后對(duì)整體視圖做壓縮/拉伸處理，再由其拉伸/壓縮，這樣被拉伸/壓縮的瑕疵就可以得到一定程度上的矯正。

另外，了解被投電腦硬件特點(diǎn)，有的電腦可以通過(guò)自定義分辨率解決這部分問(wèn)題。

5. 除自行開(kāi)發(fā)可視化大屏外，還可以通過(guò)哪些第三方服務(wù)來(lái)快速實(shí)現(xiàn)？
比如億信華辰數(shù)據(jù)可視化平臺(tái)的酷屏。

6. 數(shù)據(jù)可視化的圖表樣式可以在那些地方找到參考？
所有的圖表樣式都是基于代碼實(shí)現(xiàn)的，可以作為我們?cè)O(shè)計(jì)圖表的參考，也可以讓開(kāi)發(fā)拿代碼去用，或者在這些圖表的基礎(chǔ)修改

工具類(lèi)的需要有一定的代碼基礎(chǔ)，里面同樣有豐富的圖表，所以跟開(kāi)發(fā)的溝通也很重要，因?yàn)樗麄兛赡軙?huì)了解多一些更新的前沿的圖表形式是我們?cè)O(shè)計(jì)師不知道的，所以彼此多溝通交流是在太重要了。
所以，大屏應(yīng)該怎么做，你知道了嗎！