滑雪摔断腿，竟意外帮我完成了界外狂潮的LOGO设计？

拒绝千篇一律，用朋克和不羁重构FPS视觉基因。

3月7日，《界外狂潮（FragPunk）》全球上线。这是一款致力于为FPS领域带来新鲜感的游戏。我们除了在玩法上大刀阔斧的改革之外，也希望能在游戏美术上做出突破，打造极具辨识度的美术风格。


游戏的LOGO自然也不例外。在我看来，如果把游戏比作一个人，那么游戏的LOGO就是这个人的脸。这张脸不仅要让人过目不忘，更要准确地传达游戏的调性。


在射击游戏的视觉语言被军事迷彩和科幻装甲统治了十余年之后，我们决定用朋克和街头美学去重构FPS的视觉基因。今天，我就将带大家回顾一下这场充满戏剧性的设计之旅，看看我们是如何去迭代这个LOGO，而一次滑雪出现的意外又是如何帮助我们完成这次设计的！

一、前期定位分析

在开始设计之前，我们先去调研了市面上主流的一些FPS游戏的LOGO，发现它们大部分都是使用非衬线字体进行形变的设计，整体占比能达到80%左右。


我们又去找了一些其他品类游戏中更具风格化设计的LOGO，比如《Dirt 5》的LOGO，辨识度还是很高的，主体文字突出，黑色城市天际线剪影、黄色日落效果，还有脏污和磨损的纹理，这些元素很好地传达了街头艺术和拉力赛车的主题，很有味道。


还有《赛博朋克2077》的LOGO，相信大家都很熟悉了，字形的设计带有手写感和电子干扰的结合，笔画的纵深感也比较有张力，其实相比四平八稳的非衬线字体，我们更想要的是这种感觉。



二、设计方向尝试：字形设计和配色尝试

在开发过程中，我们游戏确定了破碎、朋克、彩色（colorful）作为界面风格的主要关键词，所以LOGO也主要围绕这三个关键词进行设计。

LOGO的上色也是基于界面配色来处理的。要强调多彩的氛围，所以出现多种颜色是允许的，但也会有限制，主配色不能变：黄绿为强调色（品牌色），紫色为辅助色，玫红色、蓝色为点缀色。


1、方案一（关键词：破碎、朋克）

第一版方案我们主要针对破碎效果进行了尝试，结合界面中拼贴边缘的质感，通过强调中间“P”字延伸出的破碎效果，也和Frag（破碎）做出了呼应：


因为我们界面风格里面也有使用拼贴的元素，所以我们也尝试了拼贴文字的效果来体现朋克的感觉：


不过，这个版本的LOGO虽然能看清文字，但视觉张力上还是有所欠缺，很难和其他FPS游戏拉开差距，这并不符合我们的要求，所以我们继续做了下一版的探索。

2、方案二（关键词：手写、轻松、colorful）

这一次我们选择另辟蹊径，采用偏手绘感的方式，在字形设计上就先拉开差距，于是有了下面这些字形草图：


这版字形主要以手写为主，造型奔放，文字字形也容易辨认。我们也尝试在LOGO中加入我们游戏的吉祥物“小恶魔”的元素——你在游戏的新手引导、主页面、转化器、贴纸等地方都能看到小恶魔的身影，那为什么不直接把它也设计到LOGO中，让玩家在看到游戏LOGO的时候就开始认识小恶魔呢？


当然光有字形还不够，还需要体现colorful的感觉，于是我们尝试使用界面中的配色黄绿、紫、蓝去做出那种colorful的感觉：



3、方案三（关键词：朋克、拼贴、colorful）

在第三版方案里，我们顺着方案二的思路，按照横向的阅读习惯重新设计了字形，字形的整体轮廓也更加的夸张和不羁，透露出一股反叛的劲儿，在我们看来这个方向味道是对了：


不过目前这个版本整体字形的结构动线不够均衡，单看最后的字母“K”设计是好看的，修长的外形很有张力，但是它的“大长腿”延伸的太长，和左侧“F”的向中心聚拢的动线不能统一。

那这一笔到底该如何调整呢？正当我苦恼的时候，一次意外却让我豁然开朗。当时恰逢冬季，我们团建去滑雪，结果万万没想到我却直达了滑雪的尽头——骨科，把自己的膝盖韧带给摔撕裂了。

当我躺在雪地里怀疑人生的时候，突然脑袋灵光一闪，想到了一直困扰我的“老K”的调整方案：干脆让你也来个韧带撕裂吧！于是，我尝试把"K"的最后一笔裁断，并且添加了一条线来和左边的"F"呼应，这样整体字形的左右结构达到了一个平衡。

下图就是调整后的对比，但这版的字形还不是最终效果，上色阶段我们也在继续优化字形：


这版的方向是想更加体现“朋克”的氛围，到了上色阶段也想继续强化这种感觉。

