QQ飞车——小橘子的召唤

发表于2016-04-07
评论0 8.1k浏览

QQ飞车——小橘子的召唤

 In 视觉设计 on 2011-08-22 08:00:00 by 艾珀

  QQ飞车小橘子的完美蜕变?!三年了,她一直陪伴着我们,看着我们每一点成长,分享我们每一次喜悦,她就是一个Angel。欢迎天才少女初登场!“小橘子的召唤”互动站力求打造品牌虚拟代言人小橘子第一阶段的完美形象,配合当前整个中国网游行业极为少见的页面内嵌流媒体技术,时尚简洁的Web UI,炫酷动感的CG展示,打造了一个全新的饕餮盛宴。在这里跟大家一起分享一下设计的过程和经验。    
    01-画面效果定格   
    整个互动站主要是由五个定格画面衔接而成,实际上也是飞车新版本的五个重要按钮,分别是:1)新特性——招募系统 2)新套装 3)剧情视频  4)新赛道  5)剧情任务。   
    每个画面蕴含不同的寓意,我们希望每个定格画面效果充满张力和视觉冲击力,于是大胆采用了鱼眼、大光圈、大透视等手法,视觉效果更加丰富和动感。 
 

 

    02-动画脚本分镜   
    每个衔接定格画面的动画也是整站的重点和难点,因为五段不同的动画还要考虑开始和结果的动画衔接,确保每一段的独立性,即使单独跳转也要能接的自然,所以必须先构思好这些分镜脚本,并画好草图,再通过视频剪辑实现出来,这个过程纠结了很久,经过大家一起反复修改和推敲,终于震撼登场。    
    03-视频动画与flash交互   
    后期互动站运用了最新的页面内嵌流媒体技术,对这五段CG视频进行拼接和优化,并辅以每段定格画面的flash交互效果,让整站看起来更加动感和流畅;每个按钮触发效果,增加了CG缩略动画,方便快捷;同时,内页入口和弹出页面也添加了动态效果,增强了明显感和点击感,让整个互动站的逻辑更加清晰和完整。    

 

    04-视觉表现     
    因为考虑到整个互动站是为了更好的展示视频和定格页面,所以一屏之内考虑更多的是如何把最吸引玩家的东西体现出来,重要的按钮也要在一屏内显示完整并方便点击。   
    这次的互动站再次诠释了飞车的动感、酷炫、时尚的品牌风格,让小橘子的形象更加生动和完美。   
    a)色彩选用   
    主要以黑白灰和透明色为基调,配合时尚亮眼的荧光蓝还辅以紫灰等色彩,再通过小橘子身上的鲜艳的色彩,让整个互动站色彩更加丰富多样。     
    b)web UI提炼    
    最开始考虑UI表现的时候,想了很多复杂的元素,但都舍弃了,因为这个互动站最重要的还是最大化展示视频动画和画面,所以,后来提炼出一套简洁的UI,色彩时尚醒目,交互清晰明显,质感轻薄而不失设计感。      
    以上种种,就是希望给大家带来一个全新体验的交互站,最后,在大家齐心努力之下,我们的互动站终于火热上线,赶快来亲身体验一下吧!    
    体验地址:http://speed.qq.com/act/a20110520xjz/ 

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引