信息展现设计的例子

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

图4-13 把数据表格化

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

图4-14 突出重点信息

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

图4-15 数据可视化

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

《人人都是产品经理》

发表评论