編者按:數(shù)據(jù)可視化已經(jīng)是當(dāng)今的潮流,它幫助人們更好地解讀數(shù)據(jù)的意義,發(fā)掘數(shù)據(jù)背后的價(jià)值。如果采用了不合適的數(shù)據(jù)表現(xiàn)形式,反而會(huì)影響理解甚至造成誤導(dǎo),來看看本文介紹的20條實(shí)現(xiàn)高質(zhì)量數(shù)據(jù)可視化的實(shí)用建議吧。本文來自編譯。 如今應(yīng)用程序的設(shè)計(jì)開發(fā)越來越多地由數(shù)據(jù)驅(qū)動(dòng),因此人們對(duì)于高質(zhì)量的數(shù)據(jù)可視化需求水漲船高。但是我們發(fā)現(xiàn),實(shí)踐中很多圖表并不容易讓人理解,甚至?xí)a(chǎn)生誤導(dǎo),因此本文列出如下20條優(yōu)化建議,希望能夠幫助你實(shí)現(xiàn)更好的數(shù)據(jù)可視化。 1. 選擇正確的圖表類型如果選擇了錯(cuò)誤的圖表類型,或只是默認(rèn)使用最常見的圖表類型,可能會(huì)使用戶感到困惑,或?qū)?shù)據(jù)的意義產(chǎn)生誤解。一個(gè)數(shù)據(jù)集可以用很多種方式來表述,具體采用哪種方式要取決于用戶的需求。所以一定要從檢查數(shù)據(jù)集和調(diào)研用戶需求著手來選擇圖表類型。 四種類型的圖表應(yīng)用:關(guān)系、比較、構(gòu)成、分布 2. 根據(jù)數(shù)據(jù)的正負(fù)值確定正確的繪圖方向當(dāng)使用水平條圖表時(shí),請(qǐng)注意要在基線的左邊繪制負(fù)值,在右邊繪制正值。 不要在基線的同一側(cè)繪制負(fù)值和正值。 正值和負(fù)值在X軸和Y軸上的映射 3. 柱狀圖的起點(diǎn)要從0基線開始截?cái)鄶?shù)據(jù)會(huì)導(dǎo)致錯(cuò)誤的表述。在下面的例子中,通過左邊的圖表,你可以很快得出B值是D值的3倍多的結(jié)論。而實(shí)際上,二者的差距要小得多(見右圖)。 所以,從零基線開始作圖,可以確保得到一個(gè)更準(zhǔn)確的數(shù)據(jù)表示。 兩個(gè)垂直條形圖,一個(gè)基線起始點(diǎn)為0,一個(gè)基線起始點(diǎn)為375 4. 線形圖可以使用自適應(yīng)的Y軸刻度對(duì)于折線圖來說,如果總是將Y軸的顯示起點(diǎn)限制在0,可能會(huì)使圖表折線顯示上缺少起伏,幾乎是平坦的。由于折線圖主要用來表示趨勢,所以最好能夠根據(jù)特定階段的數(shù)據(jù)集來調(diào)整顯示比例,并保持折線圖形顯示在Y軸范圍的三分之二區(qū)域內(nèi)。 線形圖,左邊幾乎是平的,右邊則很好地描述了趨勢 5. 使用折線圖時(shí)要考慮到數(shù)據(jù)的時(shí)間序列折線圖是由線條連接的一系列“標(biāo)記”組成的,通常用于形象地顯示數(shù)據(jù)在時(shí)間間隔(一個(gè)特定的時(shí)間序列)內(nèi)的變化趨勢。這有助于說明數(shù)值是如何隨時(shí)間變化的,在時(shí)間間隔較短的情況下效果非常好,但當(dāng)數(shù)據(jù)更新不頻繁時(shí),可能會(huì)引起混淆。 左邊的插圖是含義模糊的折線圖,右邊的豎條圖就很清晰地表示了每個(gè)月的數(shù)據(jù)變化 例如:上圖使用了折線圖來表示每年的收入,如果數(shù)值是按月更新的,那么就需要按月查看圖表。用戶可能會(huì)認(rèn)為連接“標(biāo)記”的線上的每個(gè)點(diǎn)都代表了當(dāng)時(shí)的收入值,而實(shí)際上在那個(gè)特定時(shí)間的真實(shí)收入數(shù)字是未知的。 在這種情況下,使用垂直條形圖可能是一個(gè)更好的選擇。 6. 不要使用“平滑的”折線圖平滑的折線圖可能在視覺上令人愉悅,但它們歪曲了其背后的實(shí)際數(shù)據(jù),而且過粗的線條也掩蓋了真正的“標(biāo)記”的位置。 左為“平滑”折線圖,右為清晰折線圖 7. 避免混亂的雙軸形式圖表有時(shí)為了節(jié)省圖表空間,你可能會(huì)傾向于使用雙軸圖表,即兩個(gè)數(shù)據(jù)系列具有相同的衡量標(biāo)準(zhǔn),但各自變化幅度不同。這種圖表不僅難以閱讀,而且不能清晰地表示兩個(gè)數(shù)據(jù)序列之間的對(duì)比。大多數(shù)用戶不會(huì)注意顯示比例,他們很可能只是掃一眼圖表,然后得出錯(cuò)誤的結(jié)論。 左圖是雙軸折線圖,右圖分為了2個(gè)獨(dú)立的折線圖 8. 限制餅圖中顯示的區(qū)塊數(shù)量餅圖是最受歡迎的圖表之一,但也是經(jīng)常被濫用的圖表。大多數(shù)情況下,柱狀圖是一個(gè)更好的選擇。但是,如果你決定使用餅圖,這里有一些如何使它正確發(fā)揮作用的建議:
兩個(gè)餅圖,一個(gè)由許多區(qū)塊組成,另一個(gè)將小片區(qū)塊都?xì)w入“其他”類別中 9. 直接在圖表上貼標(biāo)簽如果沒有適當(dāng)?shù)臉?biāo)簽,無論你的圖表有多好,它都不會(huì)有意義。直接在圖表上貼標(biāo)簽對(duì)所有瀏覽者都有很大幫助。而對(duì)照?qǐng)D例需要把數(shù)值和相應(yīng)的區(qū)域一一對(duì)應(yīng)上,會(huì)耗費(fèi)瀏覽者更多時(shí)間和精力。 左圖--帶有獨(dú)立圖例的餅狀圖,右圖餅狀圖,每個(gè)區(qū)域旁邊都帶有標(biāo)簽 10. 不要直接在圖表區(qū)塊里貼標(biāo)簽直接把數(shù)值標(biāo)簽放在區(qū)塊里可能會(huì)降低圖表的可讀性,如果有很小的區(qū)塊也不容易顯示完全。正確的做法是,在區(qū)塊外部添加黑色的數(shù)值標(biāo)簽,與每個(gè)區(qū)塊標(biāo)出明確的聯(lián)系指向。 由于顏色和背景色對(duì)比度低,寫在圖表內(nèi)部的標(biāo)簽很難識(shí)別 11. 對(duì)餅圖的區(qū)塊按大小進(jìn)行排序以增強(qiáng)可讀性在使用餅圖時(shí),有幾種常用的方式:
12. 避免隨機(jī)性同樣的建議也適用于許多其他類型的圖表,不要默認(rèn)按字母順序排序。把最大的數(shù)值放在最上面(對(duì)于水平條形圖)或最左邊(對(duì)于垂直條形圖),以確保最重要的數(shù)值占據(jù)最突出的空間,減少眼睛的移動(dòng),縮短閱讀圖表所需的時(shí)間。 左邊水平條形圖順序隨機(jī),右邊從最大值到最小值排序 13. 細(xì)細(xì)的圈狀圖表缺乏可讀性一般來說,餅狀圖不是可讀性最好的圖表,因?yàn)楹茈y直觀對(duì)比相似的數(shù)值。但當(dāng)我們把中間的部分去掉,得到一個(gè)甜甜圈形狀的圖,這樣的確騰出了空間來顯示額外的信息,但卻犧牲了清晰度,所以如果處理方式過于極端就會(huì)使圖表失去作用。 極細(xì)的圈狀圖 14. 讓數(shù)據(jù)自己說話避免過多不必要的華麗修飾,因?yàn)樗粌H讓人分心,而且可能導(dǎo)致對(duì)數(shù)據(jù)的誤讀和錯(cuò)誤認(rèn)知。制作圖表時(shí)應(yīng)該避免如下情況:
左邊的3D垂直條形圖,修飾過多,右邊去除了過多修飾 15. 選擇與你的數(shù)據(jù)性質(zhì)相匹配的配色方案顏色是數(shù)據(jù)可視化的重要組成部分,通常配色方案類型有這3種:
美國3個(gè)州的地圖,每個(gè)州都應(yīng)用了一種配色方案 有一個(gè)方便的工具——ColorBrewer,它可以幫助你生成各種配色方案。 16. 無障礙設(shè)計(jì)根據(jù)美國國家眼科研究所的數(shù)據(jù),大約每12個(gè)人中就有一個(gè)是色盲。你的圖表需要讓盡可能多的受眾都能夠讀懂,所以也要注意盡量采用無障礙設(shè)計(jì)。
左邊是在灰度形式下無法閱讀的圖表 17. 注重可讀性確保排版能夠準(zhǔn)確清晰地傳達(dá)信息,幫助用戶關(guān)注數(shù)據(jù)本身,而不是分散他們的注意力。
錯(cuò)誤的排版實(shí)例 18. 使用水平條形圖而不是旋轉(zhuǎn)的標(biāo)簽這個(gè)簡單的技巧將確保用戶能夠更方便地查看圖表(而不至于使他們的脖子緊張) 19. 選擇合適的圖表庫如果你的任務(wù)是在網(wǎng)絡(luò)和移動(dòng)項(xiàng)目中添加交互式圖表,你應(yīng)該問的第一個(gè)問題是我們將使用什么圖表庫?現(xiàn)代的圖表庫已經(jīng)應(yīng)用了許多前面提到的規(guī)則?;谝粋€(gè)定義好的庫進(jìn)行設(shè)計(jì),可以確保實(shí)施的便利性,并為你提供大量的交互想法。 流行的圖表庫的各種屏幕截圖 20. 動(dòng)態(tài)可視化報(bào)告數(shù)據(jù)可視化不僅僅是靜態(tài)的圖表,我們有很多方法可以通過改變參數(shù)、可視化類型、時(shí)間軸來幫助用戶探索和發(fā)現(xiàn)更多結(jié)論,使數(shù)據(jù)價(jià)值和洞察力最大化。在下面的例子中,你可以看到 iOS 健康應(yīng)用程序,它使用了各種數(shù)據(jù)展示的組合進(jìn)行很好的展示。
譯者:張茉茉 本文來自翻譯, 如若轉(zhuǎn)載請(qǐng)注明出處。 |
|