chevron-up bell reply instagram twitter2 feed3 finder search-25px-p0
换了主题,回归原生评论系统。

信息展现的设计

2009-12-16 . 阅读: 1,800 views

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

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

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

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

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

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

作者:iamsujie——信息展现的设计

分享到: 更多

左岸

爱读书,爱生活!

发表评论





14 Comments On 信息展现的设计

  1. 沙发。

  2. 看图说话啊

  3. 左岸现在也转载这个。。。有趣

    • @日月山人 @日月山人, 其实我对信息的展示方式还是比较热爱的,也有一定的研究!
      为什么我不可以转载这个呢?

      • @左岸 @左岸, 只是感觉左岸的视野面越来越宽了,惊讶佩服

  4. 字不如表,表不如图,有道理。

  5. 好文,选题不错,促进大家的思考

  6. 越到后来越直观,做事情确实还是要思考

  7. 早早有人想到了,工程难度有点高,迟迟没有得到资金支持,直观的数据图表,直观的软件控制界面都离不开好的图形设计,而现在图形设计从业人员也是痛苦一片
    此文用抽象的手法表现了设计行业的现实

  8. 好文,收藏至20ju.com

  9. 有理!支持!

  10. 越直观越有趣的东西是我们所热衷的,所以能够吸引我们的眼球。但对于计算机来说,二进制才是它的识别途径。不同的方法要对不同的对象…

    • @一个人的军队 @一个人的军队, 信息展现针对人,计算机可不在乎你想的有多复杂。