編輯導(dǎo)語：設(shè)計師門可能會接觸到數(shù)據(jù)可視化設(shè)計，將信息更加立體、全面的展現(xiàn)在用戶面前。本文作者思考了與業(yè)務(wù)需求不符合的數(shù)據(jù)可視化的方法，盤點了設(shè)計數(shù)據(jù)可視化時需要注意的點，并總結(jié)了一些有用的替代方法，希望這篇文章能夠幫助到各位設(shè)計師。

蛇、貝殼、山脈——這些圖形是設(shè)計師可能會去繪制的東西，而不是用這些圖形來直接顯示數(shù)據(jù)。

不過現(xiàn)在試想一下：在健身應(yīng)用或視頻游戲中，當(dāng)界面運用需要使用圖表來表達(dá)數(shù)據(jù)時，這些形狀就是一個不錯的表達(dá)選擇了。

但如果你的目的是為決策提供信息，那么一些花里胡哨的圖形就起不到這個作用了。 今天我們就思考下與業(yè)務(wù)需求不符合的數(shù)據(jù)可視化的方法，并找到一些有用的替代方法。

一、像“蛇”一樣的曲線圖

你一定見過以彩色的2D或3D曲線繪制的CRM或ERP儀表盤的設(shè)計，你看就像“蛇”一樣。

雖然這樣的可視化看起來很有視覺吸引力，但這種視覺沒有很好的展現(xiàn)真實的數(shù)據(jù)信息，更重要的是，它們很難被讀取和理解。

幾乎所有的視覺都是上面圖表上的裝飾，而真實的數(shù)據(jù)只由10個數(shù)據(jù)點組成。在這樣一個大的組件上，你完全可以直接顯示所有的數(shù)字，不需要操作去查看數(shù)據(jù)。

可以看到組件還有足夠的空間來多顯示20-30個甚至更多的數(shù)據(jù)點，而不是只有10個。上圖的曲線圖可能表明，需要展示的數(shù)據(jù)很少，所以設(shè)計師試圖用一些賞心悅目的東西來填補空白區(qū)域。

這樣是不是就更直觀、更全貌的查看數(shù)據(jù)了？

現(xiàn)在想象一下，當(dāng)需要展示數(shù)據(jù)更多的趨勢變化時，曲線圖會是什么樣子的？

可以看到，多條曲線相互交叉重疊，看著很混亂，不易識別。

1. 曲線圖問題

1. 很難在一個表格里展示多個數(shù)據(jù)，并且讓數(shù)據(jù)容易識別；
2. 曲線的粗細(xì)會影響獲取相對準(zhǔn)確的數(shù)據(jù)信息，可以使用“斑馬條紋”一樣的間隔色柱狀圖來替代；
3. 現(xiàn)實中的真實數(shù)據(jù)很難讓曲線過渡自然，而不會顯得生硬。生硬的過渡影響視覺；
4. 兩個數(shù)據(jù)之間的線會誤導(dǎo)用戶，影響數(shù)據(jù)獲取。

2. 思考

• 如果數(shù)據(jù)少，可以使用柱狀圖展示；
• 如果數(shù)據(jù)多且具有連續(xù)性時，曲線線條要盡可能的細(xì)點，像股票趨勢一樣。

二、像甜甜圈一樣的環(huán)形設(shè)計

和像“蛇”的曲線圖一樣，像”甜甜圈”的圓環(huán)，尤其是嵌套的圓環(huán)，也會影響數(shù)據(jù)的準(zhǔn)確性，讓數(shù)據(jù)對比變成困難。另外，這兩種方法都存在不合理利用空間的問題。

用戶或多或少都能處理均勻的百分比：滿圓=100%，半圓=50%，四分之一=25%，三分之二=75%，但如果一個圓的終點在 “一半 “和 “三分之二 “之間的某個地方–就像圖上綠色的那個圓一樣，怎么辦？

