作者 :?UXBoy?

原文出處：https://www.uisdc.com/large-screen-data-visualization-design
可能是大屏數(shù)據(jù)可視化設(shè)計(jì)介紹最詳盡的一篇文章宁改，幫你盡量躲開(kāi)大屏數(shù)據(jù)可視化路上那些坑。

文章目錄

基礎(chǔ)概念

大屏數(shù)據(jù)可視化設(shè)計(jì)原則

大屏可視化設(shè)計(jì)流程

大屏設(shè)計(jì)的注意事項(xiàng)

Q&A

總結(jié)

基礎(chǔ)概念

1. 什么是數(shù)據(jù)可視化

把相對(duì)復(fù)雜、抽象的數(shù)據(jù)通過(guò)可視的方式以人們更易理解的形式展示出來(lái)的一系列手段叫做數(shù)據(jù)可視化，數(shù)據(jù)可視化是為了更形象地表達(dá)數(shù)據(jù)內(nèi)在的信息和規(guī)律论笔，促進(jìn)數(shù)據(jù)信息的傳播和應(yīng)用采郎。

在當(dāng)前新技術(shù)支持下，數(shù)據(jù)可視化除了「可視」狂魔，還有可交流蒜埋、可互動(dòng)的特點(diǎn)。數(shù)據(jù)可視化的本質(zhì)是數(shù)據(jù)空間到圖形空間的映射最楷，是抽象數(shù)據(jù)的具象表達(dá)整份。

△?數(shù)據(jù)可視化作品《 launchit 》，作者：Shane Mielke

作者寫了本書籽孙，地圖上顯示了世界各地讀者的分布情況及對(duì)應(yīng)人數(shù)烈评。

△ 數(shù)據(jù)可視化作品《 world-drawn-by-travelers 》，作者：TripHappy

國(guó)家之間相互連通的旅游路線犯建，顏色越相近的國(guó)家讲冠，表明兩個(gè)國(guó)家的人們互動(dòng)越頻繁。

2. 什么是大屏數(shù)據(jù)可視化

大屏數(shù)據(jù)可視化是以大屏為主要展示載體的數(shù)據(jù)可視化設(shè)計(jì)适瓦。

「大面積竿开、炫酷動(dòng)效、豐富色彩」玻熙，大屏易在觀感上給人留下震撼印象德迹，便于營(yíng)造某些獨(dú)特氛圍、打造儀式感揭芍。電商雙11時(shí)大屏利用此特點(diǎn)打造了熱烈胳搞、狂歡的節(jié)日氛圍，原本看不見(jiàn)的數(shù)據(jù)可視化后称杨，便能調(diào)動(dòng)人的情緒肌毅、引發(fā)人的共鳴，傳遞企業(yè)文化和價(jià)值姑原。

利用面積大悬而、可展示信息多的特點(diǎn)，通過(guò)關(guān)鍵信息大屏共享的方式可方便團(tuán)隊(duì)討論和決策锭汛，故大屏也常用來(lái)做數(shù)據(jù)分析監(jiān)測(cè)使用笨奠。大屏數(shù)據(jù)可視化目前主要有信息展示、數(shù)據(jù)分析及監(jiān)控預(yù)警三大類唤殴。

數(shù)據(jù)分析類：

△ 圖片來(lái)源：必應(yīng)般婆，圖片作者：帆軟軟件有限公司

大屏數(shù)據(jù)可視化設(shè)計(jì)原則

大屏數(shù)據(jù)可視化設(shè)計(jì)原則：設(shè)計(jì)服務(wù)需求、先總覽后細(xì)節(jié)朵逝。

1. 設(shè)計(jì)服務(wù)需求

大屏設(shè)計(jì)要避免為了展示而展示蔚袍，排版布局、圖表選用等應(yīng)服務(wù)于業(yè)務(wù)配名，所以大屏設(shè)計(jì)是在充分了解業(yè)務(wù)需求的基礎(chǔ)上進(jìn)行的啤咽。那什么是業(yè)務(wù)需求呢晋辆？業(yè)務(wù)需求就是要解決的問(wèn)題或達(dá)成的目標(biāo)。設(shè)計(jì)師通過(guò)設(shè)計(jì)的手段幫助相關(guān)人員達(dá)成這個(gè)目標(biāo)宇整，是大屏數(shù)據(jù)可視化的價(jià)值所在瓶佳。

