最近正好处在动森弃坑的边缘，《荒野乱斗》成功引起了“老休闲玩家”-骨头老师对这款游戏的注意。再加上最近《荒野乱斗》国服在TAPTAP评分跌破5.0，对于《荒野乱斗》这款Supercell测试期最久的项目，用“披荆斩棘”来形容不足为过。但从美术风格方向来说，最后的美术版本效果既保持了Supercell的水准，又能突出游戏本身潮酷的风格。

那么咱们今天就来看看，这款差一点就被砍掉的游戏，从立项到上线都经历了什么～

（本文共3905字，阅读约需6分钟）

Part.1 美术风格

玩法决定美术风格的包装。

虽然荒野乱斗这款游戏的灵感来源于英雄联盟，但玩法上更靠近轻量的吃鸡模式。所以从美术风格来说沿用了Supercell休闲类游戏轻松和明快的美术风格。从测试到正式发布超过了一年半的时间，而在此期间，游戏玩法、界面都进行了很大的改动。

大家大概想象不到，早期的《荒野乱斗》原画是长这个样子的：

这个是2016年初的科幻小说版本

2016年11月的时候，美术团队新来了一位同事，他画的一些草图：

把角色改成西部风格。

在这个阶段大家可以看到整体的原画形象概念有了，但不够讨喜和有辨识度。

又换回了西部+科幻画风，和最终发布的很接近：

最后的立绘风格：

Supercell游戏风格是有传承的，体块感较强的欧美Q版风格，成为了系列游戏的辨识度。

上图虽然为SUPERCELL游戏中不同角色的立绘，都采用了上大下小的方式，风格非常和谐。

同时很注重角色的剪影刻画，通过剪影来体现人物特点。

从原画风格中，可以提炼出运用到UI设计中的元素。比如突出体块的风格，保留质感，圆中带方等。这些都可以作为初期UI设计的灵感，在UI设计中运用进来。

荒野乱斗游戏UI美术风格

颜  色    

在颜色上，大家可以横向对比其他休闲类游戏。

比如前段时间流行的游戏《动物森友会》，因为游戏调性是比较放松，所以色系其实更偏自然，让人从颜色就可以感受到放松。

相对于《荒野乱斗》而言，西部+科幻的概念，让游戏的色彩相对《动森》来说会浓烈一些。

《荒野乱斗》的颜色层次有3种。

第一种多为系统UI为蓝色，和战斗分为选用了最让人舒服的蓝色为主色调，这样既可以更好地突出角色以及操作按钮，也能让玩家长时间对着屏幕游戏的同时减轻视觉疲劳。

第二种为玫红色，战斗准备状态的背景会整体偏暖色调，更能提升大家的紧张感，准备投入战斗。

第三种为紫色，主要出现在和乱斗金券相关界面。毕竟是氪金界面，要的就是尊贵感～

最后大家也能看得出来，因为3种主面板色系多为蓝紫色，所以点缀色就都选用了黄色，基本出现在游戏中的通用按钮，以及进度条这样的重要控件的运用上。

 LOGO风格  

可以看出游戏风格调性的区别的变化。荒野乱斗相比其他的游戏更偏潮流方向。

 视觉元素  

从LOGO简化的骷髅图标提取出来，运用到很多界面里；UI整体视觉元素会应用很多带倾斜角度的方块元素，增加动感；

如果大家仔细看《荒野乱斗》标题可以发现，主标题和副标题的字体比较浑厚，有力，一般在表现机甲，动作，战斗等会使用。

同时LOGO中还体现了笔画继承，在UI中与面板的负型不谋而合。

竖版本线框感较重，并且有较多圆角，整体看上去感觉不太统一，并且会有低幼感。

在新的横板优化了圆角外框，调整为了和LOGO统一调性的四边形。

这样优化的好处是，降低了之前边框厚重圆润的感觉，更突出荒野乱斗潮酷的调性。

另外获得英雄界面调整了展示英雄卡槽的大小，这样可以让玩家在这个界面中更好的把注意力集中在查看英雄信息上。

品牌元素的贯穿应用 

LOGO所带的负型和元素和各个游戏都有密切联系。

《荒野乱斗》LOGO的负型骷髅元素一直贯穿整个游戏。比如金币，还有乱斗金券都应用到了这个元素。

本文在较前段的部分提到了，项目组把世界观定位为西部+科幻题材。通过搜集资料可以知道：

西部牛仔（West cowboy），是指18至19世纪的美国，在西部广袤的土地，一群热情无畏的开拓者。在美国历史上，他们是开发西部的先锋，他们富有冒险和吃苦耐劳精神，因此被美国人称为“马背上的英雄”。

从距离咱们比较近的《玩具总动员》动画，以及美剧《西部世界》和西部牛仔有关的元素可以获取到比较能代表西部牛仔的精神--牛仔徽章。

关于游戏里的主要元素，大家在设计的时候需要和整个游戏紧密结合，并且是符号化的存在，大家在使用的时候一定要好好斟酌。

 扁平风格  

扁平风格其实直接带来的好处是为了降低游戏配置需求，从而使得低端机也能畅玩。但对于现在普遍较高配置的手机玩家来说，现在的扁平风格更是为视觉效果服务的。

   BANNER构图  

《荒野乱斗》宣传图构图较常出现发散式构图。一般这样的构图也可以运用到我们的开始界面中，或是拍脸图的设计中。

比如上图用的就是经典的三角形构图，这样画面很稳定，不容易出差错。

这张可以看作一个对角线构图。

这张BANNER的构图算是上一张图的升级版，只是在上图的基础上又加入了发散型的元素，更能突出视觉中心。

