什麼是數據可視化大屏

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

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

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

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

設計前的準備

基礎大屏製作準備：

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

大屏製作一般只需四步：

• 整體：設置背景色、插入背景圖、頁面設置等。
• 部分：主標題、各圖形標題、動態 KPI 指標、圖表製作等。
• 細節：對標題、圖表細節的調整。
• 動態：添加動態效果，提升大屏展示效果。

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

設計思路案例實操

1. 需求分析

設計要求

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

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

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

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

2. 布局

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

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

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

3. 風格

根據需求定義幾個設計關鍵詞，方便自己找參考，個人推薦去 Pinterest、behance，裏面有很多炫酷的效果可以參考。

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

△ 圖片來自網絡，如侵權刪

4. 顏色

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

5. 字體

字體上採用瀏覽器默認微軟雅黑，数字採用特殊字體 DS-Digital。

6. 數據圖表

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

常用的圖表有幾大類別：

• 一個或者多個類別不同時間的的對比比較。典型的圖表有折線圖、條形圖、堆疊條形圖、蠟燭圖、區域圖、時間線等。
• 不同類別數據的對比。典型的圖表有柱狀圖、分組條形圖、氣泡圖、平行坐標圖、多折線圖、子彈圖等。
• 排名，主要展示項目數據的一個排名情況。典型的圖表有有序條形圖、有序柱狀圖、平行坐標圖等。
• 不同數據對於整體的佔比情況。典型的圖表有堆疊條形圖、餅狀圖、環形圖、堆疊區域圖、樹形圖、玫瑰圖等。

以上是一些比較常見的分類，當然還有許多不常用的圖表沒做統計區分，比如散點圖、氣泡圖、熱力圖、網絡圖等等，這裏就不一一列舉了。

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

https://antv.vision/zh 

△ 圖片來自網絡，如侵權刪

這裏推薦一個快速生成圖表的 ps 插件──ps拉框助手。如圖所示，該插件整合了折線圖、柱狀圖、橫向柱狀圖、餅圖、雷達圖、地圖，還有系統 UI 等等。非常方便，用選區工具拉取選區框，點擊參數一鍵生成。

閱讀文章 >>

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

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

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

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

粘貼到這裏，切記不要粘貼多次，會很卡導致數據錯誤。粘貼完之後，記得用選區工具畫一個選區之後再點擊自動繪製，如圖：

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

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

總結

1. 設計前

一定要對用戶需求有着充分理解，了解大屏的展示場景及設計分辨率，還有大屏的拼接方法，最後是跟開發溝通下實現的工具與方法。

2. 設計中

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

3. 設計后

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

本期案例分享是小六在設計中的大體思路。

閱讀文章 >>

歡迎關注作者微信公眾號：「小六可視化設計」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極5平台_數據可視化大屏該如何設計？結合實戰案例來教你！