产品设计体会(2014)信息展现的设计

同样的一堆信息摆在面前,展现方式设计的好坏可以让用户感觉差异多大?为什么同样的一个“任务”,一天也能“完成”,一周也可能没法“完成”?

这个例子是我2007年从Google的一位产品经理那里听来的,任务的目的是展示美国的几个城市在不同月份的平均降水量。很自然的,一开始我们就会想到用一张表格,如下图,横轴是一月到十二月,纵轴是城市名称,分别是San FranciscoSeattleChicagoNew YorkMiami,表格中每个元素就是某城市在那个月的平均降水量,单位是“英寸每月”。

上图已经把所有的信息都展示出来了,但重点不够突出,各种信息都用一样的字体让人不知道一开始看哪里,而下图就优化了很多。首先各种文字用了不一样的字体,图表的标题最明显,让人一眼就知道这个图表是说什么的,月份与城市信息稍微弱化以突出数据内容,特别值得一提的是这里用了不同深浅的颜色来突出数据,让人很容易解读出某个城市全年整体的降水情况,降水季节分布等信息。

我常说“字不如表,表不如图”,再回忆一下上面的图表,你还能记住Miami8月的平均降水量么?我是不能,但我记得Miami在夏季的降水量很大。这给了我们启发,其实要传递的并不是具体的数字,而是每个城市在全年的降水量整体情况与分布,数据只是给极少数做科学研究的人,在需要的时候可以查到就可以了,在表现形式上,我们可以处理成鼠标悬停在某个水滴上的时候,就展现出相应的数字。于是,我们进一步优化出下图,用很符合读者心智模型的水滴大小、颜色深浅来表示不同的降水量区间。现在更加一目了然了,San Francisco最干,冬天稍微好一些;而New York全年降水很平均……

还可以优化么?是的,还可以。上面几个城市为什么会有这样的降水情况呢?我们可以如下图,把它们放在地图里,从地理的角度得到解释,比如San Francisco 因为三面环水,并受太平洋加利福尼亚寒流影响,旧金山是典型的凉夏型地中海式气候”,所以夏季降雨极少,冬天经常下雨。Miami则“拥有温暖、湿润的夏雨型暖副热带气候”,所以降水充沛。下图把时间轴做了个动态展现,拖动时间轴,我们可以看到几大城市,甚至可以推测出全美国在一年中各地的降水情况。当然,如此炫的表达也有其弱点,那就是没法如上图一次性看到所有信息了,这个需要我们来权衡利弊。

有个细节差点忘记,上图中左上角的logo,有没有让你想到什么?对了,flickr,同样的配色,同样的字体,同样的故意拼写错误,我想这应该是产品经理、产品设计师一种典型的闷骚表现吧。

------------------------------------------------------------如果你想第一时间看到最新内容, 就猛击此处订阅吧!

《产品设计体会(2014)信息展现的设计》有29个想法

  1. I think plus a function of mousemove on the third figure to show the detail precipitation would be better

  2. 学习了,不同的展现方式确实给用户不同的视觉体验、信息准确传递量。

  3. 这种工作应该由谁来作?产品经理、产品设计师、还是GUI设计师?在AliSoft是如何分工的?

    iamsujie Reply:

    @行云流水泵, 我们这点做的很不到位,是PD做的,但我觉得更应该是交互设计师做,PD应该给交互描述清楚商业目标,用户场景等等

  4. 这个东西怎么搞,哥们闲时想研究下自己做

  5. 你好,请教一个问题,在文章的最后提高”故意拼写错误”,请问故意编写错误的意义是什么?谢谢了!!!

    iamsujie Reply:

    @三根毛, 我觉得就是闷骚的一种表现啊,期待获得小众认同,创造一种亚文化、小团体密语,好比star trek迷见面会摆出spoke的手势一样吧,并没有什么现实意义。

  6. 请问最后两张图片是什么软件的功劳?就是雨点的那张还有最后的有滑动效果的那张。
    谢谢!

    iamsujie Reply:

    @iexjc, 是技术人员自己做的啊。。。

  7. 啊,对啊,不知使用的软件能否稍稍透露下,我也很想做类似的效果呢!我们的论文中有很多的数据需要处理呢。谢谢啦!

    iamsujie Reply:

    @iexjc, 这只是图。。。没人做过,如果要做的话,开发工程师直接上

  8. 每张图都有适用点,关键是看最终的需求,需要了解到什么样的程序。学习了~~多用心一点,相信会更有突破的。

  9. 这种一般情况下会想到用折线图吧?毕竟曲线会更直观一些才对。为啥没有提到呢?

    iamsujie Reply:

    @redleaf, 那次的例子中确实没提到,:)

  10. 感觉 数据图像化 也是发展趋势。
    之前不知道在哪里读的一个句子,很喜欢 –

    Life will an experience that we can watch in the future.

  11. 苏杰,我在看很多个页面的时候,文章的图片好像都打不开,我用的是safari浏览器,我以为是电脑的设置问题,有换了QQ浏览器,还是不行,是不是你上传的这些图片时间太久了?

    iamsujie Reply:

    应该是。。。有些超过5年了。。。

发表评论

电子邮件地址不会被公开。 必填项已用*标注