《英雄联盟》VFX视觉风格指南

感谢YAng的分享，本文基础内容来自编制@Katana个人汉化，由英雄联盟VFX学科指南所编制。

我把PDF内容重新整理，希望挖掘其中的设计方法论结构，希望未来也能对我们团队的设计也做一次拆解与沉淀。

1、确定设计指导思想

设计理念、设计哲学、设计目标

设计理念

创造引人注目的视觉效果

设计哲学

无论是魔法，火焰，烟雾，爆炸，还是临时的闪光。英雄联盟的视觉效果行为准则是让这些元素都变得生机盎然。

通过统一的视觉风格，来实现核心目标。

VFX核心目标:
 

• 动效视觉清晰，无混乱信息
• 提供促进冠军主题的视觉效果
• 创造令人惊讶和喜悦的效果

2、确定信息主次关系

明确焦点区域，减少玩家视觉干扰

VFX设计师必须对《英雄联盟》有着深刻的理解，才能清楚地将游戏玩法转换为具有吸引力和可读性的视觉体验。（必须特别熟悉自己的游戏，或同类游戏。否则你不可能知道什么是焦点。）

为了做到这一点，设计之初一定要定义“主要”和“次要”的视觉元素。要确保每一个视觉风格都能提高游戏玩法的清晰度，减少可能会令玩家感到困惑的视觉干扰。

主要元素规则
 

• 它是一个效果的焦点
• 它作为法术的主要用途
• 效果可以清晰而准确地传达游戏内容

次要元素规则
 

• 元素提高对应主题的吸引力
• 通过亮度、饱和度来支持主要元素
• 元素运用多种色调增强整体视觉吸引力

例如，日蚀技能的主要元素是日食的边界，玩家必须能够很轻松地识别出效果的半径范围。次要效果是圈内微弱的电能，它们被用于增强源计划系列皮肤线条的主题。
 

如何准确定义主要元素与次要元素：
 

 

主要元素
 

• 较高的亮度范围
• 强烈的亮度对比或饱和度对比
• 轮廓清晰
• 高不透明度
• 坚固的形状
• 剧烈的运动

次要元素
 

• 较低的亮度范围
• 小尺寸
• 轮廓模糊
• 低不透明度
• 简单的形状
• 不易察觉的运动

定义应用效果的清晰度：

对于一场比赛的体验来说，清晰度至关重要。游戏玩法的准确表现可以使玩家和观众清楚地理解和预测游戏玩法。

不准确的表现

提莫的蘑菇爆炸半径大约是600单位。然而，蘑菇的爆炸却只覆盖了它半径的一半，而且还缺少一个区域指示。
 

准确的表现

欧米茄小队的提莫用了一个不明显的圆环来显示AOE，爆炸的影响范围被准确地表现出来了。
 

效果分配的重要等级

一个效果的视觉表现应该向玩家和观众传达出它的重要等级。例如，一个基础攻击效果和她的终极技能效果具有着相同的视觉重要等级，那么它就会让玩家或观众感到困惑。

按重要等级进行设计规划，可以确保界面与所有视觉效果的功能所匹配。在确定效果的重要等级时，有评估3个核心要素：

可读性

玩家和观众可以立刻理解其效果的用途

强调点

视觉效果引导玩家专注于重要技能，同时减少团战中的视觉干扰

重要程度

每一种视觉效果都应与游戏玩法的重要等级所匹配
 

拉克丝基础攻击VS终极技能

重要等级的设计规则

重要等级可以由大小、形状、时间分配、亮度、饱和度和不透明度来控制。每个粒子的重要性应该对游戏玩法影响的程度来决定，如下所示：
 

建立视觉拉杆

定义和使用亮度、颜色等范围

确定亮度范围

控制亮度范围是视觉传递的关键。QQ号码卖号所有的技能效果都应有着不同等级的亮度范围和不透明度规范，以确保每个视觉效果的能量等级能够被准确表现。

VFX亮度范围准则

• 亮度范围越高，焦点便越集中
• 对比可以创建清晰的影响范围
• 避免使用100%或0%的亮度，因为它可能会混淆游戏环境或UI

VFX饱和度范围准则
 

• 更高饱和度范围可以吸引更多视觉焦点
• 对比可以创建清晰的影响范围
• 避免使用100%或0%的亮度，因为它可能会混淆游戏环境或UI

与模型的对比范围

比模型有更高、更宽广的亮度范围和饱和度范围。
 

常用调色板
 

 

4、创建形状与时间规范

形状语言配合时间节奏形成设计风格

形状是定义VFX艺术风格的另一个主要元素，它可以帮助减少视觉干扰，常见形状包括：简练的细节、手绘纹理、柔软和尖锐形状的混合、清晰的轮廓和移动物体的纹理。

VFX纹理形状准则
 

• 所有纹理都需要用简练的细节来手工绘制
• 纹理需要是柔软和尖锐形状的混合

不准确的表现

避免使用带有过多细节的照片纹理或视觉效果，因为它会产生不必要的干扰。
 

准确的表现

线条软硬结合的手绘纹理效果最佳。
 

创建清晰的外形轮廓

创建清晰的形状是减少团战中的干扰、快速沟通游戏和传达法术主题的关键。

不准确的表现

由于在效果上有太多的细节和对比，很难分辨出实际物体在哪里移动，以及效果的形状是什么。
 

准确的表现

这是一个极好地正确形状轮廓的表现。它的形状很简单，但是它有着足够大的亮度范围来创建焦点。
 

VFX时间分配准则
 

• 所有效果都应该具有预备和消散
• 衰减能量可以通过改变亮度、色调、饱和度、不透明度或大小来表示
• 色彩变化、亮度或不透明度是影响效果时间分配的重要因素

利用时间来传达游戏玩法

一个效果的时间分配传达了特定的游戏时刻。
 

动态时间分配增强其艺术感

动态的时间分配创造了最具影响力的时刻，为玩家创造了更高的满足感，并且增加了其对于效果的兴趣。

不准确的表现

由于投射效果是线性时间分配的，因此它所爆发出的冲击波创造了一个不那么有趣的时刻。
 

 

准确的表现

艾克的R是动态时间分配的，它创造了非常具有影响力和强力的时刻。
 

 

总结

触类旁通，按照《英雄联盟技能动效风格指南》进行拆解，对界面动效也可以整理出类似的设计指南，树立自己独特的风格语言，更高效、高质的保障视觉统一性、信息传达的准确性。

下图是我拆出来的指南结构，期待我们的游族UEDC团队在今年能产出一份《XX项目界面动效设计指南》，合适的话也会分享给大家。（赶快分享、点在看，支持一下吧。）