年以來，隨著疫情方面的數據逐漸增多，一些互聯網公司也紛紛發布一些可視化的數據產品服務，讓用戶可以實時并直觀了解最新情況，可謂一個便民利器。而本文，則通過丁香醫生、以及騰訊新聞推出的“疫情實時動態”可視化服務，總結分享其中運用到的一些常見的數據可視化經驗。

閱讀指南：

（1）受眾人群：初級產品經理

（2）閱讀收獲

• 產品分析的方法論實例，包括用戶體驗五要素、馬斯洛需求理論等；
• 數據可視化的基本技巧和遵循原則。

一、前言

1.1 概念

首先，需要先簡單澄清下數據可視化的基本概念。數據可視化，實質上是把一些概要信息（數據、關鍵內容），并結合動靜態的圖像視頻等形式進行展示，從而清晰傳遞核心信息。較為注重視覺層面的觸達。

所以我們需要在數據之中挖掘一些重要的價值信息，并以一個可觀的方式呈現。而“重要”的定義是十分明顯的，核心數據、用戶感興趣、有決策意義，都可稱之為重要。

1.2 動因

根據馬斯洛五層次需求理論，那么數據可視化在其中屬于什么層次的需求？

受疫情影響，生命安全成了最重要的社會需求。那么滿足大眾對這方面的廣泛需求，推出這樣的數據可視化產品是十分有必要，滿足用戶對疫情情況、資訊信息、醫療信息等方面的獲取，從而保障自己基本的需求。

1.3 基本情況

（1）脈絡

初始，丁香醫生率先推出一個H5的可視化頁面，匯總披露病例數據。隨后，一些大廠也開始陸續推出，包括頭條、騰訊等等。

而為什么大家都紛紛推出這樣的數據服務，從戰略層來說：一是做好企業責任，滿足用戶的知情需求；其二是滿足自己的平臺用戶，并吸引流量，這都是拉新、促活的寶貴方式。

而展示的信息，主要包括每日的新增、累計病例數，各地區的病例分布，以及疫情新聞、醫學知識等方面的內容。

（2）價值

• 用戶：主要滿足3類用戶：大眾用戶、政企用戶和患者用戶。其中主要是前2者。大眾用戶是指像我們普遍受此前疫情影響生活、工作等方面的大眾群體。政企用戶是指政府和企業機構，同樣受此次疫情影響，對機構的運作肯定也是有影響的，他們需要基于此做合適的決策，保障企業和員工的安全。患者用戶是指受此次疫情傳播切身影響到的用戶，包括確診、疑似、接觸、被動隔離等，這類用戶對醫學信息的獲取會更為迫切。
• 需求：面對3類不同的用戶，主要是滿足2大類需求，分布是資訊信息和醫療信息的獲取。其中資訊信息包括疫情信息、政府信息、權威報道等。醫療信息包括醫學知識、醫院信息、醫學服務等。

而接下來，也將依據用戶體驗五要素中的范圍層、框架層、表現層，分別對這個疫情數據可視化的產品服務進行分析。

二、范圍層

范圍層的定義是決定這樣的產品服務需要提供什么范圍內的功能服務，什么是不做的。以及要做的數據指標，哪些是關鍵的，哪些是次要的。所以我們可以羅列一下這樣數據可視化產品，基于用戶的需求是需要準備什么樣的數據指標。

2.1 范圍確認

上圖摘自國家衛健委某日的全日數據，在制作可視化的時候，需要考慮數據源的出處以及能提供什么樣的指標及口徑。

從中可以看出，大致可以劃分兩類關鍵數據：一個是病例的數據，一個是輔助性的數據。我們需要從中挑出其適合展示同時也是用戶需要關心的數據。

通常做這種可視化產品，總結性的數據是十分關鍵的。而基于用戶的關注點，每日新增、累計，就是其中的關鍵。

另外，基于“時間”和“地區”，代表了數據的“屬性”。而屬性則反應了這個數據可以以什么樣的特點進行展現。而“時間”和“地區”是，最適合以數據趨勢和數據分布的兩種主要數據可視化表達形式。

