close

淘寶節日LOGO互動設計小探討 - 網頁設計

http://webdesign.zoapcon.com

從去年六一兒童節的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是可以點擊以觸發支線情節的,從而分流掉部分用戶。雖然如此,我們仍然可以確保全部用戶都可以首先看到動畫,部分細心的觀眾更加可以在動畫定格時,發現進一步的交互效果,感受驚喜。


arrow
arrow
    文章標籤
    網頁設計 web design
    全站熱搜

    imarketin 發表在 痞客邦 留言(0) 人氣()