起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)對(duì)比3家平臺(tái)，我總結(jié)了疫情數(shù)據(jù)可視化的8點(diǎn)經(jīng)驗(yàn)
開年以來，隨著疫情方面的數(shù)據(jù)逐漸增多，一些互聯(lián)網(wǎng)公司也紛紛發(fā)布一些可視化的數(shù)據(jù)產(chǎn)品服務(wù)，讓用戶可以實(shí)時(shí)并直觀了解最新情況，可謂一個(gè)便民利器。而本文，則通過丁香醫(yī)生、今日頭條以及騰訊新聞推出的“疫情實(shí)時(shí)動(dòng)態(tài)”可視化服務(wù)，總結(jié)分享其中運(yùn)用到的一些常見的數(shù)據(jù)可視化經(jīng)驗(yàn)。
閱讀指南：
（1）受眾人群：初級(jí)產(chǎn)品經(jīng)理
（2）閱讀收獲
- 產(chǎn)品分析的方法論實(shí)例，包括用戶體驗(yàn)五要素、馬斯洛需求理論等；
- 數(shù)據(jù)可視化的基本技巧和遵循原則。
?一、前言
1.1 概念
首先，需要先簡(jiǎn)單澄清下數(shù)據(jù)可視化的基本概念。數(shù)據(jù)可視化，實(shí)質(zhì)上是把一些概要信息（數(shù)據(jù)、關(guān)鍵內(nèi)容），并結(jié)合動(dòng)靜態(tài)的圖像視頻等形式進(jìn)行展示，從而清晰傳遞核心信息。較為注重視覺層面的觸達(dá)。
所以我們需要在數(shù)據(jù)之中挖掘一些重要的價(jià)值信息，并以一個(gè)可觀的方式呈現(xiàn)。而“重要”的定義是十分明顯的，核心數(shù)據(jù)、用戶感興趣、有決策意義，都可稱之為重要。
1.2 動(dòng)因
根據(jù)馬斯洛五層次需求理論，那么數(shù)據(jù)可視化在其中屬于什么層次的需求？
受疫情影響，生命安全成了最重要的社會(huì)需求。那么滿足大眾對(duì)這方面的廣泛需求，推出這樣的數(shù)據(jù)可視化產(chǎn)品是十分有必要，滿足用戶對(duì)疫情情況、資訊信息、醫(yī)療信息等方面的獲取，從而保障自己基本的需求。
1.3 基本情況
（1）脈絡(luò)
初始，丁香醫(yī)生率先推出一個(gè)H5的可視化頁(yè)面，匯總披露病例數(shù)據(jù)。隨后，一些大廠也開始陸續(xù)推出，包括頭條、騰訊等等。
而為什么大家都紛紛推出這樣的數(shù)據(jù)服務(wù)，從戰(zhàn)略層來說：一是做好企業(yè)責(zé)任，滿足用戶的知情需求；其二是滿足自己的平臺(tái)用戶，并吸引流量，這都是拉新、促活的寶貴方式。
而展示的信息，主要包括每日的新增、累計(jì)病例數(shù)，各地區(qū)的病例分布，以及疫情新聞、醫(yī)學(xué)知識(shí)等方面的內(nèi)容。
（2）價(jià)值
- 用戶：主要滿足3類用戶：大眾用戶、政企用戶和患者用戶。其中主要是前2者。大眾用戶是指像我們普遍受此前疫情影響生活、工作等方面的大眾群體。政企用戶是指政府和企業(yè)機(jī)構(gòu)，同樣受此次疫情影響，對(duì)機(jī)構(gòu)的運(yùn)作肯定也是有影響的，他們需要基于此做合適的決策，保障企業(yè)和員工的安全。患者用戶是指受此次疫情傳播切身影響到的用戶，包括確診、疑似、接觸、被動(dòng)隔離等，這類用戶對(duì)醫(yī)學(xué)信息的獲取會(huì)更為迫切。
- 需求：面對(duì)3類不同的用戶，主要是滿足2大類需求，分布是資訊信息和醫(yī)療信息的獲取。其中資訊信息包括疫情信息、政府信息、權(quán)威報(bào)道等。醫(yī)療信息包括醫(yī)學(xué)知識(shí)、醫(yī)院信息、醫(yī)學(xué)服務(wù)等。
而接下來，也將依據(jù)用戶體驗(yàn)五要素中的范圍層、框架層、表現(xiàn)層，分別對(duì)這個(gè)疫情數(shù)據(jù)可視化的產(chǎn)品服務(wù)進(jìn)行分析。
二、范圍層
范圍層的定義是決定這樣的產(chǎn)品服務(wù)需要提供什么范圍內(nèi)的功能服務(wù)，什么是不做的。以及要做的數(shù)據(jù)指標(biāo)，哪些是關(guān)鍵的，哪些是次要的。所以我們可以羅列一下這樣數(shù)據(jù)可視化產(chǎn)品，基于用戶的需求是需要準(zhǔn)備什么樣的數(shù)據(jù)指標(biāo)。
2.1 范圍確認(rèn)
上圖摘自國(guó)家衛(wèi)健委某日的全日數(shù)據(jù)，在制作可視化的時(shí)候，需要考慮數(shù)據(jù)源的出處以及能提供什么樣的指標(biāo)及口徑。
從中可以看出，大致可以劃分兩類關(guān)鍵數(shù)據(jù)：一個(gè)是病例的數(shù)據(jù)，一個(gè)是輔助性的數(shù)據(jù)。我們需要從中挑出其適合展示同時(shí)也是用戶需要關(guān)心的數(shù)據(jù)。
通常做這種可視化產(chǎn)品，總結(jié)性的數(shù)據(jù)是十分關(guān)鍵的。而基于用戶的關(guān)注點(diǎn)，每日新增、累計(jì)，就是其中的關(guān)鍵。
另外，基于“時(shí)間”和“地區(qū)”，代表了數(shù)據(jù)的“屬性”。而屬性則反應(yīng)了這個(gè)數(shù)據(jù)可以以什么樣的特點(diǎn)進(jìn)行展現(xiàn)。而“時(shí)間”和“地區(qū)”是，最適合以數(shù)據(jù)趨勢(shì)和數(shù)據(jù)分布的兩種主要數(shù)據(jù)可視化表達(dá)形式。
2.2 主次確認(rèn)
從下表可以看出，3家平臺(tái)的數(shù)據(jù)指標(biāo)在展示上是比較一致的，核心指標(biāo)都一一羅列展示。
其中在時(shí)間的“小時(shí)”級(jí)別，以及“解除醫(yī)學(xué)觀察”等細(xì)分指標(biāo)都不做展示，我認(rèn)為主要出于以下目的：
- 小時(shí)：各地?cái)?shù)據(jù)更新時(shí)間不一致，無(wú)法保證的小時(shí)級(jí)別的統(tǒng)一更新。所以在時(shí)效性無(wú)法保障的前提下，不做過于實(shí)時(shí)的展示是合理的；
- 解除醫(yī)學(xué)觀察：類似追蹤到密切接觸者、解除醫(yī)學(xué)觀察這樣的指標(biāo)太大，且邊界有不確定性，用戶對(duì)其感知不會(huì)太深，所以不展示存在較大不確定性的指標(biāo)同樣也是相對(duì)合理的；
三、框架層
框架層的定義是指根據(jù)要做的功能范圍，應(yīng)該確定如何正確布局和設(shè)計(jì)，可以簡(jiǎn)單理解為PPT的排版一樣，以什么樣的方式來排列展現(xiàn)這些元素。
3.1 布局
首先，我們需要先看看上文提及到的幾類數(shù)據(jù)指標(biāo)，重新分類一下,并標(biāo)記相應(yīng)的優(yōu)先級(jí)。
顯然按照合理的布局應(yīng)該是：
- 從數(shù)據(jù)指標(biāo)來看，確診、疑似、治愈、死亡這4個(gè)是關(guān)鍵指標(biāo)，而累計(jì)要較新增重要些。
- 從時(shí)間和地域上看，中國(guó)整體數(shù)據(jù)、各省市數(shù)據(jù)、全球各國(guó)數(shù)據(jù)這3類為關(guān)鍵指標(biāo)。而由于目標(biāo)用戶主要為國(guó)內(nèi)廣大用戶，那么按照優(yōu)先級(jí)排序應(yīng)以全國(guó)到各省市，再到全球各國(guó)，這樣的順序排列。
3.2 可視化方案
大致的布局是已經(jīng)清晰了，那么接下來就需要基于數(shù)據(jù)類型采用合理的可視化展示形式。
前面也提過，由于是時(shí)間和地區(qū)下的各類數(shù)據(jù)，基于這樣的屬性，是可以做趨勢(shì)、地域、列表等分布的展示方式。支持趨勢(shì)的圖形則主要為折線、柱狀圖，支持地域分布類型則為地圖，而列表則為常規(guī)的類報(bào)表方式等。
其中，由于時(shí)間跨度較長(zhǎng)和地區(qū)明細(xì)較多，如果使用柱狀圖，則會(huì)顯得橫軸較長(zhǎng)，所以在有限的手機(jī)屏幕尺寸下，是不適宜展示的。
- 趨勢(shì)：由于時(shí)間跨度較長(zhǎng)和地區(qū)明細(xì)較多，如果使用柱狀圖，則會(huì)顯得橫軸較長(zhǎng)，所以在有限的手機(jī)屏幕尺寸下，是不適宜展示的。
- 地圖：地圖的可視化有很多，比如像基礎(chǔ)的echats組件，就支持各類2D、3D圖形。但是在這里我們需要考慮的是，用戶主要打開的應(yīng)用設(shè)備是手機(jī)。那么手機(jī)的設(shè)備性能一定程度上限制了可視化的效果呈現(xiàn)。先忽略開發(fā)成本，過于酷炫的效果，會(huì)導(dǎo)致頁(yè)面加載、渲染十分久，這在體驗(yàn)上十分不劃算的。
（Echarts部分地圖特性截圖）
所以在這里，更傾向于采用粗一些的2D省級(jí)行政地圖形式，開發(fā)周期短，且滿足最基本需求。
3.3 平臺(tái)分析
（1）匯總數(shù)據(jù)
相同點(diǎn)：
- 從布局上，3家都采用“整體數(shù)據(jù)+地圖分布”的結(jié)合布局，清晰傳達(dá)全國(guó)一天的整體數(shù)據(jù)；
- 從數(shù)據(jù)時(shí)效性上，都清晰明確數(shù)據(jù)的更新時(shí)間，從而保證與官方的一致性；
- 從整體數(shù)據(jù)上，都以“標(biāo)題、人數(shù)、較昨日”3個(gè)字段，展示整體數(shù)據(jù)的主要信息；
- 統(tǒng)一以地圖分布展示全國(guó)各省的分布，并以同一色系的深淺表達(dá)各省的數(shù)據(jù)發(fā)展情況，而圖標(biāo)的比例尺隨著數(shù)據(jù)的增加也會(huì)發(fā)生變化。
差異點(diǎn)：
- 丁香醫(yī)生在匯總數(shù)據(jù)中間穿插了此次疫情的一些基本信息，占據(jù)了一些空間。對(duì)于前期疫情爆發(fā)，有利于做信息普及，但到了中、后期，用戶已經(jīng)十分感知這方面的信息，優(yōu)先級(jí)已經(jīng)沒有那么重要，其實(shí)完全可以作為一個(gè)hover進(jìn)行信息展示。
- 整體數(shù)據(jù)上，基本展示4、5個(gè)核心指標(biāo)，但在“標(biāo)題”、“較昨日XX”和“具體數(shù)值”的排版上有所不同，而今日頭條更是把標(biāo)題放在2個(gè)指標(biāo)之間。
評(píng)價(jià)：正常應(yīng)遵循“標(biāo)題+具體數(shù)值+較昨日變化”這樣的排列比較合適，上下順序先從標(biāo)題了解該指標(biāo)的含義，居中放大具體數(shù)值，突出關(guān)鍵信息，其次顯示較昨日變化對(duì)比，感知變化情況。
（2）各指標(biāo)趨勢(shì)
相同點(diǎn)：
- 基于新增和累計(jì)兩個(gè)維度，都展示了確診、疑似、死亡和治愈等指標(biāo)的數(shù)據(jù)趨勢(shì)；
- 數(shù)據(jù)內(nèi)涵和數(shù)值接近的指標(biāo)，都做合并在同一折線圖中，這樣使得頁(yè)面簡(jiǎn)潔，且便于數(shù)據(jù)之間做比對(duì)、關(guān)聯(lián)。比如新增確診和新增疑似，2者的數(shù)據(jù)內(nèi)涵相對(duì)接近，且數(shù)值是比較接近，都是千級(jí)單位。那么這樣的折線展示兩者關(guān)聯(lián)關(guān)系，又不會(huì)因?yàn)檎故酒渌幌嚓P(guān)又懸殊的指標(biāo)造成誤解。
差異點(diǎn)：
- 丁香醫(yī)生在展示的指標(biāo)較多一些，且增加了死亡率和治愈率等百分比類型的指標(biāo)。
- 今日頭條和騰訊新聞的版式比較接近，且使用了不同的色系進(jìn)行分類表達(dá)。而丁香醫(yī)生主要以左右滑動(dòng)的交互收縮形式展示。減少空間，但降低了其他圖表的漏出。
- 丁香醫(yī)生突出了湖北和非湖北的數(shù)據(jù)，這樣的好處可以比較全國(guó)和非湖北，側(cè)面表達(dá)目前的疫情傳播困難程度主要在湖北，其他地區(qū)相較輕一些，實(shí)際比全國(guó)的平均值更低，緩輕心理壓力（這就是可視化的魅力）。
（3）國(guó)內(nèi)各省市分布
相同點(diǎn)：統(tǒng)一以常規(guī)列表分布展示國(guó)內(nèi)各省市的疫情數(shù)據(jù)情況，并集中以地區(qū)、確診、死亡、治愈等字段。
差異點(diǎn)：
- 今日頭條和騰訊新聞?dòng)忻鞔_的標(biāo)題進(jìn)行布局區(qū)分，顯示國(guó)內(nèi)疫情數(shù)據(jù)。而丁香醫(yī)生沒有明確展示，與上面版塊的邊界過于混淆。
- 今日頭條和騰訊新聞?shì)^丁香醫(yī)生額外增加“新增確診”指標(biāo)，并且以差異色值顯示。
- 列表默認(rèn)展開當(dāng)前省份的各市數(shù)據(jù)，而今日頭條和騰訊新聞伸縮展開按鈕默認(rèn)統(tǒng)一在右側(cè)，與丁香醫(yī)生顯示左側(cè)不同，較為符合移動(dòng)端產(chǎn)品交互習(xí)慣。
- 有趣的是，今日頭條優(yōu)先展示當(dāng)前用戶地理位置所在省份的數(shù)據(jù)展示，再以累計(jì)確診人數(shù)進(jìn)行順序排列。而騰訊新聞和丁香新聞統(tǒng)一以累計(jì)確診人數(shù)多少排列。
評(píng)價(jià)：
- 考慮排序、篩選的展示邏輯，一般從大到小。
- 移動(dòng)端頁(yè)面因?yàn)楸阌谝罁?jù)當(dāng)前用戶的地理位置，可以采用個(gè)性化的手段做一些差異顯示，這樣在保證整體數(shù)據(jù)展示的過程也優(yōu)先展示用戶接近的數(shù)據(jù)信息，體驗(yàn)更佳。
（4）海外各國(guó)分布
展示方式如國(guó)內(nèi)疫情一致，這里不多說。而唯一不同的是，丁香醫(yī)生在全球各國(guó)的基礎(chǔ)做了“洲”單位的分類。這樣的好處是，分類顯得更有層次性，了解某個(gè)范圍內(nèi)的地區(qū)更有顯著性。
四、表現(xiàn)層
表現(xiàn)層所關(guān)注的，是頁(yè)面各個(gè)元素組件的形狀、色彩和大小比例搭配。同時(shí)數(shù)據(jù)可視化十分重視圖形色彩的表達(dá)，一個(gè)好的視覺設(shè)計(jì)，能夠?yàn)閿?shù)據(jù)的信息傳遞起到十分重要的作用。
4.1 匯總數(shù)據(jù)
從上圖可以看出，3家平臺(tái)都展示了4個(gè)關(guān)鍵指標(biāo)“確診”、“疑似”、“死亡”和“治愈”，以及在色彩選擇上，盡管有具體色值的差別，但是理念是都較為接近的。
- 確診：首先疫情確診人數(shù)，本身是一個(gè)起提醒警示作用的數(shù)據(jù)含義，所以采用偏紅色的表達(dá)是合理的，而丁香醫(yī)生和騰訊新聞則保持了這個(gè)理念。
- 疑似：疑似的指標(biāo)內(nèi)涵也是有一定的警醒作用，但是由于較“確診”的程度輕些，那么采用黃粽色系，可以相對(duì)和緩一些，而這3家在這方面是保持一致的；
- 死亡：這個(gè)指標(biāo)內(nèi)涵本質(zhì)上是一個(gè)嚴(yán)肅悲傷的事情，大家可以留意在一些關(guān)于“死亡”的場(chǎng)合，都會(huì)著裝嚴(yán)肅內(nèi)斂，甚至幾乎統(tǒng)一黑色色系。所以，這樣的指標(biāo)在色彩上選擇偏暗深色系是比較合理的；
- 治愈：治愈本身代表由壞轉(zhuǎn)向好的意義，那么用一種代表陽(yáng)光、希望的色彩是恰到好處的，所以采用偏綠色的色彩；
4.2 地圖分布
地圖分布通常是以顏色深淺代表數(shù)據(jù)的“密集程度”，那么就要確定2個(gè)關(guān)鍵的地方，1個(gè)是色系，另外1個(gè)是合理的刻度比例。前者根據(jù)數(shù)據(jù)內(nèi)涵確定合適的色系進(jìn)行表達(dá)，后者是做色系的層次區(qū)分。
- 丁香醫(yī)生：相對(duì)開放一些，采用深紅色系，直面表達(dá)此次傳播疫情的危險(xiǎn)程度；
- 今日頭條：3者中相對(duì)更為克制一些，采用和緩一點(diǎn)的黃棕色，同時(shí)刻度較多，所以會(huì)顯得深色區(qū)不多，這樣在展示哪些地區(qū)更嚴(yán)重一些會(huì)顯得沒那么突出；
- 騰訊新聞：偏淡紅色系，表達(dá)的危險(xiǎn)信息要弱一些，處于3家平臺(tái)的中間，既不“激進(jìn)”也不過于“保守”。
4.3 折線趨勢(shì)
- 對(duì)比色：折線圖通常最多展示4種數(shù)據(jù)，但大多數(shù)只會(huì)展示2-3種，極少放4種。而折線圖有2種以上的時(shí)候，就需要采用2種以上的獨(dú)立色系來展示，這樣的好處是比較好區(qū)分。但有些產(chǎn)品會(huì)采用同樣的色系下2種深淺顏色，在屏幕十分大的情況下是合適的，但是在手機(jī)端有限的空間情況下，還是建議使用2種不同色系。從上圖可以看出，除今日頭條外，其余兩家基本是采用了明顯的區(qū)分。
- 數(shù)據(jù)節(jié)點(diǎn)：很多時(shí)候?yàn)榱吮阌谟脩糁烂總€(gè)橫軸刻度對(duì)應(yīng)的節(jié)點(diǎn)位置，都會(huì)標(biāo)記一個(gè)“圓點(diǎn)”在上面，這樣好處是便于較快對(duì)應(yīng)上位置。但是，當(dāng)橫軸的刻度過于密集的時(shí)候，這種展示是不適合的，因?yàn)檫^于密集顯得頁(yè)面不夠簡(jiǎn)潔，且沒有重點(diǎn)。顯然這3家平臺(tái)都是有這樣的問題。而最好的方式，只需要在當(dāng)前一天顯示節(jié)點(diǎn)及顯示具體數(shù)值，這樣會(huì)更清晰可觀，也便于輔助閱讀。
以上就是此次疫情數(shù)據(jù)下，在可視化應(yīng)用上的一些體驗(yàn)總結(jié)，3家都遵循了一些基本原則，同時(shí)也有各自的一些風(fēng)格。而數(shù)據(jù)可視化的應(yīng)用需要兼顧不同的因素，達(dá)到最佳效果。
一個(gè)理想的可視化設(shè)計(jì)流程，需要經(jīng)歷“數(shù)據(jù)指標(biāo)的范圍篩選、頁(yè)面的布局抉擇、可視化的視覺設(shè)計(jì)“等關(guān)鍵步驟。
五、總結(jié)
- 選擇數(shù)據(jù)，需確保數(shù)據(jù)的準(zhǔn)確性、穩(wěn)定性和易讀性；
- 進(jìn)行可視化設(shè)計(jì)前，需要了解主要用戶使用的設(shè)備類型，以及開發(fā)的主程序，切勿過于追求視覺效果，畢竟設(shè)備性能之間、APP和手機(jī)網(wǎng)頁(yè)之間，都是有較大的性能差別的；
- 數(shù)據(jù)的內(nèi)涵和屬性確定了可適用的展示方式，比如地理信息適用使用地圖，占比分布適宜使用餅狀圖等；
- 數(shù)據(jù)可視化的核心，是需要明確展示的目的和主題，同時(shí)需要分清主要和次要關(guān)鍵信息；
- 數(shù)據(jù)可視化的布局本質(zhì)上就是講好一個(gè)“故事”，所以是故事就要有先后順序、遞進(jìn)關(guān)系；
- 每個(gè)元素組件，兼顧數(shù)據(jù)及數(shù)據(jù)之間背后的邏輯、關(guān)聯(lián)關(guān)系；
- 數(shù)據(jù)的羅列展示要整齊劃一，一般遵循從大到小、從外到里的原則。
- 視覺是數(shù)據(jù)可視化的一大利器，善用有利于合理化的展示，其中圖表的設(shè)計(jì)、色彩的搭配至關(guān)重要。
3家平臺(tái)地址：
丁香醫(yī)生：https://ncov.dxy.cn/ncovh5/view/pneumonia
#專欄作家#
A.D，公眾號(hào)：吾某，人人都是產(chǎn)品經(jīng)理專欄作家。大數(shù)據(jù)分析產(chǎn)品經(jīng)理，專注數(shù)據(jù)挖掘工作。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
- 目前還沒評(píng)論，等你發(fā)揮！