2.2 主次確認

從下表可以看出，3家平臺的數據指標在展示上是比較一致的，核心指標都一一羅列展示。

其中在時間的“小時”級別，以及“解除醫學觀察”等細分指標都不做展示，我認為主要出于以下目的：

• 小時：各地數據更新時間不一致，無法保證的小時級別的統一更新。所以在時效性無法保障的前提下，不做過于實時的展示是合理的；
• 解除醫學觀察：類似追蹤到密切接觸者、解除醫學觀察這樣的指標太大，且邊界有不確定性，用戶對其感知不會太深，所以不展示存在較大不確定性的指標同樣也是相對合理的；

三、框架層

框架層的定義是指根據要做的功能范圍，應該確定如何正確布局和設計，可以簡單理解為PPT的排版一樣，以什么樣的方式來排列展現這些元素。

3.1 布局

首先，我們需要先看看上文提及到的幾類數據指標，重新分類一下,并標記相應的優先級。

顯然按照合理的布局應該是：

1. 從數據指標來看，確診、疑似、治愈、死亡這4個是關鍵指標，而累計要較新增重要些。
2. 從時間和地域上看，中國整體數據、各省市數據、全球各國數據這3類為關鍵指標。而由于目標用戶主要為國內廣大用戶，那么按照優先級排序應以全國到各省市，再到全球各國，這樣的順序排列。

3.2 可視化方案

大致的布局是已經清晰了，那么接下來就需要基于數據類型采用合理的可視化展示形式。

前面也提過，由于是時間和地區下的各類數據，基于這樣的屬性，是可以做趨勢、地域、列表等分布的展示方式。支持趨勢的圖形則主要為折線、柱狀圖，支持地域分布類型則為地圖，而列表則為常規的類報表方式等。

其中，由于時間跨度較長和地區明細較多，如果使用柱狀圖，則會顯得橫軸較長，所以在有限的手機屏幕尺寸下，是不適宜展示的。

1. 趨勢：由于時間跨度較長和地區明細較多，如果使用柱狀圖，則會顯得橫軸較長，所以在有限的手機屏幕尺寸下，是不適宜展示的。
2. 地圖：地圖的可視化有很多，比如像基礎的echats組件，就支持各類2D、3D圖形。但是在這里我們需要考慮的是，用戶主要打開的應用設備是手機。那么手機的設備性能一定程度上限制了可視化的效果呈現。先忽略開發成本，過于酷炫的效果，會導致頁面加載、渲染十分久，這在體驗上十分不劃算的。

（Echarts部分地圖特性截圖）

所以在這里，更傾向于采用粗一些的2D省級行政地圖形式，開發周期短，且滿足最基本需求。

3.3 平臺分析

（1）匯總數據

相同點：

• 從布局上，3家都采用“整體數據+地圖分布”的結合布局，清晰傳達全國一天的整體數據；
• 從數據時效性上，都清晰明確數據的更新時間，從而保證與官方的一致性；
• 從整體數據上，都以“標題、人數、較昨日”3個字段，展示整體數據的主要信息；
• 統一以地圖分布展示全國各省的分布，并以同一色系的深淺表達各省的數據發展情況，而圖標的比例尺隨著數據的增加也會發生變化。

差異點：

• 丁香醫生在匯總數據中間穿插了此次疫情的一些基本信息，占據了一些空間。對于前期疫情爆發，有利于做信息普及，但到了中、后期，用戶已經十分感知這方面的信息，優先級已經沒有那么重要，其實完全可以作為一個hover進行信息展示。
• 整體數據上，基本展示4、5個核心指標，但在“標題”、“較昨日XX”和“具體數值”的排版上有所不同，而更是把標題放在2個指標之間。

評價：正常應遵循“標題+具體數值+較昨日變化”這樣的排列比較合適，上下順序先從標題了解該指標的含義，居中放大具體數值，突出關鍵信息，其次顯示較昨日變化對比，感知變化情況。

（2）各指標趨勢

