《英雄联盟》新官网改版总结

首页我们通过 点击流系统 和 http://ta.qq.com 热区图 分析老官网的区块热门程度，分析出玩家关注的区块。我们采用了7天的统计数据。

在官网的常态的情况下（没有重大活动而引发部分区块点击猛增情况），通过上面的 点击流 和 热区图 可以分析得出，目前官网受玩家关注的区块有下面几个：

为什么轻质感扁平化的东西更适合阅读信息？

经过对UI提炼之后，就正式开始官网的视觉设计。我们尝试了几款不同的官网样式。

这是新官网的设计初稿，首先输出了上重下轻的设计思路，以头部的重质感搭配下面的文字信息来进行排版设计。 头部采用了厚重的材质对网站导航、下载按钮、快速按钮、轮播图、新闻公告、以及登录的个人信息进行设计，深色厚重的石材UI和残破的个人信息布匹UI，搭配《英雄联盟》的原画和，很好的体现了《英雄联盟》的质感、魔幻、黑暗的核心风格。 下部信息部分，为了更好铺展信息以便阅读，则采用了浅色调与头部进行划分。整体色调以之前提取的灰白为主，搭配绿色、橙色辅助。

第二稿延续了第一稿的设计结构，但在背景的过渡上采用了烟雾来进行过渡，使网站整体更有魔法元素，也没有第一版那么明显的切割，下载信息那一栏采用了《英雄联盟》游戏内的新UI的元素组合，让网站更贴近了游戏的新风格又不失信息的明确推送。 删除了第一版导航的厚重质感，尝试轻质感导航。轮播图和新闻区域则取消了质感，但依然采用了重色的底来展示新闻，这是为了从头部的重质感过渡到下面信息的轻质感。 在文字信息处，第二版也和第一版有较大的改变，首先和项目组沟通，取消了英雄联盟社区版块，从而减少了首页信息的承载，然后进行版块的设计优化，减少了横线的使用，让信息更加清晰化，阅读起来更顺畅。然后优化了版块的排列顺序，也更符合区块的重要层级。

确认稿在第二稿的基础上再进行了优化。头部的重色区延续了英雄联盟的蓝色，让用户更有亲切感，再次对头部的UI进行了削弱，让网站整体感更轻薄，更突出信息的传播。 因为头部的背景会随着版本或活动进行更换，为了后期的背景更换能够达到前期设计的效果，最后还是给导航增加了一个轻薄质感，让导航能够适应色彩不同的背景。

转自于：腾讯游戏TGideas