2019-7-3 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
前言
說起數(shù)據(jù)可視化設(shè)計，如今絕對是熱門的設(shè)計之一，而真正懂數(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ù)可視化主要旨在借助于圖形化手段，清晰有效地傳達與溝通信息。簡而言之就是把枯燥無味的數(shù)據(jù)，通過圖形化設(shè)計表現(xiàn)，達到一種更加精準和的數(shù)據(jù)分析和表達。
下面要跟大家分享的是，我經(jīng)手的一個真實數(shù)據(jù)可視化大屏項目改版，接下來會分享給大家一套全面的數(shù)據(jù)可視化技法，包括科學(xué)的運用圖表、運用色彩、把控數(shù)據(jù)層級以及視覺層級，達到美學(xué)形式與功能需要齊頭并進。
案例解析
首先看下線上舊版的設(shè)計，分析存在的問題。
問題
1、左側(cè)大面積文字導(dǎo)致視覺不平衡，且密集
2、整體用色暗淡，圖表用色沒有規(guī)則
3、圖表運用不恰當，不能有效傳達數(shù)據(jù)信息
4、缺標題，數(shù)據(jù)信息優(yōu)先級排列不恰當
結(jié)合這些問題作出了改版，
因為是改版所以能夠看到線上真實的數(shù)據(jù)信息，這樣舊版的數(shù)據(jù)呈現(xiàn)就能給到重要的設(shè)計參考價值，例如能夠知道TOP10熱門關(guān)鍵字大概是幾個字，在設(shè)計圖表時就會依據(jù)字數(shù)的長短來參考設(shè)計，也可以知道是否有極端數(shù)據(jù)，從而運用更適合的圖表呈現(xiàn)等等。
下面依次對照新改的版本，解決舊版出現(xiàn)的問題。
問題一：
1、左側(cè)大面積文字導(dǎo)致視覺不平衡，且密集
注解：
由于左半部分有大篇幅的文字，視覺上會顯得密集，容易視覺疲勞，右半部分大面積的色塊圖表使得整個界面視覺上不平衡。
解決方案就是在把文字用排行榜圖形分開，放到文字中間部分，這樣就豐富了只有文字的單調(diào)設(shè)計，整體視覺較為平衡和諧，并且這樣還能夠突出強調(diào)重要數(shù)據(jù)信息。
問題二：
2、整體用色暗淡，圖表用色沒有規(guī)則
注解：
提取舊版的顏色，色彩很暗淡，對于深色背景來說，這樣的配色方式并不會有好的視覺表現(xiàn)。
暗色背景通常用高飽和高明度的顏色，對比暗色背景更能聚焦視覺，突出數(shù)據(jù)可視化的表現(xiàn)，亮麗的色彩能夠讓數(shù)據(jù)可視化設(shè)計的更加絢麗。
數(shù)據(jù)可視化大屏設(shè)計慎用大面積的漸變色，小面積可嘗試，一般大屏都是拼接屏，品牌不一樣色差會表現(xiàn)不一，所以初稿出來后可以先去大屏上看下效果。
注解：
圖表用色沒有規(guī)則，上圖三個圖表都表現(xiàn) “正面” “中立” “負面” 三個維度數(shù)據(jù)信息，但在用色上沒有一個統(tǒng)一的規(guī)則，例如三個圖表中黃色分別代表不同的維度信息，這樣就無法建立觀者的認知。
“負面”有警示的作用，運用紅色調(diào)較為合理，“中立”色彩情緒上適合黃色調(diào)，黃色會給人中性的感受，例如馬路上的等待的黃燈，例如一片樹葉從綠色到黃色再到枯萎灰色，給人一種過程中的中立情緒感受等，“正面”就是給人積極的一面，所以綠色或者主題色藍色都是很恰當?shù)摹?
問題三：
3、圖表運用不恰當，不能有效傳達數(shù)據(jù)信息
注解：
同一個界面中左側(cè)文字TOP10屬性類似的“核心媒體TOP10”展示形式最好能有共性。舊版運用了柱狀圖并不恰當，尤其是標題字數(shù)過多時候并不推薦使用柱狀圖文字傾斜的展示方式，改版后加上相同的排行榜圖標，數(shù)據(jù)直接展示出來，TOP10的效果會更好。
注解：
數(shù)據(jù)需要對比分析，顯然這個玫瑰圖表并不能很好的說明對比，每個維度大小排列沒有規(guī)律，實際數(shù)據(jù)分布不均勻，導(dǎo)致沒有對比的效果，改版后突出總的數(shù)據(jù)，用條形圖從大到小依次排列各維度數(shù)據(jù)，數(shù)據(jù)上有對比，視覺上更有主次。
注解：
首先是舊版用色不恰當，最嚴重的問題是圖表上沒有任何數(shù)據(jù)，因為展示型的大屏，很少有交互行為，這樣的設(shè)計是不可取的，不能讓觀者去猜百分比數(shù)據(jù)，數(shù)據(jù)可視化就要用圖表數(shù)據(jù)的形式展示出來最直接的信息，除非是展示趨勢并不是準確的數(shù)據(jù)。
注解：
舊版用的條形堆積圖，其實更適合百分比數(shù)據(jù)的對比呈現(xiàn)，一個維度下面有若干個子項，比較適合分組柱狀圖（新改版為分組柱狀圖）或者分組條形圖更為恰當。
注解：
舊版色彩搭配不和諧，趨勢圖需要突出趨勢線，而不是體現(xiàn)數(shù)據(jù)的面積，紅框注釋不夠直接尤其在顏色過多時，更不好分辨各個顏色指向的維度，新版的設(shè)計則能夠準確指出各個維度的趨勢線。
問題四：
4、缺標題，數(shù)據(jù)信息優(yōu)先級排列不恰當
注解：
新聞的標題跟轉(zhuǎn)發(fā)數(shù)才是觀者關(guān)注的，而來源和時間就是次要關(guān)注信息，所以視覺上要為觀者分出層級，這樣不僅能夠使觀者看著更舒適，視覺上也很有層次，不雜亂。
舊版標題、來源、時間、轉(zhuǎn)發(fā)數(shù)、都是相對于內(nèi)容居中的狀態(tài)，這種排版是不符合表格排版規(guī)則的，簡單的做法就是文字左對齊，數(shù)字右對齊，數(shù)字右對齊能夠更快速識別數(shù)據(jù)量大小，跟其他數(shù)據(jù)的對比，文字左對齊則是根據(jù)人從左到右的閱讀習(xí)慣。
之前專門總結(jié)過一篇數(shù)據(jù)表格如何排版的文章，想了解的朋友，文章下面有數(shù)據(jù)可視化系列文章鏈接。
注解：
設(shè)計數(shù)據(jù)可視化大屏?xí)r一定要考慮用戶瀏覽數(shù)據(jù)的優(yōu)先級的構(gòu)架，例如要遵循先總后分，先具體后抽象的邏輯，上圖舊版把趨勢放到了頁面的第一視覺位置，就有點宣兵奪主了，根據(jù)先具體后抽象，改版后具體數(shù)據(jù)放到第一視覺位置，趨勢信息排后。
舊版大屏沒有標題，我是誰？我在干什么？我要去哪里？所以標題務(wù)必得有。
總結(jié)：
說了這么多設(shè)計要點，新手可能還是不知道設(shè)計的切入點在哪里，所以總結(jié)一個數(shù)據(jù)可視化設(shè)計分三步走法。
第一步：了解數(shù)據(jù)要表達的本質(zhì)。
拿到一組數(shù)據(jù)，先分析主次，這組數(shù)據(jù)要表達什么？是展示數(shù)據(jù)，還是對比數(shù)據(jù)，或是實時監(jiān)控數(shù)據(jù)，從而確定展示的優(yōu)先級。
第二步：確定使用圖表。
通過了解數(shù)據(jù)要表達的本質(zhì)后，選擇適合他的圖表，這時候就需要打開幾個開源的圖表網(wǎng)站找圖表，記住你的圖表用的是網(wǎng)站的哪一個，開發(fā)如果找不到就丟給他網(wǎng)址。
網(wǎng)站有：Fusion Design、螞蟻數(shù)據(jù)可視化-AntV、ECharts Examples、Highcharts
第三步：整體效果調(diào)整
功能性的數(shù)據(jù)展示都沒問題，還要看下整體效果，例如用了過于多的柱狀圖，可能就會影響了整體的美感，圖表盡可能多樣性，數(shù)據(jù)表達信息就要用不同的圖表展示。
最后
數(shù)據(jù)可視化設(shè)計核心就是，通過美學(xué)設(shè)計形式把數(shù)據(jù)精準和的分析和表達。
數(shù)據(jù)可視化設(shè)計是目前較為熱門的設(shè)計工種，通過本文分享的項目迭代案例，希望能夠讓你對數(shù)據(jù)可視化有些許了解。
藍藍設(shè)計的小編 http://www.88yangsc.com