相同點：

• 基于新增和累計兩個維度，都展示了確診、疑似、死亡和治愈等指標的數據趨勢；
• 數據內涵和數值接近的指標，都做合并在同一折線圖中，這樣使得頁面簡潔，且便于數據之間做比對、關聯。比如新增確診和新增疑似，2者的數據內涵相對接近，且數值是比較接近，都是千級單位。那么這樣的折線展示兩者關聯關系，又不會因為展示其他不相關又懸殊的指標造成誤解。

差異點：

• 丁香醫生在展示的指標較多一些，且增加了死亡率和治愈率等百分比類型的指標。
• 和騰訊新聞的版式比較接近，且使用了不同的色系進行分類表達。而丁香醫生主要以左右滑動的交互收縮形式展示。減少空間，但降低了其他圖表的漏出。
• 丁香醫生突出了湖北和非湖北的數據，這樣的好處可以比較全國和非湖北，側面表達目前的疫情傳播困難程度主要在湖北，其他地區相較輕一些，實際比全國的平均值更低，緩輕心理壓力（這就是可視化的魅力）。

（3）國內各省市分布

相同點：統一以常規列表分布展示國內各省市的疫情數據情況，并集中以地區、確診、死亡、治愈等字段。

差異點：

• 和騰訊新聞有明確的標題進行布局區分，顯示國內疫情數據。而丁香醫生沒有明確展示，與上面版塊的邊界過于混淆。
• 和騰訊新聞較丁香醫生額外增加“新增確診”指標，并且以差異色值顯示。
• 列表默認展開當前省份的各市數據，而和騰訊新聞伸縮展開按鈕默認統一在右側，與丁香醫生顯示左側不同，較為符合移動端產品交互習慣。
• 有趣的是，優先展示當前用戶地理位置所在省份的數據展示，再以累計確診人數進行順序排列。而騰訊新聞和丁香新聞統一以累計確診人數多少排列。

評價：

1. 考慮排序、篩選的展示邏輯，一般從大到小。
2. 移動端頁面因為便于依據當前用戶的地理位置，可以采用個性化的手段做一些差異顯示，這樣在保證整體數據展示的過程也優先展示用戶接近的數據信息，體驗更佳。

（4）海外各國分布

展示方式如國內疫情一致，這里不多說。而唯一不同的是，丁香醫生在全球各國的基礎做了“洲”單位的分類。這樣的好處是，分類顯得更有層次性，了解某個范圍內的地區更有顯著性。

四、表現層

表現層所關注的，是頁面各個元素組件的形狀、色彩和大小比例搭配。同時數據可視化十分重視圖形色彩的表達，一個好的視覺設計，能夠為數據的信息傳遞起到十分重要的作用。

4.1 匯總數據

從上圖可以看出，3家平臺都展示了4個關鍵指標“確診”、“疑似”、“死亡”和“治愈”，以及在色彩選擇上，盡管有具體色值的差別，但是理念是都較為接近的。

• 確診：首先疫情確診人數，本身是一個起提醒警示作用的數據含義，所以采用偏紅色的表達是合理的，而丁香醫生和騰訊新聞則保持了這個理念。
• 疑似：疑似的指標內涵也是有一定的警醒作用，但是由于較“確診”的程度輕些，那么采用黃粽色系，可以相對和緩一些，而這3家在這方面是保持一致的；
• 死亡：這個指標內涵本質上是一個嚴肅悲傷的事情，大家可以留意在一些關于“死亡”的場合，都會著裝嚴肅內斂，甚至幾乎統一黑色色系。所以，這樣的指標在色彩上選擇偏暗深色系是比較合理的；
• 治愈：治愈本身代表由壞轉向好的意義，那么用一種代表陽光、希望的色彩是恰到好處的，所以采用偏綠色的色彩；

4.2 地圖分布

地圖分布通常是以顏色深淺代表數據的“密集程度”，那么就要確定2個關鍵的地方，1個是色系，另外1個是合理的刻度比例。前者根據數據內涵確定合適的色系進行表達，后者是做色系的層次區分。

