|
|
拒绝千篇一律，用朋克和不羁重构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和一些破碎元素效果做出了我们游戏的痛车：
项目组也做了一些其他周边，一起来看一看：
购物袋
T恤
帽子
开瓶器
六、结语
给游戏设计LOGO，不仅要讲究设计技巧，让LOGO本身好看，更要从产品思维出发，考虑LOGO的设计是否适合这款游戏。
拿《Fragpunk》来说，如果要把它的LOGO放到《COD》头上，那毫无疑问是非常不搭的。它最适配的有且只有我们的游戏，这就是一个好的游戏LOGO所要达到的条件。
每个游戏LOGO的设计过程都不会一帆风顺，会经历很多的修改和迭代，甚至可能会遭遇一些“意外”。不过，山穷水复疑无路，柳暗花明又一村，这些磨难最终都会让你加深对于设计的理解，帮助你最终设计出符合游戏调性，最适合你项目的LOGO。
《界外狂潮》也于今天（4月25日）正式更新了第一赛季第二章节抢鲜体验的内容，带来了全新的界外之子、新地图、新玩法、还有新的卡牌，欢迎大家点击文末的阅读原文前去下载体验哦！
也希望这次的思路分享能够给你们带来帮助！
文/花轮儿
来源：网易雷火艺术中心
原文：https://mp.weixin.qq.com/s/S63jeNn9dr6Q7j__xUMYDg
|
|
发表于 
