從去年六一兒童節(jié)的LOGO開(kāi)始，我們就要求以后的每一個(gè)節(jié)日FLASH LOGO設(shè)計(jì)時(shí)除了具備創(chuàng)意故事外，還必須設(shè)計(jì)一個(gè)小的互動(dòng)效果，當(dāng)受眾把鼠標(biāo)移到LOGO上面時(shí)（Rollover），會(huì)有響應(yīng)（Response）情節(jié)發(fā)生。
節(jié)日LOGO設(shè)計(jì)幾乎每一個(gè)網(wǎng)站都在做，之前有太多非常成功和優(yōu)秀的LOGO設(shè)計(jì)作品。作為后來(lái)者，我們一直努力希望在眾多的節(jié)日LOGO設(shè)計(jì)中走出一條（哪怕說(shuō)只有一點(diǎn)點(diǎn)）自己風(fēng)格的道路，老實(shí)說(shuō)，這一點(diǎn)都不容易。When you`re only No.2000+… you try harder…也許有朋友說(shuō)，在這些地方搞那么多沒(méi)用的東西，還不如把首頁(yè)那條BANNER取消了，把網(wǎng)站功能做好一點(diǎn)更實(shí)用。是的，我同意。但問(wèn)題是我只能做力所能及的事情，比如說(shuō)LOGO的動(dòng)畫(huà)設(shè)計(jì)，在這個(gè)設(shè)計(jì)范圍內(nèi)，希望用戶的體驗(yàn)?zāi)軌蚝靡稽c(diǎn)點(diǎn)，以減輕一下其它不足的罪過(guò)……
1.網(wǎng)絡(luò)上節(jié)日LOGO的簡(jiǎn)單分類(lèi)
我們對(duì)網(wǎng)絡(luò)上的節(jié)日LOGO進(jìn)行了一下簡(jiǎn)單的分類(lèi)，大概分為平面插圖、FLASH（or Gif）動(dòng)畫(huà)兩種類(lèi)型，而FLASH動(dòng)畫(huà)里面像Yahoo Korea等的國(guó)外網(wǎng)站，動(dòng)畫(huà)更加有互動(dòng)效果。平面插圖的節(jié)日LOGO通常都畫(huà)得相當(dāng)精美，而Google Logo除了插圖漂亮外，還有一個(gè)其它網(wǎng)站比較難模仿的特點(diǎn)：節(jié)日?qǐng)D案創(chuàng)意是和Google這六個(gè)字母緊密結(jié)合在一起的，這除了畫(huà)畫(huà)漂亮外，還必須具有無(wú)限的想象力，當(dāng)然，應(yīng)用環(huán)境的高度簡(jiǎn)潔也是其顯得突出的一個(gè)重要因素。
2.淘寶節(jié)日LOGO設(shè)計(jì)風(fēng)格的定位
由于淘寶首頁(yè)的內(nèi)容很多，考慮首頁(yè)整體下載速度之后，前端分配給我們LOGO可以設(shè)計(jì)的區(qū)域（包括淘寶網(wǎng)三個(gè)字）大概為250*53px（2009版首頁(yè)的節(jié)日LOGO尺寸），如果用插圖的形式來(lái)設(shè)計(jì)，圖形信息量比較少，而且還難以跳出前人的框框，所以我們決定以時(shí)長(zhǎng)線的展示形式來(lái)彌補(bǔ)設(shè)計(jì)空間的不足，即用小動(dòng)畫(huà)來(lái)設(shè)計(jì)LOGO。（六一兒童節(jié)之前的淘寶動(dòng)畫(huà)LOGO相關(guān)設(shè)計(jì)請(qǐng)查閱：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，大半年前發(fā)的文章居然忘記將Chinese URL改成English…）。當(dāng)然，這樣做也有風(fēng)險(xiǎn)，動(dòng)畫(huà)故事情節(jié)推進(jìn)需要一定時(shí)間，如果開(kāi)端不能吸引住受眾，大家在定格畫(huà)面之前早已失去耐心。
加入互動(dòng)小情節(jié)，為動(dòng)畫(huà)LOGO賦予更高的情感附加值。動(dòng)畫(huà)LOGO的確可以在視覺(jué)上更加吸引，但既然是用FLASH來(lái)設(shè)計(jì)的，為什么不利用一下基礎(chǔ)的Action Script命令來(lái)實(shí)現(xiàn)一些簡(jiǎn)單的互動(dòng)效果呢，因?yàn)閯?dòng)畫(huà)里面的每一個(gè)元素劇情發(fā)展都讓受眾充滿期待，如果我們把小動(dòng)畫(huà)設(shè)計(jì)成鼠標(biāo)經(jīng)過(guò)或者點(diǎn)擊后，還可以產(chǎn)生讓受眾意想不到的視覺(jué)效果，將讓他們感到驚喜，從而記住品牌甚至提升對(duì)品牌的好感度。
韓國(guó)Yahoo的動(dòng)畫(huà)LOGO設(shè)計(jì)一直是我們學(xué)習(xí)的榜樣，其原本也是平面插圖，大概2006年底圣誕節(jié)開(kāi)始變成互動(dòng)動(dòng)畫(huà)，每次觀摩他們的設(shè)計(jì)都讓我十分激動(dòng)，為他們的想象力所傾倒。但在互動(dòng)的設(shè)計(jì)邏輯上有所不同：他們的LOGO動(dòng)畫(huà)是用戶必須做出Rollover的動(dòng)作時(shí)，才開(kāi)始播放。也就是說(shuō)受眾用鼠標(biāo)移過(guò)LOGO，被看成是動(dòng)畫(huà)的一個(gè)開(kāi)關(guān)，如果我不想看，它也不會(huì)自動(dòng)播放，減少干擾。這樣的設(shè)計(jì)挺好的，但要首先培養(yǎng)用戶默認(rèn)節(jié)日LOGO是有動(dòng)畫(huà)情節(jié)的判斷力，否則的話，動(dòng)畫(huà)的播放率還真可能不高。我們剛開(kāi)始自然難以做到這一點(diǎn)，所以首先想到的是，先播放動(dòng)畫(huà)，定格后，再出現(xiàn)Rollover效果，定格若干秒之后，動(dòng)畫(huà)會(huì)回檔，重新播放。這樣的問(wèn)題是動(dòng)畫(huà)播放到定格時(shí)，可能有相當(dāng)一部分受眾不知道這時(shí)候LOGO是可以點(diǎn)擊以觸發(fā)支線情節(jié)的，從而分流掉部分用戶。雖然如此，我們?nèi)匀豢梢源_保全部用戶都可以首先看到動(dòng)畫(huà)，部分細(xì)心的觀眾更加可以在動(dòng)畫(huà)定格時(shí)，發(fā)現(xiàn)進(jìn)一步的交互效果，感受驚喜。
3.淘寶2009圣誕節(jié)及2010元旦的LOGO設(shè)計(jì)
設(shè)計(jì)六一兒童節(jié)LOGO的時(shí)候，我們采用的是bonus情節(jié)的方法，也就是說(shuō)，如果用戶鼠標(biāo)不與LOGO發(fā)生互動(dòng)的話，是看不到獎(jiǎng)勵(lì)的故事情節(jié)的。而2009圣誕節(jié)及2010的元旦LOGO是采用Recall的方法，當(dāng)動(dòng)畫(huà)播放到定格時(shí)，鼠標(biāo)響應(yīng)區(qū)域出現(xiàn)，rollover則重新播放之前已經(jīng)發(fā)生過(guò)的某個(gè)情節(jié)。
以上所有的互動(dòng)指令都是使用了鼠標(biāo)Rollover的方式，那么我們是否可以使用Press（左鍵點(diǎn)擊）的動(dòng)作呢？如果節(jié)日LOGO只是出現(xiàn)在首頁(yè)（像淘寶那樣），此時(shí)并不作為一個(gè)回到首頁(yè)的救生圈功能，那么Press與Rollover可以是一致的。然而在網(wǎng)絡(luò)廣告中，Press已經(jīng)默認(rèn)成為一個(gè)跳轉(zhuǎn)的指令，所以在一般只是起展示作用的視覺(jué)設(shè)計(jì)中，用Rollover比Press更容易讓受眾“安心”。不過(guò)如果在設(shè)計(jì)觸摸屏FLASH互動(dòng)動(dòng)畫(huà)時(shí)，Rollover又不太管用。
4.觸摸屏上的節(jié)日LOGO設(shè)計(jì)
傳統(tǒng)的FLASH動(dòng)畫(huà)由于可以將鼠標(biāo)懸停在響應(yīng)區(qū)(Hot zone)上方，所以通常會(huì)做Rollover動(dòng)畫(huà)來(lái)響應(yīng)動(dòng)作。（有Rollover動(dòng)畫(huà)后，一般不會(huì)再設(shè)計(jì)釋放（Release）動(dòng)畫(huà)，否則整個(gè)點(diǎn)擊過(guò)程冗余，影響用戶體驗(yàn)）。
使用觸摸屏?xí)r，手指放在感應(yīng)區(qū)上方懸停，并不能觸發(fā)交互動(dòng)作，因此絕大部分情況下，是沒(méi)有Rollover狀態(tài)的（觸摸屏加上WII技術(shù)又另當(dāng)別論）。所以，響應(yīng)用戶點(diǎn)擊行為的提示動(dòng)畫(huà)會(huì)在手指按下（Press）并且脫離接觸（Release）的那一瞬間才開(kāi)始。（注意是Release時(shí)才開(kāi)始，如果在Press時(shí)動(dòng)畫(huà)就開(kāi)始播放，手指就會(huì)把動(dòng)畫(huà)部分擋住。） 另外，比較高級(jí)的觸摸屏終端支持指尖長(zhǎng)按（Long Press）、拖曳（Drag）等行為，設(shè)計(jì)時(shí)可以作為交互動(dòng)作的補(bǔ)充。
從圖例可以看到，觸摸屏的FLASH LOGO動(dòng)畫(huà)設(shè)計(jì)與普通的設(shè)計(jì)差別并不大，除了Rollover動(dòng)作改成Press（Actually: Release）動(dòng)作外，最大的區(qū)別可能在于當(dāng)鼠標(biāo)Rollover時(shí)，動(dòng)畫(huà)可以不斷反復(fù)播放，而換成觸摸屏?xí)r，手指Press一下只能Recall一次，要Long Press才能不斷重復(fù)Recall的情節(jié)。在整個(gè)設(shè)計(jì)過(guò)程中，指尖Long Press, Double Click甚至Drag可以產(chǎn)生更豐富的互動(dòng)行為，從而引出更多的戲劇化情節(jié)和視覺(jué)效果。當(dāng)然，這種設(shè)計(jì)運(yùn)用在節(jié)日LOGO上成本比較高，（設(shè)計(jì)制作、用戶摸索和學(xué)習(xí)互動(dòng)行為兩方面的成本）。如果運(yùn)用在較大型的互動(dòng)動(dòng)畫(huà)或者網(wǎng)絡(luò)廣告上，則可以使受眾與廣告發(fā)生更多的互動(dòng)、從而提高用戶的參與度、提升其品牌體驗(yàn)。如果要讓消費(fèi)者實(shí)現(xiàn)跳轉(zhuǎn)怎么辦？用戶體驗(yàn)設(shè)計(jì)良好的網(wǎng)絡(luò)廣告通常都會(huì)把跳轉(zhuǎn)的響應(yīng)區(qū)域單獨(dú)劃分開(kāi)來(lái)。
小結(jié)一下, 無(wú)論是平面插圖、FLASH動(dòng)畫(huà)或者互動(dòng)動(dòng)畫(huà)，作為節(jié)日LOGO設(shè)計(jì)的形式來(lái)說(shuō)并沒(méi)有孰好孰壞之分，關(guān)鍵是能否與應(yīng)用的環(huán)境相搭配、是否與網(wǎng)站的個(gè)性和定位相吻合。在此基礎(chǔ)上，加上一點(diǎn)點(diǎn)無(wú)論是視覺(jué)還是交互上的想象力和創(chuàng)意，將使您的節(jié)日LOGO在浩如煙海的同質(zhì)化設(shè)計(jì)中脫穎而出、為用戶帶來(lái)驚喜、使他們留下良好的品牌印象。When we`re only No.2, we have to try harder.
上述三個(gè)淘寶節(jié)日LOGO SWF格式下載地址：
http://www.jolam.cn/download/Taobao_Logoes_2009_Pack2.rar
