我們設(shè)計的應(yīng)用程序正變得越來越受數(shù)據(jù)驅(qū)動。對高質(zhì)量數(shù)據(jù)可視化的需求與以往一樣高。我們周圍到處都是令人困惑和誤導(dǎo)性的圖形，但我們可以通過遵循這些簡單的規(guī)則來改變這一點。

1. 選擇正確的圖表類型

選擇錯誤的圖表類型或默認(rèn)使用最常見的數(shù)據(jù)可視化類型可能會混淆用戶或?qū)е聰?shù)據(jù)誤解。相同的數(shù)據(jù)集可以以多種方式表示，具體取決于用戶希望看到的內(nèi)容。始終從審查您的數(shù)據(jù)集和用戶訪談開始。

2. 根據(jù)正負(fù)值使用正確的繪圖方向

當(dāng)使用單杠，圖片左側(cè)價值觀和積極的右側(cè)基準(zhǔn)的。

不要在基線的同一側(cè)繪制負(fù)值和正值。

3. 始終在 0 基線處開始條形圖

截斷會導(dǎo)致誤傳。在下面的示例中，查看左側(cè)的圖表，您可以很快得出結(jié)論，值 B 比 D 大 3 倍以上，而實際上差異要小得多。從零基線開始可確保用戶獲得更準(zhǔn)確的數(shù)據(jù)表示。

4. 對折線圖使用自適應(yīng) y 軸刻度

對于折線圖，始終將 y 軸比例限制為從零開始可能會使圖表幾乎平坦。由于折線圖的主要目標(biāo)是表示趨勢，因此根據(jù)給定時期的數(shù)據(jù)集調(diào)整比例并保持線條占據(jù) y 軸范圍的三分之二非常重要。

5. 使用折線圖時考慮您的時間序列

折線圖由由線連接的“標(biāo)記”組成，通常用于可視化時間間隔內(nèi)的數(shù)據(jù)趨勢 - 時間序列。這有助于說明值如何隨時間變化，并且在很短的時間間隔內(nèi)工作得很好，但是當(dāng)數(shù)據(jù)更新不頻繁時，這可能會導(dǎo)致混淆。

使用折線圖表示年收入，如果值每月更新，將打開圖表進(jìn)行解釋。用戶可能會假設(shè)連接“標(biāo)記”的線代表實際值，而實際上在那個特定時間的真實收入數(shù)字是未知的。在這種情況下，使用垂直條形圖可能是更好的選擇。

6. 不要使用“平滑”的折線圖

平滑的折線圖可能在視覺上令人愉悅，但它們歪曲了背后的實際數(shù)據(jù)，而且過粗的線條掩蓋了真正的“標(biāo)記”位置。

7. 避免混淆雙軸

通常，為了節(jié)省可視化空間，當(dāng)有兩個具有相同度量但不同量級的數(shù)據(jù)系列時，您可能傾向于使用雙軸圖表。這些圖表不僅難以閱讀，而且還以完全誤導(dǎo)的方式代表了 2 個數(shù)據(jù)系列之間的比較。大多數(shù)用戶不會密切關(guān)注比例，只是瀏覽圖表，得出錯誤的結(jié)論。

8. 限制餅圖中顯示的切片數(shù)量

餅圖是最受歡迎且經(jīng)常被誤用的圖表之一。在大多數(shù)情況下，條形圖是更好的選擇。但是，如果您決定使用餅圖，這里有一些關(guān)于如何使其工作的建議：

• 不要包括超過 5-7 片，保持簡單
• 您可以將額外的最小段分組到“其他”切片中

9. 直接在圖表上標(biāo)注

沒有適當(dāng)?shù)臉?biāo)簽，無論你的圖表有多好——它都沒有意義。直接在圖表上標(biāo)記對所有查看者都非常有幫助。查閱圖例需要時間和精力來鏈接價值和相應(yīng)的部分。

10. 不要在切片上貼標(biāo)簽

將值放在切片之上可能會導(dǎo)致多種問題，從可讀性問題到薄片挑戰(zhàn)。相反，為每個段添加帶有明確鏈接的黑色標(biāo)簽.

