英文 | https://uxdesign.cc/20-ideas-for-better-data-visualization-73f7e3c2782d
翻譯 | 楊小愛
我們設計的應用程式正變得越來越受資料驅動。對高品質資料可視化的需求與以往一樣高。我們周圍到處都是令人困惑和誤導性的圖形，但我們可以通過遵循這些簡單的規則來改變這一點。
現在，我們就開始今天的内容吧。
1、 選擇正确的圖表類型
選擇錯誤的圖表類型或預設使用最常見的資料可視化類型，可能會混淆使用者或導緻資料誤解。相同的資料集可以以多種方式表示，具體取決于使用者希望看到的内容。始終從審查您的資料集和使用者訪談開始。
2、根據正負值使用正确的繪圖方向
使用水準條時，在基線左側繪制負值，在基線右側繪制正值。
不要在基線的同一側繪制負值和正值。
3、 始終在 0 基線處開始條形圖
截斷會導緻誤傳。在下面的示例中，檢視左側的圖表，您可以很快得出結論，值 B 比 D 大 3 倍以上，而實際上差異要小得多。從零基線開始可確定使用者獲得更準确的資料表示。
4、對折線圖使用自适應 y 軸刻度
對于折線圖，始終将 y 軸比例限制為從零開始可能會使圖表幾乎平坦。由于折線圖的主要目标是表示趨勢，是以根據給定時期的資料集調整比例并保持線條占據 y 軸範圍的三分之二非常重要。
5、使用折線圖時考慮您的時間序列
折線圖由由線連接配接的“标記”組成，通常用于可視化時間間隔内的資料趨勢 - 時間序列。這有助于說明值如何随時間變化，并且在很短的時間間隔内工作得很好，但是當資料更新不頻繁時，這可能會導緻混淆。
使用折線圖表示年收入，如果值每月更新，将打開圖表進行解釋。使用者可能會假設連接配接“标記”的線代表實際值，而實際上該特定時間的真實收入數字是未知的。
在這種情況下，使用垂直條形圖可能是更好的選擇。
6、不要使用“平滑”的折線圖
平滑的折線圖可能在視覺上令人愉悅，但它們歪曲了背後的實際資料，而且過粗的線條掩蓋了真正的“标記”位置。
7、避免混淆雙軸
通常，為了節省可視化空間，當有兩個具有相同度量，但不同量級的資料系列時，您可能傾向于使用雙軸圖表。這些圖表不僅難以閱讀，而且還以完全誤導的方式代表了 2 個資料系列之間的比較。大多數使用者不會密切關注比例，隻是浏覽圖表，得出錯誤的結論。
8、限制餅圖中顯示的切片數量
餅圖是最受歡迎且經常被誤用的圖表之一。在大多數情況下，條形圖是更好的選擇。但是，如果您決定使用餅圖，這裡有一些關于如何使其工作的建議：
- 不要超過7個餅狀，最好保持在5-7個餅狀之間。
- 您可以将額外的最小段分組到“其他”切片中。
9、 直接在圖表上标注
沒有适當的标簽，無論你的圖表有多好——它都沒有意義。直接在圖表上标記對所有檢視者都非常有幫助。 會節約查閱圖例者的時間和精力。
10、 不要在切片上貼标簽
将值放在切片之上可能會導緻多種問題，從可讀性問題到薄片挑戰。相反，為每個段添加帶有清晰連結的黑色标簽。
11、訂購餅圖以加快掃描速度
有幾種普遍接受的訂購餡餅切片的方法：
- 将最大的切片放在 12 點鐘位置，然後按順時針方向降序放置下一個切片。
- 将最大的切片放在 12 點鐘位置，順時針放置第二大的切片，在 11 點鐘位置放置第三大的切片，所有剩餘的切片按順時針方向降序排列。
12、避免随機性
同樣的建議适用于許多其他圖表。不要預設為字母排序。将最大值放在頂部（對于水準條形圖）或左側（對于垂直條形圖），以確定最重要的值占據最突出的空間，減少眼球運動和閱讀圖表所需的時間。
13、無法閱讀薄甜甜圈圖
餅圖通常不是最容易閱讀的圖表，因為很難比較相似的值。當我們去掉中間部分并建立一個圓環圖時，我們可以騰出空間來顯示額外的資訊，但犧牲了清晰度，如果走極端，它會使圖表變得毫無用處。
14、讓資料自己說話
不必要的樣式不僅會分散注意力，還可能導緻對資料的誤解和使用者産生錯誤印象。你應該避免：
- 3D 元素，陰影
- 陰影、漸變和其他顔色失真
- 斑馬紋，過多的網格線
- 高度裝飾、斜體、粗體或襯線字型
15、選擇與資料性質相比對的調色闆
顔色是有效資料可視化的一個組成部分，在設計時考慮這 3 種調色闆類型：
定性調色闆最适合顯示分類變量。配置設定的顔色應該是不同的，以確定可通路性。
順序調色闆最适合需要按特定順序放置的數字變量。使用色調或亮度或兩者的組合，您可以建立一個連續的顔色集。
發散調色闆是兩個連續調色闆的組合，中間有一個中心值（通常為零）。通常，不同的調色闆會傳達正值和負值。確定顔色也符合“消極”和“積極”表現的概念。
檢視一個友善的工具 — ColorBrewer，它可以幫助您生成各種調色闆。
16、無障礙設計
根據國家眼科研究所的資料，大約每 12 個人中就有 1 人是色盲。您的圖表隻有在廣泛的閱聽人可以通路時才能成功。
- 在調色闆中使用不同的飽和度和亮度。
- 以黑白列印您的資料可視化，以檢查對比度和可讀性。
17、關注易讀性
確定排版傳達資訊并幫助使用者專注于資料，而不是分散注意力。
- 選擇清晰的字型，避免襯線和高度裝飾的字型
- 避免斜體、粗體和全部大寫
- 確定與背景形成高對比度
- 不要旋轉你的文字
18、使用水準條形圖代替旋轉标簽
這個簡單的技巧将確定使用者能夠更有效地掃描圖表，而不會拉傷他們的脖子。
19、選擇你的圖表庫
如果您的任務是向 Web 和移動項目添加互動式圖表，您應該問的第一個問題是我們将使用什麼圖表庫？現代圖表庫包含了許多前面提到的互動和規則。基于定義的庫進行設計将確定易于實施，并将為您提供大量互動想法。
20、超越靜态報告
通過更改參數、可視化類型、時間線幫助使用者進行探索。得出結論以最大化價值和洞察力。在下面的示例中，您可以看到 IOS Health 應用程式使用各種資料呈現的組合來發揮其優勢。
總結
以上就是我于您分享的20個關于圖表的設計技巧，希望對您有所幫助。如果您覺得這篇内容對您有用，也請你分享給您身邊的朋友。
最後，感謝您的閱讀。