2. 先總覽后細(xì)節(jié)

大屏因?yàn)榇螅休d數(shù)據(jù)多鳞青，為了避免觀者迷失霸饲，大屏信息呈現(xiàn)要有焦點(diǎn)、有主次盼玄。可以通過(guò)對(duì)比潜腻，先把核心數(shù)據(jù)拋給用戶埃儿，待用戶理解大屏主要內(nèi)容與展示邏輯后，再逐級(jí)瀏覽二三級(jí)內(nèi)容融涣。部分細(xì)節(jié)數(shù)據(jù)可暫時(shí)隱藏童番，用戶需要時(shí)可通過(guò)鼠標(biāo)點(diǎn)擊等交互方式喚起。

大屏可視化設(shè)計(jì)流程

規(guī)范的流程是好結(jié)果的保證威鹿。找到一個(gè)可參考的流程剃斧，然后步步為營(yíng)，就能避免很多不必要的返工忽你，保證設(shè)計(jì)質(zhì)量和項(xiàng)目進(jìn)度幼东。

1. 根據(jù)業(yè)務(wù)場(chǎng)景抽取關(guān)鍵指標(biāo)

關(guān)鍵指標(biāo)是一些概括性詞語(yǔ)，是對(duì)一組或者一系列數(shù)據(jù)的統(tǒng)稱科雳。一般情況下根蟹，一個(gè)指標(biāo)在大屏上獨(dú)占一塊區(qū)域，所以通過(guò)關(guān)鍵指標(biāo)定義糟秘，我們就知道大屏上大概會(huì)顯示哪些內(nèi)容以及大屏?xí)环譃閹讐K简逮。以共享單車電子圍欄監(jiān)控系統(tǒng)為例，這里的關(guān)鍵指標(biāo)有：企業(yè)停車時(shí)長(zhǎng)尿赚、企業(yè)違停量散庶、熱點(diǎn)違停區(qū)域、車輛入欄率等凌净。

確定關(guān)鍵指標(biāo)后悲龟，根據(jù)業(yè)務(wù)需求擬定各個(gè)指標(biāo)展示的優(yōu)先級(jí)（主、次冰寻、輔）躲舌。

2. 確立指標(biāo)分析維度

「橫看成嶺側(cè)成峰」。同一個(gè)指標(biāo)的數(shù)據(jù)性雄，從不同維度分析就有不同結(jié)果没卸。很多小伙伴做完可視化設(shè)計(jì)羹奉，發(fā)現(xiàn)可視化圖形并沒(méi)有準(zhǔn)確表達(dá)自己的意圖，也沒(méi)能向觀者傳達(dá)出應(yīng)有的信息约计，可視化圖形讓人困惑或看不懂诀拭。出現(xiàn)這種情況很大程度就是因?yàn)榉治龅木S度沒(méi)有找準(zhǔn)或定義的比較混亂。

上圖向大家展示了數(shù)據(jù)分析常用的4個(gè)維度煤蚌，我們?cè)谶x定指標(biāo)后耕挨，就需要跟項(xiàng)目組其他小伙伴討論：我們的各個(gè)指標(biāo)主要想給大家展示什么，更進(jìn)一步的講尉桩，是我們想通過(guò)可視化表達(dá)什么樣的規(guī)律和信息筒占。而上圖，可以引導(dǎo)我們從「聯(lián)系蜘犁、分布翰苫、比較、構(gòu)成」四個(gè)維度更有邏輯的思考這個(gè)問(wèn)題这橙。

聯(lián)系：數(shù)據(jù)之間的相關(guān)性奏窑。

分布：指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律屈扎。

比較：數(shù)據(jù)之間存在何種差異埃唯、差異主要體現(xiàn)在哪些方面。

構(gòu)成：指標(biāo)里的數(shù)據(jù)都由哪幾部分組成鹰晨、每部分占比如何墨叛。

當(dāng)然，上圖例舉的示例圖表都比較傳統(tǒng)模蜡，在大屏數(shù)據(jù)可視化中常還有另一類地理信息（常以2/3D地圖巍实、地球呈現(xiàn)）出現(xiàn)。上圖雖未包含這類圖形哩牍，但它提供給我們的確定數(shù)據(jù)分析維度的思路和方法是相通的棚潦，可借鑒。

