從丁香園疫情地圖,想到的一些圖表設(shè)計(jì)經(jīng)驗(yàn)

春節(jié)期間和家人、朋友交流時(shí),截了一些新冠肺炎疫情地圖的圖片?,F(xiàn)在回看這些截圖,有了一些有趣的想法。
現(xiàn)在把關(guān)于圖表的想法記錄下來。
文中所有圖片,都來自丁香園新冠肺炎實(shí)時(shí)疫情地圖的截圖。
1—簡單
圖表越簡單越好。
復(fù)雜與酷炫的設(shè)計(jì),除了增加理解負(fù)擔(dān),對于數(shù)據(jù)的分析與理解往往并無助益,有時(shí)還會(huì)造成誤解。
比如疫情數(shù)據(jù)的累積趨勢,在丁香園疫情地圖的早期版本中,采用的是堆積圖:?


當(dāng)有多個(gè)數(shù)據(jù)需要對比,并且希望展示總數(shù)的變化時(shí),堆積圖是不錯(cuò)的選擇。
就如以上兩圖,在一個(gè)圖表中就能展示疑似、確診、總數(shù)之間的比例關(guān)系和變化趨勢。
對于能夠理解堆積圖的人來說,十分直觀。
但是,并不是所有人都能理解堆積圖,特別是這個(gè)疫情地圖的讀者,是數(shù)千萬的普通民眾,除了這次,可能一輩子都不會(huì)再和圖表有任何關(guān)系。
如果無法理解,那么這張圖表就是多余的,對讀者沒有任何價(jià)值。
好在,丁香園后來意識到了這個(gè)問題,將堆積圖換成了更容易理解的折線圖。

3根折線似乎有點(diǎn)繁瑣,但這種方式更加親民,數(shù)據(jù)趨勢一目了然。
2—變化
日常作圖,往往是依據(jù)現(xiàn)有的、靜態(tài)的數(shù)據(jù)。
數(shù)據(jù)是不變的,圖也是不變的。
但是,如果數(shù)據(jù)會(huì)隨時(shí)間變化,那么圖表也會(huì)隨時(shí)間變化。
這幾乎是廢話,但很多人想象不了今天以后的事情,設(shè)計(jì)出的圖表在當(dāng)時(shí)十分完美,數(shù)據(jù)變化一段時(shí)間后,就變得難以理解。
比如,全國疫情死亡/治愈的累積趨勢圖,在2月2日之前,就有了兩次交叉:

或者,全國疫情新增趨勢圖,確診與疑似數(shù)據(jù)多次重合,確診數(shù)據(jù)還有異常變化:

如果上面的圖表不是用的折線圖,而是其它圖表形式,比如堆積圖來做,在數(shù)據(jù)發(fā)生交叉、重合、異常時(shí),理解起來會(huì)更加困難。
當(dāng)然,死亡和治愈這樣相對的數(shù)據(jù)并不可以堆積。但我確實(shí)見過很多實(shí)時(shí)圖表用堆積圖、面積圖、箱型圖甚至多種樣式疊加,有的還要加上七彩的顏色。
除了色彩豐富,毫無用處。
如果是會(huì)變化的圖表,樣式也是越簡單越好。
成熟的推廣、分析工具的后臺(tái),數(shù)據(jù)圖表往往是簡單的折線圖。
并非不能酷炫,而是這樣效率最高。
因?yàn)檎l也不知道明天的數(shù)據(jù)是怎樣的,圖表又會(huì)變成什么樣。
3—迭代
最初的疫情數(shù)據(jù)維度很少,只有疑似/確診、死亡/治愈的累計(jì)趨勢圖。
隨著疫情發(fā)展,能夠統(tǒng)計(jì)到的數(shù)據(jù)越來越多,需要展示的數(shù)據(jù)維度也越來越多。
這時(shí),圖表也需要跟隨需求進(jìn)行迭代。
比如丁香園的疫情地圖,從最初的2張圖表,變成了國內(nèi)(5張圖表)、湖北/非湖北(5張圖表)、國外(4張圖表)、重點(diǎn)國家(8張圖表)。
為了配合圖表數(shù)量的增加,頁面的布局也在一直變化。
從上下并列的兩張圖表:

變成了上下并列的兩組圖表,通過tab或滑動(dòng)切換:

迭代的目的,是為了更好的展示和分析數(shù)據(jù)。
很多人喜歡沿用前人的圖表、表格,而不是根據(jù)當(dāng)前的實(shí)際業(yè)務(wù)需求對圖表進(jìn)行迭代,這是很懶惰的行為。
每張圖表,都有其適用的數(shù)據(jù)和時(shí)段,反之亦然。
適用條件變化了,圖表也要變化。
4—分解
數(shù)據(jù)的權(quán)重,往往是不同的。
如果部分?jǐn)?shù)據(jù)對整體變化影響很大,那么只看整體的數(shù)據(jù),就無法做出正確的判斷和分析。
這時(shí),需要將不同維度的數(shù)據(jù)分解開,才能更好的看清數(shù)據(jù)。
比如全國疫情病死率趨勢圖:

如果單看全國的數(shù)據(jù),似乎維持在2%以上,且增速很快。
但分開湖北、非湖北,就會(huì)發(fā)現(xiàn)全國數(shù)據(jù)受湖北數(shù)據(jù)影響非常大,走勢近乎一致。畢竟湖北的病患數(shù)量遠(yuǎn)超其他地區(qū)。
平常工作中也需要按產(chǎn)品、用戶、地域等維度對數(shù)據(jù)進(jìn)行分解,找出影響最大的維度,才能事半功倍的解決問題。
5—顏色
圖表顏色似乎不是很重要,但用的不好很影響閱讀。
比如最初的疫情地圖,劃分了7個(gè)層級的數(shù)據(jù),用紅色漸變色填充:

由于顏色十分接近,字體也都是灰色,導(dǎo)致除了最深和最淺的區(qū)域,其他區(qū)域很難識別。
現(xiàn)在的版本對填充顏色、字體顏色都做了調(diào)整,地圖看起來更加清晰,更易識別:

平常做圖表,Excel或者PPT默認(rèn)的顏色足夠用了,比較少考慮顏色的事情。
像疫情地圖這樣,同色漸變色確實(shí)更適合,這樣也更考驗(yàn)設(shè)計(jì)師的能力了。
如果區(qū)分不開,就要減少數(shù)據(jù)的層級,或者用不同的顏色。
丁香園的疫情地圖更新了蠻多版本,可惜截圖太少,不然分析下歷次調(diào)整,也是有意思的事情。