文/Nathan Lovato
我们总是很容易通过封面去评判一本书的好坏。关于我们的网站或任何视觉设计也是如此。但是制定一个吸引人的艺术方向以及进行有效的UX设计却不是一件简单的任务。当有人发现你的游戏时，他的第一印象总是关于你的图像设计。他可能会先看到你的游戏的一张图像。可能是来自视频截图，视频或游戏动图。
所以如果你之前还不理解为何工作室门会花大笔钱去优化图像的话，现在你便能够找到原因。
而我们真正要讨论的内容是什么呢？和谐的视觉效果不只是关于精致的图像。它们还必须让玩家觉得好看且具有意义。实际上，你的游戏美学需要同时包含设计原则以及你的整体艺术风格。换句话说，也就是所有能够提高你的游戏视觉效果吸引力的元素。
作为美术师，我们还有许多需要雕琢的游戏艺术内容。为了让我们的设计具有生命力，并提供给用户有趣的体验，我们必须：
- 创造强大的构成或布局去引导玩家的视线。
- 为我们的游戏资产制定吸引人的配色方案和形状。
- 根据用户反馈，分析以及A/B测试方法去判断我们的选择是否可行。
我们该如何做到这些呢？在本文中我将与你们分享完善游戏视觉效果的一些捷径。以下技巧同样也能够帮助你更好地理解美术师这份工作以及如何称职地做好这份工作。
1.专注于强大的构成
任何图像内容的威力就在于它能够帮助玩家去理解设计的视觉语言。一方面，它包含了各种视觉元素—-这就像是一张词汇表，如颜色，形状，色差等等。另一方面，我们拥有与语法规则相似的设计原则。它们能够提供给我们整合所有元素的灵活工具。
明确的构成便等于准确使用设计原则。这一原则通常包含6个元素：规模与比例，重复与对比，平衡，强调，层次结构与和谐，单位。理解所有这些元素是很有趣的。每个元素就似一面放大镜，能够帮助你一点点地分析自己的创造，并更好地完善它们。
确定布局
在此我们将专注于布局的平衡。我们应该有效利用空间和比例去创造能够引导玩家视线的清楚格局。通常情况下我们都会通过网页设计和界面去设计布局。但在所有艺术领域概念都是非常重要的。
布局是图像元素的组合。它可以是一款游戏的GUI，但却并不局限于此。在动画产业中，布局美术师将明确一个电影镜头中每一个元素的位置，大小和比例。伴随着光线和颜色，布局是之后会活跃起来的实体基础。
2 sample layouts from Marcelo Vignali on Disney’s Mulan
强大的构成总是能够将玩家的视线引向那些重要的内容。它们会为玩家创造前进的道路—-这就像各种元素间连贯的层级。你的游戏中的每个图像资产都具有一定的视觉分量。这些分量是基于每个资产在canvas上的位置，大小，对比度与亮度所决定。这依赖于各种元素。从整体上看，较大，较亮或五彩的对象总是拥有较高的分量，因为它们能与周边的事物形成鲜明的反差。从而更有效地引起人们的注意。
适当分隔元素是确保玩家能够轻松浏览你的界面的关键。我想强调的是在元素之间留出一定空间是非常重要的。屏幕中间的游戏按键就像是国王房间里的王座：你能够从它所摆放的位置看出它的重要性。它总是能够吸引你的注意。
玩家需要能够控制游戏中的各种变量并与UI元素进行互动。这也是为何界面设计总是很鲜明并被置于游戏世界最上方的原因。GUI通常都是逆着屏幕进行设置，从而将其与游戏世界分隔开来。
你也可以使用同样的方式去设置游戏方法：如果你在游戏玩法之间留出足够的空间，它们便会显得更加重要且独特。
具有深度的世界
还有一个图片元素能够创造图像元素间的层级，那就是深度。我们可以将视觉设计的大小和比例与深度相结合让玩家感受到游戏世界的规模。深度既依赖也作用于多种设计原则的使用。它能够创造前景与背景间的反差。并通过环境光线而进一步融合整个游戏世界。
我们可以通过2种方式去实现深度：重叠资产与使用光线。第一种方法较为直接。如果我们重叠了不同图像元素，我们会觉得它们更接近自己。通过使用鲜艳的轮廓，像《巫师3》等游戏便创造了互动元素与背景元素间的重叠，从而让它们更加突出。
就像在《巫师》中，你可以看到被光圈包围着的路径与战利品。
Using your Witcher’s senses, you can see trails and loots surrounded by a glow.
另外一种创造深度的方法便是真正理解光线。当光线穿越空间时，它们会碰到尘粒并且会分散这些尘粒。如果穿行速度更快，它们便会遇到更多尘粒，从而转换出更多颜色。当我们在看远处的山时，它们通常都是灰色的。比起那些离我们更近的对象，它们看起来会比较暗淡。而分析并复制这些效果到图像中能够帮助我们创造出更具3D效果的游戏世界。
上图是我之前所创造的游戏截图。你可以发现道路与背景中的山之间具有饱和差。
A screenshot from a game I worked on last year. Notice the difference of saturation and contrast between the road and the hills in the background.
2.努力创造具有吸引力的资产
颜色，光线和形状是定义你的图像风格的3大要素。图像风格能够赋予你的游戏一个独特的身份。图像的新鲜感与吸引眼球的能力将构成它们的魅力，这也是动画世界中一个常见的概念。
有关吸引力的理念是关于创造作品与观众之间的一种联系。这需要归功于充满魅力的角色或者让人惊叹的景色。同时设计师需要将所有设计原则与自己的一些设计经验相结合。这也是我们作为设计师的经验之一：想出一些能够与玩家形成共鸣的艺术方向。
再一次地，吸引力艺术并不等于惊喜的绘制。你的视觉效果应该足够清楚简单，且能够吸引人的眼球。我们便拥有许多带有有效美术风格的手机游戏案例。即使是一些简单但却很可爱的资产也需要你花时间去创造并优化。创造吸引人的游戏世界需要一定的经验。此外我们还需要专注于2大元素：轮廓和颜色。虽然我提到了光线，但并不是每一款游戏都能使用它。如果你创造的是一款带有简单设计或简单美术风格的2D游戏，你可能不会用到光线。
轮廓的威力
阴影可能成就或破坏你的视觉构成。当我在学习动画时，我和同学尝试了一次快速但却并不简单的实验。我们使用角色去表示一些特别的行动或情感。但我们只能呈现他们的轮廓。最终观众需要说出发生了什么。但结果是我们遭遇了多次失败。
关键在于大多数情况下轮廓未能发挥作用。通常情况下如果你不能通过一个对象的轮廓直观地理解它的特征，那么这一设计便不可能吸引你的注意。
当我们进入一个游戏世界时，我们会发现各种对象，怪兽和角色。它们是朋友还是敌人？是能够与你互动还是只是背景的一部分？我们的大脑会处理我们所看到的一切并快速做出反应。我们会下意识地对我们所遇到的任何对象做出判断与反应。而轮廓则具有重要的作用。
Who are they? Hint: some of the character designs I love the most. Doesn’t help? I knew I should have used Mario and Sonic…
你是否认出了Link，Zelda和Ganondorf？你可以选择迪士尼电影中的角色，武器和其它建筑。一个出色的剑的轮廓必须让人一眼就看出它是一把剑。它的刀锋必须是锋利的，且带有圆形的刀柄。因为我们知道一些较为锋利的东西大多都是危险的。同时，一些胖胖或毛茸茸的动物总是看起来很可爱很亲切。
为了让玩家能够更轻松地判断一个轮廓，你需要在它身边留出一些空间，或者说你应该在一个角色的手与身体，或者两条腿之间留出一些实体空间。就像我们在本文第一部分中所说的那样，这是留给那些重要构成元素的空间，目的是为了让它们看起来更清楚。这一原则同样也适用于单一角色或对象的比例。就像上图Link的轮廓便是一个有效的例子。
充满活力的颜色
在创造唤醒人们情感的图像时，颜色便是我们的最佳工具。我们总是认为那些鲜艳且具有高饱和度的颜色是充满活力的颜色。颜色能够赋予我们的图画生命力。在一张单色图中添加颜色就好像往一道菜中撒上盐或胡椒一样。它能够强化一张图画的故事。
人们对于颜色的欣赏是非常主观的，所以在创造颜色方案时我们并没有可以遵循的特定公式。所以我只能在此提供给你们一些参考与建议。
在整款游戏中使用高饱和度的颜色能够更好地迎合更广泛的用户。他们会因此情绪高涨。这也是为何大多数休闲游戏创造者会选择高饱和度的调色。而一些柔和的色调则会创造出较为阴郁的氛围。这也是像《纪念碑谷》等带有虚幻世界的游戏的理想选择。
带有充满活力的颜色的更加现实的图像总是能够吸引人们的眼球。《激战2》的图像便是很好的例子。像这样的配色会让人觉得很成熟，并充满生活感。它们呈现出了强烈的反差，这也是美术师在讲述一个地方的故事的一种好方法。《镜之边缘》使用了充满活力的颜色去引导玩家穿越一些复杂的关卡。在这款游戏中，颜色便是用于为玩家指路。
They may not look like much, but those orange bars placed along the walls instinctively tell us where to go. Similar rectangles of paint are often use in hospitals to guide people.
也许看起来不明显，但这些橙色栏杆是沿着墙壁安置的，能够清楚地告诉我们该怎么走。就像医院中也有这样的路标指示人们前行。
现在我们该来说说最重要的一点了。这也是年轻创造者经常忽视的一点。即反馈。
3.获得建设性反馈
“很出色。”“太棒了！”
获得这样的正面反馈总是会让人兴奋。并且会让我们倍受鼓舞。但这却不是建设性反馈。这样的反馈不能告诉我们什么是可行的。更重要的是什么是不可行的。对于我们来说真正的机遇是我们还能够去完善游戏图像。
建设性批评能够告诉你图像的质量与缺点。更有效的批评甚至还会带着一些建议去帮助你解决问题。但是我们很少会获得这样详细的反馈。这种反馈通常是来自一些较为亲近的同事或团队成员。那些真正理解相关技艺的人往往都很忙。而你需要投入更多时间去正视任何有效的批评。
然而我们还需要一些新鲜血液帮助我们判断所有创作是否符合他们的目标或者我们是否朝着正确的方向前进。这些新鲜血液不应该只是周边的同事。我们还应该了解所有图像对于玩家的视觉影响。通过测试和游戏分析，我们可以不断获得一些较为客观的反馈。
简单的A/B测试
我们将使用A/B测试。这是一种非常直观的方法。测试A能够审查游戏中特定互动资产的点击率。然后我们将进行测试B。即我们将替换图像元素并再次测试它的点击率。我们将比较两次测试结果。即改变前后的互动玩家数量各是多少？
哪个版本拥有更高的用户粘性？A还是B？是的，这是一种很简单的方法。
Which version got the highest rate of engagement? A or B? Yes, it’s as simple as that… yet it’s not easy to know why that is exactly.
这也是网页设计师一直在使用的一种测试方法。它非常适合界面和UX设计。也许乍看之下它好像没什么用，但是当你开始使用它时你便能发现它的厉害之处，只是改变社交分享机制或游戏按键有可能有效提高玩家数量。
此外这种方法也能够帮助你了解在改变图像后玩家是否更频繁地使用菜单或者更灵活地前行。如果玩家一眼就觉得能够按压你的按键，他们便更有可能去按压它。特别是在手机设备上，因为在这里我们是使用手指进行各种互动。
结论
总之，你可以通过3大步骤去完善自己的游戏图像：
首先确定可靠的构成。这能够提供给你的视觉风格一个坚实的基础。
其次专注于图像的吸引力。清楚的轮廓和充满活力的颜色便是非常强大的工具！
最后使用分析工具和A/B测试确保自己始终朝着正确方向前进。
发表于 2018-6-12 16:00:03