3. 選定可視化圖表類型

當(dāng)確定好分析維度后膝昆，事實(shí)上我們所能選用的圖表類型也就基本確定了丸边。接下來(lái)我們只需要從少數(shù)幾個(gè)圖表里篩選出最能體現(xiàn)我們?cè)O(shè)計(jì)意圖的那個(gè)就好了。

選定圖表注意事項(xiàng)：易理解荚孵、可實(shí)現(xiàn)妹窖。

易理解

可視化設(shè)計(jì)要考慮大屏最終用戶，可視化結(jié)果應(yīng)該是一看就懂收叶，不需要思考和過(guò)度理解骄呼，因而選定圖表時(shí)要理性，避免為了視覺(jué)上的效果而選擇一些對(duì)用戶不太友好的圖形。

可實(shí)現(xiàn)

我們需要了解現(xiàn)有數(shù)據(jù)的信息蜓萄、規(guī)模隅茎、特征、聯(lián)系等嫉沽，然后評(píng)估數(shù)據(jù)是否能夠支撐相應(yīng)的可視化表現(xiàn)辟犀。

我們?cè)O(shè)計(jì)的圖形圖表，要開(kāi)發(fā)能夠?qū)崿F(xiàn)绸硕。實(shí)際工作中堂竟，一些可視化效果開(kāi)發(fā)用代碼寫很容易實(shí)現(xiàn)，效果也不錯(cuò)玻佩，但這些效果設(shè)計(jì)師用 Ps / Ai / Ae 這些工具模擬時(shí)會(huì)發(fā)現(xiàn)比較困難出嘹；同樣的，某些效果設(shè)計(jì)師用設(shè)計(jì)工具可以輕易實(shí)現(xiàn)咬崔，但開(kāi)發(fā)要用代碼落地卻非常困難税稼，所以大屏設(shè)計(jì)中跟開(kāi)發(fā)常溝通非常重要，我們需要明確哪些地方設(shè)計(jì)師可以盡情發(fā)揮刁赦，哪些地方需要謹(jǐn)慎設(shè)計(jì)娶聘。一個(gè)項(xiàng)目總有周期與預(yù)算限制闻镶，不會(huì)無(wú)限期的修改迭代甚脉，所以設(shè)計(jì)師在這里需要抓住重點(diǎn)，有取舍铆农，不鉆牛角尖牺氨、不死磕不放。

4. 了解物理大屏墩剖，確定設(shè)計(jì)稿尺寸

多數(shù)情況下設(shè)計(jì)稿分辨率即被投大屏的信號(hào)源電腦屏幕的分辨率猴凹。有多個(gè)信號(hào)源時(shí)，就會(huì)有多個(gè)設(shè)計(jì)稿岭皂，此時(shí)每個(gè)設(shè)計(jì)稿的尺寸即對(duì)應(yīng)信號(hào)源電腦屏幕的分辨率郊霎。

一般情況下設(shè)計(jì)稿的分辨率就是電腦的分辨率，當(dāng)有多個(gè)信號(hào)源時(shí)爷绘，有時(shí)會(huì)通過(guò)顯卡自定義電腦屏幕分辨率书劝，從而使電腦顯示分辨率不等于其物理分辨率，此時(shí)土至，對(duì)應(yīng)設(shè)計(jì)稿的分辨率也就變成了設(shè)置后的分辨率购对。此外，當(dāng)被投電腦分辨率長(zhǎng)寬比與大屏物理長(zhǎng)寬比不一致時(shí)（單信號(hào)源）陶因，也會(huì)對(duì)被投電腦屏幕分辨率做自定義調(diào)整骡苞，這種情況設(shè)計(jì)稿分辨率也會(huì)發(fā)生變化。所以設(shè)計(jì)開(kāi)始前了解物理大屏長(zhǎng)寬比很重要。

5. 頁(yè)面布局解幽、劃分

