“知疫”疫情資料視覺化平臺——Beta釋出說明

一、前言

經過團隊的開發，“知疫”疫情資料視覺化平臺Beta版本終於趨於完善。在Beta版本中，我們根據前一階段的使用者反饋做了很多的更改。同時更令人激動的是，我們終於適配移動裝置了。現在在PC和手機上，您都能有比較良好的體驗了。

除此，在Beta階段我們增加了搜尋的入口以及出行建議、新聞資訊功能，進一步完善了平臺的功能，希望能為使用者帶來更多的關於新冠疫情的資訊。最後，如果有任何的建議，也歡迎向我們提出。

可以前往以下網站進行使用：

“知疫”疫情資料視覺化平臺

二、這一版本修復的缺陷

2.1 為概要資料表格增加了搜尋功能

缺陷：在原有的概要資料表格中，若使用者想要查詢特定國家的資訊只能依靠肉眼進行搜尋。對於使用者而言，這樣的搜尋方式費時費力，體驗並不好。

修復方式：在國家名稱列中增加搜尋框，使用者可以通過輸入對應國家的名稱進行篩選操作。

修復效果：

在搜尋框中輸入印度，可得如下結果：

將會顯示國家名稱中包含印度的所有國家。

2.2 為長數字增加了分隔符

缺陷：在數字過大時，對使用者而言一眼看出數字的數量級比較困難，同時也會加大使用者的視覺負擔。

修復方式：對長數字，每三位增加,分隔符

修復效果：

2.3 感染地圖介面新增感染率指標

缺陷：在疫苗介面中存在接種率的指標，但是在感染介面中缺少感染率的指標。有使用者提出，這導致二者的資料型別不對應。因此，在beta版本中增加這一指標。

修復方式：新增感染率指標

修復效果：

2.4 增加下拉提示

缺陷：在地區地圖頁面，折線資料的顯示在頁面下方沒有明顯提示，使用者很難發現可以進行下拉。

修復方式：在頁面中增加了提示標誌，若點選該標誌，頁面將直接下滑至折線資料部分。

修復效果：

三、功能和特性

1、各國感染及接種詳情介面 折線圖下拉 提示

功能說明：

在感染詳情及接種詳情介面，右下角有一個明顯的下拉提示，觸碰提示檢視折線圖，可以通過點選將頁面滑到底部顯示折線圖

解決的問題：

• 使用者在瀏覽詳情介面時，可能會忽略下面的歷史資料折線圖，可通過這個較明顯的按鈕，提示使用者下方的內容，同時幫助使用者快速檢視下方折線圖

2、出行建議

功能說明：

在出行建議介面下，系統可以根據使用者選擇的目的地

• 目的地的政策嚴格性指數
• 14天內的新增感染數
• 目的地的風險等級（國內，如存在中高風險地區，會詳細列出）（每天去官方平臺進行爬取）

目的地選擇方式有兩種：

• 通過提供的級聯選擇器直接進行選擇

• 通過搜尋聯想進行選擇

解決的問題：

• 對地區安全指數的個性化分析
• 為使用者提供科學的出行建議

應用場景：

小明是北京的一名在校大學生， 他的家鄉在廣東佛山，端午節到了，他想回家去探望一下父母，但是廣東最近的情況不容樂觀，通過查詢“知疫”平臺，他清楚地瞭解到了廣東近14天的新增感染病例數，並且發現佛山存在兩個中風險地區，平臺給的建議也是如非必要不要前往，於是他想：還是算了，等到暑假廣東安全了再回家吧。

3、地區詳細資訊搜尋

功能說明：

通過選單欄的搜尋框，使用者同樣可以通過兩種方式來選擇地區（包括國內外的國家、國內省市），來進行搜尋，過程如下：

搜尋結果分為以下幾部分：

• 疫情感染與疫苗接種資訊

• 接種結構：通過點選檢視接種機構按鈕顯示（只在中國地級市的搜尋結果中顯示接種機構）

  同時

  • 如果資料不存在，顯示暫未收錄

