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