用戶不會去計算50+25÷2，并假設(shè)它應(yīng)該是62.5%左右，這樣太麻煩而且數(shù)據(jù)也不準(zhǔn)確。

如果只有一個圓環(huán)，則可以在中間放置一個百分比數(shù)字，用來展示準(zhǔn)確的數(shù)據(jù)。但是如果像上圖一樣同時包含三個圓圈要怎么辦？

圓角的樣式可能會讓圖表看起來更活潑，但是卻降低了數(shù)據(jù)的讀取準(zhǔn)確性，這樣的圓角在視覺上會在真實值的基礎(chǔ)上增加2%-3%的讀數(shù)。

現(xiàn)在，來簡化一下圓環(huán)的視覺。

可以清晰看到，用戶看到的數(shù)據(jù)比實際數(shù)值要多一點，用圖表的方式再來展現(xiàn)下：

三個條形圖可以傳達(dá)相同的信息，占據(jù)更少的空間，并且無需工具提示即可顯示數(shù)字，這對于數(shù)據(jù)驅(qū)動的界面來說至關(guān)重要。

通過簡單的條形圖，可以不用添加演示講解的圖，也使組件更加緊湊。而且因為條形圖旁邊加了標(biāo)簽說明，所以就算是單色也不會影響視覺的表達(dá)。

1. 圓環(huán)設(shè)計問題

1. 環(huán)形的設(shè)計不容易讀取數(shù)據(jù)。用戶可以很好地識別25%、50%、75%或100%這樣的百分比，但通常無法準(zhǔn)確識別中間的值；
2. 嵌套的圓形需要一個圖例或工具提示，因為標(biāo)簽通常不能合適地放在在相應(yīng)的圓環(huán)上；
3. 數(shù)據(jù)之間不能進(jìn)行比較。就算是末端在一起的兩個圓環(huán)，由于內(nèi)外圈的問題，所表示的讀數(shù)都是不一樣的。

2. 思考

• 使用條形圖來準(zhǔn)確表達(dá)百分比；
• 環(huán)形圖時，盡量避免嵌套圓環(huán)或使用圓角。

三、玫瑰餅圖

著名統(tǒng)計學(xué)家、數(shù)據(jù)可視化基礎(chǔ)書籍的作者愛德華-圖夫特多次警告說，視覺上吸引人的圖表可能會說謊。像”貝殼 “的玫瑰餅圖是圖表的一種時髦變化，彩色的截面寬度不一，相互重疊。

簡單地說，數(shù)據(jù)可視化的本質(zhì)就是通過顏色、面積、長度等手段，將數(shù)字直觀地表現(xiàn)出來。

比如：數(shù)字越大，條形圖越長；百分比越低，面積越小。但是，當(dāng)我們分析玫瑰餅圖時，它是如何展示數(shù)據(jù)的呢？當(dāng)百分比越高，獲得的圓圈的片段越大，而且片段越粗。

這樣可以清晰看到片段之間很多重疊部分，而重疊和超標(biāo)背后的設(shè)計邏輯是什么？如何解讀這些 “數(shù)據(jù)”？是否意味著圖中顯示超過100%，超過360度？

這些信息可以在餅狀圖上進(jìn)行可視化，不過數(shù)據(jù)點的數(shù)量應(yīng)該保持有限，否則，圖表會變得擁擠，不易閱讀。

除此之外，你還可以將這樣的圖表類型作為矩形樹圖，相應(yīng)區(qū)域的矩形代表百分比。雖然人們通常最擅長比較長度–平均線柱狀圖，不過區(qū)域也能很好地用眼睛進(jìn)行比較。

1. 玫瑰餅圖問題

1. 和經(jīng)典的餅狀圖相比，玫瑰餅圖不能清晰的表達(dá)數(shù)據(jù)信息。數(shù)據(jù)是用面積、曲線粗細(xì)還是扇形角來表示呢？
2. 重疊的圖形不能清晰表達(dá)數(shù)據(jù)信息，會讓用戶無法識別；
3. 視覺太過花哨，無法完整展示真實數(shù)據(jù)。

