您的位置 > 南安普敦贴吧 > CDA專訪 > 數據可視化之旅(六):提升可視化效果的Tips

南安普敦大学时尚管理:數據可視化之旅(六):提升可視化效果的Tips

南安普敦贴吧 www.uaxaaq.com.cn 來源:CDA原創 | 2019-09-27 | 發布:經管之家





作者 | Destiny

來源 | 木東居士





0x00 前言

在之前的文章中,已經分享過如何根據數據可視化的目的、數據關系和特征,去選擇合適的圖表類型。當確定了要使用哪些圖表進行數據可視化后,就開始進入可視化作品的設計階段。從大的方向上來說,影響數據可視化最終效果的因素,分為兩個層面:

一是非數據層面。不受數據影響可視化效果的情況包括:比如說整個頁面的布局;圖表的輔助元素,如圖表背景、網格線、外邊框;交互方式的設計等?!皇蓯縈跋斕那榭?,是我們在可視化設計階段就可以把控的,比如說頁面的整體布局、圖表的設計(包含網格線、背景、顏色的選取等)、交互的設計等。二是數據層面。受數據影響可視化效果的情況一般包括:數據分布不均勻,存在極端值;某一維度下的屬性值過多,信息繁雜不夠聚焦;不同層級的,數據量級差異較大;數據條目較多等?!隕險廡┣榭齙拇嬖?,通過可視化映射之后,反映到圖表上就體現為,比如說某個柱形條的長度過長,餅圖扇區的個數過多等,從而使可視化的最終效果不如人意。

因此,今天這篇文章,主要從以上兩個層面,來總結提升可視化效果的一些經驗,從而使數據信息的傳達更聚焦、有效,可視化作品的視覺呈現更加美觀。




0x01 非數據層面

1.布局要強調最重要的數據信息,將用戶注意力集中在可視化結果的最重要區域

在進行某一主題的可視化作品設計時,我們需要根據用戶關注的重點數據,對可視化結果的重要性和優先級進行排序。通過對可視化空間的合理布局設計,將用戶的注意力集中到可視化結果中最重要的一個或幾個區域上。

通常情況下,用戶的視覺中心,是位于整個頁面的上方和中心區域。如果只有一個重點,放在最顯眼的位置,如果有幾個重點,盡量集中放置,吸引視覺焦點。除了通過重要信息的位置擺放來吸引用戶視覺焦點,還可以通過突出的顏色編碼來抓住用戶的注意力。

下圖為一個汽車經銷商的客服監控大屏,對于他們而言,黃色框選的區域是他們關注的重點(1)呼叫量(含在線咨詢和呼入咨詢)。(2)不同客服溝通方式的滿意率。(3)在線咨詢和呼入咨詢人群各自的地域分布。因此,把這三部分集中放在可視化空間的中心區域,可以讓客服人員一眼就關注到重要的信息。



2.圖表設計要隱藏不必要元素,弱化輔助元素

在我們進行圖表繪制時,需要去掉無意義的背景色填充和顏色區分,弱化網格線,突出真正重要的數據信息。雖然,網格線或者顏色映射可以輔助我們理解可視化圖表中的信息,但是如果過于凸顯,視覺上會顯得雜亂、沒有主次,干擾到你真正想展示的信息。對于這類元素,應該盡量隱藏和弱化。



3.交互操作要具有直觀性、易理解性

一方面,圖表中柱形條或趨勢點等都代表實際的數據,但是為了可視化作品的簡潔和美觀,通常情況下,這些數據標簽都會被隱藏;另一方面,由于人們查看數據的習慣是,先看總體和趨勢,再看局部和細節。這兩個方面的原因,要求可視化產品,需要提供給用戶一系列的交互手段,來讓用戶按照自己的意圖和關注點去探索數據。

常見的交互方式有:

1)移動和縮放:當前空間只能顯示有限的數據時,或者需要關注局部數據時,可以使用移動和縮放。



一般情況下,移動和縮放是同時使用的兩個交互動作。對于移動而言,如果當前顯示空間沒有把數據展示全,需要把后一數據條露出一部分,指引用戶可以進行移動操作;對于縮放而言,其目的一般是為了在更大的空間去查看局部的細節數據,一般也需要移動圖表來配合。

2)懸?;虻慊?br/>
懸停的的目的,是為了查看某個對象的詳細信息,通?;嵋緣盎蛘摺竿祭?數據」的形式展現。

