數據可視化大屏設計經驗分享 【進階篇】

前言

提及數據可視化設計，現在絕對是熱門的設計之一，而真正懂數據可視化設計的設計師卻很少，隨着大數據產業的蓬勃發展，不少企業都開始應用數據可視化。不少UI設計師忽然會接到公司數據可視化設計的需求，若是不瞭解數據可視化的設計，那麼確定是一頭霧水，不知從何入手。

什麼是數據可視化？

數據可視化主要旨在藉助於圖形化手段，清晰有效地傳達與溝通訊息。簡而言之就是把枯燥無味的數據，經過圖形化設計表現，達到一種更加精準和高效的數據分析和表達。

下面要跟你們分享的是，我經手的一個真實數據可視化大屏項目改版，接下來會分享給你們一套全面的數據可視化技法，包括科學的運用圖表、運用色彩、把控數據層級以及視覺層級，達到美學形式與功能須要齊頭並進。

案例解析 

首先看下線上舊版的設計，分析存在的問題。（長屏須要橫屏觀看）

 

 

問題

一、左側大面積文字致使視覺不平衡，且密集

二、總體用色暗淡，圖表用色沒有規則

三、圖表運用不恰當，不能有效傳達數據信息

四、缺標題，數據信息優先級排列不恰當

結合這些問題做出了改版，（長屏須要橫屏觀看）

 

 

由於是改版因此可以看到線上真實的數據信息，這樣舊版的數據呈現就能給到重要的設計參考價值，例如可以知道TOP10熱門關鍵字大概是幾個字，在設計圖表時就會依據字數的長短來參考設計，也能夠知道是否有極端數據，從而運用更適合的圖表呈現等等。

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

問題一：

一、左側大面積文字致使視覺不平衡，且密集

 

 

註解：

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

解決方案就是在把文字用排行榜圖形分開，放到文字中間部分，這樣就豐富了只有文字的單調設計，總體視覺較爲平衡和諧，而且這樣還可以突出強調重要數據信息。

問題二：

二、總體用色暗淡，圖表用色沒有規則

 

 

註解：

提取舊版的顏色，色彩很暗淡，對於深色背景來講，這樣的配色方式並不會有好的視覺表現。

暗色背景一般用高飽和高明度的顏色，對比暗色背景更能聚焦視覺，突出數據可視化的表現，亮麗的色彩可以讓數據可視化設計的更加絢麗。

數據可視化大屏設計慎用大面積的漸變色，小面積可嘗試，通常大屏都是拼接屏，品牌不同色差會表現不一，因此初稿出來後能夠先去大屏上看下效果。

 

 

註解：

圖表用色沒有規則，上圖三個圖表都表現 「正面」 「中立」 「負面」 三個維度數據信息，但在用色上沒有一個統一的規則，例如三個圖表中黃色分別表明不一樣的維度信息，這樣就沒法創建觀者的認知。

 

 

「負面」有警示的做用，運用紅色調較爲合理，「中立」色彩情緒上適合黃色調，黃色會給人中性的感覺，例如馬路上的等待的黃燈，例如一片樹葉從綠色到黃色再到枯萎灰色，給人一種過程當中的中立情緒感覺等，「正面」就是給人積極的一面，因此綠色或者主題色藍色都是很恰當的。

問題三：

三、圖表運用不恰當，不能有效傳達數據信息

 

 

註解：

同一個界面中左側文字TOP10屬性相似的「核心媒體TOP10」展現形式最好能有共性。舊版運用了柱狀圖並不恰當，尤爲是標題字數過多時候並不推薦使用柱狀圖文字傾斜的展現方式，改版後加上相同的排行榜圖標，數據直接展現出來，TOP10的效果會更好。

 

 

註解：

數據須要對比分析，顯然這個玫瑰圖表並不能很好的說明對比，每一個維度大小排列沒有規律，實際數據分佈不均勻，致使沒有對比的效果，改版後突出總的數據，用條形圖從大到小依次排列各維度數據，數據上有對比，視覺上更有主次。

 

 

註解：

首先是舊版用色不恰當，最嚴重的問題是圖表上沒有任何數據，由於展現型的大屏，不多有交互行爲，這樣的設計是不可取的，不能讓觀者去猜百分比數據，數據可視化就要用圖表數據的形式展現出來最直接的信息，除非是展現趨勢並非準確的數據。

 

 

註解：

舊版用的條形堆積圖，其實更適合百分比數據的對比呈現，一個維度下面有若干個子項，比較適合分組柱狀圖（新改版爲分組柱狀圖）或者分組條形圖更爲恰當。

 

 

註解：

舊版色彩搭配不和諧，趨勢圖須要突出趨勢線，而不是體現數據的面積，紅框註釋不夠直接尤爲在顏色過多時，更很差分辨各個顏色指向的維度，新版的設計則可以準確指出各個維度的趨勢線。

問題四：

四、缺標題，數據信息優先級排列不恰當

 

 

註解：

新聞的標題跟轉發數纔是觀者關注的，而來源和時間就是次要關注信息，因此視覺上要爲觀者分出層級，這樣不只可以使觀者看着更溫馨，視覺上也頗有層次，不雜亂。

舊版標題、來源、時間、轉發數、都是相對於內容居中的狀態，這種排版是不符合表格排版規則的，簡單的作法就是文字左對齊，數字右對齊，數字右對齊可以更快速識別數據量大小，跟其餘數據的對比，文字左對齊則是根據人從左到右的閱讀習慣。

以前專門總結過一篇數據表格如何排版的文章，想了解的朋友，文章下面有數據可視化系列文章連接。

 

 

註解：

設計數據可視化大屏時必定要考慮用戶瀏覽數據的優先級的構架，例如要遵循先總後分，先具體後抽象的邏輯，上圖舊版把趨勢放到了頁面的第一視覺位置，就有點宣兵奪主了，根據先具體後抽象，改版後具體數據放到第一視覺位置，趨勢信息排後。

舊版大屏沒有標題，我是誰？我在幹什麼？我要去哪裏？因此標題務必得有。

總結：

說了這麼多設計要點，新手可能仍是不知道設計的切入點在哪裏，因此總結一個數據可視化設計分三步走法。

第一步：瞭解數據要表達的本質。

拿到一組數據，先分析主次，這組數據要表達什麼？是展現數據，仍是對比數據，或是實時監控數據，從而肯定展現的優先級。

第二步：肯定使用圖表。

經過了解數據要表達的本質後，選擇適合他的圖表，這時候就須要打開幾個開源的圖表網站找圖表，記住你的圖表用的是網站的哪個，開發若是找不到就丟給他網址。

網站有：Fusion Design、螞蟻數據可視化-AntV、ECharts Examples、Highcharts

第三步：總體效果調整

功能性的數據展現都沒問題，還要看下總體效果，例如用了過於多的柱狀圖，可能就會影響了總體的美感，圖表儘量多樣性，數據表達信息就要用不一樣的圖表展現。

 最後 

數據可視化設計核心就是，經過美學設計形式把數據精準和高效的分析和表達。

數據可視化設計是目前較爲熱門的設計工種，經過本文分享的項目迭代案例，但願可以讓你對數據可視化有些許瞭解。

下面是往期關於數據可視化設計文章歡迎觀看。

做者：吳星辰連接：https://www.jianshu.com/p/9a25b7a2ba1b來源：簡書簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。