「还能再狂野一点吗？」《界外狂潮》风格化动效设计复盘

作者 | 皮皮嗨
雷火艺术中心动效设计师

在FPS这个竞争激烈的市场上，作为后来者的《界外狂潮》一直想去做一些不一样的设计，给这个类型带来一些耳目一新的体验——当然，也包括界面动效这个领域。

《界外狂潮》的动效并非单纯地去追求视觉刺激，而是通过色彩冲突、动态失衡、结构解构等设计手段，将“打破规则”的理念贯穿于交互体验中。这种设计既服务于玩法创新（如游戏的碎片卡机制），也塑造了游戏独特的文化符号。通过潮酷朋克美学的解构与重组、手绘质感的温度介入，以及混合媒介的虚实共生，构建出兼具潮流感与街头文化张力的视觉语言。

今天这篇文章就会带大家回顾一下我们的创作历程，希望能给各位带来一些启发。

一、前期定位分析

在设计之初，我们首先分析了一下目前市面上比较主流的一些FPS游戏，比如《CS》《COD》《战地》《Apex》等等，看看它们的动效是如何呈现的；我们还关注了一些其他类型，但是风格会有些相似的游戏，如《赛博朋克2077》和《极品飞车》等等，对它们的风格化动效也做了一些解析。


CDPR-《赛博朋克2077》

我们在调研过后，发现当时的游戏动态设计领域存在着明显的风格空白——市面上不仅缺乏狂潮手绘风格的动效产品，而且当时的动效表现形式也普遍趋于保守，难以满足品牌对视觉张力和个性化表达的需求。

基于这一市场缺口，我们决定去打造行业首套完整的狂潮手绘风格动效体系，以填补市场空缺，并为品牌视觉注入更具冲击力和艺术感的表达方式，也为动态设计领域带来全新的视觉语言和创意。

我们在分析和讨论过后，也整理并确定下来了一些我们动效风格的调性：

1、高饱和度色：

采用鲜艳的颜色，吸引玩家的注意力；

确保色彩在不同场景下的表现力；

2、破碎几何图形：

利用不规则形状，创造视觉冲击；

结合色彩偏移，形成独特风格；

3、波普艺术元素：

融合流行文化符号，增强视觉趣味性；

运用大胆的色彩和图案，突出个性；

4、故障艺术风格：

模拟数字故障效果，增加视觉层次；

通过错位和扭曲，展现技术美感；

5、朋克碎片元素：

采用反叛和前卫的设计理念；

结合锐利线条，强化视觉冲击。

二、风格探索

在基调确定之后，我们开始探索具体的风格表现。我们关注到了两个优秀的作品，一个是Criterion Games制作、EA发行的《极品飞车：不羁》。这款游戏的动效采用了序列帧美式手绘漫画风，其笔触肌理效果丰富交错，在车辆加速漂移时出现的动态涂鸦效果非常帅气和独特：



另一个是索尼电影娱乐推出的《蜘蛛侠：平行宇宙》。电影中的多维空间扭曲效果、错位失真效果与形变效果都极具视觉冲击力：


在我们看来，《极品飞车》中较为狂放的手绘涂鸦元素，还有《蜘蛛侠》里的故障色彩，整体都是比较符合《界外狂潮》项目想要传达的调性的。我们希望可以通过类似的风格表达，结合《界外狂潮》“狂”和“潮”的基因去融合和重构，最终创造出我们想要的效果。

1、动效seed探索

色块

抽象与节奏：色块动态的核心在于通过形状、色彩和运动的抽象组合传递情绪；

动态设计：尝试色块的参数化运动；

色彩情绪与过渡：不同色块的碰撞方式（如硬切、渐变、叠加）会影响风格；

高对比色块（如《蜘蛛侠：平行宇宙》的故障艺术）适合表现冲击力。

手绘涂鸦

手绘涂鸦风格是一种充满自由感、原始生命力和个性化表达的美术形式，适合用于动画、插画、独立游戏或动态设计：

线条的「不完美感」：故意保留铅笔草稿的抖动、断线或重叠笔触；

动态抽象符号：闪电、爆炸、对话框等元素用简笔线条表现；

色彩溢出与粗糙填色：模仿马克笔或水彩的边缘渗透效果，用AE的「Roughen Edges」特效或Blender的「Texture Noise」增加手绘质感。



依据项目GUI的视觉风格，提炼出动效设计的核心色彩，确保整体设计风格的一致性和协调性：


