GLAD原則

 

優(yōu)化前

 

例圖點(diǎn)評(píng)：雖然圖表本身看上去好像并沒什么問題，圖形選擇的也對(duì)、顏色搭配也得體，讀者也能理解圖本身要表達(dá)的意思。但是，

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

優(yōu)化后

 

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

 

 

例圖1

 

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

例圖2

 

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

 

 

錯(cuò)誤例圖

 

正確例圖

 

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

 

 

 

 

圖表的構(gòu)成

 

•  

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

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

標(biāo)題常用位置

 

•  

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

  開啟/隱藏類別顯示

 

 

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

 

圖例的位置

 

 

 

•  

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

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

Echarts的無障礙花紋樣式

 

米勒定律

 

 

 

 

 

坐標(biāo)軸分類

 

軸的常見組合方式

 

 

 

•  

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

•  

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

•  

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

 

 

•  

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

沒有必要就不要多此一舉

 

•  

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

 

 

 

 

•  

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

 

 

•  

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

 

 

•  

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

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

 

 

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

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

折線圖構(gòu)成

 

 

 

柱狀圖構(gòu)成

 

 

 

 

 

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

 

 

 

面積圖構(gòu)成

 

 

 

蠟燭圖構(gòu)成

 

 

 

 

 

 

 

 

 

氣泡圖構(gòu)成

 

 

 

 

 

子彈圖構(gòu)成

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

漏斗圖構(gòu)成

 

 

 

桑基圖的構(gòu)成

 

 

 

 

 

 

 

 

 

1.  

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

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

有贊后臺(tái)頁面