2. 思考

• 如果數(shù)據(jù)不多，可以采用餅狀圖展示；
• 可以嘗試使用矩形樹圖展示數(shù)據(jù)。

四、像“山”一樣的面積圖

像“山”一樣的面積圖在可視化中也是常見的數(shù)據(jù)展示形式：

在上面曲線圖一章中，已經(jīng)介紹過這個缺點–數(shù)據(jù)被修飾的厲害，現(xiàn)在還是來詳細(xì)談?wù)勥@個問題。上面精心設(shè)計的可視化歸結(jié)為20個綠色和橙色的點。

所有的連接曲線都與數(shù)據(jù)無關(guān)，它們是人為添加的。也許是為了一個好的緣故–把不同的點統(tǒng)一成一個明確的趨勢，也許是為了填補 “空白”，讓它看起來更 “漂亮”。

來看看這個例子，很好反映了曲線圖與面積圖的問題：

兩個相鄰的點–12:00時為50公斤/平方米，13:00時為60公斤/平方米。

兩個點用一條自然的平滑曲線連接起來。結(jié)果，用戶看到12:30時，壓力約為55公斤/平方米，但這是錯誤的引導(dǎo)，因為沒有人測量12:30的數(shù)據(jù)。

這是一種替代方式——雙色柱狀圖。不過，雙色柱狀圖并不是唯一的選擇。在實際數(shù)據(jù)對比度足夠大、視覺效果有益的條件下，也可以選擇圖形，甚至用線條連接點的折線圖。

1. 面積圖問題

1. 面積圖同曲線圖一樣，給人一種數(shù)據(jù)連續(xù)性的印象，但真實的情況是一組有限的數(shù)據(jù)點；
2. 曲線無法真實反映出真實數(shù)據(jù)的走向，有時數(shù)據(jù)變化是突然的、漸進(jìn)的或波動的；
3. 數(shù)據(jù)點之間必須有一定間隔，才能讓曲線過渡自然，這樣浪費了太多的空間。

2. 思考

• 設(shè)計時確保數(shù)據(jù)點與視覺效果之間有明顯的區(qū)分，不能讓視覺干擾識別；
• 如果有重疊的圖形時，不要使用顏色填充的方式來形成對比。

五、3D樣式的柱狀圖

來看看這張圖有什么問題？為什么不建議使用比呆板的矩形更有吸引力和原創(chuàng)性的東西呢？

這樣的可視化有不少問題，但關(guān)鍵的問題是兩個顏色柱狀之間的空白，像”香腸 “一樣的3D柱狀圖在有真實數(shù)據(jù)的地方顯示了空位。

平心而論，3D柱狀圖的好處是保持高對比度，讓你能看到綠色和橙色之間的邊緣，但這種對比度的代價太高了。

計算一下，如果上圖中整個柱子是100%的話，彩條之間的每一個微小的空隙大約等于3%。

乍一看，不多吧？但有三個不同顏色的部分，需要兩個空隙，所以–每列6%！這就是數(shù)據(jù)被 “偷竊比例”。而如果從環(huán)形圖中計算出被盜的比例，就會達(dá)到7%左右，大約每個空隙3.5%。

把缺失的柱狀部分放到下面的樣式中，并把圖例作為一個單獨的項目去掉。此外，以前沒有標(biāo)題的圓環(huán)部分也賦予新的格式和名字（第四季度的平均值）。

是不是易讀且清晰多了？

1. 3D柱狀圖問題

1. “香腸”式的柱狀態(tài)略去了很多真實數(shù)據(jù)，無法為用戶提供準(zhǔn)確的數(shù)據(jù)進(jìn)行分析和決策；
2. 環(huán)形增加了占用面積，讓組件不夠緊湊，使得界面看上去相對雜亂一點。

2. 思考