完成动态设计后，叠加特定材质，强化视觉效果，使动效与视觉无缝融合，提升整体视觉体验：




2、动效的节奏方向探索

脉冲

脉冲是一种较为常见的动效展现形式，一般多用于科技类产品或者科幻题材的动画动效中。脉冲效果往往都有自己的运动规律，而玩家则大多会对这种规律充满好奇。

格式塔心理学表明，脉冲规律符合「闭合原则」，用户会下意识想补全动态间隔，延长注视时间。


干扰

故障干扰是我考虑的第二动效现象，它在细节表现上会尤为出色。

涂鸦+故障艺术用AE的「Glitch」特效，破坏手绘线条，加上色块错位位移、画面扭曲这种“失控”的视觉瞬间，呈现出强烈的干扰效果，表达“打破规则”的游戏特色。


Seed和动态方向都有了，那接下来就是在项目中具体去应用和验证了。

三、验证

案例一

首先拿我们的登陆页面进行大胆尝试。《界外狂潮》这张登陆页面的风格化很强，而且有明显的从左往右的动视，比较适合拿来验证我的想法：


先拆分其中一条动态线，找一找大致的感觉：


这个方向确实是我们想要的效果。有了基础形，剩下的就很好办了，其他的画面元素一个一个添加上去就行。但是每一处细节，也都是经过了组内无数次的反馈和讨论，才最终确定下来的：


比如人物出现的细节，色块和脉冲的表达我们就调整了很久：


通过这一次的案例验证，我们也进一步确定了项目的动效核心关键词：色块本身的故障干扰+脉冲现象。把核心关键词作为设计的核心语言，进一步推广到游戏的其他场景，以此来表达我们想要的狂潮动效风格。

案例二

第二个尝试的场景就是我们LOGO的动效：


在设计的时候我思考的会比较多，因为它和登陆界面不大一样，它是比较对称的外形，所以还是要有所区别。

我的思路就是从中间往两边带出，然后沿用色块故障干扰和脉冲的核心关键词来做动效：


效果出来，我个人是非常满意的，但是最后的静帧消散我觉得还是缺少了点有趣的设计。

回忆起我看过的很多宣传PV还有LOGO展示动效，它们的结尾往往都会通过一个干扰效果来收尾，这个点一下子击中了我，我也打算加上一个类似的效果。

但是我们不能简单地照搬，而是要把这个效果做得更有《界外狂潮》的调性：要狂野、要潮流、要“很坏”——最后，我就加上了这样时空错乱感觉的结尾设计：


通过第二个案例，我们继续总结出了游戏四种关键帧的风格表达：

纹理加波点；

丰富的色彩冲击；

叠影效果；

马赛克与电玩风的混搭。

案例三

接下来我们开始探索局内界面的动效。我们做了涂鸦风格的动态尝试，主要用肌理笔刷搭配故障效果，加上脉冲动态，让动效整体特点鲜明。几何碎片效果经过优化，让线元素突破边界，加上不规则随意的涂鸦笔触，表达出我们想要的狂潮风格：




而线稿方式的涂鸦，个性化风格会更为突出，我们用在了点击选择角色和武器的界面中：



四、风格延续与统一

狂潮风格验证成功之后，那就可以去大规模铺开，应用到整个游戏里了。

局外：



局内：




排位赛模式的包装：






更多点击动效：


营销动态的延续：


在各个界面一点一滴的完善下，我们的风格越来越统一和饱满，越来越趋近于我们想象中的样子。

五、结语

每次在做完动效的下一秒，我都会习惯性地追问自己：这个效果还能不能更狂野一点？它还有优化的空间吗？

创新的落地是不断试错与打磨的过程，也是永不满足的过程。就这样，在看似固化的领域，我们扒开了一道创新的缝隙，开创性地打造了行业首款“狂潮动效”设计体系，使游戏在同类作品中脱颖而出。玩家的每一次点击、每一个击杀、每一轮胜利的瞬间，那些炸裂的色彩、跳动的脉冲、不羁的涂鸦，同样可以成为表达态度、传递情感、塑造世界的核心力量。

今天《界外狂潮》也正式开启了名为玩具战线的全新玩法模式，大家现在可以在PVE关卡里也去感受我们狂放不羁的动效风格了，感兴趣的朋友不妨去试试哦——

也感谢大家的阅读，希望这次的分享可以给大家带来帮助。