When we`re only No.2, we try harder之淘宝节日LOGO互动设计小探讨

从去年六一儿童节的LOGO开始，我们就要求以后的每一个节日FLASH LOGO设计时除了具备创意故事外，还必须设计一个小的互动效果，当受众把鼠标移到LOGO上面时（Rollover），会有响应（Response）情节发生。

节日LOGO设计几乎每一个网站都在做，之前有太多非常成功和优秀的LOGO设计作品。作为后来者，我们一直努力希望在众多的节日LOGO设计中走出一条（哪怕说只有一点点）自己风格的道路，老实说，这一点都不容易。When you`re only No.2000+… you try harder…也许有朋友说，在这些地方搞那么多没用的东西，还不如把首页那条BANNER取消了，把网站功能做好一点更实用。是的，我同意。但问题是我只能做力所能及的事情，比如说LOGO的动画设计，在这个设计范围内，希望用户的体验能够好一点点，以减轻一下其它不足的罪过……

1.网络上节日LOGO的简单分类

我们对网络上的节日LOGO进行了一下简单的分类，大概分为平面插图、FLASH（or Gif）动画两种类型，而FLASH动画里面像Yahoo Korea等的国外网站，动画更加有互动效果。平面插图的节日LOGO通常都画得相当精美，而Google Logo除了插图漂亮外，还有一个其它网站比较难模仿的特点：节日图案创意是和Google这六个字母紧密结合在一起的，这除了画画漂亮外，还必须具有无限的想象力，当然，应用环境的高度简洁也是其显得突出的一个重要因素。

2.淘宝节日LOGO设计风格的定位

由于淘宝首页的内容很多，考虑首页整体下载速度之后，前端分配给我们LOGO可以设计的区域（包括淘宝网三个字）大概为250*53px（2009版首页的节日LOGO尺寸），如果用插图的形式来设计，图形信息量比较少，而且还难以跳出前人的框框，所以我们决定以时长线的展示形式来弥补设计空间的不足，即用小动画来设计LOGO。（六一儿童节之前的淘宝动画LOGO相关设计请查阅：http://ued.taobao.com/blog/2009/05/18/2009％E6％B7％98％E5％AE％9D％E7％BD％91％E5％8A％A8％E7％94％BB％E8％8A％82％E6％97％A5logo％E7％AC％AC％E4％B8％80％E5％AD％A3/ OMG，大半年前发的文章居然忘记将Chinese URL改成English…）。当然，这样做也有风险，动画故事情节推进需要一定时间，如果开端不能吸引住受众，大家在定格画面之前早已失去耐心。

加入互动小情节，为动画LOGO赋予更高的情感附加值。动画LOGO的确可以在视觉上更加吸引，但既然是用FLASH来设计的，为什么不利用一下基础的Action Script命令来实现一些简单的互动效果呢，因为动画里面的每一个元素剧情发展都让受众充满期待，如果我们把小动画设计成鼠标经过或者点击后，还可以产生让受众意想不到的视觉效果，将让他们感到惊喜，从而记住品牌甚至提升对品牌的好感度。

韩国Yahoo的动画LOGO设计一直是我们学习的榜样，其原本也是平面插图，大概2006年底圣诞节开始变成互动动画，每次观摩他们的设计都让我十分激动，为他们的想象力所倾倒。但在互动的设计逻辑上有所不同：他们的LOGO动画是用户必须做出Rollover的动作时，才开始播放。也就是说受众用鼠标移过LOGO，被看成是动画的一个开关，如果我不想看，它也不会自动播放，减少干扰。这样的设计挺好的，但要首先培养用户默认节日LOGO是有动画情节的判断力，否则的话，动画的播放率还真可能不高。我们刚开始自然难以做到这一点，所以首先想到的是，先播放动画，定格后，再出现Rollover效果，定格若干秒之后，动画会回档，重新播放。这样的问题是动画播放到定格时，可能有相当一部分受众不知道这时候LOGO是可以点击以触发支线情节的，从而分流掉部分用户。虽然如此，我们仍然可以确保全部用户都可以首先看到动画，部分细心的观众更加可以在动画定格时，发现进一步的交互效果，感受惊喜。