「還能再狂野一點(diǎn)嗎？」《界外狂潮》風(fēng)格化動(dòng)效設(shè)計(jì)復(fù)盤

作者 | 皮皮嗨

雷火藝術(shù)中心動(dòng)效設(shè)計(jì)師

在FPS這個(gè)競(jìng)爭(zhēng)激烈的市場(chǎng)上，作為后來(lái)者的《界外狂潮》一直想去做一些不一樣的設(shè)計(jì)，給這個(gè)類型帶來(lái)一些耳目一新的體驗(yàn)——當(dāng)然，也包括界面動(dòng)效這個(gè)領(lǐng)域。

《界外狂潮》的動(dòng)效并非單純地去追求視覺(jué)刺激，而是通過(guò)色彩沖突、動(dòng)態(tài)失衡、結(jié)構(gòu)解構(gòu)等設(shè)計(jì)手段，將“打破規(guī)則”的理念貫穿于交互體驗(yàn)中。這種設(shè)計(jì)既服務(wù)于玩法創(chuàng)新（如游戲的碎片卡機(jī)制），也塑造了游戲獨(dú)特的文化符號(hào)。通過(guò)潮酷朋克美學(xué)的解構(gòu)與重組、手繪質(zhì)感的溫度介入，以及混合媒介的虛實(shí)共生，構(gòu)建出兼具潮流感與街頭文化張力的視覺(jué)語(yǔ)言。

今天這篇文章就會(huì)帶大家回顧一下我們的創(chuàng)作歷程，希望能給各位帶來(lái)一些啟發(fā)。

一、前期定位分析

在設(shè)計(jì)之初，我們首先分析了一下目前市面上比較主流的一些FPS游戲，比如《CS》《COD》《戰(zhàn)地》《Apex》等等，看看它們的動(dòng)效是如何呈現(xiàn)的；我們還關(guān)注了一些其他類型，但是風(fēng)格會(huì)有些相似的游戲，如《賽博朋克2077》和《極品飛車》等等，對(duì)它們的風(fēng)格化動(dòng)效也做了一些解析。

CDPR-《賽博朋克2077》

我們?cè)谡{(diào)研過(guò)后，發(fā)現(xiàn)當(dāng)時(shí)的游戲動(dòng)態(tài)設(shè)計(jì)領(lǐng)域存在著明顯的風(fēng)格空白——市面上不僅缺乏狂潮手繪風(fēng)格的動(dòng)效產(chǎn)品，而且當(dāng)時(shí)的動(dòng)效表現(xiàn)形式也普遍趨于保守，難以滿足品牌對(duì)視覺(jué)張力和個(gè)性化表達(dá)的需求。

基于這一市場(chǎng)缺口，我們決定去打造行業(yè)首套完整的狂潮手繪風(fēng)格動(dòng)效體系，以填補(bǔ)市場(chǎng)空缺，并為品牌視覺(jué)注入更具沖擊力和藝術(shù)感的表達(dá)方式，也為動(dòng)態(tài)設(shè)計(jì)領(lǐng)域帶來(lái)全新的視覺(jué)語(yǔ)言和創(chuàng)意。

我們?cè)诜治龊陀懻撨^(guò)后，也整理并確定下來(lái)了一些我們動(dòng)效風(fēng)格的調(diào)性：

1、高飽和度色：

• 采用鮮艷的顏色，吸引玩家的注意力；
• 確保色彩在不同場(chǎng)景下的表現(xiàn)力；

2、破碎幾何圖形：

• 利用不規(guī)則形狀，創(chuàng)造視覺(jué)沖擊；
• 結(jié)合色彩偏移，形成獨(dú)特風(fēng)格；

3、波普藝術(shù)元素：

• 融合流行文化符號(hào)，增強(qiáng)視覺(jué)趣味性；
• 運(yùn)用大膽的色彩和圖案，突出個(gè)性；

4、故障藝術(shù)風(fēng)格：

• 模擬數(shù)字故障效果，增加視覺(jué)層次；
• 通過(guò)錯(cuò)位和扭曲，展現(xiàn)技術(shù)美感；

5、朋克碎片元素：

• 采用反叛和前衛(wèi)的設(shè)計(jì)理念；
• 結(jié)合銳利線條，強(qiáng)化視覺(jué)沖擊。

二、風(fēng)格探索

在基調(diào)確定之后，我們開始探索具體的風(fēng)格表現(xiàn)。我們關(guān)注到了兩個(gè)優(yōu)秀的作品，一個(gè)是Criterion Games制作、EA發(fā)行的《極品飛車：不羈》。這款游戲的動(dòng)效采用了序列幀美式手繪漫畫風(fēng)，其筆觸肌理效果豐富交錯(cuò)，在車輛加速漂移時(shí)出現(xiàn)的動(dòng)態(tài)涂鴉效果非常帥氣和獨(dú)特：