• 如果資料存在，採用動態載入機制進行顯示

• 出行建議：通過點選出行建議按鈕跳轉

• 疫情地圖：通過點選檢視地圖跳轉

解決的問題：

• 對地區的針對性查詢，滿足使用者的需求
• 將某個地區的所有資訊（感染接種資訊、接種機構、感染地圖、出行建議）集中進行顯示

應用場景：

李四對德國的新天鵝城堡慕名已久，想趁假期去看看，準備出發之前，他開啟平臺搜尋新天鵝城堡所在的州Bayern，看到它的感染與接種的詳細資訊，發現當前感染人數很多；而且通過檢視德國的感染地圖，也發現德國的疫情比較嚴重；最後，他查詢平臺的出行建議，發現出行風險為高。他有點害怕，所以決定還是先在國內旅遊，等疫情過去再去德國吧。

4、疫情與疫苗的新聞資訊

功能說明：

在新聞資訊介面，通過每天對百度新聞進行爬取，將新聞分為疫苗新聞與疫情新聞兩部分，每類顯示20條，點選可連結到外部新聞網站

解決的問題：

• 國內外疫情資訊的展示
• 使用者可快速檢視疫情及疫苗最新新聞

應用場景：

王奶奶是一名退休人員，但是她仍然很關心國際形勢與國內發展，尤其是最近新冠疫情在國內外進行蔓延，造成了大量的感染與死亡。通過”知疫“平臺，她不但可以清楚地看到國內外各個地區的視覺化感染與接種情況（人老了， 不喜歡看密密麻麻的數字），還能夠每天看一會最新的疫情新聞，幫助她更好地瞭解國內外地疫情情況。

5、移動端適配

功能說明：

對於網頁端的各種功能，我們在移動端上進行了介面適配，目前，移動端與PC端的功能表現基本保持一致

解決的問題：

• 平臺在移動端的顯示

應用場景：

王先生是一個50多歲的仍在工作崗位上奮鬥的文職人員，他平常很少用到電腦，在手機上看到”知疫“平臺釋出的alpha宣傳時，他好奇地點開了，但是眼前一片混亂：選單欄換行、字型大小不合適、各種元件排列混亂... ...，他的體驗感極差，而在”知疫“推出的Beta版本上，點開連結，頁面清楚大方，排列整齊，他可以流暢地使用各種功能，體驗感很棒，還實現了很多實用性的功能，他決定要把這個平臺推薦給他的同事、家人和朋友。

四、執行環境要求

本應用使用 Vue搭建，由於Vue使用了 IE8 無法模擬的 ECMAScript 5 特性，因此不支援IE8及以下版本，但它支援所有相容 ECMAScript 5 的瀏覽器，以下是部分相容瀏覽器：

• Firefox78版本及以上

• chrome88版本及以上

• edge89版本及以上

• safari14版本及以上

• Opera75版本及以上

• IE11瀏覽器能夠完美模擬ECMAScript 5特性

  本平臺推薦使用edge，chrome，safari進行訪問

此次專案對移動端做了適配。採用了移動端元件庫Vant 2，Vant 2 支援上述瀏覽器，系統版本要求Android >= 4.0、iOS >= 8.0。

五、安裝與使用方法

知疫疫情資料視覺化平臺上手很簡單。知疫平臺公開提供視覺化服務，不需要註冊，在瀏覽器中輸入網址www.zjtdzhiyi.com就可以進入知疫平臺歡迎介面，點選開始就能夠享受到我們的服務啦。

該平臺作為web應用以網站的形式釋出，目前註冊了域名，可以訪問域名www.zjtdzhiyi.com

六、已知問題和限制

1、由於地圖資源較多，首次使用地圖間的跳轉功能時可能需要幾秒鐘的載入時間。首次點選後，載入時間的問題將會大大改善；

2、目前本網站採用固定時間更新資料，由於全球各個地區資料來源不盡相同以及時差的問題，您看到的資料可能會有一定延遲，如需要精確的資料，請對比權威渠道進行使用；