淺析圖表中的視覺暗示

擼主：
煙煙 UX設計師
主要負責豈安科技的UI界面和交互設計。

前言

從客觀邏輯來說，直觀的數字的確比抽象的圖形更有可信度，可是大腦卻對處理圖形內容上會更容易理解。就像下圖同樣，我只是給你光禿禿的數據表格，也許你會漏掉一些有價值的東西。可是好的可視化來表達這些數據，你會挖掘數字背後的信息。

以前列舉過不少複雜又有趣的可視化案例，此次準備談一談數據可視化圖表中的視覺暗示。
當咱們設計可視化圖表的時候，首先，咱們要知道咱們有什麼數據，須要哪些元素來二次加工這些數據。這時，咱們就要先了解到可視化的組件有哪些？在這裏我將它分爲幾個部分用下圖做示範。

視覺暗示

這些組件相互協做。其中視覺暗示是組件中重要的一部分，若是選擇錯誤的視覺暗示便會影響到其餘的組件，使圖表變成無用的圖形。咱們能用到的視覺暗示一般有:長度、面積、體積、角度、弧度、位置、方向、形狀和顏色。因此正確的選擇哪些視覺暗示就取決於你對形狀、顏色、大小的理解，以及數據自己和目標。

1長度

咱們常常看到的柱狀圖、條形圖，這就是長度的視覺暗示。數值越大，長度就會越長。常常用於對比類數據裏。長度是圖形中兩端之間的距離，座標中最小值要從0值開始，不然並不能準確的反映出真實的價值。

2面積和體積

咱們廣泛都會將數值大小用物體的大小來表達。長度和麪積一般用在二維空間裏的數值大小對比，體積則用在三維空間裏進行多維度對比。這裏要強調兩點：第一，你要注意你用的是幾維空間；第二，面積大小應該按照面積進行擴大縮放，而不是長寬。

3角度和弧度

角度是相交於一個點的兩個向量，取值範圍在0度到360度,造成一個圓形。
角度的視覺暗示通常都用在餅圖。這時候你也許會聯想到餅圖的近親:環形圖，但環形圖的本質是將餅圖的中間區域切除，因此環圖的視覺暗示並非角度，而是弧度。
餅圖和環形圖的優點是讓用戶快速的瞭解到數據之間的佔比分配，可是如圖，它們不適用於過多分類的數據。

4方向

方向是指座標系上一個向量的斜度，能夠看到上下左右及其餘方向。通常用在折線圖上，表現是增加、降低仍是波動。這裏要注意一點，隨着座標軸的比例變化，斜度的大小也會受到很大影響。因此根據實際狀況，適當調整比例，使變化大的數據放大比例來突出差別，反之，變化微小且不重要的，避免放大比例。

5位置

散點圖就用了空間中的位置做爲視覺暗示，經過點的形式展示在x、y座標軸上。每一個點表明一個數據，點的位置由變量的數值決定。當大量數據展現出來的時候，就能夠看出趨勢和相關性，而且比別的視覺暗示佔用空間更少。
趨勢：上升、降低；
相關性：集羣、離羣。

6形狀

當在一個圖表中有多個對象和分類時，用不一樣形狀或者符號來表示。這就是形狀上的暗示，一般運用在散點圖內，符號或者形狀比顏色更容易區分類別。好比用文字符號表示不一樣分類。

7顏色

在圖表的顏色視覺暗示中分爲兩種，色相和飽和度。
色相是指區別紅、黃、綠、藍等各類顏色，運用在在圖表中不一樣顏色能夠表示不一樣的數據分類。
飽和度是指色彩的純度，顏色的純度越高則飽和度越高，如鮮紅；混雜了白色、灰色或其餘色調的顏色，則飽和度越低，如粉紅、黃褐等。在圖表中能夠用一種顏色飽和度的高低表示同一變量程度的高低。
運用顏色作暗示時，要注意考慮到色盲、色弱人羣可能不容易經過顏色來區分圖表的緯度和變量。

下面結合多個視覺暗示的舉例

色相+位置+長度 ☟

顏色(色相+飽和度)+面積+位置 ☟

符號+顏色+位置 ☟