遇見大數據可視化 : 圖表的視覺系統感知

04-15

歡迎大家前往騰訊雲技術社區，獲取更多騰訊海量技術實踐乾貨哦~

導語：本文是《遇見大數據可視化》系列文章的第四篇，主要介紹了數據進行可視化的好處，可以清晰有效的傳達數據信息，以實現「用視覺的方式去思考」。。

本文是騰訊雲技術社區作者「騰訊大數據可視化設計團隊」首發在社區的系列文章，介紹的是遇見大數據可視化的基礎概念以及應用，目前已經發布了7篇。鏈接如下：

遇見大數據可視化：基礎研究

遇見大數據可視化：來做一個數據可視化報表

遇見大數據可視化：未來已來，變革中的數據可視化

遇見大數據可視化 : 圖表的視覺系統感知

遇見大數據可視化：人人都能做數據可視化

遇見大數據可視化：可視化系統搭建

遇見大數據可視化 : 地鐵流量可視化案例

在上篇兩篇文章里《遇見大數據可視化：基礎研究》和《遇見大數據可視化：來做一個數據可視化報表》，簡單的介紹了下可視化的基礎和製作流程。我們也發現將數據進行可視化的好處，可以清晰有效的傳達數據信息，以實現「用視覺的方式去思考」。相比數據的公平，視覺的方式會帶有一定的引導性。

如上圖所示，我們能快速的發現圖形上的不同之處。NSF的圖形和圖像處理小組稱之為「可視化感知」，人眼的啟動時間至少需要200毫秒，在啟動時間內能感知到區別的存在（*見附錄）。上圖就是一種簡單的預先處理感知實例，目標對象具有視覺屬性「圓形」，「長條形」干擾物對象沒有（所有非目標對象都被認為是干擾物）。觀察者一眼就能知道目標對象是否存在還是不存在。

這種「可視化感知」實際上是運用人眼低層視覺系統（Preattentive Processing）的引發的快速感知特徵。能夠迅速的引發預設在圖形中的潛在目標對象的注意。所以我們在可視化設計中可以運用這一特點，快速的遷移觀察者的注意點。

按照Anne Treisman在早期提出特徵理論（Feature integration theory人類視覺注意力最有影響力的心理模型之一），我們可以繼續去尋找影響【個體特徵】的視覺屬性點。

通過去預設目標對象和干擾對象的顏色、大小、對比和方向的不同特徵屬性。觀察者也可以快速的通過這種「特徵搜索」遷移注意點。

之所以很快就能找到這些注意點，因為它們跟其干擾項相比，最多只相差了一種視覺元素。比如，紅色線條和黑色線條，長線條和短線條。當只有一種視覺元素的時候，我們的視覺系統中的低層視覺系統（Preattentive Processing）就起作用了，它可以平行處理所有在圖中出現的點，然後很快找到特徵點。我們再來看下反例

跟上面的例子相比，我們要花相對長的時間找到那個注意點。原因很簡單，因為圖中使用了兩種視覺元素來區分特殊點，顏色和大小，方向和對比。在這種情況下，我們的低層視覺系統（Preattentive Processing）就不行了，視覺系統需要一個一個的處理每個點，識別兩種元素，做仔細的區分。

理論說了這麼多，那在我們做可視化圖表的時候有什麼作用呢？在可視化中，我們希望想讓用戶注意到重要的數據，可以用單一特徵去引導用戶的注意點。

上圖圖表，展示一個國內雲廠商的用戶佔比情況之類的數據，大致如上。那作為本廠的產品騰訊雲，我們希望觀察者關注到騰訊雲的數據，佔比【50%】。但是上圖的使用了多個視覺元素，沒用突出目標項，這樣就很難引導觀察者的注意點。

修改上圖圖表，減少視覺元素的使用，我們再來看一個圖。

從這個圖表來看，只使用一個目標項和一個干擾項作為視覺元素的差異，我們就可以去引導觀察者的注意點。引導到我們想要重點說明的數據上面去。

但是對於數據可視化來說，引導注意點，其目的是為了讓觀察者快速的去了解數據，而非刻意誘導，造成觀察者的誤解。

我們來看一個例子，上圖是一個銷售財年的報表，2015年銷售額100萬，2016年到達200萬，從上圖圖表展示出來給觀察者的信息就是，2016年比2015年銷售額增長了1倍的樣子。

但是我們把所有數據拉出來看，卻發現出完全不同的事實，2013年銷售額400萬，2014年300萬，2015年100萬。2016年雖然比2015年增長了，但是和前幾年相比有著明顯的下滑，這就是一種圖表展示的錯誤誘導的方式。

這種在Y軸上誘導的方式很常見，經常【某額寶】上展示近幾日收益的時候，通過圖表好像3月15號的時候收益非常高，但是仔細去看Y軸上的數值，會發現其實3月15號比3月10號的收益增長只有0.6%的，但是感觀上給觀察者非常誇張的展示。

而按照坐標軸為0%來展示的情況，實際只是一個非常穩定的狀態。

數據可視化的真正價值在於，讓觀察者輕鬆的理解數據的價值。「可視化感知」低層視覺系統（Preattentive Processing）是讓觀察者快速的找到重點數據所在，而非孤立數據導致傳遞給觀察者錯誤的理解。

附錄：

我們將圖形的展示時間設置為200毫秒，只設置一個視覺元素（形狀）。「圓形」作為目標對象，「長條形」作為干擾對象。測試觀察「可視化感知」的低層視覺系統（Preattentive Processing）的實際作用。

除了上述列舉的【形狀】、【顏色】、【大小】、【對比】、【方向】。還列舉出一下視覺元素的對比【密度】、【閉環】、【曲率】、【整體方向】、【投影方向】和【投影深度】。

此文已由作者授權騰訊雲技術社區發布，轉載請註明文章出處

原文鏈接：https://cloud.tencent.com/community/article/537453