GLAD原則

 

優(yōu)化前

 

例圖點評：雖然圖表本身看上去好像并沒什么問題，圖形選擇的也對、顏色搭配也得體，讀者也能理解圖本身要表達的意思。但是，

沒有商業(yè)價值，即我能看出茅臺拿鐵賣的最好，然后呢？這是哪個階段的數(shù)據(jù)？不知道。有沒有持續(xù)的表現(xiàn)數(shù)據(jù)？也不知道。

優(yōu)化后

 

例圖點評：修改后，從數(shù)據(jù)中提煉出更有價值的商業(yè)數(shù)據(jù)，在時間維度和空間維度都有體現(xiàn)，簡潔明了的同時，也具有商業(yè)參考價值。

 

 

例圖1

 

例圖點評：修改前，有些國家由于人口稀少，導(dǎo)致相關(guān)數(shù)據(jù)也非常小，難以在圖表中展示，造成整個圖表花里胡哨且復(fù)雜。修改后，把過小數(shù)據(jù)的選項折疊為“其他”，默認(rèn)顯示主要幾個較大國家的數(shù)據(jù)，當(dāng)點擊“其他”圖例的時候，再顯示詳細的數(shù)據(jù)信息，使數(shù)據(jù)展示更具有側(cè)重點。

例圖2

 

例圖點評：圖例2是dribbble上的圖表作品，左側(cè)是K線圖，右側(cè)是柱狀圖，它們的問題在于花里胡哨，卻缺少必要的刻度，形式大于內(nèi)容，過于追求好看的反面案例。

 

 

錯誤例圖

 

正確例圖

 

例圖點評：圖例的本意是對比2023和2024年不同品牌手機的銷售額占比，是基于時間維度的對比圖，但錯誤圖例卻用了兩個餅圖，無法直觀的表現(xiàn)特定品牌在不同年度的銷售額占比的對比情況。正確的圖例則直接用了柱狀對比圖，一目了然。

 

 

 

 

圖表的構(gòu)成

 

•  

  信息類標(biāo)題：提供理解數(shù)據(jù)所需的所有信息，回答「何事」、「何地」、「何時」這三個問題
•  

  描述類標(biāo)題：突出圖表中顯示的主要數(shù)據(jù)模式或趨勢，描繪出圖表所要講述的故事

標(biāo)題常用位置

 

•  

  區(qū)分不同類別數(shù)據(jù)的標(biāo)志
•  

  開啟/隱藏類別顯示

 

 

常見圖例展現(xiàn)形式

 

圖例的位置

 

 

 

•  

  常用的圖例顏色（顏色本身代表著行業(yè)中的某種含義），此類顏色需要是固定色值，無論哪個 chart 中，都是這個顏色；
•  

  無特殊含義的圖例，可以規(guī)范出一個圖例顏色的使用順序表。那些無特殊含義的 chart 可以按順序使用圖例顏色，圖例整齊劃一。

Echarts的無障礙花紋樣式

 

米勒定律

 

 

 

 

 

坐標(biāo)軸分類

 

軸的常見組合方式

 

 

 

•  

  軸線一般只考慮是否顯示，例如柱狀圖、折線圖等，在有背景網(wǎng)格線的情況下，會隱藏 y 軸線，條形圖則是隱藏 x 軸線，以達到信息降噪，突出視覺重點的目的。

•  

  軸刻度通常不顯示，只有在肉眼無法定位到某個標(biāo)簽對應(yīng)的數(shù)據(jù)點時，會顯示刻度線，輔助用戶定位，比如折線圖，或抽樣顯示的柱狀圖。

•  

  網(wǎng)格線用于定位數(shù)據(jù)點的值域范圍，跟隨值域軸的位置單向顯示，柱狀圖采用水平網(wǎng)格，條形圖采用垂直網(wǎng)格。樣式為虛實線的最多，斑馬線由于感知過強，一般不用。

 

 

