丁香醫(yī)生的實時疫情前端界面分析

開年就來勢洶洶的新型冠狀病毒，從疫情擴散到初見好轉，無時無刻不在牽動著大眾的心，隔離在家的每個人每天共同關注的就是疫情發(fā)展情況。這個時候，丁香醫(yī)生的出現(xiàn)無疑幫助了大眾對于疫情的實時追蹤。那么丁香醫(yī)生28億多瀏覽量的實時疫情界面是如何實現(xiàn)的呢？下面我們從前端的角度，分析一下丁香醫(yī)生實時疫情界面的成功之處。

1、頁面布局

從前端的角度分析，丁香醫(yī)生作為一個基于微信公眾號的移動端H5頁面，主要針對手機端用戶的訪問瀏覽，做了移動端的適配。在頁面的布局展示上，主要是做各種數(shù)據(jù)的展示和實時播報，各種圖表的使用也是必須的。比如簡潔醒目的地理位置圖、熱點圖、曲線圖等，既形象又生動的為我們展示了疫情發(fā)展的實時動態(tài)。

2、數(shù)字統(tǒng)計

在實時疫情的前端界面中，與疫情相關的數(shù)字統(tǒng)計是大眾最為關心的信息。比如展示確診、疑似、死亡、治愈人數(shù)等，丁香醫(yī)生在進行這些數(shù)字展示的時候，使用了CSS技術，對字體的大小、顏色等方面進行了強調突出。這些細節(jié)的考慮和設計，更體現(xiàn)了丁香醫(yī)生的前端界面設計的細心。版本迭代后的最新數(shù)字統(tǒng)計增加了海外疫情版塊，數(shù)字的表達也更加直觀。

3、地圖的可視化應用

另外，實時疫情的地理分布情況，也是大家關心的一大重點。說到地理分布情況，就必然要使用地圖的可視化應用。從前端界面的角度來看，實時疫情地圖頁面采用React作為單頁應用的基礎骨架實現(xiàn)，地圖部分采用echarts作為可視化渲染成份。在技術實現(xiàn)上有許多開源的可視化庫來直接使用，如百度的Echarts、C3.js、Chart.js、FlexChart等，可以參考相應的官方文檔。在使用地圖可視化的時候，有一點不得不提，一定要注意地圖的完整性和敏感區(qū)域的歸屬問題，領土完整性一定要重視。

分析完丁香醫(yī)生的實時疫情前端界面，我們不得不承認前端工程師的重要性。在當下這個顏值即是正義的時代，無論后端功能如何支撐，如果沒有優(yōu)秀的前端界面展示，都難以得到用戶的青睞和喜愛。因此，前端不再僅僅只是許多人以為的面子，它早就成為一個產(chǎn)品成敗的關鍵因素之一。