讓B端系統(tǒng)數(shù)據(jù)表格更美好的設(shè)計支柱

對于B端的數(shù)據(jù)可視化設(shè)計而言，能更直觀地展示數(shù)據(jù)，洞察數(shù)據(jù)背后的真相。然而，很多設(shè)計師在工作中并不懂圖表的設(shè)計，大多數(shù)情況下是隨心所欲，只有經(jīng)驗的設(shè)計師才能駕馭。我們根據(jù)工作經(jīng)驗，整理出一些圖表設(shè)計的支柱。

B端后臺產(chǎn)品的圖解設(shè)計思路與方法，將覆蓋了曲線圖、柱狀圖、餅圖、雷達(dá)圖、漏斗圖...等各類常用圖表類型，為實現(xiàn)清晰傳達(dá)和視覺美好的目標(biāo)，我們從圖形層次方面將圖表劃分為：底層元素、中間元素和上層元素，根據(jù)視覺強(qiáng)度的不同，分別設(shè)計三類元素。下層元素最弱，頂層元素最強(qiáng)，梳理圖元前后關(guān)系，可以清晰地把握元素的視覺層次，保證信息傳遞的效率。

基礎(chǔ)元素設(shè)計

在各種類型的圖中，我們將中軸、比例等定義為輔助說明數(shù)據(jù)的基礎(chǔ)元素，為減小視覺干擾和突出主圖，底層元素全部采用淺灰色設(shè)計。結(jié)果表明，當(dāng)元素與背景顏色的對比明度為1.2:1時，人眼是很難看見的，而當(dāng)對比度為2.0:1時，視覺的強(qiáng)度過強(qiáng)，很容易引起用戶的注意。

經(jīng)過元素視覺強(qiáng)度的調(diào)查和視覺實驗，最終確定元素與背景對比度為1.6:1左右，人眼可以看到的視覺強(qiáng)度偏弱的程度。為了確保元素的視覺效果不突出，只有在需要的時候才能發(fā)現(xiàn)。

中間環(huán)節(jié)設(shè)計

中間元素包括數(shù)據(jù)圖形、數(shù)據(jù)線段等承載數(shù)據(jù)主體信息的元素，是圖表中表示數(shù)據(jù)的關(guān)鍵元素。中層元素采用較低的明度和較高飽和度的數(shù)據(jù)顏色，比底層元素表現(xiàn)得更好，使元素從頁面中突出出來，確?？勺x性。風(fēng)格上適當(dāng)?shù)丶尤霛u變、描邊等樣式，以豐富視覺層次，給人以美的視覺感受。

頂級元素的設(shè)計

本文將頂層元素定義為一個突出的圖表信息，內(nèi)容包括懸停樣式、懸停之后的詳細(xì)數(shù)據(jù)描述等。在設(shè)計上為了保證視覺風(fēng)格的突出，使用深灰色、強(qiáng)調(diào)色彩等強(qiáng)對比風(fēng)格，并輔以動畫、投影等手法來保證明顯的視覺強(qiáng)調(diào)效果，確保最有效的傳達(dá)用戶。

最后的效果

經(jīng)過層次梳理，將元素重要程度和視覺強(qiáng)度結(jié)合起來，將設(shè)計圖中的主信息按重要程度顯示出來，使用戶能在第一時間接受最重要的信息，提高信息讀取效率。

圖表版面設(shè)計

圖形的排版是指圖中每個元素的大小和布局等，對于B端后臺類產(chǎn)品，不同的排版方式會給用戶的使用體驗帶來很大的影響。怎樣建立一套合理的規(guī)范保證用戶的使用體驗？

圖示大?。?/strong>

圖形尺寸指圖表的整體長寬高。工程中，我們發(fā)現(xiàn)不同尺寸的圖表對數(shù)據(jù)展示效果影響很大，比如大型數(shù)據(jù)的圖表擠在名片大小的區(qū)域顯示，這大大降低了信息讀取的效率?；诖?，搜集并提取出三種典型場景：“全貌概覽”、“多角度環(huán)視”、“細(xì)節(jié)分析”三類尺寸，分別對不同尺寸的信息進(jìn)行了優(yōu)化，以實現(xiàn)高效率地讀取信息。