• 不要用間距區(qū)分同一柱狀上的數(shù)據(jù)，確保單體柱狀總和要為100%；
• 各數(shù)據(jù)段不要使用圓角，圓角處理的線段無法得到準(zhǔn)確的數(shù)據(jù)。

六、3D柱狀圖

B端可視化的數(shù)據(jù)展示應(yīng)該盡量不要使用像“摩天大樓”樣的3D柱狀圖。

3D圖表缺乏準(zhǔn)確性，當(dāng)用戶快速掃描界面發(fā)現(xiàn)很多數(shù)據(jù)無法準(zhǔn)確、輕松的辨認(rèn)，對用戶造成錯誤的引導(dǎo)。

再來看看下面這張?zhí)幚砹说膱D：

當(dāng)你一眼掃過去時，能快速識別出標(biāo)了相同顏色的彩色點的柱狀圖是否一樣高嗎？相信就算仔細(xì)對比，也不會得到很肯定的答案。

用綠色方塊標(biāo)記的是相等的，用紅色圓圈標(biāo)記的區(qū)塊，第一個區(qū)塊要高出3%——這就是3D視覺會使數(shù)據(jù)精度不夠的問題。

然而，準(zhǔn)確性不是唯一的問題，還有一個猜到了嗎？3D柱狀圖占用過多空間了，也無法準(zhǔn)確的反映數(shù)據(jù)自然、微妙的波動情況。

如圖所示，要更好的區(qū)分各柱狀的細(xì)微變化，就需要讓組件更加的簡化。

而且，當(dāng)數(shù)據(jù)柱狀展示達(dá)到了一定的精度和亮度時，這種樣式用在暗黑模式也是便于讓用戶識別的。還可以看出，采用這種形式，比3D節(jié)約了一半的空間。

1. 3D柱狀圖問題

1. 3D柱狀圖樣式太占空間了；
2. 無法展示細(xì)微的數(shù)據(jù)波動；
3. 頂部特別亮?xí)r，會讓用戶難以辨別頂點在哪里，影響數(shù)據(jù)讀取。

2. 思考

• 盡量不要使用3D柱狀圖的樣式；
• 確保設(shè)計的時候，以及展示的數(shù)據(jù)與真實數(shù)據(jù)保持一致。

七、大集合

很多設(shè)計師通過絢麗的可視化來吸引用戶眼球，但真正用起來就會發(fā)現(xiàn)很難使用。

圖中可以看到很多絢麗的視覺表現(xiàn)：陰影、透明度、體積、發(fā)光、圓角、等距形狀等。但是，所有的組件填充了屏幕空間，提供的幫助卻是零——這是上面六點的大集合。

1. 大集合問題

1. 在視覺上，大集合的儀表盤設(shè)計絕對是吸引眼球的。但是數(shù)據(jù)卻失去了精確性，界面也失去了實用性；
2. 真實數(shù)據(jù)被展示出來時或多或少都會有一點誤差，但是圓潤的形狀、陰影、漸變填充和3D效果會加大這種誤差。

2. 思考

• 事先進(jìn)行用戶和業(yè)務(wù)調(diào)研，根據(jù)調(diào)研結(jié)果進(jìn)行儀表盤設(shè)計；
• 避免針對業(yè)務(wù)需求進(jìn)行過于簡單的儀表盤設(shè)計；
• 在沒有提示的情況下，讓用戶找到相應(yīng)的數(shù)據(jù)，能夠好的改進(jìn)和完善可視化界面。

通過這篇譯文，了解到了一些設(shè)計數(shù)據(jù)可視化時需要注意的點。在這方面，數(shù)據(jù)的準(zhǔn)確性以及實用性是遠(yuǎn)遠(yuǎn)大于視覺方面的，希望給看文章的你也有所幫助。

注：已獲得原文作者授權(quán)翻譯。

原文作者：Slava Shestopalov

原文地址：https://medium.muz.li/dataviz-sins-976f3a08948c

譯者：punchline

本文由 @punchline 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。