? 数据可视化大屏设计经验分享 - 蓝蓝设计_UI设计公司

追求卓越一諾千金

藍藍設計,2011年成立,主創清華團隊,專注軟件和互聯網ui設計開發。擅長企業信息化管理、監控、大數據軟件UIUE咨詢和設計開發服務。立足UI,好好學習,天天進步!


數據可視化大屏設計經驗分享

2019-7-3 泥人張 大屏界面設計文章及欣賞


 

如果您想訂閱本博客內容,每天自動發到您的郵箱中,

前言 



說起數據可視化設計,如今絕對是熱門的設計之一,而真正懂數據可視化設計的設計師卻不多,隨著大數據產業的蓬勃發展,很多企業都開始應用數據可視化。很多UI設計師突然會接到公司數據可視化設計的需求,如果不了解數據可視化的設計,那么肯定是一頭霧水,不知從何入手。


什么是數據可視化?

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


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



 案例解析 


首先看下線上舊版的設計,分析存在的問題。


undefined


問題

1、左側大面積文字導致視覺不平衡,且密集

2、整體用色暗淡,圖表用色沒有規則

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

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


結合這些問題作出了改版,


undefined


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


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


問題一:

1、左側大面積文字導致視覺不平衡,且密集


undefined


注解:

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


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



問題二:

2、整體用色暗淡,圖表用色沒有規則



undefined


注解:

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


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


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



undefined


注解:

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




undefined


“負面”有警示的作用,運用紅色調較為合理,“中立”色彩情緒上適合黃色調,黃色會給人中性的感受,例如馬路上的等待的黃燈,例如一片樹葉從綠色到黃色再到枯萎灰色,給人一種過程中的中立情緒感受等,“正面”就是給人積極的一面,所以綠色或者主題色藍色都是很恰當的。



問題三:

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


undefined


注解:

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



undefined


注解:

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

undefined


注解:

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



undefined


注解:

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



undefined


注解:

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



問題四:

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


undefined


注解:

新聞的標題跟轉發數才是觀者關注的,而來源和時間就是次要關注信息,所以視覺上要為觀者分出層級,這樣不僅能夠使觀者看著更舒適,視覺上也很有層次,不雜亂。


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


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



undefined


注解:

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


舊版大屏沒有標題,我是誰?我在干什么?我要去哪里?所以標題務必得有。


總結:

說了這么多設計要點,新手可能還是不知道設計的切入點在哪里,所以總結一個數據可視化設計分三步走法。


第一步:了解數據要表達的本質。

拿到一組數據,先分析主次,這組數據要表達什么?是展示數據,還是對比數據,或是實時監控數據,從而確定展示的優先級。


第二步:確定使用圖表。

通過了解數據要表達的本質后,選擇適合他的圖表,這時候就需要打開幾個開源的圖表網站找圖表,記住你的圖表用的是網站的哪一個,開發如果找不到就丟給他網址。

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


第三步:整體效果調整

功能性的數據展示都沒問題,還要看下整體效果,例如用了過于多的柱狀圖,可能就會影響了整體的美感,圖表盡可能多樣性,數據表達信息就要用不同的圖表展示。




 最后 


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


數據可視化設計是目前較為熱門的設計工種,通過本文分享的項目迭代案例,希望能夠讓你對數據可視化有些許了解。

標簽: 數據可視化 大屏設計 « Vue.js 學習日志(一) | 設計的法則【交互篇】»


藍藍 http://www.thriveonsite.com

訂閱Rss
新疆喜乐彩app 内蒙古11选5开奖 网赚的方法 湖北快3 皇鼎彩票注册 速发彩票开户 98彩票网 北京快乐8走势图 916彩票 2019国外网赚项目