产品设计体会（2014）信息展现的设计

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

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

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

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

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

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