數(shù)據(jù)可視化設(shè)計(jì)——疫情地圖

3 評(píng)論 21775 瀏覽 96 收藏 10 分鐘

今年春節(jié)期間發(fā)生的冠狀病毒疫情,很多app都上線(xiàn)了疫情地圖。疫情地圖運(yùn)用數(shù)據(jù)可視化設(shè)計(jì),幫助大眾快速了解當(dāng)前疫情情況、發(fā)展趨勢(shì)等,今天就來(lái)聊聊疫情地圖中的數(shù)據(jù)可視化設(shè)計(jì)。

什么是數(shù)據(jù)可視化

數(shù)據(jù)可視化是一種以直觀圖形描繪密集和復(fù)雜信息的表現(xiàn)形式,旨在讓用戶(hù)更容易看懂和理解數(shù)據(jù),以及傳達(dá)的信息更明確(Material Design數(shù)據(jù)可視化設(shè)計(jì)規(guī)范指南)。

圖表是數(shù)據(jù)可視化的一種常用表達(dá)方式,好的圖表可以清晰高效的傳遞信息,簡(jiǎn)潔美觀,無(wú)過(guò)多修飾干擾信息的清晰度。

下面挑選部分APP的疫情地圖圖表進(jìn)行分析:

1. 地圖

如下圖,疫情期間很多平臺(tái)都用地圖表現(xiàn)當(dāng)前現(xiàn)存確診人數(shù)在全國(guó)各省分布的數(shù)量。

地圖適用于和地理位置相關(guān)的數(shù)據(jù)分析。如不同城市的人口統(tǒng)計(jì)信息。疫情中用地圖統(tǒng)計(jì)各省市確診人數(shù)的數(shù)量,人們通過(guò)地圖上色塊深淺可以直觀的感受到當(dāng)前各省市的確診人數(shù)的密集程度。點(diǎn)擊地圖上某一區(qū)域,還能氣泡顯示當(dāng)前區(qū)域具體數(shù)值信息。

使用地圖的注意事項(xiàng):

  1. 不要用圖案或剖面線(xiàn)強(qiáng)調(diào)某個(gè)區(qū)域,強(qiáng)調(diào)可以用色塊。
  2. 制地圖輪廓不要太復(fù)雜,盡量標(biāo)準(zhǔn)、簡(jiǎn)潔。地圖的線(xiàn)框是區(qū)域信息的一種表達(dá)方式,能清晰表明當(dāng)前區(qū)域即達(dá)到目的,地圖上不能幫助傳達(dá)區(qū)域的線(xiàn)條和裝飾即是干擾。
  3. 圖例用色塊表示數(shù)值區(qū)間時(shí),注意色塊顏色一般根據(jù)數(shù)值大小由深到淺漸變,或由淺到深漸變。不能出現(xiàn)明暗交替漸變,會(huì)讓人混亂不清。

2. 折線(xiàn)圖

折線(xiàn)圖可以顯示隨時(shí)間而變化的連續(xù)數(shù)據(jù),因此非常適用于顯示在相等時(shí)間間隔下數(shù)據(jù)的趨勢(shì)。疫情地圖中用折線(xiàn)圖描述全國(guó)疫情新增趨勢(shì)。折線(xiàn)圖表還支持點(diǎn)擊圖表上的點(diǎn)顯示,當(dāng)前橫坐標(biāo)對(duì)應(yīng)的縱坐標(biāo)數(shù)值,幫助更詳細(xì)的查看信息。

使用折線(xiàn)圖的注意事項(xiàng):

(1)用折線(xiàn)圖表現(xiàn)數(shù)據(jù)增長(zhǎng)/降低的趨勢(shì)時(shí),不建議在曲線(xiàn)下方著色

曲線(xiàn)下方著色看起來(lái)更像面積圖,易讓人聯(lián)想到用色塊表示數(shù)量,比如用條形圖來(lái)統(tǒng)計(jì)離散數(shù)據(jù)時(shí)面積大小表示數(shù)量多少。

如下方左圖中,折線(xiàn)下方著色,很難辨別是折線(xiàn)上的點(diǎn)表示現(xiàn)有確診人數(shù)29994,還是色塊面積表示現(xiàn)有確診人數(shù)29994。猜想是因?yàn)轫?yè)面中彩色數(shù)字較多,設(shè)計(jì)師想用色塊平衡點(diǎn)和面。

但折線(xiàn)圖下方著色易引起誤解,可以如下方右圖,考慮在折線(xiàn)圖表區(qū)域添加灰色底色,折線(xiàn)下方不著色。去掉色塊后圖表曲線(xiàn)趨勢(shì)更明顯,更容易看出折線(xiàn)上的點(diǎn)代表現(xiàn)有確診人數(shù),及確診人數(shù)先上升后下降的趨勢(shì)。

(2)折線(xiàn)高度

折線(xiàn)圖表不易太高或太低,一般折線(xiàn)區(qū)域占整個(gè)圖表的三分之二比較合適。圖表中的刻度可以包含一些參照點(diǎn),以輔助用戶(hù)閱讀圖表。

(3)折線(xiàn)粗細(xì)

折線(xiàn)不宜太粗或太細(xì)。折線(xiàn)太粗,會(huì)看不清楚折線(xiàn)變化細(xì)節(jié);折線(xiàn)太細(xì),容易和背景,輔助線(xiàn)混淆。

(4)折線(xiàn)數(shù)量

同一個(gè)圖表不建議放置太多折線(xiàn),一般不要超過(guò)4個(gè)。如果折線(xiàn)較多,可以分開(kāi)列表展示。另外,折線(xiàn)的顏色也在傳達(dá)信息的,當(dāng)多個(gè)折線(xiàn)在同一個(gè)圖表中,需要考慮選取合適的顏色以凸顯最重要的折線(xiàn),如用紅色代表最重要的折線(xiàn)。

