怪物猎人online-以点带面,狩猎至此进化

发表于2016-03-29
评论0 885浏览

怪物猎人online-以点带面,狩猎至此进化

 In 视觉设计 on 2013-12-16 17:28:32 by 黑米

在经历了大家期待已久的首次测试之后,由CAPCOM和腾讯游戏联合出品、CryENGINE3打造的次世代动作网游《怪物猎人OL》在2013年下旬迎来了第二次测试。在这次《怪物猎人OL》的掠食封测中,新的怪物,新的武器,新的场景,新的模式的加入,让玩家对《怪物猎人OL》有了更加全面的认识。

针对游戏所处阶段,这次的官方网站肩负着视觉品牌刷新的重任,同时也针对阶段须要承载着内容和功能上的扩容。

1.前期-设计与思考

 在项目启动前,有以下两点是针对这次官网改版的核心向的要求:

1.游戏相关核心内容的充分展示

2.提炼出玩家最感兴趣的内容,减少首页跳出率。板块布局更清晰合理。

游戏相关的核心内容展示分两点,一点是游戏相关资料内容的展示,另外一点是游戏的视觉内容展示。目的是让用户有第一印象,并有二次访问行为,增加访问深度,留存用户。

回到游戏本身,怪物猎人系列作品接近10年,从整体来看,黏度较高,玩家众多。但网游化之后,用户群体发生了一些转变,它需要面对更多不同向性的玩家,同时也包括跨平台老玩家,对于这款产品在整体视觉上需要有新的认知,同时保留原作风格。

2设计与执行   

第二次测试新登场的怪物:

 

 

怪物猎人这款游戏的品牌识别度是以怪物本身为主的,考虑到识别性的普及和新用户对此款游戏的认知,结合这些游戏内的怪物素材,将官网首页的TOP部分进行了直接展示,能更好、更直接的起到开门见山一目了然的作用,并且根据运营的需要,以两天为一个周期的频率更新登场怪物,配合对外宣传提高玩家对网站的关注度。提炼出“登场亮相”这个概念。类似新人介绍,是需要用户去对外貌

特征的一个感官上的认知,怪物本身的肢体语言是需要有足够的气场才能突出整个页面的视觉表现并达到预期目的的,因此对怪物的动作形体,也有所调整和取舍。

 对于怪物猎人OL这款游戏产品而言,网站是用户在接触游戏之前了解游戏的最重要的渠道,而网站又以视觉和用户体验等来传达这些信息,提炼出产品的视觉符号,以此作为用户了解产品的基点是本次2测改版的主要方向,以点带面,让没有进入到游戏去体验游戏的玩家能够从网站上看到更多游戏的内容,并留有印象达到品牌刷新的目的。

结合运营的需求,主视觉为6个可以轮换的怪物,在用户体验上考虑的较多的是在不影响于阅读的情况下点击操作更加方便,和整体风格融合。侧边栏做了分辨率自适应的处理。

 

 

在官网ui上,延续之前的较重的色调和质感,做了一些减法,让整体看上去不至于太过繁琐。对于一些按钮和板块的处理,在统一调性的情况下弱化厚重质感带来的压抑,尝试添加一些灵动活跃的元素,趋于厚重和扁平化之间。

整体效果预览:

广告落地页&视频站:

3数据分析:

侧边的主视觉轮播按钮在热区图上的分布说明在分辨率的自适应上满足要求并不影响视觉和内容的展示。由点击的数量上可以从侧面反映玩家关心的内容分布在:游戏视频,武器出招表,猎人图鉴等,首屏的主视觉由于按钮的点击范围的扩大,方便了玩家的点击查找,为整个官网点击率最高的区域,间接说明了玩家对于游戏内容想要更多的了解。

 

官网改版后,PV提高至6倍,UV提高至5倍,(包含游戏测试及对外宣传等其他原因)根据之前官网的情况,在新官网改版时做了针对性调整,将之前核心内容充分展现在官网首页,扩充了官网广告位,也为官网后期的扩展预留了较多的空间。

 

官网内容布局经过重新调整,用户感兴趣的内容得到展示,访问2-8页用户比例及次数大幅提高。官网内容布局达到预期效果,但仍有提升空间。

 

 

改版后,游戏资料性内容在首页得到了充分的展现,有二次访问行为的用户比例大幅提高,官网首页跳出率由50%下降为30%左右

总结:

本次2测官网改版,落地页设计,项目组和市场品牌给予大力的支持,在前期的沟通里给了设计师很大的自由发挥的空间,对于网站上线后的数据梳理较为清晰透彻。

作为设计师,在经历这次项目中有几点感悟,

1,品牌的力量很强大,但是塑造品牌的过程需要大家的共同努力。

2,有些产品,在保证用户体验和阅读舒适度的情况下,为了让网页有“故事”可以让网页增加一些质感。并不必为了扁平化而去做设计。

3,满足玩家的感情需求和满足项目组的项目诉求,两者之间是没有必然冲突的。

4作为一个设计师,始终以玩家和用户的角度去分析项目,设计作品。这是非常重要的。

 

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