豪杰同盟新官网设计原则

来自 葡萄谷游戏网>2019-05-17
深度

[ 葡萄谷游戏网原创专稿,未经允许请勿转载 ]

豪杰同盟新官网设计原则

这是腾讯TGideas官网的一篇文章,颠末过程豪杰同盟官网改版为例,讲述了腾讯的设计原则。


01.《豪杰同盟》项目配景


《豪杰同盟》是目前全球最火的大型moba类网游,从2010年中文官方网站上线至今已有4年阁下,在游戏分歧阶段,《豪杰同盟》官网也有相对应阶段的改版。今年作为已经公测二周年的成熟产品,结合《豪杰同盟》目前的市场时期和定位,咱咱咱们必要对《豪杰同盟》停止一次较为针对的改版。



02.《豪杰同盟》新官网设计作风走向


根据《豪杰同盟》的游戏画面和游戏原画等素材来看,其定位都属于黑暗、魔幻、重质感类的游戏,因此在之前的几次改版中,为了共同后期的市场履行和游戏的作风营建,都是结合游戏自己的重色系和重UI来设计官网,给早期的《豪杰同盟》停止市场作风定位。


e97547c633bc5fe8.jpg


《豪杰同盟》在颠末了几版重质感的官网后,已经让玩家对《豪杰同盟》的作风定位有所认识。《豪杰同盟》目前是一款公测两年的成熟产品,所承载的重点内容不再是作风的营建,而是有大批的游戏信息去推送,游戏攻略、游戏视频、游戏运动等等,这些都是目前这个阶段玩家加倍存眷的。所以这次改版,咱咱咱们必要把大批的信息有用的推送给玩家,而不再去对玩家停止作风冲击。

因此,咱咱咱们讨论出新版官网改版停止了开端偏向:


92de9bebd2536713.jpg


那么此次官网改版,如何给玩家更有用的 传递信息 是本次改版的中央。


在 传递信息 的同时,为了低落用户在阅读信息的时因其余元素对其构成过量的影响,所以咱咱咱们在官网设计傍边削弱重质感和低落画面的重色,采纳轻重结合的浅色调来实现官网的设计。


在目前官网的导航处,停止链接分类优化,使网站全体导航架构清楚明了,提高用户浏览效力,节省用户本钱。


03.《豪杰同盟》新官网设计元素提炼


在《豪杰同盟》第三赛季推出的同时,美国RIOT公司对《豪杰同盟》游戏全体UI和游戏作风停止了一次从新定义,全体的作风设计有较大的改变,重要色彩从原本的蓝调变成为了绿调,UI质感也变得更加细腻,从设计作风可以或许或许看出有高贵、华丽、魔幻、神秘的作风,全体设计更共性,更有辨识度。与其余范例的游戏构成为了鲜明的对比。

5aa6108c49f69042.jpg

5f50280d7fda91e0.jpg



04. 对《豪杰同盟》老官网阐发


颠末后期对此次官网改版偏向的阐发与开端确认,和对《豪杰同盟》新UI全体作风走向,咱咱咱们就可以或许或许开端准备官网首页的制作。 这里咱咱咱们先阐发目前老官网的数据统计,看看玩家存眷哪些区块,总结出一些成就。更有针对性的去停止此次的改版。


41fee051a6da9018.jpg


首页咱咱咱们颠末过程 点击流体系 和 http://ta.qq.com 热区图 阐发老官网的区块热门程度,阐收回玩家存眷的区块。咱咱咱们采纳了7天的统计数据。


f2da683a3b9bc564.jpg