另一個(gè)是索尼電影娛樂(lè)推出的《蜘蛛俠：平行宇宙》。電影中的多維空間扭曲效果、錯(cuò)位失真效果與形變效果都極具視覺(jué)沖擊力：

在我們看來(lái)，《極品飛車》中較為狂放的手繪涂鴉元素，還有《蜘蛛俠》里的故障色彩，整體都是比較符合《界外狂潮》項(xiàng)目想要傳達(dá)的調(diào)性的。我們希望可以通過(guò)類似的風(fēng)格表達(dá)，結(jié)合《界外狂潮》“狂”和“潮”的基因去融合和重構(gòu)，最終創(chuàng)造出我們想要的效果。

1、動(dòng)效seed探索

色塊

• 抽象與節(jié)奏：色塊動(dòng)態(tài)的核心在于通過(guò)形狀、色彩和運(yùn)動(dòng)的抽象組合傳遞情緒；
• 動(dòng)態(tài)設(shè)計(jì)：嘗試色塊的參數(shù)化運(yùn)動(dòng)；
• 色彩情緒與過(guò)渡：不同色塊的碰撞方式（如硬切、漸變、疊加）會(huì)影響風(fēng)格；
• 高對(duì)比色塊（如《蜘蛛俠：平行宇宙》的故障藝術(shù)）適合表現(xiàn)沖擊力。

手繪涂鴉

手繪涂鴉風(fēng)格是一種充滿自由感、原始生命力和個(gè)性化表達(dá)的美術(shù)形式，適合用于動(dòng)畫、插畫、獨(dú)立游戲或動(dòng)態(tài)設(shè)計(jì)：

1. 線條的「不完美感」：故意保留鉛筆草稿的抖動(dòng)、斷線或重疊筆觸；
2. 動(dòng)態(tài)抽象符號(hào)：閃電、爆炸、對(duì)話框等元素用簡(jiǎn)筆線條表現(xiàn)；
3. 色彩溢出與粗糙填色：模仿馬克筆或水彩的邊緣滲透效果，用AE的「Roughen Edges」特效或Blender的「Texture Noise」增加手繪質(zhì)感。

視覺(jué)風(fēng)格提取

依據(jù)項(xiàng)目GUI的視覺(jué)風(fēng)格，提煉出動(dòng)效設(shè)計(jì)的核心色彩，確保整體設(shè)計(jì)風(fēng)格的一致性和協(xié)調(diào)性：

視覺(jué)材質(zhì)疊加

完成動(dòng)態(tài)設(shè)計(jì)后，疊加特定材質(zhì)，強(qiáng)化視覺(jué)效果，使動(dòng)效與視覺(jué)無(wú)縫融合，提升整體視覺(jué)體驗(yàn)：

2、動(dòng)效的節(jié)奏方向探索

脈沖

脈沖是一種較為常見的動(dòng)效展現(xiàn)形式，一般多用于科技類產(chǎn)品或者科幻題材的動(dòng)畫動(dòng)效中。脈沖效果往往都有自己的運(yùn)動(dòng)規(guī)律，而玩家則大多會(huì)對(duì)這種規(guī)律充滿好奇。

格式塔心理學(xué)表明，脈沖規(guī)律符合「閉合原則」，用戶會(huì)下意識(shí)想補(bǔ)全動(dòng)態(tài)間隔，延長(zhǎng)注視時(shí)間。

暴雪娛樂(lè)-《風(fēng)暴英雄》

干擾

故障干擾是我考慮的第二動(dòng)效現(xiàn)象，它在細(xì)節(jié)表現(xiàn)上會(huì)尤為出色。

涂鴉+故障藝術(shù)用AE的「Glitch」特效，破壞手繪線條，加上色塊錯(cuò)位位移、畫面扭曲這種“失控”的視覺(jué)瞬間，呈現(xiàn)出強(qiáng)烈的干擾效果，表達(dá)“打破規(guī)則”的游戲特色。

索尼電影娛樂(lè)-《蜘蛛俠：平行宇宙》

Seed和動(dòng)態(tài)方向都有了，那接下來(lái)就是在項(xiàng)目中具體去應(yīng)用和驗(yàn)證了。

三、驗(yàn)證

案例一

首先拿我們的登陸頁(yè)面進(jìn)行大膽嘗試。《界外狂潮》這張登陸頁(yè)面的風(fēng)格化很強(qiáng)，而且有明顯的從左往右的動(dòng)視，比較適合拿來(lái)驗(yàn)證我的想法：

先拆分其中一條動(dòng)態(tài)線，找一找大致的感覺(jué)：

這個(gè)方向確實(shí)是我們想要的效果。有了基礎(chǔ)形，剩下的就很好辦了，其他的畫面元素一個(gè)一個(gè)添加上去就行。但是每一處細(xì)節(jié)，也都是經(jīng)過(guò)了組內(nèi)無(wú)數(shù)次的反饋和討論，才最終確定下來(lái)的：

