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

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

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

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

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

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

01 移動(dòng)端適配

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

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

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

案例1：折線圖

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

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

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

案例2：雷達(dá)圖

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

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

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

案例3：矩陣樹(shù)圖

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

02 圖表設(shè)計(jì)原則

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

結(jié)合我們的設(shè)計(jì)實(shí)踐，將圖表設(shè)計(jì)原則總結(jié)為視覺(jué)降噪、表達(dá)準(zhǔn)確、突出重點(diǎn)。

1. 視覺(jué)降噪

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

當(dāng)數(shù)據(jù)標(biāo)注過(guò)多時(shí)，去除根本看不清的數(shù)據(jù)標(biāo)注，降低視覺(jué)負(fù)擔(dān)。

2. 表達(dá)準(zhǔn)確

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

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

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

3. 突出重點(diǎn)

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

03 考慮特殊情況

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

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

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

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

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

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

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

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

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

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

05 結(jié)語(yǔ)

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

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