QQ飞车——小橘子的召唤

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/