隨著大數(shù)據(jù)產(chǎn)業(yè)的蓬勃發(fā)展，很多企業(yè)都開始應(yīng)用數(shù)據(jù)可視化。所以數(shù)據(jù)可視化設(shè)計(jì)，絕對(duì)是熱門的設(shè)計(jì)之一。很多 UI 設(shè)計(jì)師突然會(huì)接到公司數(shù)據(jù)可視化設(shè)計(jì)的需求，如果不了解數(shù)據(jù)可視化設(shè)計(jì)，肯定是一頭霧水，不知從何入手。本文結(jié)合最近設(shè)計(jì)案例，分享大屏可視化設(shè)計(jì)過程中遇到的一些問題以及設(shè)計(jì)思路，供大家一起交流與學(xué)習(xí)。

△ 最終動(dòng)態(tài)效果圖

案例分解

首先放的是項(xiàng)目改版前的頁(yè)面：

1. 需求介紹

某某應(yīng)用云，分為五大云平臺(tái)模塊：云端綜合調(diào)度、數(shù)據(jù)查詢通道、數(shù)據(jù)應(yīng)用處理、數(shù)據(jù)存儲(chǔ)管理、管理運(yùn)行維護(hù)。每個(gè)大模塊下?有若干個(gè)子系統(tǒng)。

可視化?屏首頁(yè)需要展示的內(nèi)容包括：

• 全局?jǐn)?shù)據(jù)：云平臺(tái)的數(shù)據(jù)總量，以及 4 個(gè)重要關(guān)注數(shù)據(jù)項(xiàng)，2 個(gè)次要關(guān)注數(shù)據(jù)項(xiàng)；
• 云平臺(tái)的五?大模塊：云端綜合調(diào)度、數(shù)據(jù)查詢通道、數(shù)據(jù)應(yīng)用處理理、數(shù)據(jù)存儲(chǔ)管理、管理運(yùn)行維護(hù)（只有兩個(gè) tab 切換鏈接）；
• 搜索功能：搜索類型分為 6 個(gè)，默認(rèn)選中「綜合」類型進(jìn)行搜索；
• 重點(diǎn)關(guān)注數(shù)據(jù)信息按指標(biāo)分多維度展示：原始圖上的維度包括指標(biāo)、地圖、地域排名、部?排名、類別；
• 云導(dǎo)航：展示場(chǎng)景在公司展廳，材質(zhì)為 Led 拼接屏，設(shè)計(jì)尺寸為 1920×1080。

2. 需求分析

分析大屏可視化的一些共性：

• 屏幕大：大屏一般都是多屏拼接，整體屏幕面積大。
• 觀距遠(yuǎn)：用戶需要遠(yuǎn)處觀看屏幕，要保證數(shù)據(jù)文字清晰可見。
• 交互弱：通過電腦已經(jīng)無法滿足大屏交互需求，現(xiàn)在也有部分開始采用 ipad、手機(jī)、激光筆等方式。
• 視覺強(qiáng)：背景色多采用重色，襯托凸顯數(shù)據(jù)，更好地為觀者傳達(dá)數(shù)據(jù)信息。
• 一屏一內(nèi)容：一屏內(nèi)容，說明一件主要事情，統(tǒng)計(jì)好它的相關(guān)數(shù)據(jù)，避免其他的干擾。

結(jié)合大屏的一些共性特點(diǎn)針對(duì)看到的線上舊版本設(shè)計(jì)，分析存在的問題。

• 布局混亂，導(dǎo)致視覺不平衡，看不出頁(yè)面層次。
• 藍(lán)色為主色調(diào)，黃色點(diǎn)綴顏色顯得比較單一沒有規(guī)則。
• 圖表比較單一，不能有效傳達(dá)數(shù)據(jù)信息。

3. 布局

整合數(shù)據(jù)，分析出主要數(shù)據(jù)、次要數(shù)據(jù)、總量數(shù)據(jù)、細(xì)分?jǐn)?shù)據(jù)、各數(shù)據(jù)的維度等等。首先優(yōu)化頁(yè)面布局，可以先在紙上畫一畫，然后腦子里有大概思路以后再用電腦繪制，如下圖：

采用柵格化對(duì)稱布局，讓整體視覺左右平衡。