尺寸確立后贴见，接下來(lái)要對(duì)設(shè)計(jì)稿進(jìn)行布局和頁(yè)面的劃分。這里的劃分亚铁，主要根據(jù)我們之前定好的業(yè)務(wù)指標(biāo)進(jìn)行蝇刀，核心業(yè)務(wù)指標(biāo)安排在中間位置、占較大面積徘溢；其余的指標(biāo)按優(yōu)先級(jí)依次在核心指標(biāo)周圍展開(kāi)吞琐。一般把有關(guān)聯(lián)的指標(biāo)讓其相鄰或靠近，把圖表類型相近的指標(biāo)放一起然爆，這樣能減少觀者認(rèn)知上的負(fù)擔(dān)并提高信息傳遞的效率站粟。

6. 定義設(shè)計(jì)風(fēng)格

很多小伙伴也許沒(méi)接觸過(guò)大屏設(shè)計(jì)工作，但大多數(shù)人都應(yīng)該有 APP 或者 Web 風(fēng)格定義的經(jīng)驗(yàn)曾雕。我們?cè)诙x一款 APP 或者 Web 頁(yè)面設(shè)計(jì)風(fēng)格時(shí)常用的方法是什么呢奴烙？情緒板。

大屏雖酷炫剖张，但實(shí)際上也是運(yùn)行在瀏覽器里的 Web 頁(yè)面切诀，所以大屏設(shè)計(jì)風(fēng)格定義方法也同樣可以用情緒板來(lái)做，這種方法也是目前比較科學(xué)高效的風(fēng)格定義手段搔弄。

上圖提供了情緒板應(yīng)用的腦圖幅虑，具體操作細(xì)節(jié)不做介紹，不太了解的小伙伴可以自己找找資料顾犹。

編者按：一篇好文幫你掃盲倒庵，運(yùn)用情緒板搞定設(shè)計(jì)→《該怎么運(yùn)用情緒板，才能讓設(shè)計(jì)作品更有說(shuō)服力炫刷？》

情緒板的一套流程下來(lái)擎宝，我們定義的風(fēng)格基本是科學(xué)準(zhǔn)確的，可以指導(dǎo)我們執(zhí)行設(shè)計(jì)浑玛。如果是給甲方做大屏绍申，這個(gè)流程也可以讓我們提出的方案更有說(shuō)服力。

7. 可視化設(shè)計(jì)

根據(jù)定義好的設(shè)計(jì)風(fēng)格與選定的圖表類型進(jìn)行合理的可視化設(shè)計(jì)顾彰。目前來(lái)說(shuō)大屏可視化主要有指標(biāo)類信息點(diǎn)和地理類信息點(diǎn)兩大可視化數(shù)據(jù)极阅。指標(biāo)類信息點(diǎn)可視化效果相對(duì)簡(jiǎn)單易實(shí)現(xiàn)，而地理類信息點(diǎn)一般可視化效果酷炫拘央，但是開(kāi)發(fā)相對(duì)困難涂屁，需要設(shè)計(jì)師跟開(kāi)發(fā)多溝通。地理類信息一般具有很強(qiáng)的空間感灰伟、豐富的粒子拆又、流光等動(dòng)效儒旬、高精度的模型和材質(zhì)以及可交互實(shí)時(shí)演算等特點(diǎn)，所以對(duì)于被投電腦帖族、大屏拼接器等硬件設(shè)備的性能會(huì)有要求栈源，硬件配置不夠的情況下可能出現(xiàn)卡頓甚至崩潰的情況，所以這點(diǎn)也是需要提前溝通評(píng)估的竖般。

8. 樣圖溝通確認(rèn)

這里的溝通分三個(gè)層面：設(shè)計(jì)師對(duì)內(nèi)溝通甚垦、設(shè)計(jì)師對(duì)外溝通、設(shè)計(jì)師與大屏的「溝通」涣雕。

樣圖溝通環(huán)節(jié)艰亮，最初的樣圖不需要十分精致，我們可以把它理解為一個(gè)「低保真」原型挣郭，然后通過(guò)不斷溝通修改迄埃，讓它逐步完善精致起來(lái)，也就是小步快跑兑障，避免那種一下子走到終點(diǎn)侄非，然后又大修大改的情況。

因?yàn)槲覀冊(cè)谇皫撞揭呀?jīng)分別確定了頁(yè)面布局流译、圖表類型逞怨、頁(yè)面風(fēng)格特點(diǎn)，所以這一步我們需要用盡可能簡(jiǎn)單的方法 福澡，把之前幾步的成果在頁(yè)面上快速體現(xiàn)出來(lái)叠赦，然后根據(jù)樣圖效果嘗試確定五方面內(nèi)容：

