• 百度统计流量研究院设计小结 - 可视化的快乐
    时间:2012-03-29   作者:佚名   出处:互联网

    百度统计流量研究院为了将数据更好的传达给用户,我们采用了动态数据可视化的方式(Interactive Infographic)。希望我们的设计能将用户带入到新鲜、愉悦的氛围之中。当然,我们在设计的过程中也体会到了可视化的快乐,并且希望与大家一同分享。

    好的流程是成功的一半

    预估难度、多部门协作:好的沟通流程是成功的一半。在设计最初,首先应当评估的就是项目开发难度。若开发难度较大,或者说开发人员对于可视化产品的制作经验较少,则最好引入多部门协作的工作方式,尽量避免设计与实现脱节的情况出现。

     

     统筹设计、纸上文章:统筹设计是十分重要的,因为它可以保证你的设计思路是连贯的、有脉络的。以我们的经验来见,从最初的设计想法到低保真的原型都可以通过手绘+贴纸的方式来实现。“纸上文章”最大的好处就是极大的缩短了迭代所学的时间,并且给予了各部门同学更加直观、简洁的印象,对于多部门协作十分有利。

     

    积极参与:UE的工作不仅是把完整的设计方案呈现出来,还应该保证最终产品高品质的上线。举个例子,在开发人员开发操作系统报告时,采取了真实自然光的渲染方式。而实际上在背景色较深的页面上采用这种渲染方式会使得图表主体的立体感变差,并且失去质感。对于这种情况, UE迅速与开发人员沟通,由UE来负责flash图片的绘制工作,实现了高质感、立体感强的效果。

     


     

    设计详解

     

    在设计之初,我们的主要思想确定为用多图表联动交互的方式多维度的展示数据,并且确定了在图表中突出展现给用户最需要的信息,即信噪比原则。在这个过程中,我们利用了改变图形指标,引入具象元素,以及将生活情感化总结等方式,将数据可视化展现。同时我们也仔细的研究了数据的规律与趋势,选择了合理的展示策略。下面结合一些图片来向大家详细叙说大体的设计思路:

     

    多图表联动交互:多图表联动交互本身就是一种很有视觉冲击力的交互方式,也可以让我们从不同纬度来查看数据。用户的一次操作就可以带动多图表的更新,其中的趣味性大家可以去体验。

     

    信噪比原则:用户关注的信息是主流的数据的占比与趋势等信息,而不是末尾的非主流数据的信息。因此在设计过程中尽量的剔除无参考意义的信息是十分重要的,例如在分辨率使用情况报告中的占比很小非标准分辨率就是无参考意义的信息。同时对于数据量较多的,比较繁琐的数据,把最重要的数据突出展示,同时也提供用户全集数据以供查看。

    上图是我们在设计过程中的一个被否决的方案,这个方案没有很好的突出重点的信息,也不方便用户查看全集的信息。而最终我们希望传达给用户的信息应该是第一印象即可大致的了解数据的分布,随后也可对更多的数据进行更加详细的查看分析。 

    改变图形指标:仔细探究数据与图形之间的逻辑关系,找出可以代表数据分布的图形指标(颜色、形状、面积等)。采用较为新颖的图形指标,会给用户带来新鲜的感受,这里采用了面积指标。

     引入具象元素:在设计中融入具象元素,能够将用户快速的带入到产品之中,让用户更直观的了解内容。

     将生活情感化总结:对数据的规律进行总结,将生活的类似经验进行总结,运用到设计之中,赋予设计以情感。在操作系统市场份额报告中,用星系的概念来表现微软在操作系统这一领域的统治地位。

     将生活情感化总结:同样的,越来越多浏览器厂家就像切吐司面包一样在瓜分市场份额,百花齐放。

     合理的展示策略:例如在对网民地域分布报告的数据进行分析后,我们发现除广东省外,其他省的数据基本呈线性排列的一个趋势,并且网民地域分布数据波动较小。在各省数据差异较小情况下,我们放弃了普遍被采用的固定数据对应固定图形的策略,而是采用了指定数据最大值与最小值对应的图形范围,期间数据按照比例展示图形的方式。通过这种方式,各省之间的数据差异一目了然。除此之外,在设计的过程中,我们导入了真实的数据作为依据,藉此保证视觉效果的和谐统一。

    网友留言/评论

    我要留言/评论

    相关文章

    jQuery 工具类库集锦:jQuery 是一个非常棒的类库,但是为了保证代码的干净以及代码的精简,它只提供最核心的功能。所以就有了很多其他的工具来丰富jQuery的功能。我在使用这些工具的时候发现我常常重复的编写一些代码,所以我就开始把它们整理到一个类库中。我把这些代码都包装成了jQuery的代码,但这并不是必须的,你也可以在其他JS类库中使用他们,或者单独使用。
    手机应用开发者需注意的20个事项:你想要成为手机开发者吗?你的目标可能是从应用商店中赚取大量金钱,也可能只是为了寻找新的挑战。无论你的目的是什么,当你设计应用时,可能需要考虑到代码层面之外的某些东西。
    产品经理应该如何写周报?:奋斗在互联网的每位同学,基本上都要写周报,更甚者还要写日报,但多少人打心底里觉得写的周报没有意义?只是为了写而写?今天,不妨从两个方面,简单说说,如何让周报真正的有意义和有效果。
    使用JSFL高效率做Flash:JSFL指Flash JavaScript,是JavaScript脚本文件,是用来扩展Flash IDE的重要工具。学会它、熟练使用它之后你会惊讶的发现,哇,原来可以这么高效率的做Flash啊!下面我们来看一看怎么使用JSFL。
    每个程序员都应读的书 - 首推《代码大全》:“如果能时光倒流,回到过去,作为一个开发人员,你可以告诉自己在职业生涯初期应该读一本,你会选择哪本书呢?我希望这个书单列表内容丰富,可以涵盖很多东西。” 很多程序员响应,他们在推荐时也写下自己的评语。以前就有国内网友介绍这个程序员书单,不过都是推荐数 Top 10的书。其实除了前10本之外,推荐数前30左右的书籍都算经典,笔者整理编译这个问答贴,同时摘译部分推荐人的评语。下面就按照各本书的推荐数排列。
    JavaScript中的基本数据类型介绍:大家经常可以见到javascript中的一些数据类型,比如“undefined”、“boolean”、“string”等等,但是ECMAScipt中的变量又是松散类型的,所谓松散类型就是可以用来保存任何类型的数据。所以javascript中用var关键字来定义变量,所以无法确定变量一定会存储什么值,也就不知道变量到底会是什么类型,因为可以随时改变变量的类型。今天这篇文章就和大家一起来学习javascript中的类型,这个问题虽然简单,但是还是有很多童鞋在很多时候没办法真正掌握它,其中不正确的地方请大家指出来,共同学习,共同进步。
    使用jQuery控制图片的hover效果:本文介绍如何网站中应用添加超酷的hover效果
    极其实用 10 款 jQuery 日历插件:以下日历插件都非常棒,非常实用,下面分享给开发者们。