11. 訂購餅圖以加快掃描速度

有幾種普遍接受的訂購餡餅切片的方法：

• 將最大的切片放在 12 點鐘位置，然后按順時針方向降序放置下一個切片
• 將最大的切片放在 12 點鐘方向，順時針方向放置第二大塊，然后在 11 點鐘方向放置第三個，所有剩余的切片按順時針方向降序排列

12. 避免隨機(jī)性

同樣的建議適用于許多其他圖表。不要默認(rèn)為字母排序。將最大值放在頂部(對于水平條形圖)或左側(cè)(對于垂直條形圖)，以確保最重要的值占據(jù)最突出的空間，減少眼球運動和閱讀圖表所需的時間。

13. 無法閱讀薄甜甜圈圖

餅圖通常不是最容易閱讀的圖表，因為很難比較相似的值。當(dāng)我們?nèi)サ糁虚g部分并創(chuàng)建一個圓環(huán)圖時，我們可以騰出空間來顯示額外的信息，但犧牲了清晰度，如果走極端，它會使圖表變得毫無用處。

14. 讓數(shù)據(jù)自己說話

不必要的樣式不僅會分散注意力，還可能導(dǎo)致對數(shù)據(jù)的誤解和用戶產(chǎn)生錯誤印象。你應(yīng)該避免：

• 3D 元素，陰影
• 陰影、漸變和其他顏色失真
• 斑馬紋，過多的網(wǎng)格線
• 高度裝飾、斜體、粗體或襯線字體

15. 選擇與數(shù)據(jù)性質(zhì)相匹配的調(diào)色板

顏色是有效數(shù)據(jù)可視化的一個組成部分，在設(shè)計時考慮這 3 種調(diào)色板類型：

• 一個定性調(diào)色板效果最好分類變量的顯示。分配的顏色應(yīng)該是不同的，以確保可訪問性。
• 一個連續(xù)調(diào)色板最適合需要被放置在一個特定的順序數(shù)值變量。使用色調(diào)或亮度或兩者的組合，您可以創(chuàng)建一個連續(xù)的顏色集。
• 發(fā)散調(diào)色板是兩個順序調(diào)色板在中間(通常為零)的中心值的組合。通常，不同的調(diào)色板會傳達(dá)正值和負(fù)值。確保顏色也符合“消極”和“積極”表現(xiàn)的概念。

16. 無障礙設(shè)計

根據(jù)國家眼科研究所的數(shù)據(jù)，大約每 12 個人中就有 1 人是色盲。您的圖表只有在廣泛的受眾可以訪問時才能成功。

• 在調(diào)色板中使用不同的飽和度和亮度
• 以黑白打印您的數(shù)據(jù)可視化，以檢查對比度和可讀性。

17. 關(guān)注易讀性

確保排版?zhèn)鬟_(dá)信息并幫助用戶專注于數(shù)據(jù)，而不是分散注意力。

• 選擇清晰的字體，避免襯線和高度裝飾的字體
• 避免斜體、粗體和全部大寫
• 確保與背景形成高對比度
• 不要旋轉(zhuǎn)你的文字

18. 使用水平條形圖代替旋轉(zhuǎn)標(biāo)簽

這個簡單的技巧將確保用戶能夠更有效地掃描圖表，而不會拉傷他們的脖子)

19. 選擇你的圖表庫

如果您的任務(wù)是向 Web 和移動項目添加交互式圖表，您應(yīng)該問的第一個問題是我們將使用什么圖表庫?現(xiàn)代圖表庫包含了許多前面提到的交互和規(guī)則?；诙x的庫進(jìn)行設(shè)計將確保易于實施，并將為您提供大量交互想法。

20. 超越靜態(tài)報告

通過更改參數(shù)、可視化類型、時間線幫助用戶進(jìn)行探索。得出結(jié)論以最大化價值和洞察力。在下面的示例中，您可以看到 IOS Health 應(yīng)用程序使用各種數(shù)據(jù)呈現(xiàn)的組合來發(fā)揮其優(yōu)勢。