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

每年的雙十一，天貓都會(huì)在狂歡節(jié)中直播戰(zhàn)績(jī)。除了可怕的數(shù)字之外，不知道大家有沒(méi)有留意到這些同樣可怕的數(shù)據(jù)可視化大屏？

所謂大屏，顧名思義就是一個(gè)很大的屏。

可視化應(yīng)用非常廣，如 ToC、ToB、ToG 等都會(huì)應(yīng)用。一般應(yīng)用在交易大廳，展覽中心，管控中心，老板辦公室等等場(chǎng)景，把一些關(guān)鍵數(shù)據(jù)集中展示在一塊巨大的 LED 屏幕上，其實(shí)就是巨大化的 Dashboard。

數(shù)據(jù)可視化的本質(zhì)是視覺(jué)對(duì)話，數(shù)據(jù)可視化將數(shù)據(jù)分析技術(shù)與圖形技術(shù)結(jié)合，清晰有效地將分析結(jié)果信息進(jìn)行解讀和傳達(dá)。

設(shè)計(jì)前的準(zhǔn)備

基礎(chǔ)大屏制作準(zhǔn)備：

• 確認(rèn)需求：確認(rèn)展示的主題，具體展示的內(nèi)容，各部分內(nèi)容數(shù)據(jù)用到的圖表類(lèi)型。
• 使用場(chǎng)景：確認(rèn)大屏的使用場(chǎng)景，設(shè)計(jì)尺寸與大屏的拼接方式（拼接屏像素超大可等比例縮放）
• 開(kāi)發(fā)實(shí)現(xiàn)：具體設(shè)計(jì)要根據(jù)項(xiàng)目確定實(shí)現(xiàn)的工具，現(xiàn)在應(yīng)用比較多的 web、u3d、ue4 等不同工具實(shí)現(xiàn)出來(lái)的效果也是大有不同，根據(jù)項(xiàng)目實(shí)際需求以及開(kāi)發(fā)成本，這塊設(shè)計(jì)前需要跟開(kāi)發(fā)充分溝通。
• 設(shè)計(jì)素材：設(shè)計(jì)整體的背景圖、包括布局、配色等，以及大屏中用到的小圖標(biāo)元素。

大屏制作一般只需四步：

• 整體：設(shè)置背景色、插入背景圖、頁(yè)面設(shè)置等。
• 部分：主標(biāo)題、各圖形標(biāo)題、動(dòng)態(tài) KPI 指標(biāo)、圖表制作等。
• 細(xì)節(jié)：對(duì)標(biāo)題、圖表細(xì)節(jié)的調(diào)整。
• 動(dòng)態(tài)：添加動(dòng)態(tài)效果，提升大屏展示效果。

以上只是一個(gè)大概的思路，具體操作流程肯定是根據(jù)實(shí)際情況做調(diào)整的，要復(fù)雜的多，最重要的是多溝通、多思考。

設(shè)計(jì)思路案例實(shí)操

1. 需求分析

設(shè)計(jì)要求

分辨率 1920*1080，在世界地圖上顯示一個(gè)黑客組織攻擊多個(gè)目標(biāo)，頁(yè)面要顯示黑客組織的信息和被攻擊目標(biāo)的信息。

黑客組織信息（展示信息僅作為參考，可以自由發(fā)揮）

• 名稱(chēng)：摩訶草
• 位置：巴基斯坦
• 活躍度：80
• 攻擊目標(biāo)：韓國(guó)、中國(guó)、朝鮮、德國(guó)
• 風(fēng)格要求：科技感 FUI

拿到需求，確定好展示場(chǎng)景、設(shè)計(jì)尺寸以及跟開(kāi)發(fā)溝通好實(shí)現(xiàn)方法，大致的設(shè)計(jì)思路就有了，直接開(kāi)擼。

2. 布局

個(gè)人習(xí)慣，根據(jù)需求以及數(shù)據(jù)大概整理一個(gè)布局，可以在紙上大概畫(huà)一下，然后在軟件里具體細(xì)化布局。

根據(jù)需求的梳理，得到就是要在世界地圖上展示黑客攻擊各個(gè)國(guó)家的形態(tài)的大屏，要求很寬泛，可自我發(fā)揮的空間很大。

