資料視覺化的基本原理——視覺通道

kurryluo發表於2019-03-03

資料視覺化為了達到增強人腦認知的目的,會利用不同的視覺通道對冰冷的資料進行視覺編碼。

我們在資料視覺化的時候,一方面,展現視覺化物件本身的位置、特性,對應的視覺通道型別是定性或者分類,比如汽車在什麼地方、汽車的種類;另一方面,展現物件的某一個屬性值大小,對應的視覺通道型別是定量或者定序,汽車的油耗、汽車加油的排隊順序。

那麼,有哪些具體的視覺通道呢?下面就跟大家介紹幾種常見的視覺通道,文末有視覺通道的表現力排序圖,心急的記住這個圖就可以了。

用於分類的視覺通道

位置

資料視覺化的基本原理——視覺通道

平面位置在所有的視覺通道中比較特殊,一方面,平面上相互接近的物件會被分成一類,所以位置可以用來表示不同的分類;另一方面,平面使用座標來標定物件的屬性大小時,位置可以代表物件的屬性值大小,即平面位置可以對映定序或者定量的資料,比如下面會講到的「座標軸位置」。

平面位置又可以被分為水平和垂直兩個方向的位置,它們的差異性比較小,但是受到重力場的影響,人們更容易分辨出高度,而不是寬度,所以垂直方向的差異能被人們快意識到,這就解釋了為什麼計算機螢幕設計成 16:9、4:3,這樣的設計可以使得兩個方向的資訊量達到平衡。

色調

資料視覺化的基本原理——視覺通道

我們認識色調只會從定性的角度,平常我們所說的「冷暖色調」,就是我們看一個東西、一幅圖,它所表現出來的情感強烈程度,這沒法從定量的角度去判別冷豔或是熱烈的色調。

認識色調,我們要明白這三點:

  1. 純色就是色調
  2. 向純色(色調)增加黑色就構成了暗色
  3. 向純色(色調)增加白色就構成了亮色

形狀

資料視覺化的基本原理——視覺通道

形狀所代表的含義很廣,一般理解為物件的輪廓,或者對事物外形的抽象,用來定性描述一個東西,比如圓形、正方形,更復雜一點是幾種圖形的組合。

圖案

資料視覺化的基本原理——視覺通道

圖案也被稱為紋理,大致可以被分為自然紋理、人工紋理。自然紋理是自然世界中存在的有規則模式的圖案,比如樹木的年輪;人工紋理是指人工實現的規則圖案,比如中學課本上求陰影部分的面積示意圖。

由於紋理可以看作是物件表面或者內部的裝飾,所以可以將紋理對映到線、平面、曲面、三維體的表面中,以分類不同的事物。

用於定量/定序的視覺通道

座標軸位置

資料視覺化的基本原理——視覺通道

座標軸上的位置就是前面的位置中的定量功能,使用座標軸對資料的大小關係進行定量或者排序操作。

長度

資料視覺化的基本原理——視覺通道

長度也可以被稱之為一維尺寸,當尺寸比較小的時候,其他的視覺通道容易受到影響,比如一個很大的紅色正方形比一個紅色的點更容易讓人區別,人們對很小的形狀也無法區別。

根據史蒂文斯冪次法則,人們對一維的尺寸,即長度或寬度,有清晰的認識。隨著維度的增加,人們的判斷越來越不清楚,比如二維尺寸(面積)。因此,在視覺化的過程成,我們往往將重要的資料用一維尺寸來編碼。

角度

資料視覺化的基本原理——視覺通道

角度還有一個名字叫做「方向」,方向不僅僅可以用來分類,也可以用來排序,這得看我們視覺化的時候選擇什麼樣的象限。

在二維視覺化的世界裡,四個象限可以有三種用法:

資料視覺化的基本原理——視覺通道
  1. 在一個象限內表示資料的順序
  2. 在兩個象限內表現資料的發散性
  3. 在四個象限內可以對資料進行分類

面積

資料視覺化的基本原理——視覺通道

面積在前面的尺寸已經講過了,就是二維的尺寸。

亮度/飽和度

資料視覺化的基本原理——視覺通道

亮度(luminance)是表示人眼對發光體或被照射物體表面的發光或反射光強度實際感受的物理量[3]。簡而言之,當任兩個物體表面在照相時被拍攝出的最終結果是一樣亮、或被眼睛看起來兩個表面一樣亮,它們就是亮度相同。在視覺化方案中,儘量使用少於 6 個可辨識的亮度層次,兩個亮度層次之間的邊界也要明顯

飽和度指得是色彩的純度,也叫色度或彩度,是“色彩三屬性”之一。如大紅就比玫紅更紅,這就是說大紅的色度要高。飽和度跟尺寸有很大的關係,區域大的適合用低飽和度的顏色填充,比如散點圖的背景;區域小的使用更亮、顏色更加豐富、飽和度更高的顏色加以填充,便於使用者識別,比如散點圖的各個散點。小區域使用的飽和度通常只有 3 層,大區域的可以適當增加一些

圖案密度

資料視覺化的基本原理——視覺通道

圖案密度是表現力最弱的一個視覺通道,在實際應用中很少看到它的身影。可以把它當作成同一形狀、尺寸、顏色的物件的集合,用來表示定量或定序的資料。

用於表示關係的

包含

資料視覺化的基本原理——視覺通道

包含是將相同屬性的物件聚集在一起,並把他們囊括到一個區域,這個區域與其他區域具有明顯的分界線,比如方框、圓形等等

連線

資料視覺化的基本原理——視覺通道

連線關係在表示網路關係型資料中使用,比如郵件收發關係中,收件人與發件人之間的關係,使用線段進行連線,表示他們之間具有一定的聯絡。

相似

資料視覺化的基本原理——視覺通道

相似經常和顏色進行搭配使用,屬性類似的物件之間的關係使用相同色調,不同亮度的顏色進行表示。

接近

資料視覺化的基本原理——視覺通道

如果說相似借用顏色來聚類屬性相似、相同的物件,那麼接近就是利用距離來表示這些物件。這可以體現在設計原則中的親密性原則,相同性質的事物應該放在一起。

最後說一點

視覺通道的分類不是唯一的,比如位置資訊,既能區分不同的分類,又可以用來表示連續資料的差異,所以在資料視覺化的過程中,我們應該根據需要做一定調整。

表現力排序表

資料視覺化的基本原理——視覺通道

參考文獻

[1] 陳為, 張嵩, 魯愛東. 資料視覺化的基本原理與方法[M]. 科學出版社, 2013.

[2] RobinWilliams. 寫給大家看的設計書[M]. 人民郵電出版社, 2016.

[3] https://zh.wikipedia.org/wiki/%E4%BA%AE%E5%BA%A6


歡迎大家關注微信公眾號:視覺化技術( visteacher )

不僅有前端和視覺化,還有演算法、原始碼分析、書籍相送

個人網站:blog.kurryluo.com

各個分享平臺的 KurryLuo 都是在下。

用心學習,認真生活,努力工作!

相關文章