在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
开年就来势汹汹的新型冠状病毒,从疫情扩散到初见好转,无时无刻不在牵动着大众的心,隔离在家的每个人每天共同关注的就是疫情发展情况。这个时候,丁香医生的出现无疑帮助了大众对于疫情的实时追踪。那么丁香医生28亿多浏览量的实时疫情界面是如何实现的呢?下面我们从前端的角度,分析一下丁香医生实时疫情界面的成功之处。
1、页面布局
从前端的角度分析,丁香医生作为一个基于微信公众号的移动端H5页面,主要针对手机端用户的访问浏览,做了移动端的适配。在页面的布局展示上,主要是做各种数据的展示和实时播报,各种图表的使用也是必须的。比如简洁醒目的地理位置图、热点图、曲线图等,既形象又生动的为我们展示了疫情发展的实时动态。
2、数字统计
在实时疫情的前端界面中,与疫情相关的数字统计是大众最为关心的信息。比如展示确诊、疑似、死亡、治愈人数等,丁香医生在进行这些数字展示的时候,使用了CSS技术,对字体的大小、颜色等方面进行了强调突出。这些细节的考虑和设计,更体现了丁香医生的前端界面设计的细心。版本迭代后的最新数字统计增加了海外疫情版块,数字的表达也更加直观。
3、地图的可视化应用
另外,实时疫情的地理分布情况,也是大家关心的一大重点。说到地理分布情况,就必然要使用地图的可视化应用。从前端界面的角度来看,实时疫情地图页面采用React作为单页应用的基础骨架实现,地图部分采用echarts作为可视化渲染成份。在技术实现上有许多开源的可视化库来直接使用,如百度的Echarts、C3.js、Chart.js、FlexChart等,可以参考相应的官方文档。在使用地图可视化的时候,有一点不得不提,一定要注意地图的完整性和敏感区域的归属问题,领土完整性一定要重视。
分析完丁香医生的实时疫情前端界面,我们不得不承认前端工程师的重要性。在当下这个颜值即是正义的时代,无论后端功能如何支撑,如果没有优秀的前端界面展示,都难以得到用户的青睐和喜爱。因此,前端不再仅仅只是许多人以为的面子,它早就成为一个产品成败的关键因素之一。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
Web前端开发在线培训班靠不靠谱?学了能就业吗?
目前,前端开发工程师在人才市场上可谓是格外的紧缺,不少小伙伴也看到了其中的就业机遇。想要学习前端开发,自学太慢效率太低,那么Web前端开发在线培训班靠不靠谱?学了能就业吗?针对大家的担忧,小编就来仔细分析一下博学谷培训班的课程。
7000
2019-12-16 19:11:32
微信小程序前端怎么做?新手开发入门教程
在大家的实际生活中,微信小程序随处可见。想必大家都多多少少学习过微信小程序,或者尝试开发微信小程序,那么微信小程序前端怎么做呢?本文是一个新手开发入门教程,希望给前端的小伙伴开发小程序,提供一点帮助。
8397
2019-09-05 17:48:42
前端面试题 如何优化DOM操作的性能?
众所周知,在富网页应用中编写脚本时,无可避免地要跟DOM打交道,但是频繁地对于DOM进行操作,又会导致损耗性能,那么如何才能优化这个性能瓶颈呢?其实这也是前端面试的必考题,一般来说有大致七种方式,归纳起来都是从三种角度出发,即访问和修改DOM元素;修改DOM样式;通过DOM事件处理程序来响应用户。下面我们来详细讲解一下优化DOM操作的性能。
4097
2019-09-26 10:14:53
Uni-App入门教程学习路线分享
Uni、app 使用 Vue.js 开发跨平台应用前端框架。上手简单易学易用,开发者编写一套代码可发布到iOS、Android、H5、以及各种小程序等多个平台。有一定Vue基础或需要学习小程序开发的学员掌握uni、app多种原生小程序快速上手。
4719
2020-04-10 15:08:59
网站前端开发基础知识学什么?必备技能
网站前端开发基础知识学什么?Web前端开发网页制主要由HTML、CSS、JavaScript三大要素组成。随着企业需求变,前端开发技术的三要素也演变成现今的HTML5、CSS3、jQuery。响应式布局、微网站等是Web前端未来的发展方向之一。
3275
2020-08-27 15:16:06