•  

  軸標(biāo)題/單位主要用于說明定義域軸、值域軸的數(shù)據(jù)含義。當(dāng)可視化圖表標(biāo)題、圖例、軸標(biāo)簽已經(jīng)能充分表達數(shù)據(jù)含義，無需單獨顯示標(biāo)題/單位，「如無必要，勿增實體」。

沒有必要就不要多此一舉

 

•  

  連續(xù)軸/時間軸進行適當(dāng)抽樣。連續(xù)軸/時間軸，是由一組前后包含同等差值的等差數(shù)列組成，缺少幾個數(shù)值也能明顯看出中間的對應(yīng)關(guān)系。當(dāng)多個標(biāo)簽在容器內(nèi)全顯示發(fā)生重疊，我們可以利用抽樣顯示的手段來避免這種情況。常見的抽樣方式是等分抽樣：當(dāng)多個標(biāo)簽在 x 軸無法完全顯示，優(yōu)先保留首尾標(biāo)簽，其余標(biāo)簽按同等步長間隔顯示。間隔等分的前提是間隔數(shù)是合數(shù)，能被 1 和其本身以外的數(shù)整除。如果間隔數(shù)為質(zhì)數(shù)，就需要「-1」轉(zhuǎn)成合數(shù)。

 

 

 

 

•  

  分類軸是由幾組離散數(shù)據(jù)組成，獨立存在無緊密邏輯關(guān)聯(lián)。若采用抽樣規(guī)則，隱藏一些標(biāo)簽，用戶對圖表認(rèn)知就會有困難，違背了數(shù)據(jù)可視化清晰、有效的設(shè)計原則。分類軸最佳處理方式是標(biāo)簽旋轉(zhuǎn) 45 度，若 45 度仍顯示不下，繼續(xù)旋轉(zhuǎn) 90 度。如果 90 度還是放不下就要考慮結(jié)合圖表交互或反轉(zhuǎn)圖表。

 

 

•  

  分類軸標(biāo)簽字段有長有短，長文本標(biāo)簽直接旋轉(zhuǎn)不僅影響美觀，而且也不利于用戶閱讀。如果數(shù)據(jù)量比較少只有 2~4 個，長文本標(biāo)簽更適合水平展示，顯示不下省略即可；如果數(shù)據(jù)量比較多，就限定字符數(shù)后旋轉(zhuǎn)。

 

 

•  

  邊界要清晰，不可虛化；
•  

  多個數(shù)據(jù)同時顯示的時候，要保證每個數(shù)據(jù)都能清晰的看到，可以采用透明度來保證所有數(shù)據(jù)的顯示。

 

 

常見的圖形可以分為七大類：

趨勢類、比較類、排名類、占比類、流程類、分布類、關(guān)系類。

折線圖構(gòu)成

 

 

 

柱狀圖構(gòu)成

 

 

 

 

 

堆積柱狀圖構(gòu)成

 

 

 

面積圖構(gòu)成

 

 

 

蠟燭圖構(gòu)成

 

 

 

 

 

 

 

 

 

氣泡圖構(gòu)成

 

 

 

 

 

子彈圖構(gòu)成

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

漏斗圖構(gòu)成

 

 

 

?；鶊D的構(gòu)成

 

 

 

 

 

 

 

 

 

1.  

   需要呈現(xiàn)的內(nèi)容篇幅相對較少。
2.  

   常用于針對某些內(nèi)容進行補充說明、需要用戶處理關(guān)鍵信息、重要的警告提示等。
3.  

   通常是由系統(tǒng)觸發(fā)（用戶被動接受）。
4.  

   彈窗整體高度和寬度不做絕對的標(biāo)準(zhǔn)或規(guī)定，可以根據(jù)內(nèi)容篇幅的多少和視覺的平衡度來確定，整體規(guī)范保持一致即可。

 

 

 

 

 

 

 

 

 

 

 

 

有贊后臺頁面