該“最小圖”是最小的，摒棄了Y軸等不必要信息，利用小區(qū)域顯示最重要的圖形信息，并控制數(shù)據(jù)密度，保證信息的有效讀取。

限制了坐標(biāo)軸刻度數(shù)和數(shù)據(jù)密度的“中號圖表”尺寸受限，例如，曲線圖數(shù)據(jù)點(diǎn)不高于1據(jù)點(diǎn)/4像素，Y軸坐標(biāo)刻度不超過5個，以確保信息密度不過載；這種圖表尺寸通常用于對一個大型類別的內(nèi)容進(jìn)行多方面檢視時。

這個“大圖”的尺寸是最大的，沒有限制數(shù)據(jù)信息密度，并給出最完整的最詳細(xì)的顯示，這種尺寸通常被用于數(shù)據(jù)細(xì)節(jié)分析場景，比如數(shù)據(jù)的細(xì)節(jié)頁面。

最終以多種圖表混合排列方式，餅圖、圖示等大面積填色圖表、相比較折線圖等描邊型圖表，使視覺感覺更豐富。為了確保在多個圖表混合排列時，我們縮小了填色類別的實際高度。

坐標(biāo)軸設(shè)計：

圖中出現(xiàn)的坐標(biāo)軸頻率較高，那么坐標(biāo)軸的共同設(shè)計問題是什么？首先，橫縱坐標(biāo)軸在刻度上出現(xiàn)過密現(xiàn)象。

若坐標(biāo)軸承載的是連續(xù)的數(shù)據(jù)(連續(xù)數(shù)據(jù)指可量化的、連續(xù)的、在時間間隔內(nèi)任意取值的數(shù)據(jù)，例如時間、金額、人數(shù)等)，設(shè)計師可自行增減刻度數(shù)量，以保證視覺舒適度。若承載的數(shù)據(jù)是離散的(離散數(shù)據(jù)指不可量化、無關(guān)聯(lián)、不可在區(qū)間內(nèi)任意取值的數(shù)據(jù)，如分類、軟件版本、省等)，則可采用增加坐標(biāo)軸縮功能來解決。

其次是刻度的描述文本太長。

若為X軸(橫軸)字太長，除可控制范圍內(nèi)減少刻度，也可采用文字傾斜45°~90°的方法(如文字全部為中文，可用豎排代替傾斜90°)，緩解信息過密不清的情況。

若為Y軸(縱軸)字過長，則需要聯(lián)合研發(fā)調(diào)整數(shù)據(jù)的單位，如將“元”調(diào)整為“百萬元”。

若無法調(diào)整，則應(yīng)根據(jù)所用的圖解進(jìn)行調(diào)整。比如常用的Echarts圖表、D3圖表等開放源碼圖表庫，需要對刻度文本長度進(jìn)行預(yù)先估計和預(yù)留，否則刻度文本可能被裁減，無法完全顯示。如果您使用像AntV這樣的自適應(yīng)圖表庫，則不需要預(yù)先處理，圖表庫將自動根據(jù)刻度長度進(jìn)行整體調(diào)整。

圖片說明：

圖例作為圖表中不可缺少的一部分，在各類圖例中的位置各不相同，由于不同的圖表樣式有很大差異，圖例的位置需要全面考慮，并適當(dāng)布置，但在同一個產(chǎn)品或網(wǎng)頁上，如果過于隨意的放置圖例，會導(dǎo)致頁面不統(tǒng)一，同時增加用戶的瀏覽成本。

本文旨在提高屏幕信息密度，對不同場景的頁面排布進(jìn)行分析，制定出上下兩個較為寬松的指導(dǎo)原則，供設(shè)計者在沒有確定最佳方案時選擇。如果圖表是左右兩端對齊的類型，如折線圖、柱狀圖，建議將圖例放在圖表頂部。從而可以結(jié)合其它元素如標(biāo)題等進(jìn)行統(tǒng)一排列，減少占用空間。如果圖表本身在左右都有剩余空間，比如餅圖，建議將圖例放在圖表的右邊。還可以節(jié)省頁面空間。

最后：

利用圖表展示效率，讓數(shù)據(jù)最直觀地表達(dá)背后的商業(yè)邏輯和洞察，通過圖表，讓天下沒有難看的B端圖表是我們在B端用戶體驗設(shè)計中必須修煉的核心競爭力。