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

3.淘宝2009圣诞节及2010元旦的LOGO设计

设计六一儿童节LOGO的时候,我们采用的是bonus情节的方法,也就是说,如果用户鼠标不与LOGO发生互动的话,是看不到奖励的故事情节的。而2009圣诞节及2010的元旦LOGO是采用Recall的方法,当动画播放到定格时,鼠标响应区域出现,rollover则重新播放之前已经发生过的某个情节。

以上所有的互动指令都是使用了鼠标Rollover的方式,那么我们是否可以使用Press(左键点击)的动作呢?如果节日LOGO只是出现在首页(像淘宝那样),此时并不作为一个回到首页的救生圈功能,那么Press与Rollover可以是一致的。然而在网络广告中,Press已经默认成为一个跳转的指令,所以在一般只是起展示作用的视觉设计中,用Rollover比Press更容易让受众“安心”。不过如果在设计触摸屏FLASH互动动画时,Rollover又不太管用。

4.触摸屏上的节日LOGO设计

传统的FLASH动画由于可以将鼠标悬停在响应区(Hot zone)上方,所以通常会做Rollover动画来响应动作。(有Rollover动画后,一般不会再设计释放(Release)动画,否则整个点击过程冗余,影响用户体验)。

使用触摸屏时,手指放在感应区上方悬停,并不能触发交互动作,因此绝大部分情况下,是没有Rollover状态的(触摸屏加上WII技术又另当别论)。所以,响应用户点击行为的提示动画会在手指按下(Press)并且脱离接触(Release)的那一瞬间才开始。(注意是Release时才开始,如果在Press时动画就开始播放,手指就会把动画部分挡住。) 另外,比较高级的触摸屏终端支持指尖长按(Long Press)、拖曳(Drag)等行为,设计时可以作为交互动作的补充。

从图例可以看到,触摸屏的FLASH LOGO动画设计与普通的设计差别并不大,除了Rollover动作改成Press(Actually: Release)动作外,最大的区别可能在于当鼠标Rollover时,动画可以不断反复播放,而换成触摸屏时,手指Press一下只能Recall一次,要Long Press才能不断重复Recall的情节。在整个设计过程中,指尖Long Press, Double Click甚至Drag可以产生更丰富的互动行为,从而引出更多的戏剧化情节和视觉效果。当然,这种设计运用在节日LOGO上成本比较高,(设计制作、用户摸索和学习互动行为两方面的成本)。如果运用在较大型的互动动画或者网络广告上,则可以使受众与广告发生更多的互动、从而提高用户的参与度、提升其品牌体验。如果要让消费者实现跳转怎么办?用户体验设计良好的网络广告通常都会把跳转的响应区域单独划分开来。

