中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

不過現在試想一下：在健身應用或視頻游戲中，當界面運用需要使用圖表來表達數據時，這些形狀就是一個不錯的表達選擇了。

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

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

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

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

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

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

這樣是不是就更直觀、更全貌的查看數據了？

現在想象一下，當需要展示數據更多的趨勢變化時，曲線圖會是什么樣子的？

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

1. 曲線圖問題

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

2. 思考

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

二、像甜甜圈一樣的環形設計

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

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

用戶不會去計算50+25÷2，并假設它應該是62.5%左右，這樣太麻煩而且數據也不準確。

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

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

現在，來簡化一下圓環的視覺。

可以清晰看到，用戶看到的數據比實際數值要多一點，用圖表的方式再來展現下：

三個條形圖可以傳達相同的信息，占據更少的空間，并且無需工具提示即可顯示數字，這對于數據驅動的界面來說至關重要。

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

1. 圓環設計問題

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

2. 思考

• 使用條形圖來準確表達百分比；
• 環形圖時，盡量避免嵌套圓環或使用圓角。

三、玫瑰餅圖

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

簡單地說，數據可視化的本質就是通過顏色、面積、長度等手段，將數字直觀地表現出來。

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

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

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

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

1. 玫瑰餅圖問題

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

2. 思考

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

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

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

在上面曲線圖一章中，已經介紹過這個缺點–數據被修飾的厲害，現在還是來詳細談談這個問題。上面精心設計的可視化歸結為20個綠色和橙色的點。

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

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

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

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

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

1. 面積圖問題

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

2. 思考

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

五、3D樣式的柱狀圖

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

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

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

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

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

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

是不是易讀且清晰多了？

1. 3D柱狀圖問題

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

2. 思考

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

六、3D柱狀圖

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

3D圖表缺乏準確性，當用戶快速掃描界面發現很多數據無法準確、輕松的辨認，對用戶造成錯誤的引導。

再來看看下面這張處理了的圖：

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

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

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

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

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

1. 3D柱狀圖問題

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

2. 思考

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

七、大集合

很多設計師通過絢麗的可視化來吸引用戶眼球，但真正用起來就會發現很難使用。

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

1. 大集合問題

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

2. 思考

• 事先進行用戶和業務調研，根據調研結果進行儀表盤設計；
• 避免針對業務需求進行過于簡單的儀表盤設計；
• 在沒有提示的情況下，讓用戶找到相應的數據，能夠好的改進和完善可視化界面。

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

注：已獲得原文作者授權翻譯。

原文作者：Slava Shestopalov

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

譯者：punchline

本文由 @punchline 翻譯發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。