說起數(shù)據(jù)可視化設(shè)計，如今絕對是熱門的設(shè)計之一，而真正懂?dāng)?shù)據(jù)可視化設(shè)計的設(shè)計師卻不多，隨著大數(shù)據(jù)產(chǎn)業(yè)的蓬勃發(fā)展，很多企業(yè)都開始應(yīng)用數(shù)據(jù)可視化。很多UI設(shè)計師突然會接到公司數(shù)據(jù)可視化設(shè)計的需求，如果不了解數(shù)據(jù)可視化的設(shè)計，那么肯定是一頭霧水，不知從何入手。

什么是數(shù)據(jù)可視化？

數(shù)據(jù)可視化主要旨在借助于圖形化手段，清晰有效地傳達(dá)與溝通信息。簡而言之就是把枯燥無味的數(shù)據(jù)，通過圖形化設(shè)計表現(xiàn)，達(dá)到一種更加精準(zhǔn)和的數(shù)據(jù)分析和表達(dá)。

下面要跟大家分享的是，我經(jīng)手的一個真實(shí)數(shù)據(jù)可視化大屏項(xiàng)目改版，接下來會分享給大家一套全面的數(shù)據(jù)可視化技法，包括科學(xué)的運(yùn)用圖表、運(yùn)用色彩、把控數(shù)據(jù)層級以及視覺層級，達(dá)到美學(xué)形式與功能需要齊頭并進(jìn)。

 案例解析 

首先看下線上舊版的設(shè)計，分析存在的問題。

問題

1、左側(cè)大面積文字導(dǎo)致視覺不平衡，且密集

2、整體用色暗淡，圖表用色沒有規(guī)則

3、圖表運(yùn)用不恰當(dāng)，不能有效傳達(dá)數(shù)據(jù)信息

4、缺標(biāo)題，數(shù)據(jù)信息優(yōu)先級排列不恰當(dāng)

結(jié)合這些問題作出了改版，

因?yàn)槭歉陌嫠阅軌蚩吹骄€上真實(shí)的數(shù)據(jù)信息，這樣舊版的數(shù)據(jù)呈現(xiàn)就能給到重要的設(shè)計參考價值，例如能夠知道TOP10熱門關(guān)鍵字大概是幾個字，在設(shè)計圖表時就會依據(jù)字?jǐn)?shù)的長短來參考設(shè)計，也可以知道是否有極端數(shù)據(jù)，從而運(yùn)用更適合的圖表呈現(xiàn)等等。

下面依次對照新改的版本，解決舊版出現(xiàn)的問題。

問題一：

1、左側(cè)大面積文字導(dǎo)致視覺不平衡，且密集

注解：

由于左半部分有大篇幅的文字，視覺上會顯得密集，容易視覺疲勞，右半部分大面積的色塊圖表使得整個界面視覺上不平衡。

解決方案就是在把文字用排行榜圖形分開，放到文字中間部分，這樣就豐富了只有文字的單調(diào)設(shè)計，整體視覺較為平衡和諧，并且這樣還能夠突出強(qiáng)調(diào)重要數(shù)據(jù)信息。

問題二：

2、整體用色暗淡，圖表用色沒有規(guī)則

注解：

提取舊版的顏色，色彩很暗淡，對于深色背景來說，這樣的配色方式并不會有好的視覺表現(xiàn)。

暗色背景通常用高飽和高明度的顏色，對比暗色背景更能聚焦視覺，突出數(shù)據(jù)可視化的表現(xiàn)，亮麗的色彩能夠讓數(shù)據(jù)可視化設(shè)計的更加絢麗。

數(shù)據(jù)可視化大屏設(shè)計慎用大面積的漸變色，小面積可嘗試，一般大屏都是拼接屏，品牌不一樣色差會表現(xiàn)不一，所以初稿出來后可以先去大屏上看下效果。

注解：

圖表用色沒有規(guī)則，上圖三個圖表都表現(xiàn) “正面” “中立” “負(fù)面” 三個維度數(shù)據(jù)信息，但在用色上沒有一個統(tǒng)一的規(guī)則，例如三個圖表中黃色分別代表不同的維度信息，這樣就無法建立觀者的認(rèn)知。

“負(fù)面”有警示的作用，運(yùn)用紅色調(diào)較為合理，“中立”色彩情緒上適合黃色調(diào)，黃色會給人中性的感受，例如馬路上的等待的黃燈，例如一片樹葉從綠色到黃色再到枯萎灰色，給人一種過程中的中立情緒感受等，“正面”就是給人積極的一面，所以綠色或者主題色藍(lán)色都是很恰當(dāng)?shù)摹?

問題三：

3、圖表運(yùn)用不恰當(dāng)，不能有效傳達(dá)數(shù)據(jù)信息

注解：

同一個界面中左側(cè)文字TOP10屬性類似的“核心媒體TOP10”展示形式最好能有共性。舊版運(yùn)用了柱狀圖并不恰當(dāng)，尤其是標(biāo)題字?jǐn)?shù)過多時候并不推薦使用柱狀圖文字傾斜的展示方式，改版后加上相同的排行榜圖標(biāo)，數(shù)據(jù)直接展示出來，TOP10的效果會更好。

注解：

數(shù)據(jù)需要對比分析，顯然這個玫瑰圖表并不能很好的說明對比，每個維度大小排列沒有規(guī)律，實(shí)際數(shù)據(jù)分布不均勻，導(dǎo)致沒有對比的效果，改版后突出總的數(shù)據(jù)，用條形圖從大到小依次排列各維度數(shù)據(jù)，數(shù)據(jù)上有對比，視覺上更有主次。

注解：

首先是舊版用色不恰當(dāng)，最嚴(yán)重的問題是圖表上沒有任何數(shù)據(jù)，因?yàn)檎故拘偷拇笃?，很少有交互行為，這樣的設(shè)計是不可取的，不能讓觀者去猜百分比數(shù)據(jù)，數(shù)據(jù)可視化就要用圖表數(shù)據(jù)的形式展示出來最直接的信息，除非是展示趨勢并不是準(zhǔn)確的數(shù)據(jù)。

注解：

舊版用的條形堆積圖，其實(shí)更適合百分比數(shù)據(jù)的對比呈現(xiàn)，一個維度下面有若干個子項(xiàng)，比較適合分組柱狀圖（新改版為分組柱狀圖）或者分組條形圖更為恰當(dāng)。

注解：

舊版色彩搭配不和諧，趨勢圖需要突出趨勢線，而不是體現(xiàn)數(shù)據(jù)的面積，紅框注釋不夠直接尤其在顏色過多時，更不好分辨各個顏色指向的維度，新版的設(shè)計則能夠準(zhǔn)確指出各個維度的趨勢線。

問題四：

4、缺標(biāo)題，數(shù)據(jù)信息優(yōu)先級排列不恰當(dāng)