• 丁香醫生：相對開放一些，采用深紅色系，直面表達此次傳播疫情的危險程度；
• ：3者中相對更為克制一些，采用和緩一點的黃棕色，同時刻度較多，所以會顯得深色區不多，這樣在展示哪些地區更嚴重一些會顯得沒那么突出；
• 騰訊新聞：偏淡紅色系，表達的危險信息要弱一些，處于3家平臺的中間，既不“激進”也不過于“保守”。

4.3 折線趨勢

• 對比色：折線圖通常最多展示4種數據，但大多數只會展示2-3種，極少放4種。而折線圖有2種以上的時候，就需要采用2種以上的獨立色系來展示，這樣的好處是比較好區分。但有些產品會采用同樣的色系下2種深淺顏色，在屏幕十分大的情況下是合適的，但是在手機端有限的空間情況下，還是建議使用2種不同色系。從上圖可以看出，除外，其余兩家基本是采用了明顯的區分。
• 數據節點：很多時候為了便于用戶知道每個橫軸刻度對應的節點位置，都會標記一個“圓點”在上面，這樣好處是便于較快對應上位置。但是，當橫軸的刻度過于密集的時候，這種展示是不適合的，因為過于密集顯得頁面不夠簡潔，且沒有重點。顯然這3家平臺都是有這樣的問題。而最好的方式，只需要在當前一天顯示節點及顯示具體數值，這樣會更清晰可觀，也便于輔助閱讀。

以上就是此次疫情數據下，在可視化應用上的一些體驗總結，3家都遵循了一些基本原則，同時也有各自的一些風格。而數據可視化的應用需要兼顧不同的因素，達到最佳效果。

一個理想的可視化設計流程，需要經歷“數據指標的范圍篩選、頁面的布局抉擇、可視化的視覺設計“等關鍵步驟。

五、總結

1. 選擇數據，需確保數據的準確性、穩定性和易讀性；
2. 進行可視化設計前，需要了解主要用戶使用的設備類型，以及開發的主程序，切勿過于追求視覺效果，畢竟設備性能之間、APP和手機網頁之間，都是有較大的性能差別的；
3. 數據的內涵和屬性確定了可適用的展示方式，比如地理信息適用使用地圖，占比分布適宜使用餅狀圖等；
4. 數據可視化的核心，是需要明確展示的目的和主題，同時需要分清主要和次要關鍵信息；
5. 數據可視化的布局本質上就是講好一個“故事”，所以是故事就要有先后順序、遞進關系；
6. 每個元素組件，兼顧數據及數據之間背后的邏輯、關聯關系；
7. 數據的羅列展示要整齊劃一，一般遵循從大到小、從外到里的原則。
8. 視覺是數據可視化的一大利器，善用有利于合理化的展示，其中圖表的設計、色彩的搭配至關重要。

3家平臺地址：

丁香醫生：https://ncov.dxy.cn/ncovh5/view/pneumonia

：https://i.snssdk.com/ugc/hotboard_fe/hot_list/template/hot_list/forum_tab.html?activeWidget=1&city_code=440300&city_name=%E6%B7%B1%E5%9C%B3&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_ios&utm_campaign=client_share&wxshare_count=1

騰訊新聞：https://news.qq.com/zt2020/page/feiyan.htm?devid=EB886059-83CA-4F1F-AB3A-B64FCD87D7F7&qimei=eb886059-83ca-4f1f-ab3a-b64fcd87d7f7

作者：A.D，數據產品一枚；公眾號：吾某

本文由 @A.D. 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

、系統結構：

① B/S架構：Browser/Server（瀏覽器/服務器的交互形式。）

• Browser支持的語言：HTML、CSS、JavaScript；S是服務器端Server支持的語言有：C、C++、Java等
• B/S架構系統有什么優點和缺點？ 優點：升級方便，只升級服務器代碼即可，維護成本低。缺點：速度慢、體驗不好、界面不炫酷
• 企業大部分使用B/S架構
• B/S架構的系統代表有：京東、百度、天貓等