比如人物出現(xiàn)的細(xì)節(jié)，色塊和脈沖的表達(dá)我們就調(diào)整了很久：

通過(guò)這一次的案例驗(yàn)證，我們也進(jìn)一步確定了項(xiàng)目的動(dòng)效核心關(guān)鍵詞：色塊本身的故障干擾+脈沖現(xiàn)象。把核心關(guān)鍵詞作為設(shè)計(jì)的核心語(yǔ)言，進(jìn)一步推廣到游戲的其他場(chǎng)景，以此來(lái)表達(dá)我們想要的狂潮動(dòng)效風(fēng)格。

案例二

第二個(gè)嘗試的場(chǎng)景就是我們LOGO的動(dòng)效：

在設(shè)計(jì)的時(shí)候我思考的會(huì)比較多，因?yàn)樗偷顷懡缑娌淮笠粯樱潜容^對(duì)稱的外形，所以還是要有所區(qū)別。

我的思路就是從中間往兩邊帶出，然后沿用色塊故障干擾和脈沖的核心關(guān)鍵詞來(lái)做動(dòng)效：

效果出來(lái)，我個(gè)人是非常滿意的，但是最后的靜幀消散我覺(jué)得還是缺少了點(diǎn)有趣的設(shè)計(jì)。

回憶起我看過(guò)的很多宣傳PV還有LOGO展示動(dòng)效，它們的結(jié)尾往往都會(huì)通過(guò)一個(gè)干擾效果來(lái)收尾，這個(gè)點(diǎn)一下子擊中了我，我也打算加上一個(gè)類似的效果。

但是我們不能簡(jiǎn)單地照搬，而是要把這個(gè)效果做得更有《界外狂潮》的調(diào)性：要狂野、要潮流、要“很壞”——最后，我就加上了這樣時(shí)空錯(cuò)亂感覺(jué)的結(jié)尾設(shè)計(jì)：

通過(guò)第二個(gè)案例，我們繼續(xù)總結(jié)出了游戲四種關(guān)鍵幀的風(fēng)格表達(dá)：

• 紋理加波點(diǎn)；
• 豐富的色彩沖擊；
• 疊影效果；
• 馬賽克與電玩風(fēng)的混搭。

案例三

接下來(lái)我們開始探索局內(nèi)界面的動(dòng)效。我們做了涂鴉風(fēng)格的動(dòng)態(tài)嘗試，主要用肌理筆刷搭配故障效果，加上脈沖動(dòng)態(tài)，讓動(dòng)效整體特點(diǎn)鮮明。幾何碎片效果經(jīng)過(guò)優(yōu)化，讓線元素突破邊界，加上不規(guī)則隨意的涂鴉筆觸，表達(dá)出我們想要的狂潮風(fēng)格：

而線稿方式的涂鴉，個(gè)性化風(fēng)格會(huì)更為突出，我們用在了點(diǎn)擊選擇角色和武器的界面中：

四、風(fēng)格延續(xù)與統(tǒng)一

狂潮風(fēng)格驗(yàn)證成功之后，那就可以去大規(guī)模鋪開，應(yīng)用到整個(gè)游戲里了。

局外：

局內(nèi)：

排位賽模式的包裝：

更多點(diǎn)擊動(dòng)效：

營(yíng)銷動(dòng)態(tài)的延續(xù)：

在各個(gè)界面一點(diǎn)一滴的完善下，我們的風(fēng)格越來(lái)越統(tǒng)一和飽滿，越來(lái)越趨近于我們想象中的樣子。

五、結(jié)語(yǔ)

每次在做完動(dòng)效的下一秒，我都會(huì)習(xí)慣性地追問(wèn)自己：這個(gè)效果還能不能更狂野一點(diǎn)？它還有優(yōu)化的空間嗎？

創(chuàng)新的落地是不斷試錯(cuò)與打磨的過(guò)程，也是永不滿足的過(guò)程。就這樣，在看似固化的領(lǐng)域，我們扒開了一道創(chuàng)新的縫隙，開創(chuàng)性地打造了行業(yè)首款“狂潮動(dòng)效”設(shè)計(jì)體系，使游戲在同類作品中脫穎而出。玩家的每一次點(diǎn)擊、每一個(gè)擊殺、每一輪勝利的瞬間，那些炸裂的色彩、跳動(dòng)的脈沖、不羈的涂鴉，同樣可以成為表達(dá)態(tài)度、傳遞情感、塑造世界的核心力量。

今天《界外狂潮》也正式開啟了名為玩具戰(zhàn)線的全新玩法模式，大家現(xiàn)在可以在PVE關(guān)卡里也去感受我們狂放不羈的動(dòng)效風(fēng)格了，感興趣的朋友不妨去試試哦——

也感謝大家的閱讀，希望這次的分享可以給大家?guī)?lái)幫助。