本文作者從實(shí)際工作出發(fā)，結(jié)合案例分享了大屏可視化設(shè)計(jì)過程中的一些問題以及設(shè)計(jì)思路，供大家一起參考與學(xué)習(xí)。

重點(diǎn)概覽：

1. 什么是數(shù)據(jù)可視化大屏
2. 可視化大屏設(shè)計(jì)前的準(zhǔn)備
3. 具體可視化設(shè)計(jì)思路實(shí)操
4. 總結(jié)

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

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

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

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

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

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

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

1. 確認(rèn)需求：確認(rèn)展示的主題，具體展示的內(nèi)容，各部分內(nèi)容數(shù)據(jù)用到的圖表類型。
2. 使用場(chǎng)景：確認(rèn)大屏的使用場(chǎng)景，設(shè)計(jì)尺寸與大屏的拼接方式（拼接屏像素超大可等比例縮放）
3. 開發(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ā)充分溝通。
4. 設(shè)計(jì)素材：設(shè)計(jì)整體的背景圖、包括布局、配色等，以及大屏中用到的小圖標(biāo)元素。

大屏制作一般只需四步：

1. 整體：設(shè)置背景色、插入背景圖、頁面設(shè)置等。
2. 部分：主標(biāo)題、各圖形標(biāo)題、動(dòng)態(tài)KPI指標(biāo)、圖表制作等。
3. 細(xì)節(jié)：對(duì)標(biāo)題、圖表細(xì)節(jié)的調(diào)整。
4. 動(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)，頁面要顯示黑客組織的信息和被攻擊目標(biāo)的信息。

黑客組織信息舉例：

• 名稱；摩訶草 位置：巴基斯坦 活躍度：80
• 攻擊目標(biāo)：韓國 中國 朝鮮 德國（展示信息僅作為參考，可以自由發(fā)揮）
• 風(fēng)格要求：科技感 FUI

拿到需求，確定好展示場(chǎng)景、設(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里面有很多炫酷的fui效果可以參考）。

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

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

4. 顏色

相比較網(wǎng)頁版設(shè)計(jì)展示，大屏更傾向于選用深色調(diào)背景，不僅為了讓視覺更好聚焦，而且長(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ù)種類，同時(shí)讓數(shù)據(jù)之間可以比較。主要就是要考慮最終用戶，圖表結(jié)果應(yīng)該是一看就懂，不需要思考和過度理解，因而選定圖表時(shí)要理性，避免為了視覺上的效果而選擇一些對(duì)用戶不太友好的圖形及元素。

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

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

以上是一些比較常見的一些分類當(dāng)然還有許多不常用的圖表沒做統(tǒng)計(jì)區(qū)分，比如散點(diǎn)圖、氣泡圖、熱力圖、網(wǎng)絡(luò)圖等等這里就不一一列舉了（推薦大家可以看下網(wǎng)上的開源組件庫Echarts、Antv等等）。

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

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

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

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

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

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

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

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

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

總結(jié)

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

2）設(shè)計(jì)中：構(gòu)思布局，可以在紙上簡(jiǎn)單畫一下。根據(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ù)恼故拘问?，同時(shí)保證視覺上的統(tǒng)一（分清頁面的主次關(guān)系，圖表的展示切莫設(shè)計(jì)過度，容易造成搶主體）

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

作者：小六；公眾號(hào)：小六可視化設(shè)計(jì)

本文由 @小六 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議