直接附上最終效果圖。這里布局上考慮到地圖上有許多浮層的情況，把數(shù)據(jù)整體放左側(cè)和地圖下方進(jìn)行展示，避免圖表的面積過(guò)大，喧賓奪主，影響整體地圖的視覺(jué)效果。

3. 風(fēng)格

根據(jù)需求定義幾個(gè)設(shè)計(jì)關(guān)鍵詞，方便自己找參考，個(gè)人推薦去 Pinterest、behance，里面有很多炫酷的效果可以參考。

風(fēng)格上，地圖參考了下圖的展示形式，采用多層疊加陰影加描邊的形式，使地圖整體有立體感、厚重感，不會(huì)顯得那么單薄。

△ 圖片來(lái)自網(wǎng)絡(luò)，如侵權(quán)刪

4. 顏色

和網(wǎng)頁(yè)版設(shè)計(jì)展示相比較，大屏更傾向于選用深色調(diào)背景，不僅為了讓視覺(jué)更好聚焦，而且長(zhǎng)時(shí)間觀看之后眼睛也不會(huì)出現(xiàn)刺痛感。內(nèi)容部分采用亮色系，保證內(nèi)容與背景有一定的對(duì)比關(guān)系，便于業(yè)務(wù)信息傳達(dá)。同時(shí)背景深色系、內(nèi)容亮色系，遠(yuǎn)距離觀看也會(huì)比較清晰直觀。

5. 字體

字體上采用瀏覽器默認(rèn)微軟雅黑，數(shù)字采用特殊字體 DS-Digital。

6. 數(shù)據(jù)圖表

圖表是表達(dá)數(shù)據(jù)的常用方式，因?yàn)閳D表可以描述不同的數(shù)據(jù)種類(lèi)，同時(shí)讓數(shù)據(jù)之間可以比較。主要考慮最終用戶(hù)，圖表結(jié)果應(yīng)該是一看就懂，不需要思考和過(guò)度理解，因而選定圖表時(shí)要理性，避免為了視覺(jué)上的效果而選擇一些對(duì)用戶(hù)不太友好的圖形及元素。

常用的圖表有幾大類(lèi)別：

• 一個(gè)或者多個(gè)類(lèi)別不同時(shí)間的的對(duì)比比較。典型的圖表有折線圖、條形圖、堆疊條形圖、蠟燭圖、區(qū)域圖、時(shí)間線等。
• 不同類(lèi)別數(shù)據(jù)的對(duì)比。典型的圖表有柱狀圖、分組條形圖、氣泡圖、平行坐標(biāo)圖、多折線圖、子彈圖等。
• 排名，主要展示項(xiàng)目數(shù)據(jù)的一個(gè)排名情況。典型的圖表有有序條形圖、有序柱狀圖、平行坐標(biāo)圖等。
• 不同數(shù)據(jù)對(duì)于整體的占比情況。典型的圖表有堆疊條形圖、餅狀圖、環(huán)形圖、堆疊區(qū)域圖、樹(shù)形圖、玫瑰圖等。

以上是一些比較常見(jiàn)的分類(lèi)，當(dāng)然還有許多不常用的圖表沒(méi)做統(tǒng)計(jì)區(qū)分，比如散點(diǎn)圖、氣泡圖、熱力圖、網(wǎng)絡(luò)圖等等，這里就不一一列舉了。

推薦大家看下網(wǎng)上的開(kāi)源組件庫(kù) Echarts、Antv 等等，這塊也有螞蟻金服官方的分類(lèi)，非常詳細(xì)。

https://antv.vision/zh?

△ 圖片來(lái)自網(wǎng)絡(luò)，如侵權(quán)刪

這里推薦一個(gè)快速生成圖表的 ps 插件──ps拉框助手。如圖所示，該插件整合了折線圖、柱狀圖、橫向柱狀圖、餅圖、雷達(dá)圖、地圖，還有系統(tǒng) UI 等等。非常方便，用選區(qū)工具拉取選區(qū)框，點(diǎn)擊參數(shù)一鍵生成。

如何快速一鍵生成地圖的效果，省去了做可視化地圖的煩惱？下面開(kāi)始實(shí)操。

新建畫(huà)布，打開(kāi)拉框助手，選中地圖，如圖：