这张是X 构图，配合原画的大透视，同时人物的站位也是有层次的。

Part.2 交互体验

1.主游戏界面优化    

大家都知道《荒野乱斗》游戏经历过从竖屏到横屏玩法的改动，竖版交互是为了单手操作诞生的，所以不太适合精确操作；但实际上荒野乱斗还是挺考验操作的，并且竖构图视野不太好观测队友行动。

继续来看看之前竖版层次的问题：最上方的数值信息和时间倒数较重，同时阻挡了最上方的游戏中的画面，并且按钮有点过大过明显，游戏中角色和信息和背景有点没有拉开。

再来看看新优化的版本：

横板操作更精确，因为是3V3的玩法，视野能更好的观测队友站位，配合操作体验更好；并且横板更有画幅感，不会让画面显得很拥挤，甚至还能在背景场景的表现上做一些趣味性的设计。同时竖版本最上方的宝石数量和时间显示也不会太干扰游戏画面了。

画面层次也是影响游戏体验很重要的一部分。

通过去色，我们可以看到整体背景在一个灰度里，并没有对游戏中的玩家角色和信息做过多的干扰。包括左右两侧操作的虚拟摇杆也并没有对整体游戏画面做过多的遮挡。

由此我们可以推出主游戏界面里的层次从前往后分别的顺序为：1.双方总进度（或宝石总量）；2.角色+角色头上信息+角色特效表现；3，左右两侧虚拟摇杆；4.背景（场景）。

2. 动态表现    

因为动态表现这块涉及到比较专业的动画知识，所以骨头老师找了3个动态采样给大家：

看到上面的三个小球绕大球的轨道动图的例子，元素变化的属性只有小圆的旋转属性。但是应用了三个不同的动画曲线。属性相同但是数值变化不同就能带来不同的感受。

这里第一个是应用的线性动画，第二个是比较常见的缓入缓出动画，第三个就是弹性动画。

这里的三条曲线就是我们经常能够看到的三大类动画曲线。基于时序补间的线性和缓入缓出动画曲线以及基于物理性质的弹性动画曲线。

01   LOADING界面

元素上运用了从LOGO中衍生的徽章元素，动画上运用的是典型的线形动画。这样的动画表现连贯且较节省动画资源。

02   信息提示浮层

缓出动画主要用在了文字信息的反馈上。这样动画的好处是，提示但不会对玩家做过度的打扰，不打断游戏体验。

上面这种是比较常用的缓出曲线，再来看看缓出的进阶版-缓入缓出曲线。

在界面中这种曲线也比较好用。因为在可以合适的吸引用户的注意力，又比较自然的展示元素内容。

01   结算界面

咱们先来看看动画表现。在动画中结算界面这块运用得比较多的是弹性动画曲线。

在界面中的使用目前来看是非常普遍的，比如像游戏中的结算页面，信息窗口的弹出大多使用了弹性动画。

大家可以注意到，窗体弹出的那个时刻大于实际的尺寸。这种动画的好处是在这里就比较好的引导用户关注到结算信息。

战败和胜利的结算表现顺序依次为：

1.显示胜利或战败结果，结算时动态表现顺序先左上奖杯出现，判定是否增加或减少；

2.然后在荣誉奖杯进度条有所体现；

3.右侧经验值结算；

4.奖章结算之后飞到左侧该英雄累积奖章；

5.退出结算界面。

在这块结算界面降低了失败的挫败感，让整个结算流程简化且流畅，让大家迫不及待开始下一场游戏。

02   开宝箱动态表现

这块的动态表现会让人有很爽的感觉。

大家注意看宝箱背景的光效表现，还有四周有做压暗的遮罩，更加能突出让大家想要点击这个宝箱。

最后会把所有获得的碎片和奖励集合展示，背景用了外发散的负型做托底，加强了视觉冲击力。

03   获得新英雄动画表现

荒野乱斗的获得新英雄的动画表现也是很有趣，英雄是旋转着出场的。

看到这里，大家可以有时间的时候自己多体验下《荒野乱斗》，感受下游戏里的动态表现哦～

叶子学堂读书笔记

骨头老师为大家复盘一下今日份知识点噢～

《荒野乱斗》虽然险些被砍掉，但项目组的参与者们并没有在数据下滑的时候放弃，不断地调整，做各种游戏优化，才能真正上线与玩家见面。

美术方面：从刚开始的和调性不太统一的圆角视觉元素，统一了从LOGO到各个界面的视觉元素，体现出了潮酷的扁平风格。同时在颜色上突出了战斗相关界面和乱斗金券。

交互方面：做了很大的优化调整，优化了主游戏界面的层次问题，同时也增加了很多动态表现，增加了获得宝箱和新角色的成就感，降低了结算界面失败的挫败感。

《荒野乱斗》走到现在不容易，走的多远还是得看玩法以及后续英雄数值的平衡。也希望各位大宝贝们，每次体验游戏时，能从不同游戏身上看到更多美术风格的优缺点以及交互体验上的优化点。

如果大家对《荒野乱斗》这款游戏有什么独特的见解，

欢迎大家留言，或者加入我们的公众号“叶子学堂”一起参与讨论鸭～我们下期再见

附录

1、这里有动画采样使用的源代码：https://gist.github.com/chriseidhof/f1bfea3b26ed23c26f2b016a2d618ba4

2、更多类型的曲线可以参照这里：https://easings.net/ ，详情页有比较详细的效果应用

3.部分动画表现图片和文字参考了《以荒野乱斗为例，一文搞懂界面动画曲线》，作者腾讯PPdesign