數據可視化在 B 端領域的重要性不言而喻，它通過將復雜的數據轉化為直觀的圖形和圖表，讓用戶可以直接洞察到數據的分布、趨勢，從而幫助用戶快速作出決策解決問題。

羅伯特·科薩拉說：“數據可視化是挖掘和利用數據的關鍵。即便是最簡單的可視化，也能夠消除數據提供者對自己的數據被低估、誤解或歪曲的憂慮。數據可視化能夠改變人們對數據的理解方式，提高大眾對數據的興趣，并推動更多更好的數據開發。”

在釘釘組織大腦中有非常多的數據報表，希望來幫助用戶進行更好的數據洞察，但在整體走查中發現存在數據展示不合理、數值表達有歧義等情況，為更好的提升數據圖表的易讀性、易用性，進行了此次數據圖表的設計升級。

在設計中還發現，很多用戶由于工作場景和工作職責特殊，對移動端的依賴遠遠超過我們的預期，當前產品只做了 PC 端的適配，無法滿足移動端的場景，故圖表的移動端體驗也是本次設計升級的重點。

本文將結合釘釘組織大腦的設計實踐案例，來具體闡述如何進行數據可視化，主要分為以下 4 個方面：

1. 移動端適配
2. 圖表設計原則
3. 考慮特殊情況
4. 與業務情況結合

一、移動端適配

Material Design 在數據可視化原則中提到，應使用漸進式展示顯示圖表詳細信息，允許用戶根據實際需要查看特定的數據點。在桌面端，鼠標懸停即可顯示更詳細的數據；在移動端，觸摸并按住手勢會在圖表上方顯示提示。

結合其他移動端圖表的設計案例，移動端圖表適配主要遵循以下幾點：

1. 移動端視野狹窄，注意不要遮擋圖表，可在固定位置展示數據，給用戶穩定的心智
2. 移動端相比 PC 端無 hover 態，盡量直接展示數據標簽
3. 移動端數據過多時可采用視圖放大的形式查看數據詳情

案例 1：折線圖

折線圖通常數據點密集，若直接沿用 PC 端交互，點擊出現 tooltip 會遮擋大部分可視區域，移動端可直接在圖例后增加數據，保證圖表區域不被遮擋，同時支持用戶左右滑動查看數據，數據瀏覽更高效。

當只有單一數據時，數據展示位置可跟隨用戶點擊手勢，數據查看更方便。當有多條數據時，因為圖例排版更加復雜，為保證數據展示的穩定性，圖例需固定位置。

移動端的此種交互方式也可以延伸到柱狀圖。

案例 2：雷達圖

雷達圖常用于多維度的數據對比，僅有一組多維數據時，用戶更看重維度之間的數據比較，當有多組多維數據時，更看重組與組之間的比較。

故在一組多維的雷達圖中，如果直接沿用 PC 端 tooltip 交互，點擊一次只能展示一維數據，交互重且展示效率低，無法直接多維度對比。移動端適配時，可直接展示數據標簽，在展示效率高的同時，用戶可直接對比數據，更符合雷達圖的使用場景。

在多組多維的雷達圖中，如果直接沿用 PC 端 tooltip 交互，遇到的問題和折線圖移動端適配問題一致，即會對圖表產生較大的遮擋，但此時并不能直接沿用折線圖的解決方案（在圖例后加數據標簽），因為數據標簽和用戶點擊行為的關聯性比較小，在測試時發現用戶并不能注意到點擊后有響應。所以在移動端點擊軸線或任意點，用數據顏色懸浮展示數據標簽，在減少區域遮擋的同時讓用戶的操作有響應。

案例 3：矩陣樹圖

矩陣樹圖因數據復雜，在移動端中會出現部分矩形會很小的情況，用戶較難看到具體數據，此時在移動端用戶可以點擊矩形，放大至圖表區域中央進行查看，同時也需要注意讓用戶可以重新查看完整視圖。

二、圖表設計原則

什么樣的圖表算是好的圖表？《樂見數據：商業數據可視化思維》一書中馬世權提出了 GLAD 原則：Good Data and Insight（好的數據和洞察）、Less Noise（降噪）、Accurate Expression（精準表達）和 Distinct Mark（畫龍點睛）。

結合我們的設計實踐，將圖表設計原則總結為視覺降噪、表達準確、突出重點。

1. 視覺降噪

減少不必要元素的干擾，在表意清晰的情況下可去除重復的數據標簽。

當數據標注過多時，去除根本看不清的數據標注，降低視覺負擔。

2. 表達準確

在實際場景中發現數據標注常常和圖表不對應，以環狀圖為例，看不懂到底哪個切片對應哪條數據。數據標注應和數據需一一對應，否則易造成用戶誤解，注意可利用顏色來保證數據可讀性，如指引線顏色和數據顏色保持一致。

有多組數據映射關系時，務必增加圖例，防止造成表意不清。值得一提的是，數據的名稱需保持準確，讓用戶一眼可看出想表達什么。

另外，為提升數據展示的效率，可以盡可能直接展示數據標注，用戶無需任何操作即可知道數據詳情。

3. 突出重點

基準線避免使用有數據語義的分類顏色，應使用中性色，防止造成用戶誤解。

三、考慮特殊情況

1. 數據為 0

通常數據為 0 的情況較少被考慮，但涉及到以顏色做表意的情況時需要特殊處理，以矩陣樹圖為例，為防止數據未及時更新導致圖表全白，設定當數值為 0 時，展示顏色的透明度為 10%，建立百分比和透明度的數據映射關系。

2. 數據過多

當數據過多時，PC 端可以直接 hover 展示，但移動端由于交互精度不高且視野狹窄，可采用視圖轉換的方式來保證數據呈現，環狀圖可長按切片放大區域，折線圖可長按出現放大鏡。

四、與業務情況結合

除了通用的圖表設計，還需要注重圖表與業務含義的融合。

案例 1：業務主軸

在折線圖設計中，業務希望重點某一數據，但在普通折線圖中三條線同粗細，無法體現數據重點。故增加了圖表的主線邏輯，不論設計還是研發后續引用該圖表組件時，可設定某一條線為主線進行加粗強調，在表達業務含義的同時讓數據呈現有重點。

案例 2：數據洞察

可以結合 AI 能力對圖表進行更多的業務層面上的洞察和解釋。

結語

一個好的數據可視化設計不僅僅是技術的展示，更是一種溝通的藝術。設計所追求的，不僅是圖表的美觀，更是信息的清晰傳達和有效溝通。在未來的設計中，需要繼續探索和實踐，不斷優化可視化工具和方法，讓每一張圖表都能說話，讓每一個數據點都充滿意義。

歡迎關注作者微信公眾號：「釘釘用戶體驗」