在官网的常态的环境下(没有严重运动而引发部分区块点击猛增环常,颠末过程上面的 点击流 和 热区图 可以或许阐发得出,目前官网受玩家存眷的区块有下面几个:


4a1794401dcb3c96.jpg


颠末过程上面数据咱咱咱们可以或许或许看出,


1.免费豪杰,颠末过程热区图的观察,点击量显著比周围的区块高。这个区块出如今老官网不起眼的地位,甚至超过了二屏的地位,但点击量却异常的高,而且处于一个长期居高的状况,所以这次改版必要提前并安放在更正当的地位。


2.网站导航,就像是一张地图,可以或许让玩家疾速找到入口。颠末过程热区图和点击流的数据阐发,可以或许看出玩以谟戏资料,新手引导,下载游戏,视频专区和长期运动和功效页面的点击最高,这也相符咱咱咱们这次改版的意思,信息展现为主。可以或许看出导航的重要程度非同一样平常,所以必要对网站的导航停止内容梳理,从而让网站全体的导航架构清楚明了。


3.游戏新闻,颠末过程热区图的阐发,用户仅仅针对前面3-4条的新闻感兴趣,到了后面几条就大大低落,那么出现这个现象是因为新闻条数过量?还是因为显示了新闻摘要导致区块过长,构成为了阅读压力?要解决这个成就必要后期新官网上线后,再停止数据的对比能力有用得出。


4.轮播广告是一个点击量不稳固的区块,会跟着游戏运动出现点击量暴增的现象,(去年的翻卡牌和砸雪球等运动,轮播区块因展现了这些热门运动的广告,出现了点击量猛增的环境)因此可以或许或许看出,玩家对运动的存眷可以或许或许有用的颠末过程轮播这个区块流传出去,因此轮播区块也必要一个更涸墼勖且正当的地位。


5.长期运动、功效入口是目前官网轮播下的3个按钮,他目前承载着游戏的功效入口(如声望体系)和长期运动入口(如入驻校园运动),点击排行分离是点亮图标和声望体系再是高校排行。本次改版也将其地位支配在下载按钮也。最终效果待新官网上线后,再停止后续追踪。


6.游戏下载按钮是获得一款游戏客户端最重要的中央按钮,但颠末过程数据检查,官网首页的点击量却不是那么高,不过颠末过程查找原因,可以或许大致得出:


原因一 大部分点击量都颠末过程 引导页 分流走了,颠末过程检查后台统计数据,可以或许确定用户大部分颠末过程引导页的下载游戏按钮下载游戏。


原因二 颠末过程官网首页导航的“游戏下载”链接停止下载,检查后台数据,有大批点击量。 虽然首页下载按钮点击量偏低,但为了防止用户不是颠末过程引导页而进入的官网,所以官网首页的下载游戏按钮还是必需出如今显著的地区来引导用户下载。


7:其余如,赛事专区、战争学院,合作媒体,SOSO成就,帮助专区也颠末过程权严重小停止区块的划分。


颠末统计数据阐发以后,再和项目组停止相同把区块停止优化,分清主次。对内容停止了从上往下的重要层级划分,最终得出新版官网交互稿。


8afb586ea29468ce.jpg


对付小我登录中央


本次改版新增了用户登录体系,用户可以或许或许登录《豪杰同盟》网站,差别于游戏人生的是,用户登录后可以或许或许间接拉取游戏内的数据在官网的小我信息区块显示,如点券、金币、胜场数等等,还可以或许或许在玩家之间停止好友评估、战绩对比, 这无疑增长了用户对官网的黏性,增强了网站社交性,使得官网和游戏的联系性更大。


在新官网的交互中,可以或许或许发现之条件高的重点的区块都停止了晋升,出如今较高的地位。导航的梳理,运动中央的整合、新闻的简洁性,本周豪杰的地位调剂等等。


在停止完大批后期工作后,接下来就开端视觉设计稿的工作。



05. 对《豪杰同盟》新官网设计


之前阐发到《豪杰同盟》目前所处的阶段更偏向于信息的流传,所以采纳轻重结合的浅色调来设计,应用头部的质感和重色来连续《豪杰同盟》的作风,在共同内容区块的浅色内容来流传信息。


2eef490ed33eedd1.jpg


为什么轻质感扁平化的东西更得当阅读信息?

一款游戏后期应釉墼勖切近游戏的重质感设计,是为了造就用户对该游戏作风认识,而当用户造就到一定阶段后,轻质感扁平化的设计一定将取代重质感设计,为什么呢?因为一款游戏经营到一段光阴后,积聚下来的信息会很多,游戏攻略、新闻公告、运动履行等等数不胜数。而轻质感可以或许疾速高效、不大幅度干扰用户的环境下推送给用户停止阅读,轻质感的设计可以或许还原印刷类设计的排版,应用户阅读起来更顺畅。

在这个信息化的时代,光阴便是金钱,一些轻质感甚至可以或许或许间接用网页代码写进去,而不必要应用图片,也使得用户载入网站的速率加倍疾速,削减效劳器压力。



设计之前咱咱咱们在《豪杰同盟》的老官网和《豪杰同盟》新UI中提取出咱咱咱们必要的色彩,保留了老官网的深蓝色调作为重色主基调,再分离提取了新UI内的橙赤色和青绿色停止色彩搭配,共同内容区块的浅灰色来停止新官网的全体色调铺展,再提取新UI内的游戏花纹予以辅助设计。


83625c4ebffcd4e6.jpg


颠末对UI提炼之后,就正式开端官网的视觉设计。咱咱咱们尝试了几款分歧的官网样式。


8a437b9edb1b02a3.jpg


这是新官网的设计初稿,首先输入了上重下轻的设计思绪,以头部的重质感搭配下面的文字信息来停止排版设计。 头部采纳了厚重的材质对网站导航、下载按钮、疾速按钮、轮播图、新闻公告、和登录的小我信息停止设计,深色厚重的石材UI和残破的小我信息计I,搭配《豪杰同盟》的原画和,很好的表现了《豪杰同盟》的质感、魔幻、黑暗的中央作风。 下部信息部分,为了更好铺展信息以便阅读,则采纳了浅色调与头部停止划分。全体色调以之条件取的灰白为主,搭配绿色、橙色辅助。


e8b974e17167a7be.jpg


第二稿连续了第一稿纳杓布局,但在配景的过渡上采纳了烟雾来停止过渡,使网站全体更有魔法元素,也没有第一版那么显著那懈,下载信息那一栏采纳了《豪杰同盟》游戏内的新UI的元素组合,让网站更切近了游戏的新作风又不失信息的明白推送。 删除了第一版导航的厚重质感,尝试轻质感导航。轮播图和新闻地区则取消了质感,但依然采纳了重色的底来展现新闻,这是为了有部的重质感过渡较旅信息轻质感。 在文字信息处,第二版也和第一版有较大的改变,首先和项目组相同,取消了豪杰同盟社区版块,从而削减了首页信息的承载,然后停止版块纳杓优化,削减了横线的应用,让信息加倍清楚化,阅读起来更顺畅。然后优化了版块的排列顺序,也更相符区块的重要层级。


5f0ac2d685e04953.jpg


确认稿在第二稿的基础上再停止了优化。头部的重色区连续了豪杰同盟的蓝色,让用户更有亲热感,再次对头部的UI停止了削弱,让网站全体感更轻薄,更特出信息的流传。 因为头部的配景会跟着版本或运动停止更换,为了后期的配景更换可以或许到达后期设计的效果,末了还是给导航增长了一个轻薄质感,让导航可以或许顺应色彩分歧的配景。



06. 新功效介绍


此次改版中,咱咱咱们还添加了新功效和丰富了游戏资料,摆脱之前官网只是花瓶的说法。


bbf740580604b739.jpg



07.后续与总结


首页的设计至此实现为了,颠末过程后期的阐发,再到后面对官网的区块、设计作风的调剂优化,都到达了预期。 在全体内容方面,颠末过程对信息的优先级别的排列,可以或许或许更好的让用户阅读信息。 在视觉设计方面,采纳了大面积的轻质感,以到达本次 传递信息 的重要偏向,在加以部分头部的重色区块渲染游戏气氛,同时轻质感的设计可以或许或许有用的削减页面的图片体积,对网站的全体机能有所提高。




0283111e6a000105.jpg


文章评论
葡萄谷游戏网订阅号
友情链接:最新利率资讯网  智能科技资讯网  南京鞋业新闻网  IT技术网  司法知识网  冠熙新闻网  上海办公家具网  中国贷款网  鸟类大全网  中国公共资源发布网