所向无前 正当年！掌上英雄联盟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的框架，罗列出适合换肤的界面和换肤形式。这样除了帮助自己更清晰的思考设计发力点。同时也能够帮助产品侧更清晰的了解卖QQ号码设计的换肤思路，从而方便和开发沟通实现方式和换肤周期。
除了掌盟传统的换肤三件套之外（侧边栏、底栏、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加油！～
所向无前 正当年！掌上英雄联盟S10换肤设计小结相关推荐
- 电脑销售渠道_双十一遇上英雄联盟S10，苏宁游戏装备销售增长258%
原标题:双十一遇上英雄联盟S10,苏宁游戏装备销售增长258% 11月1日,苏宁易购双十一迎来开门红,全渠道.全品类强势爆发.其中,苏宁3C再次领跑行业,访客数同比增长294%,买家数同比增长132% ...
- 仿掌上英雄联盟云顶之弈 - 微信小程序版
毕业3年已经很少玩英雄联盟了,最近出了个云顶之弈的新模式,就玩了几局.自己还没有写过微信小程序,正好就仿照掌上英雄联盟写个Demo,并没有使用很多技巧,算是初步学习的测验吧. github源码 欢迎给 ...
- Android仿掌上英雄联盟首页，实现折叠效果
不单单是掌上英雄联盟,像微博发现页也用了这样的布局,当滑动到一定距离的时候,自动隐藏轮播图,或者标题栏下面的布局.并且使tablayout置顶. 与之相似的还有简书的个人页面也是这样的布局. 图片处理 ...
- 仿掌上英雄联盟能力值图形绘制
一,前沿 相信玩撸啊撸的撸友们一定记得掌上英雄联盟App的能力值吧~~ 好吧,不记得没关系我来给大家上张图! ! 所以今天呢我就抽出时间模仿了一下: 照例线来张GIF,有图有真相 以下是我的微博账号希 ...
- 【无限互联】 学院作品: LOL掌上英雄联盟
一.项目介绍: 我做的项目是LOL英雄掌上联盟(模仿版),是腾讯游戏英雄联盟官方制作的app,来为LOL玩家提供最专业的资讯和社交服务 ,可以查询英雄联盟的最新的情况,这款app的功能有: ...
- ViewPager系列之－仿掌上英雄联盟皮肤浏览效果
封面图.png 能有一个双休的周末,对于程序员来说,也算是一件幸福的事情吧.苦逼的加了一周的班,终于可以休息放松放松了.作为一个LOL爱好者,周末最开心的事当然就是约上几个小伙伴一起开黑了.一起超神. ...
- 用Kotlin画起仿掌上英雄联盟和懂球帝的自定义多边形战力图
大家好,可能今年换了公司过得比较安逸,自己的心情也不算太好,所以一段时间都没很好的学习和更新文章.自从最近看了扔物线HenCoder的文章之后,自己感觉自己对很多自定义View和动画的知识都不太懂,甚 ...
- 仿掌上英雄联盟能力值分析效果
今日科技快讯 就在上周五,百度又出现重磅新闻,副总裁李明远被人举报贪污,在公司收购的项目中与被收购公司私下里有巨额经济来往.李明远虽然回应称自己没有贪污,是被人诬陷,但目前已引咎辞职.这已经是百度今年 ...
- ios自定义UITabBar-仿写掌上英雄联盟的UITabBar
最近在仿写这个软件,发现UITabBar不是使用的原生的.所以,需要自己去自定义 观察掌盟的UITabBar 观察官方的软件下面的tabBar,我们可以发现几点需要我们注意的 1. 当select一个 ...
最新文章
- [转]自定义hadoop map/reduce输入文件切割InputFormat
- List列表 OrderBy
- ITK:创建一个后向差分运算符
- linux 字符转int,如何在Linux内核中将char []字符串转换为int？
- ASP.NET中Request.ApplicationPath、Request.FilePath、Request.Path、.Request.MapPath、Server.MapPath的区别...
- gensim提取一个句子的关键词_NLP（五）：关键词提取补充（语料库和向量空间）...
- 开发APP不搞清楚这20个问题，必然沦为一场灾难
- 高速PCB设计中走线屏蔽的各项规则解析
- Taro小程序分享功能
- 写个鸭子类方法java_小黄鸭系列java基础知识 | Java基本语法
- 系统应用修改包名，导致OTA升级后用户数据丢失
- 用matlab画企鹅代码,CDR绘制超级可爱的QQ企鹅
- js 对象解构 默认值 重命名
- mysql24div13_第七次codeforces竞技结束 #258 Div 2
- 使用UltraISO制作纯U盘引导，UEFI安装win10[单文件超过4G]
- nlp~tensorflow解析json格式文件
- 直立车想节能——2020全国大学生智能车车竞赛经验记录之梦的开始
- 2.Linux下程序代码的编译
- 树莓派之更改开机画面
- mysql锁级别_MySql三种级别锁的介绍及解锁命令