圖表作為一個(gè)使用頻率不高卻很重要的組件，讓設(shè)計(jì)者們操碎了心?？粗约涸O(shè)計(jì)的圖表，總覺(jué)得有哪里不好，但又說(shuō)不上來(lái)。本文作者總結(jié)了快速提升B端圖表用戶體驗(yàn)的15小細(xì)節(jié)，一起來(lái)看一下吧。

B端界面中使用頻率不高，但卻無(wú)比重要的組件——圖表，可謂是讓設(shè)計(jì)者們煩透了心。圖表設(shè)計(jì)起來(lái)不難，但想要設(shè)計(jì)好，也是需要下一番功夫的。

很多小伙伴問(wèn)我，說(shuō)：每次在設(shè)計(jì)圖表的時(shí)候，總是找不出自己哪里設(shè)計(jì)的不好，但看著自己設(shè)計(jì)的圖表，又沒(méi)有那么滿意，該如何辦呢？今天，我們就來(lái)一起了解下B端的圖表，挖掘一些設(shè)計(jì)者們平時(shí)未曾捕捉到的細(xì)節(jié)，獲得這些細(xì)節(jié)，將從細(xì)微之處提升產(chǎn)品的用戶體驗(yàn)。

本文將從以下五個(gè)部分來(lái)展開(kāi)：

1. 什么是圖表
2. 圖表的優(yōu)勢(shì)
3. 開(kāi)源圖表庫(kù)有哪些
4. 15個(gè)圖表小細(xì)節(jié)
5. 總結(jié)

一、什么是圖表

百度百科解釋?zhuān)骸皥D表，Microsoft Office用語(yǔ)，泛指在屏幕中顯示的，可直觀展示統(tǒng)計(jì)信息屬性（時(shí)間性，數(shù)量性等），對(duì)知識(shí)挖掘和信息直觀生動(dòng)感受起關(guān)鍵作用的圖形結(jié)構(gòu)，是一種很好的將對(duì)象屬性數(shù)據(jù)直觀，形象的‘可視化’的手段?！?

根據(jù)百度百科的解釋?zhuān)覀儊?lái)做一個(gè)”數(shù)據(jù)圖表化“的小推導(dǎo)。我從網(wǎng)站找了一段描述低碼的數(shù)據(jù)（數(shù)據(jù)來(lái)源艾瑞咨詢，并做了一些小修改），如下：

“2016年開(kāi)始低代碼概念開(kāi)始從國(guó)內(nèi)逐漸興起，當(dāng)年低代碼相關(guān)產(chǎn)品投融資事件達(dá)10起，億元以上融資數(shù)量2起，至2020年中國(guó)低代碼市場(chǎng)共有59起投融資事件，其中億元以上融資共有13起。2017年融資事件11起，億元以上融資3起；2018年融資事件12起，億元以上融資2起；2019年融資事件12起，億元以上融資3起；2020年融資事件14起，億元以上融資3起。隨著企業(yè)對(duì)系統(tǒng)敏捷性、易用性需求的增加和對(duì)業(yè)務(wù)部門(mén)低代碼接受度的提升，市場(chǎng)會(huì)迎來(lái)新的發(fā)展契機(jī)，短期內(nèi)投融資熱度將持續(xù)增長(zhǎng)?！?

雖然以上的文字已經(jīng)做了一些簡(jiǎn)練，但閱讀時(shí)候不免覺(jué)得有些繞，不能很直觀的理解數(shù)據(jù)，且要記住關(guān)鍵數(shù)據(jù)還是較為困難的。

下面，我們對(duì)以上文字進(jìn)行再次梳理，適當(dāng)分段，進(jìn)行結(jié)構(gòu)化排版：

“2016年開(kāi)始低代碼概念開(kāi)始從國(guó)內(nèi)逐漸興起，當(dāng)年低代碼相關(guān)產(chǎn)品投融資事件達(dá)10起，億元以上融資數(shù)量2起。

至2020年中國(guó)低代碼市場(chǎng)共有59起投融資事件，其中億元以上融資共有13起。

2017年融資事件11起，億元以上融資3起；

2018年融資事件12起，億元以上融資2起；

2019年融資事件12起，億元以上融資3起；

2020年融資事件14起，億元以上融資3起。

