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

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

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

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

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

大屏制作一般只需四步：

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

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

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

1. 需求分析

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

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

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

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

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

2. 布局

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

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

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

3. 風(fēng)格

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

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

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

4. 顏色

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

5. 字體

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

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

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

常用的圖表有幾大類別：

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

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

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

https://antv.vision/zh?

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

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

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

新建畫布，打開拉框助手，選中地圖，如圖：

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

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

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

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

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

總結(jié)

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

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

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

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

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

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

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

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