(5)折線(xiàn)圖例/標(biāo)簽

圖例及標(biāo)簽文字需簡(jiǎn)潔、限制標(biāo)簽文字字?jǐn)?shù)。如果空間足夠大話(huà)標(biāo)簽圖例可以直接標(biāo)在圖表上,更方便用戶(hù)閱讀。如果標(biāo)簽圖例不在圖表上,需注意標(biāo)簽圖例距離圖表不應(yīng)太遠(yuǎn),太遠(yuǎn)圖例和圖表將不好一一對(duì)應(yīng)。

圖例應(yīng)放置在表格上方,更符合先了解曲線(xiàn)代表含義、再了解曲線(xiàn)趨勢(shì)的閱讀順序。且圖例順序與折線(xiàn)節(jié)點(diǎn)順序盡量排序一致,因?yàn)楣?jié)點(diǎn)是明顯的數(shù)據(jù)點(diǎn),用戶(hù)根據(jù)折線(xiàn)節(jié)點(diǎn)一一對(duì)應(yīng)圖例將更方便閱讀。

(6)折線(xiàn)坐標(biāo)軸標(biāo)注

圖表坐標(biāo)軸標(biāo)注應(yīng)當(dāng)簡(jiǎn)潔,常見(jiàn)X軸標(biāo)注時(shí)間,Y軸顯示合適的增量。

X軸標(biāo)注時(shí)要注意一屏內(nèi)橫坐標(biāo)的個(gè)數(shù)及每個(gè)坐標(biāo)間隔保持在可讀范圍內(nèi),有時(shí)橫坐標(biāo)可以簡(jiǎn)寫(xiě)。如涉及年份是時(shí),第一個(gè)坐標(biāo)顯示2006,之后顯示07、08、09……

Y軸標(biāo)注盡量使用常用增量,如0、5、10、15、20……有些情況下Y軸基數(shù)較大,數(shù)值變化相對(duì)基數(shù)較小,可以不用從0開(kāi)始表現(xiàn)曲線(xiàn)趨勢(shì)走向。相反,如果是條形圖,面積代表數(shù)值,則Y軸一定要從0開(kāi)始標(biāo)注。另外盡量不要用左右雙y軸刻度,除非要表示相關(guān)聯(lián)的數(shù)據(jù)如何聯(lián)動(dòng),運(yùn)用雙Y軸需謹(jǐn)慎,以免產(chǎn)生誤解。

3. 表格

表格適用于數(shù)據(jù)較多而空間有限的場(chǎng)景,如用表格表示湖北省新增/確診/治愈/死亡的詳細(xì)數(shù)據(jù)。

使用表格的注意事項(xiàng):

(1)如上圖,表格中數(shù)字建議右對(duì)齊排列,更方便用戶(hù)比較表格中縱列數(shù)據(jù)的位數(shù)及大小。移動(dòng)端數(shù)據(jù)較多空間不夠時(shí)排版上有時(shí)會(huì)用居中排列。如果數(shù)字都比較小,如大多一位數(shù)或兩位數(shù),可以考慮居中排列。含有小數(shù)點(diǎn)的數(shù)字需要小數(shù)點(diǎn)對(duì)齊排列,且小數(shù)點(diǎn)位數(shù)盡量保持一致。

(2)表格中如需顯示單位,只要在表格第一行顯示一次單位即可。

(3)數(shù)據(jù)之間的網(wǎng)格線(xiàn)不要太多太深,盡量弱化網(wǎng)格線(xiàn)。表格較寬的時(shí)候可以采用3-5行之間加入一條細(xì)線(xiàn)的方式,幫助讀者橫向閱讀表格。如果只有兩列數(shù)字就無(wú)需用橫向細(xì)線(xiàn)。

(4)可以用色塊打底或者特殊顏色強(qiáng)調(diào)某列數(shù)字或者某個(gè)條目。如下圖用特殊顏色強(qiáng)調(diào)每日新增確診人數(shù)。

(5)有多個(gè)數(shù)據(jù)系列的表格,垂直顯示數(shù)據(jù)更方便讀者分析。如下圖,比較不同區(qū)的確診、治愈人多少,如果水平顯示確診人數(shù)數(shù)據(jù),將不方便比較數(shù)據(jù)多少,改為垂直顯示后更方便用戶(hù)比較。

以上就是疫情地圖涉及到的可視化圖表及對(duì)應(yīng)的設(shè)計(jì)注意事項(xiàng)。同一數(shù)據(jù),使用不同類(lèi)型圖表展示,將傳達(dá)出不同的信息。我們要先明確頁(yè)面內(nèi)容到底想傳達(dá)給用戶(hù)什么信息,并在解每種圖表的使用場(chǎng)景、特點(diǎn)、限制條件的基礎(chǔ)上,選取合適圖表展示信息。且界面展示上應(yīng)抓住重點(diǎn)、去除不必要裝飾,輕量化展示重要信息,確保傳達(dá)內(nèi)容準(zhǔn)確、有效、清晰。

參考文獻(xiàn):

《最簡(jiǎn)單的圖形與最復(fù)雜的信息:如何有效建立你的視覺(jué)思維》—作者:黃慧敏

 

本文由 @惜希 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 隨便搜,看到你的文章~哈哈

    來(lái)自福建 回復(fù)
    1. 被發(fā)現(xiàn)了

      來(lái)自福建 回復(fù)
  2. 總結(jié)的很棒,尤其圖例跟曲線(xiàn)節(jié)點(diǎn)趨勢(shì)保持一致,細(xì)節(jié)很贊

    來(lái)自北京 回復(fù)