一文帶你了解7種炫酷的數(shù)據(jù)可視化！
大家好，我是1480君
蛇形圖、貝殼、山脈ーー這是我們?cè)O(shè)計(jì)師可以畫出來(lái)而不能有效顯示數(shù)據(jù)的圖表。我來(lái)解釋清楚：例如，在一個(gè)健身應(yīng)用程序或視頻游戲中圖表呈現(xiàn)的目的是娛樂(lè)時(shí)，這些創(chuàng)意圖表是一個(gè)不錯(cuò)的選擇。但是，如果你的目的是為決策提供信息，那么花里胡哨是行不通的。我們將解析七種與統(tǒng)計(jì)、分析和商業(yè)不兼容的視覺(jué)樣式。
1. 蛇形圖（Snakes）
你有沒(méi)有見(jiàn)過(guò)一個(gè)CRM 或ERP 儀表盤設(shè)計(jì)，以鮮活的3D 管道為圖形？我把這種方法叫做“蛇形圖”。
盡管這種可視化效果在視覺(jué)上看起來(lái)很吸引人，但它們對(duì)無(wú)法呈現(xiàn)真實(shí)數(shù)據(jù)，而且更重要的是，它們很難使用。幾乎所有的東西都是上面圖表上的裝飾，而真正的數(shù)據(jù)只包含10個(gè)數(shù)據(jù)點(diǎn)。在這么大的一個(gè)圖表區(qū)域上，你完全可以不需要任何工具提示就可以顯示所有的數(shù)字！
“斑馬”網(wǎng)格、厚度、體積、陰影和梯度沒(méi)有提供實(shí)際的好處，卻白白占據(jù)了空間和吸引注意力。
除此之外，蛇形圖還有足夠的空間顯示20、30個(gè)甚至更多個(gè)數(shù)據(jù)點(diǎn)，而不是僅僅10個(gè)?！吧咝螆D”可能適合實(shí)際上沒(méi)有什么數(shù)據(jù)可展示，但設(shè)計(jì)師試圖用令人愉悅的東西來(lái)填補(bǔ)空白區(qū)域。
現(xiàn)在，想象一下當(dāng)有必要同時(shí)展示多種趨勢(shì)時(shí)，“蛇形圖”不允許你這么做。在下面的圖片中，多個(gè)發(fā)光的管子放在一起看起來(lái)完全混亂。
風(fēng)險(xiǎn)小結(jié)
顯示一個(gè)以上的圖并保持可讀性是很困難的。
線條的粗細(xì)掩蓋了實(shí)際的數(shù)字，因此需要采取一些愚蠢的變通方法，比如“斑馬”色或網(wǎng)格色。
圖表只有在“完美”的模擬數(shù)據(jù)下才有可能呈現(xiàn)光滑的曲線，而且真實(shí)的數(shù)據(jù)會(huì)讓圖表變扁。
連接數(shù)據(jù)點(diǎn)的曲線意味著存在一些中間點(diǎn)，但這只是一種錯(cuò)覺(jué)。
如何避免
如果數(shù)據(jù)點(diǎn)很少，使用條形圖。
如果有許多數(shù)據(jù)點(diǎn)，這意味著數(shù)據(jù)是連續(xù)的，那么可以考慮一個(gè)簡(jiǎn)單的細(xì)線圖。
2. 嵌套甜甜圈（Nested donuts）
就像“蛇形圖” ，深受設(shè)計(jì)師喜愛(ài)的“甜甜圈” ，尤其是嵌套式的甜甜圈，這會(huì)影響數(shù)據(jù)準(zhǔn)確性，并將增加了數(shù)據(jù)比較的障礙。另外，這兩種方法在有效利用空間方面都存在問(wèn)題。
人們或多或少能夠接受均勻的百分比: 完整的圓= 100% ，半個(gè)圓= 50% ，四分之一= 25% ，三分之三= 75% 。但是，如果一個(gè)圓圈的終點(diǎn)位于“一半”和“三分之三”之間——就像圖片上的綠色圓圈一樣，那會(huì)怎樣呢？你能多快計(jì)算出50 + 25/2并推斷出它應(yīng)該在62.5%左右？
如果你只有一個(gè)圓，你可以在中間放一個(gè)百分比數(shù)字，但是如果部件包含三個(gè)圓呢？
現(xiàn)在，環(huán)形圖的圓滑邊緣可能會(huì)讓圖表看起來(lái)很可愛(ài)，但最終會(huì)扭曲數(shù)據(jù)。這樣的圓滑邊緣在真實(shí)值的基礎(chǔ)上增加了兩到三個(gè)“幽靈”百分比。讓我們看看下面非圓滑的邊緣。
看看有多少裝飾，包括圓滑邊緣，被用來(lái)表達(dá)三個(gè)簡(jiǎn)單的數(shù)據(jù)點(diǎn)。
好消息是圖表可以變得更簡(jiǎn)單。三個(gè)環(huán)形傳遞相同的信息，不需要很多空間，并且在沒(méi)有工具提示的情況下完全可以暴露數(shù)字，這對(duì)于數(shù)據(jù)驅(qū)動(dòng)的界面是至關(guān)重要的。
通過(guò)簡(jiǎn)單的條形圖，你還可以去掉圖例，并保持部件間更加緊湊。而且你不再需要顏色，因?yàn)闃?biāo)簽現(xiàn)在伴隨著條形圖。
風(fēng)險(xiǎn)小結(jié)
圓環(huán)的形狀很難解讀。人們可以很好地識(shí)別出25% 、50% 、75% 或100% 這樣的百分比，但通常會(huì)很難解決處于這些特殊數(shù)值之間的百分比。
嵌套的圓圈需要圖例或工具提示，因?yàn)闃?biāo)簽通常不能優(yōu)雅地附加到相應(yīng)的圓圈上。
在嵌套圖表中，圓環(huán)的末端使比較大小變得困難。
如何避免
考慮使用條形圖來(lái)精確顯示百分比。
若非要使用一個(gè)圓形圖表，避免嵌套的圓圈和圓滑邊緣。
3. 貝殼（Seashells）
著名的統(tǒng)計(jì)學(xué)家和數(shù)據(jù)可視化基礎(chǔ)書籍的作者Edward Tufte 曾多次警告說(shuō)，視覺(jué)上吸引人的圖表可能會(huì)說(shuō)謊。“貝殼”是甜甜圈圖表的一種時(shí)髦變體，各種顏色的甜甜圈片段有不同的寬度，并且彼此重疊。
簡(jiǎn)單地說(shuō)，數(shù)據(jù)可視化的本質(zhì)就是通過(guò)顏色、面積、長(zhǎng)度和其他方式在視覺(jué)上代表數(shù)字。例如，一個(gè)數(shù)字越大，使用的柱子就越長(zhǎng)；百分比越低，一個(gè)面積就越小。但是當(dāng)我們分析“貝殼”圖表時(shí)，它們是如何工作的呢？更高的百分比不僅增加了更寬的圓形截面，而且，半徑更大！
重疊和超出背后的邏輯是什么？人們?nèi)绾谓庾x這些“數(shù)據(jù)” ？這是否意味著圖表顯示超過(guò)100% 和超過(guò)360度？
這些信息可以在一個(gè)相同形狀的圖表上可視化，這個(gè)圖表就是餅圖。當(dāng)然，數(shù)據(jù)點(diǎn)的數(shù)量應(yīng)該保持有限，否則，圖表將變得一團(tuán)糟。
此外，你可以使用這樣的圖表類型比如樹圖，其中相應(yīng)區(qū)域的矩形表示百分比。雖然人們通常最擅長(zhǎng)比較長(zhǎng)度ーー歡迎柱狀圖！眼睛也可以很好地比較。
風(fēng)險(xiǎn)小結(jié)
與傳統(tǒng)的餅圖不同，“貝殼”背后的邏輯并不清楚：數(shù)據(jù)是由面積、弧半徑或扇區(qū)角度表示的嗎？
重疊的扇區(qū)會(huì)扭曲數(shù)據(jù)，無(wú)法傳達(dá)準(zhǔn)確數(shù)值。
這些圖表的圓滑3D 風(fēng)格只有在模擬數(shù)據(jù)中才可能實(shí)現(xiàn)，并且會(huì)被“不完美”的真實(shí)數(shù)據(jù)所粉碎。
如何避免
如果沒(méi)有太多的數(shù)據(jù)和不強(qiáng)調(diào)準(zhǔn)確的比較，請(qǐng)盡管使用經(jīng)典的餅圖。
樹圖也可能是一種方便的技術(shù)，可以通過(guò)區(qū)域大小來(lái)顯示百分比。
4. 山脈圖（Mountains）
你在業(yè)務(wù)儀表板中看到過(guò)“山脈圖”嗎? 我用這個(gè)術(shù)語(yǔ)來(lái)描述彩色重疊圖，這是另一種流行的技術(shù)。
在“蛇形圖”部分，我已經(jīng)介紹了這個(gè)缺陷——虛構(gòu)的數(shù)據(jù)，但是讓我們?cè)敿?xì)地討論一下。上面精心設(shè)計(jì)的視覺(jué)效果可以歸結(jié)為20個(gè)藍(lán)綠色點(diǎn)和橙色點(diǎn)。
所有的連通曲線都與數(shù)據(jù)無(wú)關(guān)，它們是人工添加的。也許是為了好的緣故ーー把不同的點(diǎn)合并成一個(gè)清晰的趨勢(shì)，或者也許是為了填補(bǔ)“空白” ，讓它看起來(lái)“更好”。
但是為什么對(duì)于業(yè)務(wù)界面是危險(xiǎn)的呢？下面是一個(gè)例子。在某些工程圖上，我們有兩個(gè)相鄰點(diǎn)，12:00時(shí)為50kg/m2，13:00時(shí)為60kg/m2。這些點(diǎn)與一條優(yōu)雅的光滑曲線相連。結(jié)果，用戶看到在12:30時(shí)，氣壓大約是55公斤/平方米，但這可能是假的，因?yàn)闆](méi)有人測(cè)量它。
它的價(jià)值可能會(huì)突然從50 --嗖！ー到59，13：00時(shí)，到了60?；蛘咚赡苁侵饾u增長(zhǎng)的。或者甚至可能在13：00達(dá)到60之前已經(jīng)降到了30。圖表上的點(diǎn)越少，投機(jī)的空間就越大。
不過(guò)，雙色條形圖并不是唯一的選擇。你可以選擇一個(gè)圖形，甚至在實(shí)際數(shù)據(jù)和有用的視覺(jué)效果之間有充分對(duì)比的條件下，用直線連接點(diǎn)。
風(fēng)險(xiǎn)小結(jié)
“山脈”給人一種連續(xù)數(shù)據(jù)的印象，但它是基于有限的一組點(diǎn)。
曲線總是顯示平滑的數(shù)據(jù)動(dòng)態(tài)，雖然它是未知之間的實(shí)際點(diǎn)發(fā)生了什么。這種轉(zhuǎn)變可能是迅速的，漸進(jìn)的，或者是波動(dòng)的。
為了保持曲線的平滑，圖表的寬度必須加寬。因此，它占用空間，顯示的數(shù)據(jù)很少。
如何避免
確保數(shù)據(jù)點(diǎn)與有助于識(shí)別趨勢(shì)(如連線)的視覺(jué)效果有很好的區(qū)別。
如果部件上有幾個(gè)重疊圖形，盡量不要使用顏色填充來(lái)保持良好的對(duì)比度。
5. 香腸（Sausages）
這個(gè)圖表有什么問(wèn)題？為什么我們不能有一些比單調(diào)的矩形更有吸引力和原創(chuàng)性的東西呢？我必須承認(rèn)，3D“香腸”不是一個(gè)好的選擇，原因如下。
這種可視化有相當(dāng)多的問(wèn)題，但關(guān)鍵的問(wèn)題是數(shù)據(jù)被盜?！跋隳c”是界面世界的真正竊賊，因?yàn)樗鼈冊(cè)谟姓鎸?shí)數(shù)據(jù)的地方顯示了空白空間。公平地說(shuō)，“香腸”采用高對(duì)比度，以便你可以看到綠色和橙色之間的邊緣，但這種對(duì)比度的代價(jià)太高。
我計(jì)算出，如果整個(gè)柱子在上面的圖表中是100% ，那么彩色條之間的每個(gè)微小間隙大約等于3% 。乍一看，沒(méi)什么，對(duì)吧？但是我們有三個(gè)不同顏色的部分，需要兩個(gè)間隙，所以總的視覺(jué)“盜竊”更顯著ーー每欄6% ！如果你從圓形圖中計(jì)算一個(gè)失竊百分比，它將達(dá)到7% 左右，大約每個(gè)缺口3.5% 。?
我把丟失的條形部件放回下面建議的變體中，并去掉了圖例作為一個(gè)單獨(dú)的項(xiàng)目。此外，前面未命名的甜甜圈部分有了一個(gè)新的格式和名稱(第四季度的平均值)。
風(fēng)險(xiǎn)小結(jié)
“香腸”隱藏了大量的真實(shí)數(shù)據(jù)，因此不夠準(zhǔn)確，無(wú)法進(jìn)行分析和嚴(yán)肅的決策。
此外，這樣的圖表在緊湊性上存在問(wèn)題，他們需要額外的空間，才能看起來(lái)不凌亂。
如何避免
不要用間距破壞整體數(shù)據(jù)。通常，不要在各數(shù)據(jù)部分之間添加間隙，數(shù)據(jù)總和應(yīng)等于100％。
檢查圖表的邊緣是否過(guò)于圓滑ーー圓度太大會(huì)掩蓋有價(jià)值的數(shù)據(jù)。
6. 摩天大樓（Skyscrapers）
與華麗的國(guó)家地理的費(fèi)爾南多· 巴普蒂斯塔的信息圖表不同，商業(yè)儀表盤不適合使用等距的“摩天大樓” 代替精確的普通條。
3D 圖表缺乏準(zhǔn)確性，當(dāng)用戶快速瀏覽界面以發(fā)現(xiàn)異常和傾向時(shí)，3D圖表會(huì)造成一個(gè)嚴(yán)重的障礙。在下面的一張圖片中，我試圖模擬第一眼看到什么會(huì)吸引人們的注意。你能分辨出用彩色圓點(diǎn)標(biāo)記的條形圖的高度是否相同嗎？
以綠色方塊為標(biāo)記的柱狀圖數(shù)據(jù)相同，以玫瑰色圓點(diǎn)為標(biāo)記的柱狀圖數(shù)據(jù)相同，第一個(gè)方塊高3% 。好吧，如果問(wèn)題是數(shù)據(jù)準(zhǔn)確性不足，那么為什么設(shè)計(jì)師不調(diào)暗其余的平行六面體，只留下前面突出顯示？效果是這樣子的：
然而，準(zhǔn)確性并不是唯一的問(wèn)題。正如尤達(dá)大師在文化基因中所說(shuō)，“還有另外一個(gè)?！币呀?jīng)猜到了？我指的是緊湊性和反映自然、微妙的數(shù)據(jù)波動(dòng)的能力ーー不是這種總是起伏不定的夸張的過(guò)山車。
如果簡(jiǎn)化它，測(cè)量參數(shù)的微妙變化將更好地區(qū)分?？梢员３趾谏黝}，如果精確度和高光部分恰到好處的話，例如，在選定的時(shí)間范圍內(nèi)最高和最低的值。順便說(shuō)一下，我沒(méi)有壓縮條形圖的寬度，但是現(xiàn)在的圖表比以前窄了兩倍！
風(fēng)險(xiǎn)小結(jié)
與數(shù)據(jù)量相比，“摩天大樓”以及其他等距可視化圖像占據(jù)了巨大的空間。
這樣的圖表也不能呈現(xiàn)微妙的數(shù)據(jù)波動(dòng)。
當(dāng)“摩天大樓”突出顯示“屋頂”時(shí)，它們就更難閱讀了，因?yàn)轫敳康臈l看起來(lái)更高。
如何避免
不要在商業(yè)圖表上使用3D效果。
確保圖表設(shè)計(jì)支持真實(shí)的數(shù)據(jù)，這些數(shù)據(jù)通常不像原型圖那樣完美呈現(xiàn)波浪形。
7. 嬰兒立方體（Baby cubes）
如果你有孩子，你可能知道一種叫做嬰兒立方體或活動(dòng)立方體的玩具。它是一個(gè)盒子，有各種把手、插銷、插座、開關(guān)、算盤、按鈕、數(shù)字等附著在它的邊上。當(dāng)然，這種“嬰兒儀表盤”的所有組件都不能正常工作，但孩子們?cè)谕媪⒎襟w的時(shí)候，可以訓(xùn)練他們手部的運(yùn)動(dòng)技能。
這和數(shù)據(jù)可視化有什么關(guān)系？現(xiàn)在，我看到一個(gè)設(shè)計(jì)師不好的做法，繪制非常有視覺(jué)吸引力的儀表盤，仔細(xì)檢查后發(fā)現(xiàn)，事實(shí)上帶來(lái)的價(jià)值不大。
“嬰兒立方體”是前面章節(jié)中所有危險(xiǎn)風(fēng)格的結(jié)合體ーー是一個(gè)誤導(dǎo)性的說(shuō)明，而不是一個(gè)有用的工具。正如你在例子中注意到的，它充滿了時(shí)髦的細(xì)節(jié)：陰影、透明度、體積、發(fā)光、圓角、等距形狀等等。然而，所有的窗口部件都無(wú)法傳達(dá)信息：它們填充了屏幕空間，卻不能提供任何洞察力。
這里不會(huì)出現(xiàn)“正確”的示例，因?yàn)槲覀円呀?jīng)詳細(xì)介紹了如何逐步修復(fù)數(shù)據(jù)可視化。
風(fēng)險(xiǎn)小結(jié)
“嬰兒立方體”可能旨在使數(shù)據(jù)在視覺(jué)上更有吸引力，但不幸的是，它們也失去了精確性和實(shí)用性。
圓形、陰影、漸變填充和3D 效果與普通表單相比，不能承受“不完美”的真實(shí)數(shù)據(jù)。
時(shí)尚概念的特點(diǎn)是數(shù)據(jù)可視化，它們看起來(lái)令人印象深刻，但并不一定是最合適的(例如，兩個(gè)數(shù)字就足夠了的甜甜圈圖)。
如何避免
事先對(duì)用戶和業(yè)務(wù)進(jìn)行研究，并根據(jù)研究結(jié)果進(jìn)行儀表盤設(shè)計(jì)。
避免針對(duì)業(yè)務(wù)需求的過(guò)于簡(jiǎn)化的儀表板設(shè)計(jì)。
使用實(shí)際的任務(wù)，在沒(méi)有提示的情況下對(duì)用戶進(jìn)行測(cè)試。例如，“第二季度的收入是多少? ”而不是“你能在屏幕中間看到顯示收入的模塊嗎?”