「還能再狂野一點嗎？」《界外狂潮》風格化動效設計復盤

作者 | 皮皮嗨

雷火藝術中心動效設計師

在FPS這個競爭激烈的市場上，作為后來者的《界外狂潮》一直想去做一些不一樣的設計，給這個類型帶來一些耳目一新的體驗——當然，也包括界面動效這個領域。

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

今天這篇文章就會帶大家回顧一下我們的創作歷程，希望能給各位帶來一些啟發。

一、前期定位分析

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

CDPR-《賽博朋克2077》

我們在調研過后，發現當時的游戲動態設計領域存在著明顯的風格空白——市面上不僅缺乏狂潮手繪風格的動效產品，而且當時的動效表現形式也普遍趨于保守，難以滿足品牌對視覺張力和個性化表達的需求。

基于這一市場缺口，我們決定去打造行業首套完整的狂潮手繪風格動效體系，以填補市場空缺，并為品牌視覺注入更具沖擊力和藝術感的表達方式，也為動態設計領域帶來全新的視覺語言和創意。

我們在分析和討論過后，也整理并確定下來了一些我們動效風格的調性：

1、高飽和度色：

• 采用鮮艷的顏色，吸引玩家的注意力；
• 確保色彩在不同場景下的表現力；

2、破碎幾何圖形：

• 利用不規則形狀，創造視覺沖擊；
• 結合色彩偏移，形成獨特風格；

3、波普藝術元素：

• 融合流行文化符號，增強視覺趣味性；
• 運用大膽的色彩和圖案，突出個性；

4、故障藝術風格：

• 模擬數字故障效果，增加視覺層次；
• 通過錯位和扭曲，展現技術美感；

5、朋克碎片元素：

• 采用反叛和前衛的設計理念；
• 結合銳利線條，強化視覺沖擊。

二、風格探索

在基調確定之后，我們開始探索具體的風格表現。我們關注到了兩個優秀的作品，一個是Criterion Games制作、EA發行的《極品飛車：不羈》。這款游戲的動效采用了序列幀美式手繪漫畫風，其筆觸肌理效果豐富交錯，在車輛加速漂移時出現的動態涂鴉效果非常帥氣和獨特：

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

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

1、動效seed探索

色塊

• 抽象與節奏：色塊動態的核心在于通過形狀、色彩和運動的抽象組合傳遞情緒；
• 動態設計：嘗試色塊的參數化運動；
• 色彩情緒與過渡：不同色塊的碰撞方式（如硬切、漸變、疊加）會影響風格；
• 高對比色塊（如《蜘蛛俠：平行宇宙》的故障藝術）適合表現沖擊力。

手繪涂鴉

手繪涂鴉風格是一種充滿自由感、原始生命力和個性化表達的美術形式，適合用于動畫、插畫、獨立游戲或動態設計：

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

視覺風格提取

依據項目GUI的視覺風格，提煉出動效設計的核心色彩，確保整體設計風格的一致性和協調性：

視覺材質疊加

完成動態設計后，疊加特定材質，強化視覺效果，使動效與視覺無縫融合，提升整體視覺體驗：

2、動效的節奏方向探索

脈沖

脈沖是一種較為常見的動效展現形式，一般多用于科技類產品或者科幻題材的動畫動效中。脈沖效果往往都有自己的運動規律，而玩家則大多會對這種規律充滿好奇。

格式塔心理學表明，脈沖規律符合「閉合原則」，用戶會下意識想補全動態間隔，延長注視時間。

暴雪娛樂-《風暴英雄》

干擾

故障干擾是我考慮的第二動效現象，它在細節表現上會尤為出色。

涂鴉+故障藝術用AE的「Glitch」特效，破壞手繪線條，加上色塊錯位位移、畫面扭曲這種“失控”的視覺瞬間，呈現出強烈的干擾效果，表達“打破規則”的游戲特色。

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

Seed和動態方向都有了，那接下來就是在項目中具體去應用和驗證了。

三、驗證

案例一

首先拿我們的登陸頁面進行大膽嘗試。《界外狂潮》這張登陸頁面的風格化很強，而且有明顯的從左往右的動視，比較適合拿來驗證我的想法：

先拆分其中一條動態線，找一找大致的感覺：

這個方向確實是我們想要的效果。有了基礎形，剩下的就很好辦了，其他的畫面元素一個一個添加上去就行。但是每一處細節，也都是經過了組內無數次的反饋和討論，才最終確定下來的：

比如人物出現的細節，色塊和脈沖的表達我們就調整了很久：

通過這一次的案例驗證，我們也進一步確定了項目的動效核心關鍵詞：色塊本身的故障干擾+脈沖現象。把核心關鍵詞作為設計的核心語言，進一步推廣到游戲的其他場景，以此來表達我們想要的狂潮動效風格。

案例二

第二個嘗試的場景就是我們LOGO的動效：

在設計的時候我思考的會比較多，因為它和登陸界面不大一樣，它是比較對稱的外形，所以還是要有所區別。

我的思路就是從中間往兩邊帶出，然后沿用色塊故障干擾和脈沖的核心關鍵詞來做動效：

效果出來，我個人是非常滿意的，但是最后的靜幀消散我覺得還是缺少了點有趣的設計。

回憶起我看過的很多宣傳PV還有LOGO展示動效，它們的結尾往往都會通過一個干擾效果來收尾，這個點一下子擊中了我，我也打算加上一個類似的效果。

但是我們不能簡單地照搬，而是要把這個效果做得更有《界外狂潮》的調性：要狂野、要潮流、要“很壞”——最后，我就加上了這樣時空錯亂感覺的結尾設計：

通過第二個案例，我們繼續總結出了游戲四種關鍵幀的風格表達：

• 紋理加波點；
• 豐富的色彩沖擊；
• 疊影效果；
• 馬賽克與電玩風的混搭。

案例三

接下來我們開始探索局內界面的動效。我們做了涂鴉風格的動態嘗試，主要用肌理筆刷搭配故障效果，加上脈沖動態，讓動效整體特點鮮明。幾何碎片效果經過優化，讓線元素突破邊界，加上不規則隨意的涂鴉筆觸，表達出我們想要的狂潮風格：

而線稿方式的涂鴉，個性化風格會更為突出，我們用在了點擊選擇角色和武器的界面中：

四、風格延續與統一

狂潮風格驗證成功之后，那就可以去大規模鋪開，應用到整個游戲里了。

局外：

局內：

排位賽模式的包裝：

更多點擊動效：

營銷動態的延續：

在各個界面一點一滴的完善下，我們的風格越來越統一和飽滿，越來越趨近于我們想象中的樣子。

五、結語

每次在做完動效的下一秒，我都會習慣性地追問自己：這個效果還能不能更狂野一點？它還有優化的空間嗎？

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

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

也感謝大家的閱讀，希望這次的分享可以給大家帶來幫助。