什么是數據可視化大屏

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

所謂大屏，顧名思義就是一個

很大的屏 !!!

可視化應用非常廣如ToC、ToB、ToG等都會存在。一般應用在交易大廳，展覽中心，管控中心，老板辦公室等等場景，把一些關鍵數據集中展示在一塊巨大的LED屏幕上，其實就是巨大化的Dashboard，是當今數一數二的裝逼方式。

數據可視化的本質是視覺對話，數據可視化將數據分析技術與圖形技術結合，清晰有效地將分析結果信息進行解讀和傳達。

設計前的準備

基礎大屏制作準備：

1、確認需求：確認展示的主題，具體展示的內容，各部分內容數據用到的圖表類型。

2、使用場景：確認大屏的使用場景，設計尺寸與大屏的拼接方式（拼接屏像素超大可等比例縮放）

3、開發(fā)實現：具體設計要根據項目確定實現的工具，現在應用比較多的：web、u3d、ue4等 不同工具實現出來的效果也是大有不同，根據項目實際需求以及開發(fā)成本，這塊設計前需要跟開發(fā)充分溝通。

4、設計素材：設計整體的背景圖、包括布局、配色等，以及大屏中用到的小圖標元素。

大屏制作一般只需四步：

1、整體：設置背景色、插入背景圖、頁面設置等。

2、部分：主標題、各圖形標題、動態(tài)KPI指標、圖表制作等。

3、細節(jié)：對標題、圖表細節(jié)的調整。

4、動態(tài)：添加動態(tài)效果，提升大屏展示效果。

（以上只是寫的一個大概的思路，具體操作流程肯定是根據實際情況做調整，要復雜的多，最重要的是多溝通、多思考）

設計思路案例實操

需求分析

設計要求：

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

黑客組織信息舉例：

名稱；摩訶草  位置：巴基斯坦 活躍度：80

攻擊目標：韓國 中國 朝鮮 德國

展示信息僅作為參考，可以自由發(fā)揮

風格要求：科技感 FUI

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

布局

個人習慣，根據需求以及數據大概整理一個布局，可以在紙上大概畫一下，然后在軟件里具體細化布局。

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

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

風格

根據需求定義幾個設計關鍵詞，方便自己找參考直接打開花瓣站酷一陣搜（在這里個人推薦去Pinterest、behance 里面有很多炫酷的fui效果可以參考）。

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

圖片來自網絡，如侵權刪

顏色

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

字體

字體上采用瀏覽器默認微軟雅黑，數字采用特殊字體DS-Digital

數據圖表

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

常用的圖表有以下幾大類別：

1、一個或者多個類別不同時間的的對比比較。

典型的圖表有折線圖、條形圖、堆疊條形圖、蠟燭圖、區(qū)域圖、時間線等。

2、不同類別數據的對比

典型的圖表有柱狀圖、分組條形圖、氣泡圖、平行坐標圖、多折線圖、子彈圖等。

3、排名 主要展示項目數據的一個排名情況。

典型的圖表有有序條形圖、有序柱狀圖、平行坐標圖等。

4、不同數據對于整體的占比情況

典型的圖表有堆疊條形圖、餅狀圖、環(huán)形圖、堆疊區(qū)域圖、樹形圖、玫瑰圖等。

以上是一些比較常見的一些分類當然還有許多不常用的圖表沒做統(tǒng)計區(qū)分，比如散點圖、氣泡圖、熱力圖、網絡圖等等這里就不一一列舉了（推薦大家可以看下網上的開源組件庫Echarts、Antv等等 好多）這塊也有螞蟻金服官方的分類非常詳細

https://antv.vision/zh 附上地址，需要的自取。

圖片來自網絡，如侵權刪

這里推薦一快速生成圖表的ps插件-ps拉框助手如圖所示，該插件整合了折線圖、柱狀圖、橫向柱狀圖、餅圖、雷達圖、地圖（該功能太贊了）還有系統(tǒng)UI等等。非常方便，用選區(qū)工具拉取選區(qū)框點擊參數一鍵生成。

實操下如何快速一鍵生成地圖的效果，省去了做可視化來回地圖的煩惱，下面開始實操：

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

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

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

粘貼到這里，這里切記不要粘貼多次會很卡導致數據錯誤，插件里也有提示。粘貼完之后，記得用選區(qū)工具畫一個選區(qū)之后再點擊自動繪制如圖：

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

一份中國地圖就生成啦，就問你它香不香，而且生成的文件都是分層的矢量形狀層，可以繼續(xù)編輯。是不是功能非常強大，其他模塊的功能就不一一展示了，插件官方生怕童鞋們不會用，在插件的最后一個模塊貼心的準備了學習手冊，點擊可以查看相關的視頻教程，非常的詳細，感興趣的童鞋可以去試試哦。

插件源文件小六也給大家備好了，公眾號回復“ps插件”有需要的童鞋自行領取喲。

總結

1、設計前：一定要對用戶需求有著充分分析和理解，然后要知道大屏的展示場景及設計分辨率，大屏的拼接方法都要有一定的了解，最后是跟開發(fā)溝通下實現的工具與方法。

2、設計中：構思布局，可以在紙上簡單畫一下。根據需求定義設計關鍵詞進行設計的提煉與分析，方便自己找參考。顏色上背景深色為主，為了更好的聚焦，數據可以采用亮色，有一定的對比關系，便于業(yè)務信息傳達。字體上可以采用系統(tǒng)默認字體 數字采用特殊字體包的形式（這塊根據實際需求，切記不要照搬）。圖表分析好數據，選擇恰當的展示形式，同時保證視覺上的統(tǒng)一（分清頁面的主次關系，圖表的展示切莫設計過度，容易造成搶主體）

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

作者：小六