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

作者:健刚 来源:Taobao.com UED Team 时间:2010-01-20 10:31:00 

从去年六一儿童节的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是可以点击以触发支线情节的,从而分流掉部分用户。虽然如此,我们仍然可以确保全部用户都可以首先看到动画,部分细心的观众更加可以在动画定格时,发现进一步的交互效果,感受惊喜。

标签:淘宝,节日logo,交互设计
0
投稿

猜你喜欢

  • 浅析Git 分支的新建与合并

    2022-06-07 05:10:54
  • Python decimal模块使用方法详解

    2022-09-06 12:04:33
  • php验证session无效的解决方法

    2023-08-15 06:52:39
  • PL/SQL DEVELOPER 使用的一些技巧

    2024-01-22 00:49:29
  • js放大镜放大图片效果

    2024-04-30 08:51:38
  • Python线性回归实战分析

    2023-05-19 04:35:42
  • .NET5控制台程序使用EF连接MYSQL数据库的方法

    2024-01-25 08:07:43
  • python实现LRU热点缓存及原理

    2022-01-08 01:26:15
  • VMware中安装CentOS7(设置静态IP地址)并通过docker容器安装mySql数据库(超详细教程)

    2024-01-14 02:58:23
  • 利用机器学习预测房价

    2023-08-10 21:25:50
  • python WindowsError的错误代码详解

    2021-09-03 18:58:45
  • python为tornado添加recaptcha验证码功能

    2023-04-26 19:57:12
  • EXCEL数据上传到SQL SERVER中的简单实现方法

    2024-01-27 15:28:06
  • select into from和insert into select的使用举例详解

    2024-01-25 03:27:28
  • Windows下使Python2.x版本的解释器与3.x共存的方法

    2021-03-14 22:22:17
  • python用turtle库绘画圣诞树

    2023-05-24 19:35:40
  • Firebug 必须掌握的技巧

    2009-12-21 20:04:00
  • Python简单网络编程示例【客户端与服务端】

    2023-12-07 10:26:55
  • Python爬取十篇新闻统计TF-IDF

    2023-07-20 12:23:28
  • Python爬虫实现selenium处理iframe作用域问题

    2021-05-23 03:09:42
  • asp之家 网络编程 m.aspxhome.com