本文將深入探討數(shù)據(jù)可視化在B端領(lǐng)域的應(yīng)用，分析如何通過設(shè)計升級提升數(shù)據(jù)圖表的易讀性與易用性，同時探索移動端適配的策略，讓數(shù)據(jù)圖表在方寸之間也能講述清晰的故事。

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

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

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

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

01 移動端適配

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

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

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

案例1：折線圖

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

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

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

案例2：雷達圖

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

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

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

案例3：矩陣樹圖

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

02 圖表設(shè)計原則

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

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

1. 視覺降噪

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

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

2. 表達準確

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

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

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

3. 突出重點

基準線避免使用有數(shù)據(jù)語義的分類顏色，應(yīng)使用中性色，防止造成用戶誤解。

03 考慮特殊情況

1. 數(shù)據(jù)為0

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

2. 數(shù)據(jù)過多

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

04 與業(yè)務(wù)情況結(jié)合

除了通用的圖表設(shè)計，還需要注重圖表與業(yè)務(wù)含義的融合。

案例1：業(yè)務(wù)主軸

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

案例2：數(shù)據(jù)洞察

可以結(jié)合AI能力對圖表進行更多的業(yè)務(wù)層面上的洞察和解釋。

05 結(jié)語

一個好的數(shù)據(jù)可視化設(shè)計不僅僅是技術(shù)的展示，更是一種溝通的藝術(shù)。設(shè)計所追求的，不僅是圖表的美觀，更是信息的清晰傳達和有效溝通。

在未來的設(shè)計中，需要繼續(xù)探索和實踐，不斷優(yōu)化可視化工具和方法，讓每一張圖表都能說話，讓每一個數(shù)據(jù)點都充滿意義。