无码一区二区三区中文字幕

可視化系統(tǒng)搭建遇見大數(shù)據(jù)可視化系列文章之四

2017-7-26 濤濤

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，請點這里

如何搭建數(shù)據(jù)可視化系統(tǒng)，用豐富的設計語言清晰表達復雜和龐大數(shù)據(jù)，并形成鮮明的設計風格？我們把數(shù)據(jù)可視化的元素進行拆分并建立相應的規(guī)范體系。

圖表設計

1. 圖表基本類型

六種基本圖表涵蓋了大部分圖表使用場景，也是做數(shù)據(jù)可視化最常用的圖表類型：

柱狀圖 分類照片照片什么照片什么什么項目之間的比較;

餅圖構(gòu)成即部分占總體的比例;

折線圖 隨時間變化的趨勢;

條形圖 分類照片照片什么照片什么什么項目之間的比較;

散點圖 相關(guān)性或分布關(guān)系;

地圖區(qū)域之間的分類照片照片什么照片什么什么比較。

基本圖表類型都有通用的樣式，不過多的展開講解我們更多的考慮如何選擇常用圖表來呈現(xiàn)數(shù)據(jù)，達到數(shù)據(jù)可視化的目標基本方法：

a.明確目標

明確數(shù)據(jù)可視化的目標，通過數(shù)據(jù)可視化我們要解決什么樣的問題，需要探索什么內(nèi)容或陳述什么事實。

b.選擇圖形

圍繞目標找到能提供信息的指標或者數(shù)據(jù)，選擇合適的圖形去展示需要可視化的數(shù)據(jù)。

Andrew Abela整理的圖表類型選擇指南圖示，將圖表展示的關(guān)系分為四類：

c.選擇維度

分辨哪些是有價值的值得關(guān)注的維度，選擇數(shù)據(jù)展示的視角。基本圖表一般有哪些可用維度呢？

基本圖表維度

對照以上圖形維度，制作可視化圖形。

d.突出關(guān)鍵信息

根據(jù)可視化展示目標，將重要信息添加輔助線或更改顏色等手段，進行信息的凸顯，將用戶的注意力引向關(guān)鍵信息，幫助用戶理解數(shù)據(jù)意義。

CPU監(jiān)控

CPU使用率監(jiān)控案例，可視化的目標就是檢測CPU的使用情況，特別是異常使用情況。所以圖中將100％最高臨界線使用特殊的顏色和線形標識出來，異常的使用段用顏色幫助用戶識別。

2. 圖表排布

在可視化展示中，往往有多組數(shù)據(jù)進行展示。通過信息的構(gòu)圖來突出重點，在主信息圖和次信息圖之間的排布和大小比例上進行調(diào)整，明確信息層級及信息流向，使用戶獲取重要信息的同時達到視覺平衡。以扶貧展示項目為例，以地圖的方式展示出扶貧的概況信息，兩邊排布扶貧的具體內(nèi)容信息，在構(gòu)圖和上突出主次。并在主要信息的背景上做動畫處理，進一步加強信息層級及視覺流向的引導。

扶貧項目

3. 動效設計

目前越來越多的可視化展示的數(shù)據(jù)都是實時的，所以動效在可視化項目中的應用越來越廣泛，動效設計肩負著承載更多信息和豐富畫面效果的重要作用。

a.信息承載

在可視化設計中經(jīng)常遇到，非常多的數(shù)據(jù)信息需要展示在一個大屏幕上。遇到這種情況，需要對信息進行合并整理或通過動畫的方式，在有限的屏幕空間里承載更多的信息，使信息更加聚合，同時使信息展示更加清晰，突出重點。

b.畫面效果

增加細節(jié)及空間感，背景動效使畫面更加豐富。單個圖表的出場動畫，使畫面平衡而流暢。減少了圖表在出現(xiàn)或數(shù)據(jù)變化時的生硬刻板。

數(shù)據(jù)可視化動畫在設計上重要的原則是恰當?shù)恼故緮?shù)據(jù)。動畫要盡量的簡單，復雜的動畫會導致用戶對數(shù)據(jù)的理解錯。動畫要使用戶可預期，可使用多次重復動畫，讓用戶看到動畫從哪里開始到哪里停止。

配色方案

由于圖表的特殊性，數(shù)據(jù)可視化的配色方案和配色要求具有獨特性。配色方案要充分考慮到特殊人群對數(shù)據(jù)圖的可讀性。豐富的色系，至少6種才可滿足圖表應用的各種場景。同時配色需要有可辨識性，色彩選擇需要有跨度。

1. 背景色定義

背景色的選擇與可視化展示的設備相關(guān)，分為深色、淺色、彩色。

a.大屏背景色

在大屏設備中普遍用深色作為背景色，以減少屏幕拖尾，觀眾在視覺上也不會覺得刺眼。所有圖表的配色需要以深色背景為基礎。保證可視化圖的清晰辨識度，色調(diào)與明度變化需要有跨度。

淘寶雙11大屏設計

b.中小屏背景色

中小屏幕背景色選擇范圍就比較廣，淺色、彩色、深色均可以做出很好的設計。相比之下，淺色背景更適合展示大量的數(shù)據(jù)信息，因為在淺色底上數(shù)據(jù)圖表的識別度比較高。而深色、彩色背景更適合渲染簡單的數(shù)據(jù)，用于烘托氣氛。

中小屏幕淺色，深色，彩色設計

2. 圖表色定義

在圖表的顏色運用上，色彩是最直接的信息表達的方式，往往比圖形和文字更加直觀的傳遞信息，不同顏色的的組合也能體現(xiàn)數(shù)據(jù)的邏輯關(guān)系。顏色的表示方法有很多種，如RGB、CMYK等，在可視化設計中，顏色作為用于數(shù)據(jù)編碼的視覺通道，HSV的顏色表示方式更加符合人類感知方式，同時也更加適合展示數(shù)據(jù)。

a.色彩辨識度

要確保配色非常容易辨識與區(qū)分，對于使用單一色相配色，明度差異需要全局考慮，明度跨度一定要夠大才能更清晰的展示數(shù)據(jù)。明度跨度是否合適，可以通過在灰度模式下配色的辨識度來判斷。