點擊的目的,通常是為了進行數據下鉆,在這種情況下,需要通過設計傳達給用戶可以進行交互的信息,如鼠標懸停變手型、對象的顏色變化或者以文字指引等。



3)圖表聯動

多圖表聯動,是可視化中比較常見的一種交互方式,圖表聯動的前提條件是,多個圖表的指標含有共同的維度屬性,所以當聚焦于某個圖表的某一維度下的屬性值時,其他圖表會聯動變化。

其數據格式通常如下:按維度1中的屬性值聚合,可以得到左側的柱狀圖對應的數據;按維度2中的屬性值聚合,可以得到右側的餅圖對應的數據。








0x02 數據層面

1.當數據項較多時,需要精簡數據項,突出重點

比例型分類數據,分類項建議保持在5~7個比例型分類數據的可視化方式有:餅圖、圓環圖、百分比堆疊柱狀圖、百分比堆疊面積圖等,其目的是為了展示個體分類項和總體之間的比例關系。當需要按照某一個維度進行分組時,若該維度的屬性值數目較多,那么就需要對屬性值進行重新的歸類和分組,通常的做法是,保留占比或實際值TOP5的分類項,剩余分類歸為【其他】。



柱狀圖數據條過多時,保留頭部和尾部當需要用柱狀圖來對數據進行排行時,若數據條目較多,此時建議保留頭部和尾部,中間的可以以省略號帶過或者折疊起來,放大時再展開。頭部和尾部的具體數目,可以依據具體需要來定,比如前5名和后5名、前10名和后3名等。



2.對于趨勢圖,若趨勢不明顯時,坐標軸數值可以不從0開始



當數據差異較小,導致折線的波動范圍比較小,走勢起伏不明顯,此時如果為了更清楚的看到數據的波動情況,坐標軸起始數值可以不從0開始,但是此時需要在頁面提示用戶,否則用戶會誤以為波動很大。

雖然,趨勢圖的主要目的,是查看數據的態勢和波動規律,設置坐標軸不從0開始,可以更清晰的看到數據的起伏波動。但是,同時會給用戶帶來理解的成本,也有夸大差異的嫌疑,因此,不建議頻繁使用。

注意:柱狀圖的坐標軸起點,必須從0開始,否則柱形條的高度就不能代表數據間的差異。

3.當排行數據的類別名稱較長時,可以用條形圖替換柱狀圖

當類別名稱太長時,雖然斜放可以避免重疊,但歪著頭查看內容,和用戶閱讀的視覺習慣不符,此時可以考慮把柱條橫向放置,把類別的名稱置于柱條空隙之間或者柱形條左側。



4.坐標軸需要做對應的單位轉化

圖表坐標軸的數值,受數據的大小影響,當數據較大時,一方面將坐標軸數值單位轉化為我們熟知的K、W、M、億需要一定的反應時間,另一方面較大的數值也會占用有限的可視化空間。因此,建議,在一個數據可視化平臺內部,需要建立一套公共的單位轉化規則,保證圖表坐標軸單位轉化規則的一致性。具體做法如下:



注意:一個圖表中,坐標軸的數值單位需保持一致,一般是以最大數值的單位作為整個坐標軸的統一單位。






0xFF 總結

回顧上文的內容,提升可視化效果的Tips總結如下:

非數據層面:布局需要凸顯和強調可視化中最重要的信息;弱化或隱藏圖表設計中的輔助元素;通過交互來給予用戶探索數據的權利;數據層面:精簡數據項,突出重點;趨勢圖坐標軸可以不從0開始,但是要慎用;系列名稱較長時,需用條形圖,橫向擺放系列名稱;確立統一規則,對圖表坐標軸數值進行單位轉化;

如若大家對提升數據可視化效果這方面,有一些自己的總結,歡迎評論區補充和交流~

完 謝謝觀看

本文已經過優化顯示,查看原文請點擊以下鏈接:
查看原文:https://www.cda.cn/view/27173.html
京ICP備11001960號  京ICP證090565號 京公網安備1101084107號 論壇法律顧問:王進律師知識產權?;ど?/a>免責及隱私聲明   主辦單位:南安普敦贴吧 版權所有
聯系QQ:2881989700  郵箱:[email protected]
合作咨詢電話:(010)62719935 廣告合作電話:13661292478(劉老師)

投訴電話:(010)68466864 不良信息處理電話:(010)68466864