很多UI設(shè)計師突然會接到公司數(shù)據(jù)可視化設(shè)計的需求，如果不了解數(shù)據(jù)可視化設(shè)計，肯定是一頭霧水，不知從何入手。我嘗試簡要的把我近期做過的案例進(jìn)行記錄分享，不足之處歡迎大家隨時交流。

隨著大數(shù)據(jù)產(chǎn)業(yè)的蓬勃發(fā)展，很多企業(yè)都開始應(yīng)用數(shù)據(jù)可視化。所以數(shù)據(jù)可視化設(shè)計，如今絕對是熱門的設(shè)計之一。

很多UI設(shè)計師突然會接到公司數(shù)據(jù)可視化設(shè)計的需求，如果不了解數(shù)據(jù)可視化設(shè)計，肯定是一頭霧水，不知從何入手。我嘗試簡要的把我近期做過的案例進(jìn)行記錄分享，不足之處歡迎大家隨時交流。

首先放的是項目改版前的頁面：

需求介紹

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

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

（1）全局?jǐn)?shù)據(jù)

云平臺的數(shù)據(jù)總量，以及 4 個重要關(guān)注數(shù)據(jù)項，2 個次要關(guān)注數(shù)據(jù)項。

（2）云平臺的五?大模塊

1. 云端綜合調(diào)度
2. 數(shù)據(jù)查詢通道
3. 數(shù)據(jù)應(yīng)用處理理
4. 數(shù)據(jù)存儲管理
5. 管理理運行維護(hù)（只有兩個tab切換鏈接）

（3）搜索功能

搜索類型分為 6 個類型，默認(rèn)選中“綜合”類型進(jìn)行搜索。

（4）重點關(guān)注數(shù)據(jù)信息按指標(biāo)分多維度展示

原始圖上的維度包括:指標(biāo)、地圖、地域排名、部?門、類別。

（5）云導(dǎo)航

需求分析

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

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

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

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

結(jié)合這些問題進(jìn)行視覺改版，首先優(yōu)化頁面布局，通過分析對頁面重新布局，如下圖：

采用柵格化對稱布局 讓整體視覺左右平衡。

視覺設(shè)計：

了解需求，整合數(shù)據(jù)，分析出主要數(shù)據(jù)次要數(shù)據(jù)、總量數(shù)據(jù)細(xì)分?jǐn)?shù)據(jù)、各數(shù)據(jù)的維度等等，通過了解這些可以先設(shè)計出一個布局模版，也可以在紙上畫出來，布局可以在設(shè)計過程中隨時調(diào)整。

設(shè)計的風(fēng)格，一提到數(shù)據(jù)可視化大家往往能想到科技、數(shù)據(jù)、藍(lán)色等一些普遍關(guān)鍵詞。

跟客戶溝通之后，了解到客戶需求是：想做一個科技感強(qiáng)比較炫酷的視覺效果 。這也貼合以上這些關(guān)鍵詞，針對這些關(guān)鍵詞的提煉。

另外結(jié)合大屏的使用場景，背景色一般會選用暗色調(diào)，數(shù)據(jù)變化一般會選擇高亮色調(diào)，讓視覺更好地聚焦數(shù)據(jù)的變化，也會較省電。

主題風(fēng)格構(gòu)思階段：

原圖：中國地圖主圖模塊缺乏層次感，如圖：

?

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

數(shù)據(jù)圖表拆分：

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

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

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

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

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

可實現(xiàn)：主要是跟開發(fā)前期溝通好實現(xiàn)方式，一般都采用開源組件庫的居多比如echarts組件庫，我們設(shè)計的圖形圖表，要開發(fā)能夠?qū)崿F(xiàn)。

實際工作中，一些可視化效果開發(fā)用代碼寫很容易實現(xiàn)，效果也不錯，但這些效果設(shè)計師用Ps/Ai/Ae這些工具模擬時會發(fā)現(xiàn)比較困難。

同樣的，某些效果設(shè)計師用設(shè)計工具可以輕易實現(xiàn)，但開發(fā)要用代碼落地卻非常困難。所以大屏設(shè)計中跟開發(fā)常溝通非常重要，我們需要明確哪些地方設(shè)計師可以盡情發(fā)揮，哪些地方需要謹(jǐn)慎設(shè)計！

一個項目總有周期與預(yù)算限制，不會無限期的修改迭代，所以設(shè)計師在這里需要抓住重點，有取舍，不鉆牛角尖、死磕不放。

城市排名影響視覺數(shù)據(jù)多了，會對地圖展示造成影響，跟客戶溝通需優(yōu)化城市排名個數(shù)，只展示前五個，打破傳統(tǒng)條形圖的展示形式采用電池晶格的展示形式。

從頁面的整體看一下，已經(jīng)有三處用到了條形圖，柱狀圖，如果這里還是條形圖。那么頁面看起來會很單調(diào)，圖表也沒有表現(xiàn)出多樣性。所以現(xiàn)在設(shè)計要體現(xiàn)圖表的多樣性，也能夠有排名的直觀呈現(xiàn)。

以下圖表采用科技圓盤的形式，運用科技線條的上升狀態(tài)代表排名的先后順序，所有圖表都采用數(shù)據(jù)降序來展示排名更加直觀。

最后附上：最終視覺和動態(tài)效果圖

總結(jié)

大屏設(shè)計的基本步驟：

1. 需求分析
2. 優(yōu)化布局
3. 定義設(shè)計關(guān)鍵詞
4. 確立主圖展示風(fēng)格

以上是我對數(shù)據(jù)可視化大屏的案例總結(jié)，巴拉巴拉這么多，終于寫完了，希望能幫助到你。

除此之外還有很多地方?jīng)]有涉及到，包括具體設(shè)計的操作方式、選取圖形元素的具體方法，以及在各種大屏中所需要的相對應(yīng)的組件等。在龐大的可視化大屏設(shè)計系統(tǒng)中，還有很多值得學(xué)習(xí)參考和優(yōu)化的知識，歡迎各位大佬指正，大家一起努力。

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

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