隨著企業(yè)對(duì)系統(tǒng)敏捷性、易用性需求的增加和對(duì)業(yè)務(wù)部門(mén)低代碼接受度的提升，市場(chǎng)會(huì)迎來(lái)新的發(fā)展契機(jī)，短期內(nèi)投融資熱度將持續(xù)增長(zhǎng)?！?

通過(guò)分段描述，以上段落顯得清楚了很多，但是例如”融資事件、億元以上融資“等詞語(yǔ)還是反復(fù)出現(xiàn)，整體來(lái)說(shuō)不夠簡(jiǎn)練。

那么，我們?cè)賹⒁陨蠑?shù)據(jù)進(jìn)行表格化展示來(lái)看看，如下：

我們可以發(fā)現(xiàn)，表格的展現(xiàn)形式比分段的結(jié)構(gòu)化文本又清晰了太多，使得數(shù)據(jù)展示非常直觀。不僅用戶可以看清楚數(shù)據(jù)本身，還可以對(duì)比數(shù)據(jù)，假如表格再設(shè)計(jì)的人性化一些，可以將最大值進(jìn)行重點(diǎn)標(biāo)注（根據(jù)業(yè)務(wù)需要對(duì)數(shù)據(jù)進(jìn)行差異化標(biāo)注）。

不過(guò)表格也有劣勢(shì)，無(wú)法展現(xiàn)數(shù)據(jù)隨時(shí)間變化的趨勢(shì)等問(wèn)題。我們?cè)俅巫屑?xì)閱讀上述數(shù)據(jù)，可以梳理出如下圖表。

上圖將2016年到2020年的融資事件總數(shù)進(jìn)行了重點(diǎn)處理，億元以上融資事件數(shù)量進(jìn)行了次要處理。并且用柱狀圖疊加折線圖的圖表表達(dá)了2016年到2020年低碼融資事件數(shù)量的趨勢(shì)情況。

二、圖表的優(yōu)勢(shì)

綜上所述我們可以發(fā)現(xiàn)，從通常意義上來(lái)說(shuō)，圖表優(yōu)于表格，表格優(yōu)于結(jié)構(gòu)化文本，結(jié)構(gòu)化文本優(yōu)于普通段落。那我們來(lái)看看圖表有哪些優(yōu)勢(shì)。

1. 針對(duì)性

一圖一類(lèi)型是圖表的特點(diǎn)，例如柱狀圖是用來(lái)比較同一指標(biāo)下不同對(duì)象情況的圖表；餅圖是展現(xiàn)部分與部分之間，及部分與整體之間占比的情況。我們?cè)谑褂脠D表時(shí)，需要先對(duì)數(shù)據(jù)進(jìn)行判斷，再選擇合適的圖表進(jìn)行展現(xiàn)。

2. 直觀性

圖表與文字相比，在數(shù)據(jù)的表現(xiàn)上非常直觀。不僅可以讓用戶一目了然地看到數(shù)據(jù)，還能讓用戶將數(shù)據(jù)進(jìn)行對(duì)比，從而發(fā)現(xiàn)問(wèn)題，定位原因，解決問(wèn)題。

3. 混合與拓展性

根據(jù)數(shù)據(jù)的屬性，圖表是可以進(jìn)行混搭與拓展使用的?；齑钍侵笀D表和圖表可以拼搭使用，例如折線圖與柱狀圖經(jīng)常合體使用。拓展性是指根據(jù)基礎(chǔ)圖表可以拓展出一系列個(gè)性化圖標(biāo)。例如堆疊柱狀圖是由基礎(chǔ)柱狀圖衍生出來(lái)的。

三、開(kāi)源圖表庫(kù)

目前開(kāi)源的圖標(biāo)庫(kù)以下幾種：

1. AntV G2

在AntV的官網(wǎng)上，是這么描述G2的：“一套面向常規(guī)統(tǒng)計(jì)圖表，以數(shù)據(jù)驅(qū)動(dòng)的高交互可視化圖形語(yǔ)法，具有高度的易用性和擴(kuò)展性。使用 G2，你可以無(wú)需關(guān)注圖表各種繁瑣的實(shí)現(xiàn)細(xì)節(jié)，一條語(yǔ)句即可使用 Canvas 或 SVG 構(gòu)建出各種各樣的可交互的統(tǒng)計(jì)圖表?！?

2. ECharts

