• 在线客服

  • 扫描二维码
    下载博学谷APP

  • 扫描二维码
    关注博学谷微信公众号

  • 意见反馈

原创 丁香医生的实时疫情前端界面分析

发布时间:2020-04-02 15:30:07 浏览 7619 来源:博学谷 作者:照照

    开年就来势汹汹的新型冠状病毒,从疫情扩散到初见好转,无时无刻不在牵动着大众的心,隔离在家的每个人每天共同关注的就是疫情发展情况。这个时候,丁香医生的出现无疑帮助了大众对于疫情的实时追踪。那么丁香医生28亿多浏览量的实时疫情界面是如何实现的呢?下面我们从前端的角度,分析一下丁香医生实时疫情界面的成功之处。

     

    丁香医生前端界面

     

    1、页面布局

     

    从前端的角度分析,丁香医生作为一个基于微信公众号的移动端H5页面,主要针对手机端用户的访问浏览,做了移动端的适配。在页面的布局展示上,主要是做各种数据的展示和实时播报,各种图表的使用也是必须的。比如简洁醒目的地理位置图、热点图、曲线图等,既形象又生动的为我们展示了疫情发展的实时动态。

     

    2、数字统计

     

    在实时疫情的前端界面中,与疫情相关的数字统计是大众最为关心的信息。比如展示确诊、疑似、死亡、治愈人数等,丁香医生在进行这些数字展示的时候,使用了CSS技术,对字体的大小、颜色等方面进行了强调突出。这些细节的考虑和设计,更体现了丁香医生的前端界面设计的细心。版本迭代后的最新数字统计增加了海外疫情版块,数字的表达也更加直观。

     

    3、地图的可视化应用

     

    另外,实时疫情的地理分布情况,也是大家关心的一大重点。说到地理分布情况,就必然要使用地图的可视化应用。从前端界面的角度来看,实时疫情地图页面采用React作为单页应用的基础骨架实现,地图部分采用echarts作为可视化渲染成份。在技术实现上有许多开源的可视化库来直接使用,如百度的EchartsC3.jsChart.jsFlexChart等,可以参考相应的官方文档。在使用地图可视化的时候,有一点不得不提,一定要注意地图的完整性和敏感区域的归属问题,领土完整性一定要重视。

     

    分析完丁香医生的实时疫情前端界面,我们不得不承认前端工程师的重要性。在当下这个颜值即是正义的时代,无论后端功能如何支撑,如果没有优秀的前端界面展示,都难以得到用户的青睐和喜爱。因此,前端不再仅仅只是许多人以为的面子,它早就成为一个产品成败的关键因素之一。

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: Vue.js基础入门课程推荐 下一篇: 前端面试常见知识点总结

相关推荐 更多

热门文章

  • 前端是什么
  • 前端开发的工作职责
  • 前端开发需要会什么?先掌握这三大核心关键技术
  • 前端开发的工作方向有哪些?
  • 简历加分-4步写出HR想要的简历
  • 程序员如何突击面试?两大招带你拿下面试官
  • 程序员面试技巧
  • 架构师的厉害之处竟然是这……
  • 架构师书籍推荐
  • 懂了这些,才能成为架构师
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码