選中之后會(huì)有好多參數(shù)標(biāo)簽寫(xiě)的很清楚，第一塊是區(qū)塊、邊線寬度顏色和文字的顏色，可以在這里設(shè)置；第二塊內(nèi)容就是地圖，插件里有全國(guó)各個(gè)省市，還有全球的地圖，基本夠用了。根據(jù)需求大家可以自定義選擇，選擇完成之后點(diǎn)擊去下載對(duì)應(yīng)數(shù)據(jù)，會(huì)彈出一個(gè)新的頁(yè)面，如下圖：

這里是我選擇一個(gè)全國(guó)的地圖，大家可以根據(jù)截圖上紅框內(nèi)的說(shuō)明進(jìn)行操作，非常簡(jiǎn)單。往下滑，直接點(diǎn)擊復(fù)制 json 數(shù)據(jù)到剪切板。點(diǎn)擊后網(wǎng)頁(yè)會(huì)有一個(gè)復(fù)制成功的提示，證明你已經(jīng)復(fù)制成功了，接下來(lái)我們就回到 ps 里面去粘貼就好了。

粘貼到這里，切記不要粘貼多次，會(huì)很卡導(dǎo)致數(shù)據(jù)錯(cuò)誤。粘貼完之后，記得用選區(qū)工具畫(huà)一個(gè)選區(qū)之后再點(diǎn)擊自動(dòng)繪制，如圖：

點(diǎn)擊自動(dòng)繪制之后，可能會(huì)等待一會(huì)，插件需要花時(shí)間去運(yùn)算生成地圖，等待一會(huì)就到了見(jiàn)證奇跡的時(shí)刻，如圖：

一份中國(guó)地圖就生成了，而且生成的文件都是分層的矢量形狀層，可以繼續(xù)編輯。是不是功能非常強(qiáng)大，其他模塊的功能就不一一展示了。插件官方生怕同學(xué)們不會(huì)用，在插件的最后一個(gè)模塊貼心地準(zhǔn)備了學(xué)習(xí)手冊(cè)，點(diǎn)擊可以查看相關(guān)的視頻教程，非常的詳細(xì)，感興趣的同學(xué)可以去試試哦。

總結(jié)

1. 設(shè)計(jì)前

一定要對(duì)用戶(hù)需求有著充分理解，了解大屏的展示場(chǎng)景及設(shè)計(jì)分辨率，還有大屏的拼接方法，最后是跟開(kāi)發(fā)溝通下實(shí)現(xiàn)的工具與方法。

2. 設(shè)計(jì)中

構(gòu)思布局，可以在紙上簡(jiǎn)單畫(huà)一下。根據(jù)需求定義設(shè)計(jì)關(guān)鍵詞，進(jìn)行設(shè)計(jì)的提煉與分析，方便自己找參考。顏色上背景深色為主，為了更好的聚焦，數(shù)據(jù)可以采用亮色，有一定的對(duì)比關(guān)系，便于業(yè)務(wù)信息傳達(dá)。字體上可以采用系統(tǒng)默認(rèn)字體，數(shù)字采用特殊字體的形式（根據(jù)實(shí)際需求參考，切記不要照搬）。圖表分析好數(shù)據(jù)，選擇恰當(dāng)?shù)恼故拘问剑瑫r(shí)保證視覺(jué)上的統(tǒng)一（分清頁(yè)面的主次關(guān)系，圖表的展示切莫過(guò)度設(shè)計(jì)，容易搶主體）。

3. 設(shè)計(jì)后

再次校驗(yàn)信息層級(jí)、文字大小、圖表等各層級(jí)間的對(duì)比關(guān)系是否傳達(dá)準(zhǔn)確，與技術(shù)同步溝通下技術(shù)的實(shí)現(xiàn)性。最后開(kāi)發(fā)完成后，要拿演示 demo 去現(xiàn)場(chǎng)測(cè)試，看下整體展示效果，測(cè)試輸出是否有問(wèn)題，有無(wú)拉伸問(wèn)題，拼接縫與內(nèi)容有無(wú)穿插，及時(shí)與開(kāi)發(fā)進(jìn)行頁(yè)面的校驗(yàn)工作，最終才算是設(shè)計(jì)完成。

本期案例分享是小六在設(shè)計(jì)中的大體思路。

歡迎關(guān)注作者微信公眾號(hào)：「小六可視化設(shè)計(jì)」