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

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

[[409713]]

什么是圖表

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

根據(jù)百度百科的解釋，我們來做一個「數(shù)據(jù)圖表化」的小推導(dǎo)。我從網(wǎng)站找了一段描述低碼的數(shù)據(jù)(數(shù)據(jù)來源艾瑞咨詢，并做了一些小修改)，如下：

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

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

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

• “2016 年開始低代碼概念開始從國內(nèi)逐漸興起，當年低代碼相關(guān)產(chǎn)品投融資事件達 10 起，億元以上融資數(shù)量 2 起。
• 至 2020 年中國低代碼市場共有 59 起投融資事件，其中億元以上融資共有 13 起。
• 2017 年融資事件 11 起，億元以上融資 3 起;
• 2018 年融資事件 12 起，億元以上融資 2 起;
• 2019 年融資事件 12 起，億元以上融資 3 起;
• 2020 年融資事件 14 起，億元以上融資 3 起。

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

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

那么，我們再將以上數(shù)據(jù)進行表格化展示來看看，如下：

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

不過表格也有劣勢，無法展現(xiàn)數(shù)據(jù)隨時間變化的趨勢等問題。我們再次仔細閱讀上述數(shù)據(jù)，可以梳理出如下圖表。

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

圖表的優(yōu)勢

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

1. 針對性

一圖一類型是圖表的特點，例如柱狀圖是用來比較同一指標下不同對象情況的圖表;餅圖是展現(xiàn)部分與部分之間，及部分與整體之間占比的情況。我們在使用圖表時，需要先對數(shù)據(jù)進行判斷，再選擇合適的圖表進行展現(xiàn)。

2. 直觀性

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

3. 混合與拓展性

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

開源圖表庫

目前開源的圖標庫以下幾種：

1. AntV G2

訪問鏈接：https://g2.antv.vision/zh

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

2. ECharts

訪問鏈接：https://echarts.apache.org/en/index.html

百度百科：“ECharts 是一款基于 JavaScript 的數(shù)據(jù)可視化圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表。ECharts 最初由百度團隊開源，并于 2018 年初捐贈給 Apache 基金會，成為 ASF 孵化級項目。”

3. High Charts

訪問鏈接：https://www.highcharts.com/

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

4. Chart.js

訪問鏈接：https://chartjs.bootcss.com/docs/

Chart.js 是一個面向設(shè)計人員和開發(fā)人員的簡單而靈活的 JavaScript 圖表。

5. Chartist.js

訪問鏈接：https://gionkunz.github.io/chartist-js/

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

目前來說 B 端產(chǎn)品使用最廣泛的圖標庫是 AntV G2 和 ECharts。

15 個圖表小細節(jié)

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

1. 折線圖 2px

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

2. 柱狀圖間距

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

3. 刻度值

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

4. 餅圖文字顯示

在餅圖分類較少時候，可以將文字寫在餅圖上，但當分類較多時候，文字適合寫在餅圖外。

5. 餅圖塊排列

餅圖塊排列也是個值得考究的事情，通常來說，餅圖塊呈順時針方向旋轉(zhuǎn)，且以 12 點鐘方向為起點，塊面從大到小布局，若有“其他”模塊，則放置在最后。

6. 標簽位置

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

7. 圖表色彩

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

8. 同類色使用

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

9. 顯示重點

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

10. 標題的妙用

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

11. 時間周期太長

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

1)添加縮略滑塊

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

2)添加滑動滑塊

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

3)區(qū)塊放大鏡

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

12. 時間軸顯示

當時間軸日期跨越在當年時，無需每個時間點都帶上年份;而當跨年時，可以帶上年份，這樣可以保證時間軸顯示更簡單，不擁擠。

13. 等寬字體

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

14. 數(shù)據(jù)歸類

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

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

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

總結(jié)

圖表的小細節(jié)遠遠不止文中提到的這 15 種，還有好多好多。由于每時每刻都有設(shè)計者因為產(chǎn)品需求創(chuàng)造出新的好用的圖表類型，圖表成為了 B 端可持續(xù)探索的一片海洋。歡迎大家關(guān)注我的公眾號“知果日記”，與我一起來探索 B 端吧~