之前確立的布局在放入設(shè)計(jì)內(nèi)容后是否依然合適；

確立的圖表類型帶入數(shù)據(jù)后是否仍然客觀準(zhǔn)確竞漾；

根據(jù)關(guān)鍵元素眯搭、色彩窥翩、結(jié)構(gòu)业岁、質(zhì)感打造出的頁(yè)面風(fēng)格是否基本傳達(dá)出了預(yù)期的氛圍和感受；

已有的樣式寇蚊、數(shù)據(jù)內(nèi)容笔时、動(dòng)效等在開(kāi)發(fā)實(shí)現(xiàn)方面是否存在問(wèn)題；

大屏是否存在色差仗岸、文字內(nèi)容是否清晰可見(jiàn)允耿、頁(yè)面是否存在變形拉伸等現(xiàn)象。

跟大屏「溝通」是比較重要也是個(gè)特殊的環(huán)節(jié)扒怖，這也是我覺(jué)得大屏設(shè)計(jì)跟其它設(shè)計(jì)不一樣的地方较锡，大屏有它自己獨(dú)特的分辨率、屏幕組成盗痒、色彩顯示以及運(yùn)行蚂蕴、展示環(huán)境低散，這里的很多問(wèn)題只有設(shè)計(jì)稿投到大屏上才能夠被發(fā)現(xiàn)，所以這一步在樣圖溝通確認(rèn)環(huán)節(jié)非常重要骡楼，有時(shí)候需要開(kāi)發(fā)出 demo熔号，反復(fù)測(cè)試多次。

9. 頁(yè)面定稿鸟整、開(kāi)發(fā)

事實(shí)上頁(yè)面開(kāi)發(fā)階段并不是到了這一步才進(jìn)行引镊，這里說(shuō)的頁(yè)面開(kāi)發(fā)僅指前端樣式的實(shí)現(xiàn)，實(shí)際上后臺(tái)數(shù)據(jù)準(zhǔn)備工作在定義好分析指標(biāo)后就已經(jīng)開(kāi)始進(jìn)行了篮条，而我們當(dāng)前的工作是把數(shù)據(jù)接入到前端弟头，然后用設(shè)計(jì)的樣式呈現(xiàn)出來(lái)。

切圖與標(biāo)注

由于大屏實(shí)際就是一個(gè) web 頁(yè)面涉茧，所以開(kāi)發(fā)階段的切圖與標(biāo)注是少不了的亮瓷。

切圖：哪些元素需要切圖，怎么切降瞳？

一般開(kāi)發(fā)用代碼寫不出的樣式或動(dòng)效嘱支，都需要設(shè)計(jì)師切圖作支持：比如數(shù)據(jù)容器的邊框、小的動(dòng)效挣饥、頁(yè)面整體大背景除师、部分圖標(biāo)等。切圖按正常網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)切就可以了扔枫。

標(biāo)注：Web頁(yè)面用什么插件做標(biāo)注這個(gè)大家都很熟悉汛聚，我就不多說(shuō)了。需要注意的是短荐，如果大屏頁(yè)面需要在不同比例的終端展示倚舀，那么此時(shí)的標(biāo)注與開(kāi)發(fā)可以使用 rem 作為基本單位來(lái)實(shí)現(xiàn)，這樣實(shí)現(xiàn)的大屏頁(yè)面在后期會(huì)有更好的擴(kuò)展性與適應(yīng)性忍宋。

10. 整體細(xì)節(jié)調(diào)優(yōu)與測(cè)試

這部分是指頁(yè)面開(kāi)發(fā)完成后痕貌，將真實(shí)頁(yè)面投放到大屏進(jìn)行的測(cè)試與優(yōu)化。這里主要有兩部分工作糠排。

視覺(jué)方面的測(cè)試（有點(diǎn)像 APP 的 UI走查）：關(guān)鍵視覺(jué)元素舵稠、字體字號(hào)、頁(yè)面動(dòng)效入宦、圖形圖表等是否按預(yù)期顯示哺徊、有無(wú)變形、錯(cuò)位等情況乾闰。