小结一下, 无论是平面插图、FLASH动画或者互动动画,作为节日LOGO设计的形式来说并没有孰好孰坏之分,关键是能否与应用的环境相搭配、是否与网站的个性和定位相吻合。在此基础上,加上一点点无论是视觉还是交互上的想象力和创意,将使您的节日LOGO在浩如烟海的同质化设计中脱颖而出、为用户带来惊喜、使他们留下良好的品牌印象。When we`re only No.2, we have to try harder.

上述三个淘宝节日LOGO SWF格式下载地址
http://www.jolam.cn/download/Taobao_Logoes_2009_Pack2.rar

时间: 2024-10-23 07:21:52

用户提亚设计实例:节日LOGO互动设计讨论的相关文章

制作节日logo 敲开2011元旦LOGO设计

又到新年,先祝大家节日快乐.在元旦佳节之际,妈妈首页logo也换上新装. 这里就给大家分享下这个logo整个创意及制作的心得. 做这个logo前,先明确下目的和功能:1时令性.2趣味性.作为元旦的logo必须符合当下季节以及节日气氛,这是最基础的,其次则是能给用户提供良好的体验感觉,使其愉悦和认同.本着这两点,再进一步分析,列出与元旦相关的各个元素:通过对元旦相关元素筛选组合,最后决定通过砸蛋来实现由2010到2011的变化,前一个0为一只兔子,后一个0为蛋,当蛋砸破跳出的胡萝卜为1.下图为lo

WebJX收集可爱卡通角色Logo设计实例

想让你的访客印象深刻,想让你的网站不同寻常,可能一个独特创意的Logo是非常重要的.一个符合网站形象和内容的Logo在为访客传达这些基本内容的同时,能更好地让用户感到独一无二的创意应该会更好,用一些可爱的卡通角色创意来设计你的Logo,就是一个非常不错的选择了,这里就是来自Logomoose的20个可爱卡通角色Logo设计实例.   By: Dirk Leys By: JT Knight By: Floris Voorveld By: Dan Sensecall By: JT Knight By

网站交互设计实例:正确的引导赢得用户的忠诚

文章描述:网站交互设计实例:正确的引导赢得用户的忠诚. 网站上,用和主色调对比很强的颜色或质感很强的按钮吸引用户进行操作,从而促成交易,或浏览相关重要信息. 正确的引导,符合了人机工程原理,优化了用户体验,给用户以易用.互动性.从而使网站给用户留下了美好印象,用户倍感温暖,加大了第二次访问的可能性. 那么反之,不正确的引导--误导,会是一种什么情况.笔者上周曾去南京一趟,便在沪宁城际高铁常州站站台遇到了误导. 笔者是高铁5号车厢,可是在其旁边不远却有一个有明显的动车13号车厢,该标志很明显很清晰

百度启用漫画大师几米设计中秋的LOGO

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 9月25日中秋节这天,百度首页上出现了一只笔法工细但又不失卡通式顽皮的"月兔",这个生趣盎然的节日LOGO,出自台湾著名漫画家几米之手. "几米用浪漫而唯美的笔法,将大家记忆中最富生机的中秋元素提炼出来,为全体百度网友祈福.无论你多么繁忙,哪怕你身在海外,百度希望通过这一LOGO,连接起每一个中文网民对中秋的文化

产品交互设计实例:首都机场的点烟器

文章描述:产品交互设计实例:首都机场的点烟器. 首都机场的吸烟室里并不像其他机场那样放几个固定的打火机,而是点烟器,和车载点烟器基本是一样的:先按下加热,加热好后,它会自动弹起,拔出来,里面的电阻丝已经是红红的了,就可以点烟了.上图为车载点烟器,与首都机场的点烟器一样,加热过程中只是被按下去了,未显示进度,也未能形象的表现出"正在加热"的含义. 我走到点烟器的近前,按下,让它加热,然后等待,等了一会儿还不见动静,不知是仍在加热还是出了故障.吸烟室里很多人,感觉自己被别人看着,不会用这玩

以用户为中心设计:探讨产品如何满足不同类型的用户

文章描述:以用户为中心设计是产品设计的永恒主题这一观点得到了几乎所有人的认同.既然要把用户放到最高的位置,满足用户的需求,那么设计者在了解产品之前,必须了解用户. 圣经中的上帝说,要有光,于是就有了光.我们不是上帝,产品的设计研发上市销售可没有这么轻松,不能说我要有用户便会带来用户.它必须是紧密结合用户自身特点,满足特定需求的.本来想谈谈产品如何吸引用户,后来发觉话题拉的太广太深,吸引用户的方法包含了产品生命周期中不少营销手段,自然也不在设计者的关注范围内,于是把标题改为闲聊按需设计,探讨一下产

网页设计参考:出色的30个网页按钮设计实例

如何设计完美"勾引"用户点击的按钮好的按钮设计一定会是醒目且能"勾引"用户眼球的.以下是好的按钮设计必不可少的5个特征: 1.颜色 颜色一定要能与平静的页面相比更加与众不同,因此它要更亮而且有高对比度的颜色. 图1 2.位置 它们应当"座落于"用户期望更容易找到它们的地方.产品旁边.页头.导航的顶部右侧-这些都是醒目且不难找到的地方. 图2 3.文字表达 在按钮上使用什么文字表达给用户是非常重要的.它应当简短并切中要点(不罗嗦),并以动词开始,如

Webjx收集55个独特的创造性的博客设计实例

有世界各地的百万计的blog,所以这是一个挑战站在独特的设计了.也许有人会说,所有重要的是内容,但我强烈反对.现在,我自己的博客设计看起来很可怜,我真的知道的事项.如果您离开专业的外观和感觉你会转换成长的时间,游客,运行用户容易得多. 这一次,我想展示真正成功的和创造性的我通过搜索和比较,让您找到所需的很多灵感博客设计,并为自己实在太一点点.网页教学网分为三类-黑暗设计魅力1-10,色彩丰富,非常有创意的设计魅力11-45和所有55个博客设计的清洁和典雅的设计魅力46-55.希望您会喜欢这一个!

72个电子商务网站产品价格列表设计实例

电子商务的发展日新月异,越来越多的产品开始在网上销售,这对于网络销售商来说,意味着可以用更高的性价比来吸引消费者.相应地,使用尽可能诱人的方式设计价格等级以有效的鼓励用户购买,就成为一门艺术了. 从大量网站中收集出来的优秀的此类网站对设计师来说或许会有很大的帮助.从下面的例子中吸取精华,并超越它们吧! 1. Confiture 列表设计实例-商务英语写作实例精解"> 2. Ballpark 3. tolingo 4. Sendloop 5. Newsberry 6. Are My Site