數(shù)據(jù)可視化設(shè)計——疫情地圖
今年春節(jié)期間發(fā)生的冠狀病毒疫情,很多app都上線了疫情地圖。疫情地圖運用數(shù)據(jù)可視化設(shè)計,幫助大眾快速了解當前疫情情況、發(fā)展趨勢等,今天就來聊聊疫情地圖中的數(shù)據(jù)可視化設(shè)計。
什么是數(shù)據(jù)可視化
數(shù)據(jù)可視化是一種以直觀圖形描繪密集和復雜信息的表現(xiàn)形式,旨在讓用戶更容易看懂和理解數(shù)據(jù),以及傳達的信息更明確(Material Design數(shù)據(jù)可視化設(shè)計規(guī)范指南)。
圖表是數(shù)據(jù)可視化的一種常用表達方式,好的圖表可以清晰高效的傳遞信息,簡潔美觀,無過多修飾干擾信息的清晰度。
下面挑選部分APP的疫情地圖圖表進行分析:
1. 地圖
如下圖,疫情期間很多平臺都用地圖表現(xiàn)當前現(xiàn)存確診人數(shù)在全國各省分布的數(shù)量。
地圖適用于和地理位置相關(guān)的數(shù)據(jù)分析。如不同城市的人口統(tǒng)計信息。疫情中用地圖統(tǒng)計各省市確診人數(shù)的數(shù)量,人們通過地圖上色塊深淺可以直觀的感受到當前各省市的確診人數(shù)的密集程度。點擊地圖上某一區(qū)域,還能氣泡顯示當前區(qū)域具體數(shù)值信息。
使用地圖的注意事項:
- 不要用圖案或剖面線強調(diào)某個區(qū)域,強調(diào)可以用色塊。
- 制地圖輪廓不要太復雜,盡量標準、簡潔。地圖的線框是區(qū)域信息的一種表達方式,能清晰表明當前區(qū)域即達到目的,地圖上不能幫助傳達區(qū)域的線條和裝飾即是干擾。
- 圖例用色塊表示數(shù)值區(qū)間時,注意色塊顏色一般根據(jù)數(shù)值大小由深到淺漸變,或由淺到深漸變。不能出現(xiàn)明暗交替漸變,會讓人混亂不清。
2. 折線圖
折線圖可以顯示隨時間而變化的連續(xù)數(shù)據(jù),因此非常適用于顯示在相等時間間隔下數(shù)據(jù)的趨勢。疫情地圖中用折線圖描述全國疫情新增趨勢。折線圖表還支持點擊圖表上的點顯示,當前橫坐標對應的縱坐標數(shù)值,幫助更詳細的查看信息。
使用折線圖的注意事項:
(1)用折線圖表現(xiàn)數(shù)據(jù)增長/降低的趨勢時,不建議在曲線下方著色
曲線下方著色看起來更像面積圖,易讓人聯(lián)想到用色塊表示數(shù)量,比如用條形圖來統(tǒng)計離散數(shù)據(jù)時面積大小表示數(shù)量多少。
如下方左圖中,折線下方著色,很難辨別是折線上的點表示現(xiàn)有確診人數(shù)29994,還是色塊面積表示現(xiàn)有確診人數(shù)29994。猜想是因為頁面中彩色數(shù)字較多,設(shè)計師想用色塊平衡點和面。
但折線圖下方著色易引起誤解,可以如下方右圖,考慮在折線圖表區(qū)域添加灰色底色,折線下方不著色。去掉色塊后圖表曲線趨勢更明顯,更容易看出折線上的點代表現(xiàn)有確診人數(shù),及確診人數(shù)先上升后下降的趨勢。
(2)折線高度
折線圖表不易太高或太低,一般折線區(qū)域占整個圖表的三分之二比較合適。圖表中的刻度可以包含一些參照點,以輔助用戶閱讀圖表。
(3)折線粗細
折線不宜太粗或太細。折線太粗,會看不清楚折線變化細節(jié);折線太細,容易和背景,輔助線混淆。
(4)折線數(shù)量
同一個圖表不建議放置太多折線,一般不要超過4個。如果折線較多,可以分開列表展示。另外,折線的顏色也在傳達信息的,當多個折線在同一個圖表中,需要考慮選取合適的顏色以凸顯最重要的折線,如用紅色代表最重要的折線。
(5)折線圖例/標簽
圖例及標簽文字需簡潔、限制標簽文字字數(shù)。如果空間足夠大話標簽圖例可以直接標在圖表上,更方便用戶閱讀。如果標簽圖例不在圖表上,需注意標簽圖例距離圖表不應太遠,太遠圖例和圖表將不好一一對應。
圖例應放置在表格上方,更符合先了解曲線代表含義、再了解曲線趨勢的閱讀順序。且圖例順序與折線節(jié)點順序盡量排序一致,因為節(jié)點是明顯的數(shù)據(jù)點,用戶根據(jù)折線節(jié)點一一對應圖例將更方便閱讀。
(6)折線坐標軸標注
圖表坐標軸標注應當簡潔,常見X軸標注時間,Y軸顯示合適的增量。
X軸標注時要注意一屏內(nèi)橫坐標的個數(shù)及每個坐標間隔保持在可讀范圍內(nèi),有時橫坐標可以簡寫。如涉及年份是時,第一個坐標顯示2006,之后顯示07、08、09……
Y軸標注盡量使用常用增量,如0、5、10、15、20……有些情況下Y軸基數(shù)較大,數(shù)值變化相對基數(shù)較小,可以不用從0開始表現(xiàn)曲線趨勢走向。相反,如果是條形圖,面積代表數(shù)值,則Y軸一定要從0開始標注。另外盡量不要用左右雙y軸刻度,除非要表示相關(guān)聯(lián)的數(shù)據(jù)如何聯(lián)動,運用雙Y軸需謹慎,以免產(chǎn)生誤解。
3. 表格
表格適用于數(shù)據(jù)較多而空間有限的場景,如用表格表示湖北省新增/確診/治愈/死亡的詳細數(shù)據(jù)。
使用表格的注意事項:
(1)如上圖,表格中數(shù)字建議右對齊排列,更方便用戶比較表格中縱列數(shù)據(jù)的位數(shù)及大小。移動端數(shù)據(jù)較多空間不夠時排版上有時會用居中排列。如果數(shù)字都比較小,如大多一位數(shù)或兩位數(shù),可以考慮居中排列。含有小數(shù)點的數(shù)字需要小數(shù)點對齊排列,且小數(shù)點位數(shù)盡量保持一致。
(2)表格中如需顯示單位,只要在表格第一行顯示一次單位即可。
(3)數(shù)據(jù)之間的網(wǎng)格線不要太多太深,盡量弱化網(wǎng)格線。表格較寬的時候可以采用3-5行之間加入一條細線的方式,幫助讀者橫向閱讀表格。如果只有兩列數(shù)字就無需用橫向細線。
(4)可以用色塊打底或者特殊顏色強調(diào)某列數(shù)字或者某個條目。如下圖用特殊顏色強調(diào)每日新增確診人數(shù)。
(5)有多個數(shù)據(jù)系列的表格,垂直顯示數(shù)據(jù)更方便讀者分析。如下圖,比較不同區(qū)的確診、治愈人多少,如果水平顯示確診人數(shù)數(shù)據(jù),將不方便比較數(shù)據(jù)多少,改為垂直顯示后更方便用戶比較。
以上就是疫情地圖涉及到的可視化圖表及對應的設(shè)計注意事項。同一數(shù)據(jù),使用不同類型圖表展示,將傳達出不同的信息。我們要先明確頁面內(nèi)容到底想傳達給用戶什么信息,并在解每種圖表的使用場景、特點、限制條件的基礎(chǔ)上,選取合適圖表展示信息。且界面展示上應抓住重點、去除不必要裝飾,輕量化展示重要信息,確保傳達內(nèi)容準確、有效、清晰。
參考文獻:
《最簡單的圖形與最復雜的信息:如何有效建立你的視覺思維》—作者:黃慧敏
本文由 @惜希 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
隨便搜,看到你的文章~哈哈
被發(fā)現(xiàn)了
總結(jié)的很棒,尤其圖例跟曲線節(jié)點趨勢保持一致,細節(jié)很贊