百度百科：“ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫(kù)，提供直觀，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表。ECharts最初由百度團(tuán)隊(duì)開(kāi)源，并于2018年初捐贈(zèng)給Apache基金會(huì)，成為ASF孵化級(jí)項(xiàng)目?！?

3. High Charts

百度百科：“Highcharts 是一個(gè)用純JavaScript編寫(xiě)的一個(gè)圖表庫(kù)，能夠很簡(jiǎn)單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用。HighCharts支持的圖表類(lèi)型有曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點(diǎn)圖和綜合圖表。”

4. Chart.js

Chart.js是一個(gè)面向設(shè)計(jì)人員和開(kāi)發(fā)人員的簡(jiǎn)單而靈活的 JavaScript 圖表。以下是Chart.js的文檔鏈接。

https://chartjs.bootcss.com/docs/

5. Chartist.js

Chartist.js 是一個(gè)面向設(shè)計(jì)人員和開(kāi)發(fā)人員的簡(jiǎn)單的響應(yīng)式圖表，是前端圖表生成器。

目前來(lái)說(shuō)B端產(chǎn)品使用最廣泛的圖標(biāo)庫(kù)是AntV G2和ECharts。

四、15個(gè)圖表小細(xì)節(jié)

在大致了解了圖表以后，筆者總結(jié)了基于自身經(jīng)驗(yàn)、團(tuán)隊(duì)經(jīng)驗(yàn)與行業(yè)經(jīng)驗(yàn)的圖表小技巧。希望這些小技巧能潤(rùn)物細(xì)無(wú)聲地影響我們的設(shè)計(jì)者，從而為B端提升一點(diǎn)小體驗(yàn)。

1. 折線圖2px

通常在B端中，我們用到線，以1px居多。但在折線圖中，我們經(jīng)過(guò)反復(fù)推敲，發(fā)現(xiàn)2px線優(yōu)于1px線。首先，2px線條顯得有力而清晰；其次，在線條多的時(shí)候，便于分辨。

2. 柱狀圖間距

柱狀圖中柱子與柱子之間的間距與柱子的寬度一致就好，且最左邊和最右邊柱子距離兩邊的間距為柱子的一半。如下圖所示，若柱子的寬度為X，則柱子與柱子間的間距為X，兩邊柱子距離各自向外間距為X/2。

3. 刻度值

圖表上的刻度值遞增數(shù)值根據(jù)實(shí)際情況需要做適當(dāng)約束，如最大數(shù)值為150，就不適合刻度值上線標(biāo)記為1000。其次，若業(yè)務(wù)數(shù)據(jù)一直處于動(dòng)態(tài)變化中，則圖表Y軸可以設(shè)置成動(dòng)態(tài)。

4. 餅圖文字顯示

在餅圖分類(lèi)較少時(shí)候，可以將文字寫(xiě)在餅圖上，但當(dāng)分類(lèi)較多時(shí)候，文字適合寫(xiě)在餅圖外。

5. 餅圖塊排列

餅圖塊排列也是個(gè)值得考究的事情，通常來(lái)說(shuō)，餅圖塊呈順時(shí)針?lè)较蛐D(zhuǎn)，且以12點(diǎn)鐘方向?yàn)槠瘘c(diǎn)，塊面從大到小布局，若有“其他”模塊，則放置在最后。

6. 標(biāo)簽位置

通常標(biāo)簽都會(huì)放在圖表的上方區(qū)域，但這并不是一成不變的規(guī)則，例如當(dāng)折線圖線較多的時(shí)候，可以考慮將標(biāo)簽直接跟在折線的尾部。同時(shí)可以做一些交互效果，鼠標(biāo)點(diǎn)擊標(biāo)簽可以讓線弱化或者顯示。

7. 圖表色彩

圖表在配色上要使用區(qū)分度大的顏色，不要為了好看而使用相鄰的色彩，這會(huì)導(dǎo)致圖表的可讀性大大降低。如有條件，建議在色彩上考慮無(wú)障礙視覺(jué)。

8. 同類(lèi)色使用

屬于同一色相，不同明度和飽和度的顏色，也是有使用空間的，通常表示同一對(duì)象的梯度變化。

9. 顯示重點(diǎn)

當(dāng)圖表上數(shù)據(jù)及其多，且產(chǎn)品團(tuán)隊(duì)壓根沒(méi)打算將數(shù)據(jù)量減少時(shí)，我們可以考慮展示重點(diǎn)數(shù)據(jù)（系統(tǒng)默認(rèn)展示推薦重點(diǎn)，用戶可以自己選擇他所需的重點(diǎn)），弱化其他數(shù)據(jù)。

