英雄联盟火的不只是比赛，还有它的可视化!
英雄联盟除了游戏本身，其实可视化做的也是非常棒的！
要说最近最热门的电竞赛事，那不得不提的就是英雄联盟S10全球总决赛了！
上周六，英雄联盟S10迎来了最后的总决赛，【DWG】3：1【SN】获得S10的总冠军🏆。
做为英雄联盟的粉丝，还是有些伤心的，我们非常非常的希望【SN】能够夺冠！
当然【SN】战队也取得了非常好的成绩，上单阿Bin的剑姬也获得了总决赛历史上第一个五杀！还登上了微博热搜！
↑ 图片来源：S10英雄联盟全球总决赛-决赛画面
不仅如此，我从9月初开始看比赛到现在看下来，发现英雄联盟的可视化也做得非常的棒！
无论是游戏对局开始时的选人BP界面，还是游戏进行中、结束后的数据面板，可视化做得都非常的好。那不由的就激起我围绕着英雄联盟的可视化写一篇文章，我搜索了很多的资料，发现并没有人分析它的可视化。
所以，大家看到的就是第一个专门分析英雄联盟可视化的一篇文章。
废话不多，我们开始吧！
一 对局开始时的选人BP界面
在比赛开始前，对于观众来说，大家大概要花8分钟的时间，视觉集中在选手选人时的BP（BAN和PICK的简称）界面。可以说BP界面的可视化设计，能否吸引观众的注意力也是非常重要的。
↑各赛区的BP界面设计
如果你整体去看S10总决赛比赛时的BP界面，你会发现这种对比可视化的表现非常的熟悉，没错，我在教程分享 | 掌握这15种表现形式，轻松做好数据对比图！ ，就有讲到这种左右对比的可视化表现形式。
↑S10英雄联盟全球总决赛—半决赛 BP界面
那么我们来分析下，总决赛的BP可视化界面到底做得怎么样？
整个BP界面的可视化，我们可以通过位置、颜色、图像、大小来进行分析。
在位置、颜色上，蓝色方【SN】置于了画面的左下方，并选用了高饱和、亮丽的碧蓝色，红色方【TES】置于了画面的右下方，并选用了冷暖色对比的浅紫颜色，从而在位置布局上形成了左右PK对比,在颜色感知上形成了冷暖色PK对比。
在画面的功能分配上，拳头的设计师将3/4的空间留给了现场摄像机视角，这也导致BP界面丢掉了很多细节，并遭到了部分观众的吐槽（比如选手所选择的召唤师技能未显示，文字进行旋转不好看等等）。
我倒是觉得拳头这样的设计，可能更多的是想，将本次重金打造的XR（Extended Reality，扩展现实）舞台（比如选手选中的英雄，会随着摄像机的机位投放在舞台中心，还有360°无死角的虚拟上海城市风光等等），更多地展示在观众和选手面前，从而有一个更沉浸式的体验，所以在画面的功能分配上更多地给到了现场摄像机视角。
↑S10总决赛XR技术的应用
二 游戏中的可视化界面
游戏中的界面，所采用的排版是左右分割对比、四周环绕布局。
↑S10英雄联盟全球总决赛—半决赛
蓝色方置于画面的左侧，红色方置于画面的右侧，形成左右分割对比，同时将各个信息点围绕游戏画面进行四周环绕布局，让观众将注意力更多地集中在游戏画面中。
这种四周环绕布局，在遇到细分数据（比如人群画像、商品分析）的时候会经常用到，因为数据点比较多，通过这种布局形式，一方面可以将更多的信息点展示出来，另一方面也可以保证画面的美观度，同时还起到了支撑稳定作用，整个画面的重心会被压得很稳。
这里可以重点看下画面正上方的战队信息数据面板，胜利场次的可视化，这里所采用的形式是象形图——通过填充●圆圈的形式来进行展现。这种展示形式一方面节省了空间，另一方面通过图形也可以在视觉上很直观的看到数量的对比。
同样的，在遇到一些数量对比数据时（商品、门店、城市、公司、餐饮等等），也可使用圆圈填充的形式进行可视化。
这里还有一个细节，战队信息面板的展示，所采用的排版形式是镜像对比，这种镜像对比处理，可以让画面始终保持一个左右对称的平衡感。
如果你的数据中含有两个数据之间的PK对比(比如商品、品牌、人物数据等等），就可采用镜像对比的可视化呈现，通过位置和颜色来更多的体现这种PK对峙感。
三 游戏结束后的数据结算面板
游戏结束后，我们会看到整场比赛的数据结算面板，这个面板可以很清楚地看到团队之间的数据差距（比如伤害、金钱、K/D/A）等等。
↑图片来源：S10英雄联盟全球总决赛—半决赛
如果我们将数据面板进行拆分，可以分成3个部分：
①条形对比图（选手英雄的伤害对比）
②信息组合图（团队资源的细分数据对比）
③面积折线图（整场比赛下来所产生的金钱变化）
①条形对比图
条形对比图在遇到对比数据时会经常用到，拳头的设计师将这里做成了向中间发射聚拢的对比形式，这种对比形式虽然很直观，但会造成中间区域留白的杂乱性，而丢失美观度。如果我们优化这张图，可以将英雄置于中间进行镜像的数据对比，也就是第二部分讲到的内容，这样的话，英雄的头像相邻就会更有PK感。
甚至我们还可以继续完善优化，等比缩减柱子的横向长度，在柱子下方垫上灰色柱状（让画面填满并起到参考性），同时还可将选手所属位置的名称也标注出来，这样的话这张图所展示的信息就会更加地完整和清楚。
我们可以通过动图GIF，看下整体的优化效果。
②信息组合图
因为这里的信息是各个维度的一个集合，所有设计师可能是在故意弱化这部分的细节，通过信息组合的形式，将数据进行了展示。
当你在遇到各个维度的信息对比展示时，就可借助图片、ICON、基础图形可视化来进行辅助展示，因为如果只是单纯地放数字那就会显得单调了。
③面积折线图
在表现“整场比赛红蓝方各个时间段所产生的金钱变化”时，设计师选择使用面积折线图。面积折线图相比折线图，它能够更清晰地展示各个时间段的趋势变化，同时也能强调不同类别的数据间的差距对比。
当你的数据需要表现时间趋势变化的时候，就可使用面积折线图。
四 总结
总体来说，英雄联盟的可视化还是做得非常棒的！
每一次的总决赛对于整个赛事的视觉负责人来说，其实要考虑的因素是非常多的，这次XR技术和舞台直播的应用可以说也是让大家眼前一亮。
在未来随着科技的发展，创意技术会更多的和内容和场景去做结合，也许在未来，我们所观察到的周围的一切都会被可视化，那该是多么数字化的一个美好时代。
如果大家觉得这篇文章让你有收获，还想要更多干货
欢迎【点赞】【评论】【分享和转发】！
我们下期见！