② C/S架構：Client/Server（客戶端/服務器的交互形式。）

• C/S架構的優點和缺點？
• 優點：速度快、體驗好、界面炫酷（娛樂性多數是C/S架構）
• 缺點：升級麻煩、維護成本較高。
• C/S架構的系統代表有：QQ、微信、支付寶等

2、 HTML概述

① 什么是HTML？② 怎么開發HTML？③ 怎么運行HTML?

• ① HTML：Hyper Text Markup Language（超文本標記語言）

?由大量的標簽組成，每一個標簽都有開始標簽和結束標簽。

?超文本：圖片、聲音、視頻等

• ② HTML開發使用普通的文本編輯器就行，創建擴展名是.html或.htm

?編輯器有：HBuilder、vscode等

③ 直接采用瀏覽器打開HTML文件就能運行

④ HTML是誰制定的？

• ④ W3C：世界萬維網聯盟

?W3C制定了HTML的規范：每個瀏覽器生產廠家都會遵守規范。HTML也會按照規范去寫代碼

?HTML規范目前最高的版本是：HTML5.0，簡稱H5

?我們現在主要學的HTML4.0（基本用法）

• 為了方便中國Web前端程序員開發，提供了大量幫助文檔。為開發提供方便。

?w3school：先出現的，和W3C無關

?w3cschool：后出現的，和W3C無關

?W3C制定了很多規范：HTML/XML/http協議/https協議……

3、 第一個HTML

4、基本標簽

• p：段落標記
• h1~h6：標題字，與word的標題字相同
• br：換行標記（獨目標記）
• hr：橫線（獨目標記）
• color：橫線顏色
• width：橫線寬度（可以px和%）
• pre：預留格式
• del：刪除字
• ins：插入字（有下劃線）
• b：粗體字
• i：斜體字
• sup：上標
• sub：下標
• font：字體標簽
• color：字體顏色
• size：字體大小（1~7）

頁面效果圖：

5、實體符號：為了避免和標簽沖突，所以需要使用實體符號

• <：<
• >：>
• 空格：
• 注：html中按多個空格鍵，在網頁中只顯示一個空格。

6、HTML表格

• table：表格
• tr：行
• td：列
• th：列（比td加粗居中）
• 合并行：rowspan（一個格占兩個位置）
• 注：row合并的時候，刪除下面的單元格
• 合并列：colspan（一個格占兩個位置）
• 注：col合并的時候，刪除哪個沒有要求

7、thead、tbody、tfoot標簽

• thead、tbody、tfoot不是必須的，便于后期JS編寫。

8、body的背景顏色和背景圖片

• bgcolor：背景色
• background：背景圖片
• 背景圖片在背景色的上面

9、img標簽

• src：圖片的路徑
• 只設置width，height會等比例縮放
• 只設置height，不起作用
• title：鼠標懸停時顯示的信息
• alt：設置圖片加載失敗時顯示的提示信息

10、 超鏈接或熱鏈接

• href：hot references 熱引用；
• 后面一定是一個資源的地址。
• 后面的路徑可以是絕對路徑也可以是相對路徑，可以是網絡某個資源的路徑。
• target：
• _blank：新窗口
• _self：當前窗口（默認）
• _top：頂級窗口
• _parent：父級窗口

超鏈接的作用：

通過超鏈接可以從瀏覽器向服務器發送請求。

11、request與response的概念

• request：瀏覽器向服務器發送數據（請求）
• B --》S
• response：服務器向瀏覽器發送數據（響應）
• S--》B

12、列表

• 有序列表：ol
• type：1、A、a、I、i
• 無序列表：ul
• type：circle（○）、square（□）、disc（●）

13、表單（重點）