性能與數(shù)據(jù)方面的測(cè)試：圖形圖表動(dòng)畫是否流暢落追、數(shù)據(jù)加載、刷新有無(wú)異常涯肩；頁(yè)面長(zhǎng)時(shí)間展示是否存在崩潰轿钠、卡死等情況雹熬；后臺(tái)控制系統(tǒng)能否正常切換前端頁(yè)面顯示。

大屏設(shè)計(jì)的注意事項(xiàng)

1. 字體使用

字體優(yōu)先使用系統(tǒng)默認(rèn)字體谣膳，需要嵌入字體時(shí)考慮字體的可識(shí)別性竿报、與當(dāng)前設(shè)計(jì)風(fēng)格是否融合、是否可免費(fèi)商用继谚。

如果頁(yè)面是云端部署烈菌，需要嵌入字體包時(shí)，我們可以使用 FontCreator 這類的軟件把那些用不到的字符從字體包中刪掉花履，然后重新打包上傳芽世，減小字體包大小，可以優(yōu)化頁(yè)面加載體驗(yàn)诡壁，避免在替換默認(rèn)字體的過(guò)程中出現(xiàn)頁(yè)面文字跳動(dòng)等現(xiàn)象济瓢。（一般來(lái)講一套字體文件包含了阿拉伯文、符號(hào)妹卿、拉丁文旺矾、日文、西里爾文夺克、希臘文箕宙、拼音、注音符號(hào)等多種字符铺纽，對(duì)于大屏這個(gè)明確的場(chǎng)景柬帕，我們可以刪掉其它使用不到的字符，僅保留中文狡门、拼音和數(shù)字）

2. 顏色搭配

色彩明度與飽和度差異顯著陷寝、對(duì)比鮮明， 盡量避免使用鄰近色配色其馏。

使用深色暗色背景：深色暗色背景可減少拼縫帶來(lái)的不適感凤跑。由于背景面積大，使用暗色背景還能夠減少屏幕色差對(duì)整體表現(xiàn)的影響尝偎；同時(shí)暗色背景更能聚焦視覺(jué)饶火，也方便突出內(nèi)容鹏控，做出一些流光致扯、粒子等酷炫的效果。

漸變色慎重使用：大屏普遍色域有偏差当辐，顯示偏色抖僵，因而使用漸變色需要根據(jù)大屏反饋確定是否調(diào)整，純色最佳缘揪。

3. 頁(yè)面布局

主次分明耍群、條理清晰义桂、注意留白，合理利用大屏上各個(gè)小的顯示單元蹈垢，并盡量避免關(guān)鍵數(shù)據(jù)被拼縫分割慷吊。

Q&A

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)漸變色哼绑、鄰近色等不同類型的色彩搭配是否可以在目標(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ì)虛么庞呕？

看情況新翎，視大屏系統(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)晃财？

阿里云 DataV、騰訊云圖典蜕、百度 Sugar 等断盛。

6. 數(shù)據(jù)可視化的圖表樣式可以在哪些地方找到參考？

圖表部分的二個(gè)庫(kù)是我們?cè)O(shè)計(jì)師可以打開(kāi)瀏覽查看的愉舔，這里面所有的圖表樣式都是基于代碼實(shí)現(xiàn)的钢猛，可以作為我們?cè)O(shè)計(jì)圖表的參考，也可以讓開(kāi)發(fā)拿代碼去用轩缤，或者在這些圖表的基礎(chǔ)上修改命迈。

工具類的需要有一定的代碼基礎(chǔ)，里面同樣有豐富的圖表火的，所以跟開(kāi)發(fā)的溝通也很重要壶愤，因?yàn)樗麄兛赡軙?huì)了解多一些更新的前沿的圖表形式，是我們?cè)O(shè)計(jì)師不知道的馏鹤，所以彼此多溝通交流實(shí)在太重要了征椒。

總結(jié)

數(shù)據(jù)可視化是一門龐大系統(tǒng)的科學(xué)，本文所有討論僅針對(duì)大屏數(shù)據(jù)可視化這一特定領(lǐng)域湃累，管中窺豹勃救，如有遺漏或不足之處歡迎大家討論交流。

原文出處：https://www.uisdc.com/large-screen-data-visualization-design