10. 標(biāo)題的妙用

標(biāo)題不僅僅是用來(lái)呈現(xiàn)普通描述的，在特殊場(chǎng)景下，標(biāo)題描述可以稍微進(jìn)行變化，從而達(dá)到直觀表述圖表核心含義的目標(biāo)。

11. 時(shí)間周期太長(zhǎng)

某些業(yè)務(wù)的數(shù)據(jù)統(tǒng)計(jì)需要跨很長(zhǎng)的時(shí)間周期，這時(shí)，圖表無(wú)法滿足如此長(zhǎng)周期的時(shí)間展示需求，我們不要慌，可以通過(guò)以下幾種方式去解決。

11.1 添加縮略滑塊

給圖表添加縮略滑塊，可以通過(guò)拖拽滑塊了查看某段時(shí)間范圍的數(shù)據(jù)?；瑝K拉拽的越大，可以看到的時(shí)間范圍越大，但注意，會(huì)有極限值。

11.2 添加滑動(dòng)滑塊

給圖表添加滑動(dòng)滑塊，可以通過(guò)滑動(dòng)一個(gè)固定大小的滑塊，查看某短時(shí)間范圍的數(shù)據(jù)。它與縮略滑塊的區(qū)別在于，滑動(dòng)滑塊每次看到的時(shí)間段是一致的。

11.3 區(qū)塊放大鏡

如果圖表的呈現(xiàn)就是希望時(shí)間周期顯示完整，那么當(dāng)時(shí)間周期較長(zhǎng)的時(shí)候，顆粒度可以展示的稍微粗一些，不用太細(xì)，例如無(wú)需2月1日、2月2日、2月3日、2月4日、…連續(xù)展示，只要2月1日、3月1日、4月1日、5月1日、…間隔展示即可。在交互上，鼠標(biāo)移入圖表區(qū)不斷進(jìn)行某時(shí)間周期數(shù)據(jù)框選（即放大），就可以讓框選區(qū)數(shù)據(jù)不斷清晰。日K線常用此類(lèi)方法去做。

12. 時(shí)間軸顯示

當(dāng)時(shí)間軸日期跨越在當(dāng)年時(shí)，無(wú)需每個(gè)時(shí)間點(diǎn)都帶上年份；而當(dāng)跨年時(shí)，可以帶上年份，這樣可以保證時(shí)間軸顯示更簡(jiǎn)單，不擁擠。

13. 等寬字體

若圖表中會(huì)采用表格去協(xié)助查看某類(lèi)數(shù)據(jù)的明細(xì)，聯(lián)動(dòng)展示，那么表格中的字體建議使用等寬字體，等寬字體方便用戶用視覺(jué)來(lái)比較大小。

14. 數(shù)據(jù)歸類(lèi)

指標(biāo)大盤(pán)上放置著各類(lèi)型圖表數(shù)據(jù)，建議設(shè)計(jì)者們對(duì)數(shù)據(jù)的進(jìn)行歸類(lèi)整理，屬于一類(lèi)的數(shù)據(jù)臨近展示，方便用戶連續(xù)性查看相關(guān)數(shù)據(jù)。

15. 靜態(tài)與動(dòng)態(tài)圖表

圖表分為靜態(tài)和動(dòng)態(tài)圖表，當(dāng)業(yè)務(wù)呈現(xiàn)較為簡(jiǎn)單時(shí)，使用靜態(tài)圖表就好。而當(dāng)業(yè)務(wù)復(fù)雜，一張圖表難以表達(dá)細(xì)節(jié)時(shí)，就要考慮動(dòng)態(tài)圖表去呈現(xiàn)了，“鼠標(biāo)交互，數(shù)據(jù)擴(kuò)展和下鉆”是動(dòng)態(tài)圖表的特征。

五 、總結(jié)

圖表的小細(xì)節(jié)遠(yuǎn)遠(yuǎn)不止文中提到的這15種，還有好多好多。由于每時(shí)每刻都有設(shè)計(jì)者因?yàn)楫a(chǎn)品需求創(chuàng)造出新的好用的圖表類(lèi)型，圖表成為了B端可持續(xù)探索的一片海洋。