根据自己对朋克的理解，结合白色撕纸元素做LOGO的外包围；再配合字形的黑色边缘，体现内部的字体用了随意涂抹的颜色效果；在字形处理上，使用尖锐的几何造型，希望增强攻击性和速度感，这样更符合射击游戏的特点；在黑色边缘再加入一些拼贴文字元素，让整个字形显得更加轻松：


为了让自己代入到朋克世界里，设计的这段时间一直听着朋克音乐，虽然脑子都有点炸了，但好像还挺有效果的

上面这版字母“G”的处理偏常规，没有做太多的形变，主要是通过“X”和箭头的设计，再结合“P”字的倾斜造型，让主视觉往中间聚合。

后来我们还是想把LOGO和小恶魔结合一下，但是考虑到小恶魔的外形，如果直接把它放在LOGO里肯定不合适，所以需要提炼和简化处理，比如让它和中间的“G”字母结合一下，做到既凸显特色，又能让用户辨认出“G”的字形。

于是，有了下面小恶魔版本的效果：


上面这个版本已经有朋克的味道了，但是撕纸的结合并不适用于所有使用LOGO的场景，所以为了应对深色背景，我们做了反色效果：LOGO文字变成黑色，外轮廓使用一些随意涂抹的色彩来营造colorful的效果：


三、选定方向细化调优

通过三个方向的尝试，我们最终选择了方案三来进行落地。目前这个版本还不是最终版，我们还需要对造型、颜色做进一步调整，有一些在前期阶段过于奔放的设计需要在这时候做一些减法。

为了更浓的朋克味儿，早先我们加了很多拼贴造型的文字，意图是打破外轮廓造型；但是这种元素过多之后，当LOGO缩小的时候就会显得很细碎，影响整体的辨识度。所以我们对造型做了简化，去掉了复杂的拼贴文字，让文字的外边缘更笔直流畅一些。


我们还把小恶魔的角和图形边缘修饰得更工整，让小恶魔的嘴巴和箭头的造型更接近，避免中间的负形过大。另外对“G”最后一笔的箭头设计拉的更长更有力道，让整体的造型更像"G"一些：


来看看字形调整前后的对比，你会发现修整后的造型会整体很多，避免了太多的元素来干扰文字的辨识度，整体的平衡性也更和谐：


在颜色方面，设计前期我们为了做出朋克的感觉，确实是有些过于奔放了。但是到了后期阶段该收还是得收，所以颜色会在感性的基础上做出一些理性的处理。

比如这些红、蓝颜色的走势，是根据笔画造型走势来绘制的，这样就减少了一些横竖交错的设计，避免干扰文字的辨识度：


整体修改后的效果看起来会更收敛一些，但也保留了奔放的笔触感和colorful效果，依然还有“彩色朋克”的味道：


下图是反色后的版本：


然后，我们把定稿的LOGO和其他射击游戏的LOGO摆在一起，对比它们的效果。可以看到黄绿的配色+文字的造型是非常有差异化的，你一眼就能在这些LOGO当中看到它，这也是我们想要达到的效果。


接下来我们开始对LOGO进行一些动效包装。我们通过故障碎片、多元化的FragPunk文字效果，脉冲和干扰现象结合，表达动态酸性风格带来的鲜艳色彩和强烈对比，以数字故障碎片重构视觉维度，让FragPunk文字在赛博脉冲中多维跃动，也符合游戏本身的风格和调性：





四、应用场景规范

为了适配不同的应用场景，需要给予一些规范限制，才能保证LOGO的正常显示。

彩色版本，有2个效果，分别使用在较暗和较亮的背景中：


背景明度使用规范：明度值50为分界线，明度在0-50之间使用黑字亮边效果，明度在51-100之间使用亮字黑边效果。在50左右区间不做强制要求，可以视背景明度、画面配色情况而定。


五、周边展示

这款LOGO我们发现也很适合去做一些周边。比如项目组就有小伙伴使用游戏LOGO和一些破碎元素效果做出了我们游戏的痛车：




项目组也做了一些其他周边，一起来看一看：



六、结语

给游戏设计LOGO，不仅要讲究设计技巧，让LOGO本身好看，更要从产品思维出发，考虑LOGO的设计是否适合这款游戏。

拿《Fragpunk》来说，如果要把它的LOGO放到《COD》头上，那毫无疑问是非常不搭的。它最适配的有且只有我们的游戏，这就是一个好的游戏LOGO所要达到的条件。

每个游戏LOGO的设计过程都不会一帆风顺，会经历很多的修改和迭代，甚至可能会遭遇一些“意外”。不过，山穷水复疑无路，柳暗花明又一村，这些磨难最终都会让你加深对于设计的理解，帮助你最终设计出符合游戏调性，最适合你项目的LOGO。

《界外狂潮》也于今天（4月25日）正式更新了第一赛季第二章节抢鲜体验的内容，带来了全新的界外之子、新地图、新玩法、还有新的卡牌，欢迎大家点击文末的阅读原文前去下载体验哦！

也希望这次的思路分享能够给你们带来帮助！


来源：网易雷火艺术中心
原文：https://mp.weixin.qq.com/s/S63jeNn9dr6Q7j__xUMYDg