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

Chengsoul

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

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

1、确定设计指导思想

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

设计理念

创造引人注目的视觉效果

设计哲学

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

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

VFX核心目标:

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

2、确定信息主次关系

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

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

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

主要元素规则

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

次要元素规则

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

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

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

主要元素

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

次要元素

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

定义应用效果的清晰度：

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

不准确的表现

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

准确的表现

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

效果分配的重要等级

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

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

可读性

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

强调点

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

重要程度

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

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

重要等级的设计规则

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

建立视觉拉杆

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

确定亮度范围

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

VFX亮度范围准则

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

VFX饱和度范围准则

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

与模型的对比范围

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

常用调色板

4、创建形状与时间规范

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

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

VFX纹理形状准则

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

不准确的表现

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

准确的表现

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

创建清晰的外形轮廓

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

不准确的表现

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

准确的表现

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

VFX时间分配准则

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

利用时间来传达游戏玩法

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

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

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

不准确的表现

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

准确的表现

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

总结

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

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

文/杨曦UEDC
来源：GameUE
原文：https://mp.weixin.qq.com/s/A52B2GFLH6BRebDBpsCWhQ