4. 風(fēng)格

一提到數(shù)據(jù)可視化大家往往能想到科技、數(shù)據(jù)、藍(lán)色等一些普遍關(guān)鍵詞。

了解到客戶是想做一個(gè)科技感強(qiáng)、炫酷的視覺效果。可以在網(wǎng)上找一些效果圖或是自己曾經(jīng)做過的案例供客戶選擇，確定一個(gè)大致的風(fēng)格，然后結(jié)合具體的業(yè)務(wù)場(chǎng)景進(jìn)行設(shè)計(jì)。

5. 顏色

顏色上結(jié)合產(chǎn)品使用場(chǎng)景，以及整個(gè)產(chǎn)品調(diào)性還是以藍(lán)色為主，背景選用深色調(diào)，讓視覺更好聚焦，內(nèi)容部分采用比較透亮的藍(lán)色系，保證內(nèi)容與背景有一定的對(duì)比關(guān)系，便于業(yè)務(wù)信息傳達(dá)。

6. 主體地圖

地圖為大屏的主要展示內(nèi)容，首先分析展示的目的是為了看清各個(gè)城市間的不同分布情況，和城市數(shù)據(jù)的匯集效果。

如圖：

改版前：地圖過于單薄，沒有立體感，太平缺乏層次，顏色黃色不符合產(chǎn)品調(diào)性。

改版后：主色調(diào)改為科技藍(lán)，在原有地圖上增加外發(fā)光和多層陰影疊加，增加地圖的立體感，地圖上增加科技線條上升的效果代表每個(gè)城市數(shù)據(jù)變化的提升，地圖背景采用比較弱化的轉(zhuǎn)動(dòng)線條圓形，襯托地圖主體，使得畫面更加豐富。

7. 地圖效果的實(shí)現(xiàn)方法

首先用 ps 拉框助手新建一個(gè)山東的地圖（拉框助手的使用獲取方法可以參照上篇文章）。

完成后會(huì)得到一個(gè)叫 map 文件夾的地圖分層文件，如圖所示。這里需要對(duì)每個(gè)城市的顏色進(jìn)行調(diào)整，為了區(qū)分每個(gè)城市之間的數(shù)據(jù)不同關(guān)系。

調(diào)整完塊之間的顏色后，就需要給地圖整體增加立體效果。

首先，是整體給地圖加了一個(gè)描邊和外發(fā)光。描邊是為了強(qiáng)化地圖邊緣，外發(fā)光是為了地圖與背景有一個(gè)區(qū)分。

其次為了增加地圖立體感，需要給地圖增加多層陰影疊加的效果。復(fù)制現(xiàn)有形狀層，拼合成一個(gè)山東省的地圖，如下圖：

最后，把拼合好的圖層移動(dòng)到 map 文件夾下面，陰影可以添加多層，這里針對(duì)每一層進(jìn)行不同顏色大小的調(diào)整，就是下面的這種效果了，地圖的體積厚度感也就出來了。這里只是提供一個(gè)大概的思路，大家可以多去嘗試。

整體地圖效果調(diào)整完成后，就是給地圖增加些紋理，和上升線條這些細(xì)節(jié)上的效果了。紋理可以用圖案疊加，或者找一張紋理圖剪切蒙版實(shí)現(xiàn)，最后再添加上升線條的效果，地圖的效果就完成了。

最后加上線條上升的動(dòng)態(tài)效果：

8. 數(shù)據(jù)圖表拆分

在選定數(shù)據(jù)圖表之前，首先要確定圖表之間的關(guān)系，可以從以下四個(gè)維度進(jìn)行思考分析：

• 聯(lián)系：數(shù)據(jù)之間的相關(guān)性；
• 分布：指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律；
• 比較：數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面；
• 構(gòu)成：指標(biāo)里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何。

可以參照下面這個(gè)圖：

△ 圖片來自于網(wǎng)絡(luò)，侵刪

當(dāng)確定好分析維度后，事實(shí)上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數(shù)幾個(gè)圖表里篩選出最能體現(xiàn)我們?cè)O(shè)計(jì)意圖的那個(gè)就好了。