• action：寫提交的URL地址
• method：默認get；還有post
• 表單有什么用？
• 答：收集用戶的信息。表單展現之后，用戶填寫表單，點擊提交。 （submit）
• 怎么畫一個表單？
• 答：用form標簽
• 一個網頁可以有多個表單form
• 表單最終是需要提交數據給服務器的，form標簽有一個action屬性，這個屬性用來指定服務器地址。
• action屬性用來指定數據提交給哪個服務器
• action屬性和超鏈接中的href屬性一樣。都可以向服務器發送請求（request）
• http://192.168.111.3:8080/oa/save 這是請求路徑，
• 表單提交數據最終提交給192.168.111.3機器上的8080端口對應的軟件。
• input中的type取值:
• radio：單選控件
• checkbox：多選控件
• submit：提交控件
• reset：重置控件
• button：普通控件
• text：文本控件
• password：密碼控
• file：文件控件
• 上傳文件專用
• hidden：隱藏域
• 網頁上看不到，但是表單提交的時候數據會自動提交給服務器。
• input中的value屬性用來指定按鈕上顯示的文本信息。
• 超鏈接a與表單form的區別？
• 答：表達form可以收集信息，而超鏈接a無法收集信息。
• 表單提交里面的按鈕input中屬性必須定義name，不然提交不了。
• 表單是以什么格式提交數據給服務器的？
• 格式：action?name=value&name=value&name=value..
• HTTP協議規定的，必須以這種格式提交給服務器
• java中String split('&');
• 重點強調：表單項寫了name屬性的，一律會提交給服務器。不想提交就不要寫name屬性。
• 文本框和密碼框的value不需要程序員指定，用戶輸入什么value就是什么。
• 當name沒有寫的時候，該項不會提交給服務器
• 但是當value沒有寫的時候，value的默認值是空字符串"",將空字符串提交給服務器。java代碼得到的是：String s = "";

效果圖：

地址欄提交的信息：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性；&position=ln&myFile=&myHidden=

14、表單的說明：

• ① 用戶手動輸入的文本框，都不需要給value賦值
• ② textarea沒有value屬性
• ③ radio、checkbox默認選項需要使用，checked="checked"（簡寫：checked）
• ④ select中的option屬性：? selected="selected" 為默認選中 ?size：顯示條目數量
• multiple="multiple" 支持多選(select的屬性)
• ⑤ input的屬性
• readonly和disabled：
• 都是只讀不能修改
• 數據不會提交
• maxlength：設置文本框中輸入的字符數量。

15、HTML中的結點

• 在HTML文檔中，任何元素（結點）都有id屬性，id屬性是該節點的唯一標識。所以在同一個HTML文檔中id值不能重復。
• 注意：表單提交數據的時候，只和name有關系，和id無關
• id有什么作用？
• javascript語言：可以對HTML文檔中的任何節點進行增刪改操作。
• 獲取節點時，通常通過id來獲取節點
• HTML文檔是一棵樹，樹上有很多節點，每一個節點都有唯一的id（DOM樹）

16、div和span

• div和span有什么用？
• div和span都可以稱為圖層。
• 有什么用？
• 圖層的作用為了保證頁面可以靈活的布局。
• div和span是可以定位的，只要定下div的左上角的x軸和y軸坐標即可。
• div和span的區別？
• di獨占一行
• span不會獨占一行

話說：“出門要看天”。我們出門辦事、行車駛船、旅游觀光、經商購物等等，都和天氣的變化息息相關。給愛車貼膜也要看天，陰天和雨后是最適合的貼膜天氣。因為在陰天和雨后，空氣比較潮濕，懸浮物少，此時貼膜不會因為出現雜質而影響美觀。很多車主知道，貼防爆膜要去有室內貼膜條件的裝飾店，貼膜前，專業裝飾店還會適當保持室內的濕度，避免灰塵造成膜內有沙礫、氣泡和劃痕。但可能多數車主并不知道，陰天和雨后空氣濕度較大，靜電減少，室內外的灰塵也明顯減少，這正是貼膜的最好時機。需要提醒的是，不要在多塵天氣和環境下貼膜。

【車友論壇熱帖】

http://a.xcar.com.cn/bbs/hotposts.html

【愛卡汽車APP下載】

http://dw.xcar.com.cn/adcount.php?id=366