《英雄聯盟》VFX視覺風格指南

感謝YAng的分享，本文基礎內容來自編制@Katana個人漢化，由英雄聯盟VFX學科指南所編制。

我把PDF內容重新整理，希望挖掘其中的設計方法論結構，希望未來也能對我們團隊的設計也做一次拆解與沉澱。

1、確定設計指導思想

設計理念、設計哲學、設計目標

設計理念

創造引人注目的視覺效果

設計哲學

無論是魔法，火焰，煙霧，爆炸，還是臨時的閃光。英雄聯盟的視覺效果行為準則是讓這些元素都變得生機盎然。

通過統一的視覺風格，來實現核心目標。

VFX核心目標:

• 動效視覺清晰，無混亂資訊
• 提供促進冠軍主題的視覺效果
• 創造令人驚訝和喜悅的效果
  

2、確定資訊主次關係

明確焦點區域，減少玩家視覺干擾

VFX設計師必須對《英雄聯盟》有著深刻的理解，才能清楚地將遊戲玩法轉換為具有吸引力和可讀性的視覺體驗。（必須特別熟悉自己的遊戲，或同類遊戲。否則你不可能知道什麼是焦點。）

為了做到這一點，設計之初一定要定義“主要”和“次要”的視覺元素。要確保每一個視覺風格都能提高遊戲玩法的清晰度，減少可能會令玩家感到困惑的視覺干擾。

主要元素規則

• 它是一個效果的焦點
• 它作為法術的主要用途
• 效果可以清晰而準確地傳達遊戲內容
  

次要元素規則

• 元素提高對應主題的吸引力
• 通過亮度、飽和度來支援主要元素
• 元素運用多種色調增強整體視覺吸引力
  

例如，日蝕技能的主要元素是日食的邊界，玩家必須能夠很輕鬆地識別出效果的半徑範圍。次要效果是圈內微弱的電能，它們被用於增強源計劃系列皮膚線條的主題。


如何準確定義主要元素與次要元素：


主要元素

• 較高的亮度範圍
• 強烈的亮度對比或飽和度對比
• 輪廓清晰
• 高不透明度
• 堅固的形狀
• 劇烈的運動
  

次要元素

• 較低的亮度範圍
• 小尺寸
• 輪廓模糊
• 低不透明度
• 簡單的形狀
• 不易察覺的運動
  

定義應用效果的清晰度：

對於一場比賽的體驗來說，清晰度至關重要。遊戲玩法的準確表現可以使玩家和觀眾清楚地理解和預測遊戲玩法。

不準確的表現

提莫的蘑菇爆炸半徑大約是600單位。然而，蘑菇的爆炸卻只覆蓋了它半徑的一半，而且還缺少一個區域指示。


準確的表現

歐米茄小隊的提莫用了一個不明顯的圓環來顯示AOE，爆炸的影響範圍被準確地表現出來了。


效果分配的重要等級

一個效果的視覺表現應該向玩家和觀眾傳達出它的重要等級。例如，一個基礎攻擊效果和她的終極技能效果具有著相同的視覺重要等級，那麼它就會讓玩家或觀眾感到困惑。

按重要等級進行設計規劃，可以確保介面與所有視覺效果的功能所匹配。在確定效果的重要等級時，有評估3個核心要素：

可讀性

玩家和觀眾可以立刻理解其效果的用途

強調點

視覺效果引導玩家專注於重要技能，同時減少團戰中的視覺干擾

重要程度

每一種視覺效果都應與遊戲玩法的重要等級所匹配


重要等級的設計規則

重要等級可以由大小、形狀、時間分配、亮度、飽和度和不透明度來控制。每個粒子的重要性應該對遊戲玩法影響的程度來決定，如下所示：



建立視覺拉桿

定義和使用亮度、顏色等範圍

確定亮度範圍

控制亮度範圍是視覺傳遞的關鍵。所有的技能效果都應有著不同等級的亮度範圍和不透明度規範，以確保每個視覺效果的能量等級能夠被準確表現。

VFX亮度範圍準則

• 亮度範圍越高，焦點便越集中
• 對比可以建立清晰的影響範圍
• 避免使用100%或0%的亮度，因為它可能會混淆遊戲環境或UI
  

VFX飽和度範圍準則

• 更高飽和度範圍可以吸引更多視覺焦點
• 對比可以建立清晰的影響範圍
• 避免使用100%或0%的亮度，因為它可能會混淆遊戲環境或UI
  

與模型的對比範圍

比模型有更高、更寬廣的亮度範圍和飽和度範圍。



常用調色盤







4、建立形狀與時間規範

形狀語言配合時間節奏形成設計風格

形狀是定義VFX藝術風格的另一個主要元素，它可以幫助減少視覺干擾，常見形狀包括：簡練的細節、手繪紋理、柔軟和尖銳形狀的混合、清晰的輪廓和移動物體的紋理。

VFX紋理形狀準則

• 所有紋理都需要用簡練的細節來手工繪製
• 紋理需要是柔軟和尖銳形狀的混合
  

不準確的表現

避免使用帶有過多細節的照片紋理或視覺效果，因為它會產生不必要的干擾。


準確的表現

線條軟硬結合的手繪紋理效果最佳。


建立清晰的外形輪廓

建立清晰的形狀是減少團戰中的干擾、快速溝通遊戲和傳達法術主題的關鍵。

不準確的表現

由於在效果上有太多的細節和對比，很難分辨出實際物體在哪裡移動，以及效果的形狀是什麼。


準確的表現

這是一個極好地正確形狀輪廓的表現。它的形狀很簡單，但是它有著足夠大的亮度範圍來建立焦點。


VFX時間分配準則

• 所有效果都應該具有預備和消散
• 衰減能量可以通過改變亮度、色調、飽和度、不透明度或大小來表示
• 色彩變化、亮度或不透明度是影響效果時間分配的重要因素
  

利用時間來傳達遊戲玩法

一個效果的時間分配傳達了特定的遊戲時刻。


動態時間分配增強其藝術感

動態的時間分配創造了最具影響力的時刻，為玩家創造了更高的滿足感，並且增加了其對於效果的興趣。

不準確的表現

由於投射效果是線性時間分配的，因此它所爆發出的衝擊波創造了一個不那麼有趣的時刻。


準確的表現

艾克的R是動態時間分配的，它創造了非常具有影響力和強力的時刻。


總結

觸類旁通，按照《英雄聯盟技能動效風格指南》進行拆解，對介面動效也可以整理出類似的設計指南，樹立自己獨特的風格語言，更高效、高質的保障視覺統一性、資訊傳達的準確性。

下圖是我拆出來的指南結構，期待我們的遊族UEDC團隊在今年能產出一份《XX專案介面動效設計指南》，合適的話也會分享給大家。（趕快分享、點在看，支援一下吧。）



來源：GameUE
原文：https://mp.weixin.qq.com/s/A52B2GFLH6BRebDBpsCWhQ