所向无前 正当年！掌上英雄联盟S10换肤设计小结

项目背景

掌盟作为官方APP，会在重要节点配合产品和运营侧进行换肤设计，渲染节点氛围，从而希望可以提升产品口碑，做一个有温度的APP。

在掌盟的换肤工作中，可以总结为3种换肤类型：


S10换肤的工作就属于S系列赛事。


前期分析

首先来看下以往的S系列赛事的KV

2019年全球总决赛（以下简称S9）：

以往的S系列赛事的KV设计的延展，形式都较为统一，比如S9的KV整体都是白金雕塑风，以大理石纹理，金色宝石做点缀，在其他的设计延展上，也都是这种形式。


掌盟S9换肤界面效果：


由于整体的开发周期较为紧张，在设计上采用较为保险的设计方法，侧边栏和界面头部背景提取主KV素材，方便不同机型的适配。同时提取KV的主要特征，并结合底栏图标语义应用到底栏图标上。

2020年全球总决赛（以下简称S10）：

相较于以往的KV，今年的主KV在表现形式上更为多样化和丰富。可以总结为以下几个特点：

1. 手绘原画风宣传图


2. 丰富的色彩应用


3. 中国元素纹理图案


4. 多样的十字符号


5. 多样化的组合形式


设计思路

针对上面提到的这种复杂的形式，在以往的换肤工作中是没有出现过的情况，这也就会遇到一个思考点就是如何将这些多样式的形式应用到界面中，并且能够提炼出新的设计方式，而不是单单的照搬主KV的元素。带着这个思路进行设计思考。整理出一套设计思路：


1. 梳理分析换肤界面

梳理整个App的框架，罗列出适合换肤的界面和换肤形式。这样除了帮助自己更清晰的思考设计发力点。同时也能够帮助产品侧更清晰的了解设计的换肤思路，从而方便和开发沟通实现方式和换肤周期。


除了掌盟传统的换肤三件套之外（侧边栏、底栏、title背景）今年的S10也会考虑从其他方向来体现总决赛氛围。整体思路是围绕传统换肤、预埋彩蛋和赛事节点出发来渲染氛围。根据产品结构、开发和运营计划，最终确定从侧边栏，资讯赛事Tab、盟友圈、底栏图标、个人主页背景，搜索彩蛋这几个界面进行换肤设计。

2. 定义元素使用规则

确定好换肤界面和形式后，如何把形式多样，色彩丰富的多样化的主KV元素应用到界面中去？定义需要换肤的界面和范围化分为大中小三种范围和程度。并确定这三种不同范围的素材、元素的使用规则。


大范围（红色背景）


大范围可以理解为有大面积区域，需要大面积画面的背景范围。在这种区域能够更完整的体现出原画素材，同时结合元素素材的应用，能够使用户快速get到此次皮肤的主题，所以这种范围定义为使用原画素材这一规则。

中等范围（蓝色部分）


中等范围可以理解为不需要大面积的背景，而是更多的需要呈现信息的卡片的范围，这个区域因为会有较重要的信息内容，所以要注意避免卡片装饰过于复杂，喧宾夺主。所以这种范围定义为体现出中国风纹理元素。

小范围（黄色部分）


小范围可以理解为一些个体较小的元素。如侧边栏的流沙和底栏图标等，这种区域既没有大面积的背景范围，也不需要呈现信息，所以这种范围更偏向装饰性元素，能够和丰富的色彩这一特点更好的结合。

KV素材使用规则可以总结为：


3. 挖掘新的设计点

梳理清楚界面，和定义清楚规则后，该如何设计表现，除了上面提到的使用原画素材，是否还可以挖掘出新的设计发力点？增添自己的特点？


喜欢看英雄联盟赛事的同学应该对这些场景不陌生，极有赛事氛围感的灯光，五颜六色的应援海洋，全场的呐喊声，这些种种交织在一起，彰显着LOL电竞的魅力。而从这些场景中，能发现和主KV一些相契合的点。五颜六色的灯光对应KV里丰富的色彩。应援牌的描边感对应LOGO的描边设计。是不是可以从灯牌这个角度切入，把这个概念融入到设计中去。



针对这个概念，重新定义颜色的使用，深色作为沉浸色，亮色作为提亮色，通过明暗的对比，来体现“灯牌感”。


整体的设计思路可以总结为：


设计呈现

1. 侧边栏

背景

在以往的侧边栏设计中，常用的方法就是将主KV素材直接应用，取合适的范围应用。在此次设计中 ，将X和背景融合，并在下面叠加一层背景素材，做弱化处理，增加背景图的层次丰富度的同时，避免纯色背景过于突兀，也避单层图片使界面过平，无层次的感觉。



流沙

因为今年的总决赛赛场在中国上海举行，所以在流沙的设计选取了东方明珠代表性建筑来体现上海这个城市的元素，作为主要流沙元素之一。同时体现出2020总决赛的Slogan，并以奖杯和不同颜色的星星作为辅助图形，且和原画上的奖杯和星星作呼应。字体设计方面，和主KV字体保持一致，均为细长斜体。


2. 赛事Tab

赛事Tab作为赛事期间最为重要的界面，我们考虑将此界面做沉浸化处理，将侧边栏的X延续到这里，背景以纯色为底，避免整体过于复杂。同时在Tab选中的时候做特殊化处理，突出此Tab的特殊性。


3. 盟友圈

在帖子右上角新增S10标识，调整点赞图标样式，和侧边栏流沙联动，增加趣味性的同时，也更为整体。


4. 底栏图标


在底栏图标的设计中，延续新版本的图标，做描边处理融入主KV色彩及描边，在选中态的设计上，则体现出灯牌感和丰富的色彩感。

5. 搜索彩蛋

除了在”传统”的换肤三件套，今年的S10也考虑增加一些彩蛋，思路从3个角度出发。

赛事本身，关键词为S10总决赛；当用户搜索S10总决赛时触发。整体延续侧边栏的流沙元素，突出上海地标和LPL加油的元素。

战队，当用户搜索战队名触发，主要突出战队的LOGO元素，并融入游戏里红蓝两种颜色，增加更多的游戏关联度。

职业选手，当用户搜索选手ID时触发。主要突出选手的ID，并把ID处理成灯牌的样式，且和战队LOGO相结合，让用户了解该选手是什么战队的。






6. LOGO


LOGO在不大改的情况下，使用角标的方式体现是S10，最终确定以方案1为方向调整优化为终稿。

7. 市场图


其他

赛事日历卡


手机壁纸



总结

在以往的换肤工作中，大多由于开发成本和时间成本原因，基本都是传统的换肤三件套，此次的S10换肤时间比较足够，给设计发挥的空间较足，从梳理换肤场景到定义KV规则到设计方案落地，能够从传统的换肤思路跳出来，从而解锁更多的换肤思路方法。

最后祝LPL在自己的主场上取得好成绩，LPL加油！～


腾讯互动娱乐 设计师
来源：腾讯游戏学院
原文：https://mp.weixin.qq.com/s/V_WLk26x58YykOt8hAILqA