根据我查到的资料，英雄联盟新官网的设计元素提炼主要是为了突出游戏的特点和风格。在《英雄联盟》第三赛季推出的同时，美国RIOT公司对《英雄联盟》游戏整体UI以及游戏风格进行了一次重新定义，整体的风格设计有较大的改变，主要色彩从原本的蓝调变成了绿调，UI质感也变得更为细腻，从设计风格可以看出有高贵、华丽、魔幻、神秘的风格，整体设计更个性，更有辨识度。
在前期对官网改版方向的分析与初步确认，以及对《英雄联盟》新UI整体风格走向的基础上，我们可以开始准备官网首页的制作。为了更有针对性地进行此次改版，我们首先需要分析目前老官网的数据统计，以了解玩家关注哪些区块，总结出一些问题。通过点击流系统和热区图分析老官网的区块热门程度，我们得出了玩家关注的区块，并采用了7天的统计数据。
在官网常态情况下(没有重大活动引发部分区块点击猛增),通过上面的点击流和热区图可以分析得出，目前官网受玩家关注的区块有以下几个：
1. 免费英雄：通过热区图观察，点击量明显比周围区块高。这个区块出现在老官网不起眼的位置，甚至超过了二屏的位置，但点击量却异常高，而且处于一个长期居高的状态。因此，这次改版需要提前并安排在更合理的位置。
2. 网站导航：就像一张地图，可以让玩家快速找到入口。通过热区图和点击流数据分析，可以看出玩家在游戏资料、新手引导、下载游戏、视频专区以及长期活动和功能页面的点击最高。这也符合我们这次改版的意思，信息展示为主。这说明导航的重要程度非同一般，所以需要对网站的导航进行内容梳理，使网站整体的导航架构清晰明了。
3. 游戏新闻：通过热区图分析，用户仅对前面3-4条新闻感兴趣，到了后面几条就大大降低。这个现象是因为新闻条数过多？还是因为显示了新闻摘要导致区块过长，造成了阅读压力？要解决这个问题，需要在后期新官网上线后进行数据对比才能有效得出结论。
4. 轮播广告：这是一个点击量不稳定的区块，会随着游戏活动出现点击量暴增的现象(如去年的翻卡牌和砸雪球等活动)。因此，可以看出玩家对活动的关注可以通过轮播区块传播出去。为此，轮播区块也需要一个更好且合理的位置。
5. 长期活动、功能入口：这是目前官网轮播下的3个按钮，它们目前承载着游戏的功能入口(如声望系统)和长期活动入口(如入驻校园活动)。点击排行分别是点亮图标、声望系统和高校排行。本次改版将把它们的位置安排在下载按钮右侧。具体的最终效果需要待新官网上线后进行后续追踪。
6. 游戏下载按钮：这是获得一款游戏客户端最重要的核心按钮。然而，通过数据查看，官网首页的点击量并不是很高。尽管如此，通过查找原因，我们可以大致得出：
经过对《英雄联盟》新官网的分析和设计，我们提出了以下改版方案：
一、引导页优化
1. 大部分点击量都通过引导页分流走了，因此我们需要在引导页上加强下载游戏按钮的醒目程度，以便用户更方便地进行下载。
2. 虽然首页下载按钮点击量偏低，但为了防止用户不是通过引导页而进入的官网，所以官网首页的下载游戏按钮还是必须出现在明显的区域来引导用户下载。
3. 我们还需要对其他如赛事专区、战争学院、合作媒体、SOSO问题、帮助专区等板块进行权重大小的区块划分，以便更好地组织内容。
4. 通过统计数据分析以后，再和项目组进行沟通把区块进行优化，分清主次。对内容进行了从上往下的重要层级划分，最终得出新版官网交互稿。
二、个人登录中心优化
1. 本次改版新增了用户登录系统，用户能够登录《英雄联盟》网站，区别于游戏人生的是，用户登录后可以直接拉取游戏内的数据在官网的个人信息区块显示，如点券、金币、胜场数等等。
2. 还可以在玩家之间进行好友评价、战绩对比，这无疑增加了用户对官网的黏性，增强了网站社交性，使得官网和游戏的联系性更大。
3. 在新官网的交互中，我们可以发现之前提高的重点的区块都进行了提升，出现在较高的位置。导航的梳理、活动中心的整合、新闻的简洁性、本周英雄的位置调整等等。
4. 在进行完大量前期工作后，接下来就开始视觉设计稿的工作。
三、轻质感扁平化设计
1. 为什么轻质感扁平化的东西更适合阅读信息？一款游戏前期使用贴近游戏的重质感设计，是为了培养用户对该游戏风格认识，而当用户培养到一定阶段后，轻质感扁平化的设计必定将取代重质感设计。为什么呢？因为一款游戏运营到一段时间后，积累下来的信息会很多，游戏攻略、新闻公告、活动推广等等数不胜数。而轻质感能够快速高效、不大幅度干扰用户的情况下推送给用户进行阅读，轻质感的设计能够还原印刷类设计的排版，使用户阅读起来更顺畅。
2. 在这个信息化的时代，时间就是金钱，一些轻质感甚至能够直接用网页代码写出来，而不需要使用图片，也使得用户载入网站的速度更加快速，减少服务器压力。
综上所述，我们针对《英雄联盟》新官网进行了相应的改版方案，包括引导页优化、个人登录中心优化以及采用轻质感扁平化设计等措施，以提高用户体验和网站粘性。
在进行《英雄联盟》新官网的视觉设计之前，我们从老官网和新UI中提取出了需要的颜色。我们保留了老官网的深蓝色调作为重色主基调，并分别提取了新UI内的橙红色和青绿色进行色彩搭配。同时，我们还配合内容区块的浅灰色来铺展新官网的整体色调。此外，我们还提取了新UI内的游戏花纹予以辅助设计。
经过对UI提炼之后，我们正式开始官网的视觉设计。我们尝试了几款不同的官网样式，并最终输出了设计初稿。在这个版本中，我们首先采用了上重下轻的设计思路，以头部的重质感搭配下面的文字信息来进行排版设计。头部采用了厚重的材质对网站导航、下载按钮、快速按钮、轮播图、新闻公告以及登录的个人信息进行设计，深色厚重的石材UI和残破的个人信息布匹UI搭配《英雄联盟》的原画很好地体现了游戏的质感、魔幻和黑暗的核心风格。
为了更好地铺展信息以便阅读，我们在下部信息部分采用了浅色调与头部进行划分。整体色调以之前提取的灰白为主，搭配绿色、橙色辅助。第二稿延续了第一稿的设计结构，但在背景过渡上采用了烟雾，使网站整体更具魔法元素。此外，下载信息那一栏采用了《英雄联盟》游戏内的新UI元素组合，让网站更贴近游戏的新风格又不失信息的明确推送。
在删除了第一版导航的厚重质感后，我们尝试采用轻质感导航。轮播图和新闻区域则取消了质感，但依然采用了重色的底来展示新闻，这是为了从头部的重质感过渡到下面信息的轻质感。在文字信息处，第二版也和第一版有较大的改变。首先，我们与项目组沟通，取消了英雄联盟社区版块，从而减少了首页信息的承载。然后进行版块的设计优化，减少了横线的使用，让信息更加清晰化，阅读起来更顺畅。接着优化了版块的排列顺序，也更符合区块的重要层级。
确认稿在第二稿的基础上进行了优化。头部的重色区延续了英雄联盟的蓝色，让用户更有亲切感。再次对头部的UI进行了削弱，让网站整体感更轻薄，更突出信息的传播。因为头部的背景会随着版本或活动进行更换，为了后期的背景更换能够达到前期设计的效果，我们在导航上增加了一个轻薄质感，让导航能够适应色彩不同的背景。
此次改版中，我们还添加了新功能和丰富了游戏资料，摆脱了之前官网只是花瓶的说法。总之，在新官网的设计过程中，我们充分考虑了用户的使用体验和视觉感受，力求为用户带来更好的视觉效果和信息传播。
优设网的首页设计已经完成，经过前期分析以及对官网区块和设计风格的调整优化，达到了预期效果。在内容方面，通过对信息的优先级排列，使得用户能够更便捷地阅读信息。视觉设计上，采用了大面积的轻质感，以实现本次传递信息的目的。同时，部分头部区域采用了重色区块渲染游戏氛围，轻质感的设计有助于减轻页面图片体积，提高网站性能。
【优设网 uisdc.com】是一个专注于分享网页设计、无线端设计以及PS教程的干货网站。特色推荐包括：
- PS礼仪手册：这是网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南。
- 设计微博：拥有粉丝量67万的人气微博@优秀网页设计，欢迎关注获取网页设计资源、下载顶尖设计素材。
- 设计导航：全球顶尖设计网站推荐，设计师必备导航。
想要在手机上、被窝里获取设计教程、经验分享和各种意想不到的福利吗？请添加优设哥微信号：【youshege】(优设哥的全拼)。您也可以通过扫描下方二维码快速添加。