傳統(tǒng)的圖表比如 echarts 圖表在視覺上展示可能不是很美觀好看，可根據(jù)選擇的圖表在其基礎(chǔ)之上進(jìn)行美化設(shè)計(jì)，總之選定圖表最重要的兩個(gè)點(diǎn)就是：易理解、可實(shí)現(xiàn)。

易理解：就是要考慮最終用戶，可視化結(jié)果應(yīng)該是一看就懂，不需要思考和過度理解，因而選定圖表時(shí)要理性，避免為了視覺上的效果而選擇一些對(duì)用戶不太友好的圖形及元素。

可實(shí)現(xiàn)：主要是跟開發(fā)前期溝通好實(shí)現(xiàn)方式，一般都采用開源組件庫(kù)的居多，比如 echarts 組件庫(kù)，我們?cè)O(shè)計(jì)的圖形圖表，要開發(fā)能夠?qū)崿F(xiàn)。實(shí)際工作中，一些可視化效果開發(fā)用代碼寫很容易實(shí)現(xiàn)，效果也不錯(cuò)，但這些效果設(shè)計(jì)師用 Ps/Ai/Ae 這些工具模擬時(shí)會(huì)發(fā)現(xiàn)比較困難。同樣的，某些效果設(shè)計(jì)師用設(shè)計(jì)工具可以輕易實(shí)現(xiàn)，但開發(fā)要用代碼落地卻非常困難，所以大屏設(shè)計(jì)中跟開發(fā)常溝通非常重要，我們需要明確哪些地方設(shè)計(jì)師可以盡情發(fā)揮，哪些地方需要謹(jǐn)慎設(shè)計(jì)。一個(gè)項(xiàng)目總有周期與預(yù)算限制，不會(huì)無限期的修改迭代，所以設(shè)計(jì)師在這里需要抓住重點(diǎn)，有取舍，不鉆牛角尖、死磕不放。

案例中在圖表選擇上，強(qiáng)化科技感元素，條形圖打破傳統(tǒng)條形圖的展示形式，采用電池晶格的展示形式，在保持圖表功能的同時(shí)更加凸顯科技感。

從頁(yè)面的整體看，已經(jīng)有兩處用到了條形圖、柱狀圖，如果這里還是條形圖，那么頁(yè)面看起來會(huì)很單調(diào)，圖表也沒有表現(xiàn)出多樣性，所以現(xiàn)在設(shè)計(jì)要體現(xiàn)圖表的多樣性也能夠有排名的直觀呈現(xiàn)。以下圖表采用科技圓盤的形式，運(yùn)用科技線條的上升狀態(tài)代表排名的先后順序，所有圖表都采用數(shù)據(jù)降序來展示排名更加直觀。

改版前的圖標(biāo)樣式比較單一，改版后針對(duì)每組數(shù)據(jù)不同的對(duì)比形式，采用比較貼合的圖表進(jìn)行展示，篇幅原因就不一一做展示了。

附上最終視覺效果圖：

總結(jié)

大屏設(shè)計(jì)需要注意的點(diǎn)：

• 需求分析：對(duì)需求進(jìn)行梳理，分清數(shù)據(jù)間的主次關(guān)系以及對(duì)比指標(biāo)，跟客戶溝通清楚細(xì)節(jié)。
• 確認(rèn)布局：布局上根據(jù)數(shù)據(jù)主次關(guān)系，采用柵格化布局（可以在紙上畫一下理清思路）。
• 情緒板定義設(shè)計(jì)關(guān)鍵詞，確定風(fēng)格。找參考圖給客戶確認(rèn)大致的設(shè)計(jì)方向。
• 顏色貼合業(yè)務(wù)。
• 圖表易理解可實(shí)現(xiàn)。

以上是我對(duì)數(shù)據(jù)可視化大屏的案例總結(jié)，希望能幫助到你。除此之外還有很多地方?jīng)]有涉及到，包括具體設(shè)計(jì)的操作方式、選取圖形元素的具體方法，以及在各種大屏中所需要的相對(duì)應(yīng)的組件等，在龐大的可視化大屏設(shè)計(jì)系統(tǒng)中，還有很多值得學(xué)習(xí)參考和優(yōu)化的知識(shí)，歡迎溝通交流，大家一起努力。

文章來源：優(yōu)設(shè)