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

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

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

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

 案例解析 

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

問題

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

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

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

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

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

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

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

問題一：

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

注解：

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

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

問題二：

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

注解：

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

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

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

注解：

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

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

問題三：

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

注解：

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

注解：

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

注解：

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

注解：

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

注解：

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

問題四：

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