人類大腦的壹半完全用於處理視覺信息。當妳向用戶展示信息圖時,妳已經在用大腦的最大帶寬路徑影響他。
壹個設計良好的數據可視化可以立即給瀏覽者留下深刻的印象,可以將壹個復雜故事的雜亂無章穿透到問題的核心。
眾所周知,《紐約時報》的視覺圖表非常專業,既能說明事實,又簡潔美觀。
作為壹個普通人,其實只要遵守壹些設計規則,稍加審美訓練,也可以做出專業的視覺圖表。
這壹次,我將介紹20個圖表制作過程中有用的方法和規則。
錯誤的圖表類型會導致混亂。對於同壹個數據集,可以選擇多種圖表類型,但是要註意區別使用。
妳想向觀眾展示什麽?這是最重要的選擇。這裏有十幾種圖表類型。
繪制水平條形圖時,在Y軸的左側繪制負值,在Y軸的右側繪制正值。不要在軸的同壹側繪制正值和負值。
垂直直方圖也壹樣。
截斷y軸會導致表達式失真。在下面的例子中,如果妳看左邊的圖表,妳可以很快得出結論,b值比d值大三倍多,但實際上差別要小得多。
從基線0開始確保用戶可以獲得更精確的數據表達。
對於折線圖,如果總是將Y軸刻度限制為0,可能會使圖表過於扁平,無法表達趨勢變化。
因為折線圖的主要目標是表達趨勢,所以根據數據範圍調整刻度是合理的,保持折線的高度占據Y軸範圍的三分之二。
折線圖由線條連接的“標記”組成,通常可以用來表示時間序列的變化。
當時間間隔很小,時間點很多的時候,折線是非常好的表現變化的方式,比如股票分鐘線。
但是如果時間點比較稀疏,時間間隔比較大,最好用柱狀圖來表示,比如每月的銷售變化。因為在這種情況下,折線圖容易造成混亂。
平滑的折線圖可能在視覺上令人愉悅,但它們扭曲了背後的實際數據,太粗的線條掩蓋了真正的“標記”位置。
壹般來說,為了節省可視化空間,當兩個數據序列度量相同但大小不同時,可能會傾向於使用雙軸圖。
但雙軸圖不僅難以閱讀,還會誤導受眾,以為它代表了兩個數據序列之間的比較。
大多數用戶不會密切關註兩個軸之間的刻度差異,而只是瀏覽圖表,這可能會導致錯誤的結論。
餅圖是最受歡迎的圖表之壹,也是經常被誤用的圖表。
在大多數情況下,條形圖是更好的選擇。但是,如果妳必須使用餅圖,妳需要註意以下幾點:
如果沒有合適的標簽,無論圖表有多漂亮,都幾乎毫無意義。
直接在圖表上標註,對所有查看者都很有幫助,因為壹目了然,節省時間。
看圖例要花很多時間,壹般觀眾不會仔細比較圖例和圖表的顏色。
把值放在切片上可能會導致很多問題,比如可讀性差,薄片無法標註等等。
更好的是,在每個數據標簽上添加壹個方向明確的黑色標簽。
如果餅圖的切片大小是無序的,就很難理解表達式。
因此,餅圖切片需要按照壹定的規則進行排序。壹般最大的切片放在12點,然後按順時針方向降序放置下壹個切片。
直方圖排序也要避免隨機性,按照壹定的規則排序會更清晰易讀。
將最大值放在頂部(對於水平條形圖)或左側(對於垂直條形圖),以確保最重要的值占據最突出的空間,減少眼球運動和閱讀圖表所需的時間。
當我們去掉餅圖的中間部分,創建壹個甜甜圈圖時,可以騰出空間來顯示額外的信息,但如果寬度太窄,會使圖表難以閱讀。
不必要的樣式不僅會分散註意力,還會導致對數據的誤解,給用戶錯誤的印象。
應避免以下情況:
顏色是有效數據可視化不可或缺的壹部分,設計中考慮了以下三種調色板類型:
研究數據顯示,每12人中,約有1人是色盲。壹個圖表只有當它能被廣泛的受眾所獲取時,它的價值才能最大化。
所以在配色的時候要註意以下幾個方面:
確保排版準確傳達信息,幫助用戶專註於數據,而不是分散他們的註意力。
請註意以下幾點:
標簽過長時不要用旋轉角度,要用橫條圖來表示。這個簡單的技術將確保用戶可以更有效地觀看圖表。
如果要在Web和APP項目中添加交互式圖表,會使用什麽圖表庫?
現在有很多專業的圖標庫可以選擇,比如echarts,highcharts等等。
圖表庫包含前面提到的許多交互和規則。基於已定義的庫進行設計將確保易於實現,並為您提供許多交互式想法。
通過改變參數、可視化類型和時間線來幫助用戶探索,交互式圖表可以更有效地獲取有用的信息。
壹個好的數據可視化圖表會在妳的頭腦中留下壹個事實、趨勢或過程的心智模型很長壹段時間。
制作圖表並不難,但是好的圖表需要註意很多細節,避免畫蛇添足,走得太遠。