2017-7-26 資深UI設計者
如何搭建數據可視化系統，用豐富的設計語言清晰表達復雜和龐大數據，并形成鮮明的設計風格？我們把數據可視化的元素進行拆分并建立相應的規范體系。
1. 圖表基本類型
六種基本圖表涵蓋了大部分圖表使用場景，也是做數據可視化最常用的圖表類型：
柱狀圖 分類照片照片什么照片什么什么項目之間的比較;
餅圖 構成即部分占總體的比例;
折線圖 隨時間變化的趨勢;
條形圖 分類照片照片什么照片什么什么項目之間的比較;
散點圖 相關性或分布關系;
地圖 區域之間的分類照片照片什么照片什么什么比較。
基本圖表類型都有通用的樣式，不過多的展開講解我們更多的考慮如何選擇常用圖表來呈現數據，達到數據可視化的目標基本方法：
a.明確目標
明確數據可視化的目標，通過數據可視化我們要解決什么樣的問題，需要探索什么內容或陳述什么事實。
b.選擇圖形
圍繞目標找到能提供信息的指標或者數據，選擇合適的圖形去展示需要可視化的數據。
Andrew Abela整理的圖表類型選擇指南圖示，將圖表展示的關系分為四類：
c.選擇維度
分辨哪些是有價值的值得關注的維度，選擇數據展示的視角。基本圖表一般有哪些可用維度呢？
基本圖表維度
對照以上圖形維度，制作可視化圖形。
d.突出關鍵信息
根據可視化展示目標，將重要信息添加輔助線或更改顏色等手段，進行信息的凸顯，將用戶的注意力引向關鍵信息，幫助用戶理解數據意義。
CPU監控
CPU使用率監控案例，可視化的目標就是檢測CPU的使用情況，特別是異常使用情況。所以圖中將100％最高臨界線使用特殊的顏色和線形標識出來，異常的使用段用顏色幫助用戶識別。
2. 圖表排布
在可視化展示中，往往有多組數據進行展示。通過信息的構圖來突出重點，在主信息圖和次信息圖之間的排布和大小比例上進行調整，明確信息層級及信息流向，使用戶獲取重要信息的同時達到視覺平衡。以扶貧展示項目為例，以地圖的方式展示出扶貧的概況信息，兩邊排布扶貧的具體內容信息，在構圖和上突出主次。并在主要信息的背景上做動畫處理，進一步加強信息層級及視覺流向的引導。
扶貧項目
3. 動效設計
目前越來越多的可視化展示的數據都是實時的，所以動效在可視化項目中的應用越來越廣泛，動效設計肩負著承載更多信息和豐富畫面效果的重要作用。
a.信息承載
在可視化設計中經常遇到，非常多的數據信息需要展示在一個大屏幕上。遇到這種情況，需要對信息進行合并整理或通過動畫的方式，在有限的屏幕空間里承載更多的信息，使信息更加聚合，同時使信息展示更加清晰，突出重點。
b.畫面效果
增加細節及空間感，背景動效使畫面更加豐富。單個圖表的出場動畫，使畫面平衡而流暢。減少了圖表在出現或數據變化時的生硬刻板。
數據可視化動畫在設計上重要的原則是恰當的展示數據。動畫要盡量的簡單，復雜的動畫會導致用戶對數據的理解錯。動畫要使用戶可預期，可使用多次重復動畫，讓用戶看到動畫從哪里開始到哪里停止。
由于圖表的特殊性，數據可視化的配色方案和配色要求具有獨特性。配色方案要充分考慮到特殊人群對數據圖的可讀性。豐富的色系，至少6種才可滿足圖表應用的各種場景。同時配色需要有可辨識性，色彩選擇需要有跨度。
1. 背景色定義
背景色的選擇與可視化展示的設備相關，分為深色、淺色、彩色。
a.大屏背景色
在大屏設備中普遍用深色作為背景色，以減少屏幕拖尾，觀眾在視覺上也不會覺得刺眼。所有圖表的配色需要以深色背景為基礎。保證可視化圖的清晰辨識度，色調與明度變化需要有跨度。
淘寶雙11大屏設計
b.中小屏背景色
中小屏幕背景色選擇范圍就比較廣，淺色、彩色、深色均可以做出很好的設計。相比之下，淺色背景更適合展示大量的數據信息，因為在淺色底上數據圖表的識別度比較高。而深色、彩色背景更適合渲染簡單的數據，用于烘托氣氛。
中小屏幕淺色，深色，彩色設計
2. 圖表色定義
在圖表的顏色運用上，色彩是最直接的信息表達的方式，往往比圖形和文字更加直觀的傳遞信息，不同顏色的的組合也能體現數據的邏輯關系。顏色的表示方法有很多種，如RGB、CMYK等，在可視化設計中，顏色作為用于數據編碼的視覺通道，HSV的顏色表示方式更加符合人類感知方式，同時也更加適合展示數據。
a.色彩辨識度
要確保配色非常容易辨識與區分，對于使用單一色相配色，明度差異需要全局考慮，明度跨度一定要夠大才能更清晰的展示數據。明度跨度是否合適，可以通過在灰度模式下配色的辨識度來判斷。
b.色彩跨度
多色相配色在數據可視化中是相當常見的，多色相配色使用戶容易將數據與圖像聯系起來。如何有效利用色調的變化來傳達數據信息？
帶明度信息的色環
當需要的顏色較少時，避免使用相近的色相同類色和相近色。盡量選擇對比色或互補色，這樣可以使不同屬性數據在圖表中展示更加清晰。
例如：美國大選使用紅色和藍色兩種對比色，將清晰的將選票結果展示于地圖上。
美國大選圖
當圖表需要的顏色較多時，建議最多不超過12種色相。通常情況下人在不連續的區域內可以分辨6?12種不同色相。過多的顏色對傳達數據是沒有作用的，反而會讓人產生迷惑如何讓多種色相的顏色看來和諧有幾種取色的方法？
色環提取法：
選擇同一飽和度和明度的不同色調作為可視化圖表的配色，這樣可以使圖表看起來協調統一。
漸變色取色法：
不同明度和色相的取色，淡紫到深黃的過渡，與淡黃到深紫的過渡，感覺是一樣的配色，但是實際兩種配色實際感覺卻差別很大。
淡黃到深紫的過渡看起來更加自然，這是因為我們在自然中大多存在的都是淡黃向深紫的過度。如下圖，所以采用仿自然的配色方式會讓圖表更加自然。
在取漸變色時，可以在Photoshop中制作出色相變化的色帶并疊加明度漸變的色帶，獲得明度和色相均變化的色帶。然后根據數據的數量，拉輔助線到取色點的位置，從斷點處選取顏色，對漸變進行測試與調整，測試配色在實際運用中的效果，選取最優的配色。
取色的實際應用：
漸變色取色
漸變色應用案例
文字是數據可視化的核心內容之一，文字和數字是數據信息傳達的重要組成部分，為了更加清晰的傳達信息，增加信息的可讀性，從字體選擇，到字體大小，字體間距都有特定的要求。
1. 字體選擇
a.辨識度
UI設計中使用無襯線字體是UI界的共識，但是對于數據可視化設計而言，字體大小的跨度可以非常大，所以在無襯線字體中需要選擇辨識度更高的字體，大的寬度比值和較高的X高度值的字體有更高的辨識度，選擇字母容易辨識不會產生奇異的字體更有利于用于數據可視化設計。
b.更加靈活的字體
字體需要更加靈活，應該支持盡可能多的使用場景，數據可視化項目經常顯示在不同大小，不同的終端上，需要選擇更加靈活的字體可以在低分辨率的小屏或超大屏幕上運行良好。
c.字間距
寬松的字母間距（字母之間的間距應小于字偶間距）和合適的中文字間距。
2. 字體大小
文字的可讀性對數據可視化起著至關重要的作用，設置小字體的極限值，以保證在最小顯示時不影響對文字的辨認與閱讀。
3. 中西文間隔
中西文混排時，要注意中文和西文間的間隔，一般排版的情況都是中文中混排有西文，所以需要在中西文間留有間隔，幫助用戶更快速的掃視文字內容。
數據是多種多樣不可預知的，所以在可視化時需要處理各種極限問題，才能使數據清晰表達。
1. 數據展示細節處理
如下圖，當水平排列數據時，圖表空間不夠，導致數據不可辨識，對數據進行旋轉處理，不利于閱讀，可以選擇簡寫的方式來排布展示數據，或通過改變圖表形式來解決問題。
2. 選擇合適的圖表形式
雖然餅圖可以展示份額，但過多的分項已經使餅圖不堪重負，不能很好的展示數據占比這個主題，所以使用橫向柱狀圖可以更加清晰的表達這個主題。
小結
我們生活在大數據時代，越來越多的數據被可視化。在構建可視化體系時，無論圖表、顏色、字體都是承載和傳達數據信息的元素，設計的核心是“讓數據清晰傳達”。
藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務