百度迁徙数据可视化项目开发幕后

发布:egoldy    时间:2014-02-02 23:51:15


          随着百度公司的品牌项目-百度迁徙的上线,引爆了整个2014年的春运话题点,也让众多业内人士对于百度2014年春节如何表现有了答案。百度通过百度迁徙这个品牌项目,与央视1套,4套,13套等媒体合作“据说春运”节目,使用大数据的视角来查看春运人口的移动的情况,一方面实现了新技术的接地气,为更 多的用户服务,另一面充分的拉近了百度和老百姓的心的距离。百度赢得了用户,更获得了业内人士认可,整个互联上一片好评。做为开发者的我们,我们要给百度一 个好评,有网友评论,它是蛇年最牛逼的一个产品,而且是没有附带任何其它推广的牛逼产品。如果您对此项目的开发过程有兴趣,请往下看


           万博思图做为可视化开发公司,百度迁徙项目是5年来用户访问最多,用户受益最多的一个项目,传播最广最有影响力的一个项目。尽管之前三年所做的项目多数为 京城大领导参观演示所做,相比之下,我们做为开发人员,开发有更多受益用户的项目让我们有更大的满足感。

           言归正传,随着百度迁徙项目的上线,越来越多的朋友,网友问我们是如何实现的,是不是很难,怎么做到的。这里面我们打算写出我们的基本思路和项目的开发过程,以享对此项目有兴趣的网友。

一, 需求与时间的冲突

        项目的早期需求并不是只停留在中国地图版块上的,而是可以深入到每个省的版块,基本上是一个总分总的镜头深入的交互效果。而且还会有白天和黑夜的效果。如下图为早期的示意图形。


/media/upload/2014/02/02/baidu2_small.jpg
/media/upload/2014/02/02/baidu1_small.jpg


但是这个需求没有多长时间就被推翻了,考滤到时间不足,因此最终决定只保留了全国的地图版块而省去与各省版块的交互操作。于是诞生了第二版本:

/media/upload/2014/02/02/TOP10.jpg

/media/upload/2014/02/02/7TOP10.jpg

当你看到这个位置时,你肯定已经知道最终的样子并不是这样的,设计师都很苦逼,你懂得的,设计不但要具备高水平的设计能力,还要有不能摧毁的耐心:).个中的痛苦不在多述,如果你也是设计师,你会明白。

从 上图看,最终效果并不是与设计图一致,原因有二个,第一,对于万级数据,设计是无法绘制的,设计师能做的就是示意,这里也是开发的关键,在设计过程中与开 发人员进行了充分的沟通,也就是说开发人员要有一定的想象力和美术鉴赏力。第二,原稿中出的三次曲线,但最终客户想要的是二次曲线,模拟航线效果。

二,开发就是一个雕琢的过程,就象艺术品一样.

       为什么说开发就是一个雕琢过程,原因有三:

       1,具体的效果在设计师和开发人员的脑子里,你不知道什么样,我也不知道。需要一步一步的雕琢。

       2,数据级别是万级数据量,虽然每小时呈现量还没有达到100万级别,但是对于绘制性能仍然要有很高的要求,当发生冲突时,是牺牲性能还是牺牲效果,需要一步一步雕琢。

       3,对于百度用户这种级别的访问量和并发量,后台数据图生成的稳定性重于一切,手机版虽然只提供了读图功能,但是后台我们提供了一个强大的稳定的图形生形器。

      以上即为开发过程中的难点,1月4日正式开发,我们的开发人员开始了雕琢过程,我们曾在微博上直播过开发过程。如下图:

第一次连线实验效果

/media/upload/2014/02/02/baidus1.jpg
 

第一次弧线实验

/media/upload/2014/02/02/baidus2.png/media/upload/2014/02/02/baidus3.png

第一次排名就位实验:

/media/upload/2014/02/02/baidus5.jpg
 

上述的几个图形都是讲述在开发过程中的第一次。值得庆兴的是不管我们背后实验多少次,在1月13号第一次提交时,客户非常满意,这是我们值得欣慰的。在接下为数不多的时间里我们主要的任务集中在如何让前端的性能更流畅,让系统运行的更稳定。大体上的开发思路是是前端读取捷报数据推送过来的百度lbs数据,前端读取的是json接口数据。在前端flash中进行解析,绘制连以及曲线。编写排名逻辑,时间选择,日期选择逻辑等等。

三,手机端-强大稳定的图形生成器。

因为时间关系,手机端没有时间开发成app ,在项目开发之初,曾讨论过到底是用flash开发还是用 html5 开发,但在有限的时间内,我们最终决定采用flash开发可以在短时间内解决问题。但是手机端并不支持flash。所以最终使用服务器端生成图像,手机端读图的方式。后台我们提供了一个强大的图形生成器,每隔一段时间会生成300张以上数量的图形。与每个时间点和省市对应。

/media/upload/2014/02/02/baidu_m.jpg


四,未爆光的东东

最后,想在这里展示一下未爆光的东东,我们的动画师为此项目定制了两个小动画GIF,最终没有使用不得而知。如下:

 

五,写在最后

 项目上线后,赢得社会各界人士的肯定,全国各大电视台都在争相播放,社会各界人士争相评论。最让人激动的是百度迁徙项目上了除夕的新闻联播。做为参与此项目的开发公司,我们的小伙伴们倍感荣兴,也获得了前所未有的成就感! Cheers!

/media/upload/2014/02/02/baidup2.jpg
 

/media/upload/2014/02/02/baidup3.jpg


还没有玩过的朋友们不要错过哈!

项目地址 | 百度迁徙 

或直接访问如下网址: http://qianxi.baidu.com

关注万博思图微博账号 :   cnwebstudio


 

 

服务项目_SERVICE

关于我们

万博思图(北京)信息技术有限公司,专业的flash,flex开发团队,5年经验。公司致力于互联网上的业务的开展,对于互动网站行销,互联网应用程序开发有成熟的解决方案。我们关注互联网市场动态,关注新技术,更注重在新的领域不断探索发现。
万博思图业务内容主要包括企业品牌Flash网站开发,企业形象宣传Flash设计,动画,多媒体演示,Flex企业级应用程序开发,拥有众多成功案例,欢迎来电咨询。
 
COPYRIGHT BY WEBSTUDIO INTERACTIVE DESIGN Co.,Ltd. ALL RIGHTS RESERVED.
公司地址: 北京市朝阳区光华路15号院泰达时代中心4号楼704 邮编: 100026 EMAIL: WEBSTUDIO@WEBSTUDIO.COM.CN
电话: 010-59070059   (新号:010-59897050 010-59897060)  手机: 13693660520 传真: 010-59070059-801
京公网安备:110108006741      京ICP备:05013074号-1
王先生