3A游戏UI设计指南：从理论到实践的全面解析
3A游戏UI设计指南：从理论到实践的全面解析
在游戏开发领域，用户体验（UX）和用户界面（UI）是两个容易被混淆的概念。近日，EA公司DICE洛杉矶工作室首席图形设计师Omer Younas在GDC演讲中分享了他对3A游戏UI设计的理念和方法，并通过具体案例介绍了UI设计的多种技巧。
什么是UI？
在开始之前，让我们先明确UI的概念。UI实际上只是UX的一部分，主要影响游戏内的体验。很多人可能认为UI就是菜单分布，但其实它还包括游戏的视觉识别符、声音、震动等多种方式向玩家展现信息，相当于用户反馈。通常来说，人们想到UI，往往会想到HUD（实际体验中的核心玩法），但我倾向于把它看作两件事，因为我们还有前端和菜单。如果说HUD属于上下文环境式的内容，那么前端就像是游戏的具体结构。
UI设计的核心理念
UI设计的目标是既要让它看起来很好看，却又不能成为最前端和最中心的东西，因为你并不是想让人们玩UI，而是让他们玩游戏，UI是用来支持这些行为的。如果没有艺术方向，你可能会做出这样的画面，所有东西都在屏幕上出现，也没有连贯的风格，只是在同一个场景增加了数百样东西。当你想要提醒玩家健康值很低的时候，他们可能很难看到对应的提示，你要把重要的信息放在屏幕中间，并且让他们忽略其他干扰信息。
UI设计的具体方法
了解你的情况
在UI设计中，视觉设计的理论非常重要。例如，《2049》中的场景就很好地运用了颜色、明暗以及内容量设计，角色正好在屏幕中间，很容易引起注意。而另一张图则可能就不那么好，虽然饱和度、光暗都不错，但对于你的眼睛来说，屏幕上有太多的东西，你要知道人们是如何认知这些信息和视觉因素的，为此，我们需要了解人类的眼睛是如何工作的。
《2049》中的场景
《2049》中的场景在黑白模式下的效果
另一张可能效果不好的图
UI处理过程
在UI处理过程中，网格的使用非常重要。黄金比例网格可以呈现非常令人舒适的布局。还要注意长宽比，目前我们关注的是16：9的比例，但你也要注意4：3，如果人们没有最新科技的设备，你依旧要确保他们能够体验游戏，而不会看到很多东西重叠在一块。未来可能还有更先进的科技，也不排除21：9的比例，所以你要对此保持关注。
另外，把所有重要的信息都保持在90%的屏幕之内，这个区域也被称为安全框架，比如文字、icon以及对UI非常重要的东西。不要用信息填满屏幕的每一个地方，留一些空间作为内容缓冲带。要保持UI的一致性和协调性，即使是右边的情况实际上也有提升的空间，要尽量让UI布局尽量有连贯性，加入尽可能多的锚定点。
这是《BF1》的截图，如果把它分成9块，我们可以看到9个锚定点。做UI的时候，很多信息容易重叠，你要确保这些区域能够精准表达某些信息。这还意味着，当你的长宽比变化的时候，可以对应把这些锚定点和对应的信息转移。
排版
在排版方面，选择合适的字体非常重要。你需要考虑字体的可读性、风格、本地化方面的考量、预算等等。例如，《孤岛危机》的一个画面中使用的字体就不适合游戏风格，因此不得不重新选择。
《孤岛危机》中的字体选择案例
6英尺规则
这条规则指的是，当玩家使用主机玩游戏的时候，他们离电视屏幕的距离是6英尺左右，这不仅意味着你要留意字体大小，还要确保所选字体在这个距离范围内能够清晰地被玩家看到。设计字体是有规则的，但我们最关注的事情是x-height，也就是o、p、b等字母同一个区域的高度。
通常来说，你要买下整个字体族，因为这对你会非常有用，专业的字体会有大量不同的表现形式，对于比较大的文字，使用正常字体，要保证字体不会太薄，以至于在屏幕上看不到，所以粗一些的字体适合用于比较小的文字。在同一个句子里，不要使用2种以上的字体变化，最后一行显然是个反面教材。
如果你对字体不了解，不知道该选哪一个，这个列表可以帮你开始，这些字体都是可以从主流字体网站获得的，虽然不够完美，但是不错的开始。另外，请不要拉伸字体，因为这就像把图片中的人脸拉伸一样，人们不会喜欢这样，如果要伸缩，保持比例。在使用文本的时候，不要在同一行排太多字，最好的范围是每行60-120个字母，左对齐以便阅读。本地化的时候，要留40%的空间用于不同语言的字符超标（德语、土耳其语）。另外要注意的是，阿拉伯语和希伯来语都是从右到左排列的。
《BF：Operation》英文版UI的本地化案例
形状语言
形状语言可以支撑你游戏的认知理解的部分，尤其是具有连贯性的形状，可以帮你的游戏形成特定的外观和感觉，比如节奏、纹理、标志元素等等。我们还需要确保形状具有连贯性，比如你在游戏里做打击动作，如果开始是上面的形状，结束是底部的形状，在UI当中就会给人很奇怪的感觉，看起来是不连贯的，角度和圆角也是一样，这些东西也要具有连续性。
这是《合金装备》里的截图，当你定制化的时候，这些元素给人感觉是它们原本就是一体的，没有什么形状给人的感觉是比较奇怪的，它们都比较适合军事主题。
这是游戏里不同区域的一些东西，它们都是用了相似的形状语言，颜色也比较一致。这是《孤岛危机3》的截图，来自不同位置的截屏，我们可以看到不管是在哪个地方，给人的感觉都是在一个产品之内，让游戏体验具有连贯性。
图像学
要确保它们在最小化的屏幕尺寸下也能很好地展示，做到简单又不失多样化，确保斜视情况下也能准确地看到形状，这才是好的icon，屏幕上的icon最大尺寸为1英尺 X 1英尺。要得到出色的icon设计，你首先要有构造网格，以便让你的icon在UI当中显得自然而具有连续性。你还需要设计icon参数，以便让人们为你设计icon，或者理解你的icon设计。对于icon，我们还要做平衡，尽管三角形和圆形没有占那么大的空间，但我们依然要对它的大小进行调整，让我们的icon看起来是连贯的。
例如，这些icon，它们虽然占据的空间不同，但尺寸都在同样大小的正方形内，尽管在数学上并不完全相等，但至少它们给人的感觉是一致的，你在UI设计的时候应该注意，这样做可以确保视觉和谐。轮廓与可读性：测试icon不同视角的感觉，因为这会影响不同距离下的icon效果，尽管由于玩法的原因它们之间的差别很小，如果不能第一眼就看出icon是什么，那么玩家很可能会错过一些重要的功能。所以，你要在游戏里测试不同的效果，看哪些有用，哪些不好用。
有时候icon给人的感觉还可能是模棱两可的，所以有时候可能需要用文字标注其含义，如果你没有看到这些解释的文字，可能很多人不知道这些icon是什么意思。
可能模棱两可的icon案例
确保你的每一个icon都有连贯的风格，这不仅与形状语言有关，还和游戏的视觉识别度有关，也就是把你的艺术方向展示到每一个icon当中，有时候它们甚至可以取代文字，有了识别度较高的icon，你可以节省大量的UI空间。例如，这些icon，它可以拥有不止一个意义，所以这类属于模棱两可的。
颜色心理学
颜色在情感表达和品牌方面扮演很多的角色，我总体来说，我希望你们不要依赖于颜色，尽管它对品牌推广有用，但颜色可能会被以不同的方式解读。很多人可能都知道颜色理论，如果不知道，你们可以专门去搜索（Color Theory），很容易理解。但是，在不同的文化背景下，每个颜色都可能有不同的意义，所以在使用颜色的时候，你要注意不让它冒犯特定用户的文化习俗。由于你的游戏是3A，所以将会被全球玩家体验，所以在设计颜色之前要考虑颜色在不同文化当中的意义。
总体来说，我们还要限制使用的颜色数量，最好是5个以内，当然，每一个颜色最好都有其目的，避免完全饱和的颜色。这是《孤岛危机》的另一个案例，我们使用不同颜色表示按钮的不同状态，这些颜色非常适合军事主题，我们并不完全依赖颜色，但它们的确可以带来视觉理解上的帮助。
《孤岛危机》中的颜色使用案例
这张图的右侧我们可以看到，不同的背景色也会对形状带来很大的影响，所以在设计UI的时候要考虑到，设计独特形状的时候，不同背景下它们可能被用不同的方式解读，你最初的设计可能会行不通。《孤岛惊魂4》截图
《孤岛惊魂4》中的UI案例
这是《最终幻想15》，他们在屏幕中心使用了红色，很容易引起玩家注意。色盲现象也是游戏不能过于依赖颜色的另一个原因，所以我们在选择颜色的时候需要注意。这些是不同的色盲，包括红、绿和蓝色盲。很多的3A游戏都会关注色盲，不过你也不希望只为一小部分用户设计，所以最好是给用户自定义颜色的功能，让他们选择自己觉得舒适的颜色。
UI呈现
这些看起来是非常高层次设定的东西，比如non-diegetic、diegetic，Spatial、Meta，前两个是与电影有关，它们的呈现方式和剧情相关。通常来说，大多数游戏看到的是Non-Diegetic式UI，它与玩法关联不大，用户实际上不需要和UI互动，就像是游戏世界上重叠了一层UI。Diegetic是和游戏玩法互动的，它们被设计在游戏世界之内、玩家们可以看到甚至能直接互动，我个人比较喜欢这类UI。
Spatial UI通常与文字、角色轮廓等方面联系在一起，更多与效果有关，比如《最后生还者》和《神秘海域4》都有角色轮廓。Meta UI并不是要特意告诉你什么事情，只是表达一种屏幕效果。不过，很多游戏里使用的标准UI风格并不意味着它就是最好的，比如这张图中的香蕉（因为外形很像），它只是用2D素材呈现了3D效果，当我体验FPS或者TPS的时候，这些东西是2D的，你不知道某些东西是在你的上方或者下方，这些东西可以告诉你方向，但无法呈现空间感，比如上下前后。如果你要用2D方式表达3D信息，不要照搬所有人都在用的方法，最好是寻找其他方式来呈现，因为这可能无法被玩家准确解读，比如《合金装备4》的方式就很不错。
2D美术
2D似乎与UI的所有方面都有关系，比如具有识别性的东西，我们如何呈现给玩家,包括一些屏幕截图和加载界面。
引擎知识
了解我们的局限，做UI的时候我们需要知道引擎的限制，你需要什么样的技术、如何充分利用系统、如何做文档以及测试等等。引擎方面比较好的一点是，我们可以使用着色器。比如从最左侧的基础UI美术，逐渐加入阴影、模糊效果，到最右侧对眼睛越来越舒适。这是加了扭曲效果的另一个案例。我们在《孤岛危机》当中就做了类似的事情。我们的UI被映射到了多边形中，我们将着色器效果应用到这些多边形中。你还可以用引擎做更多3D方面的事情，比如场景，将你的UI与环境组合在一起。在尝试的时候会比较有趣，你可以将UI与玩法联系起来，可以经常测试，因为你不希望UI与游戏无关。
执行
通常来说，执行UI主要使用PS、AI和AE三个软件，我非常喜欢用Illustrator。光栅有它自己的局限，但你可以用vector甚至用Polygon。而且你还可以用Illustrator做很多的模型。
使用Illustrator进行UI设计的案例
做数据模型的时候，你希望搞清楚UI的不同部分，确定你的风格、主题，通过Illustrator你可以尝试很多东西。通过不同icon的效果，你可以让人们理解游戏里发生了什么，选择按钮的时候让它们具有连贯性。UI总要尽可能简单，这是前端截图，包括形状语言、字体、颜色等。服务器界面看起来比较拥挤，但你需要让这些信息被用户很容易理解。定制化比较复杂，但这里你可以增加很多的diegetic元素，将UI与玩法融合在一起。最后是回合结束。这是《战地1》观战模式早期的UI，界面展示的东西太多了。动态模型也是很容易引起玩家注意力的一个元素，只需要简单的动画就好，它需要与你的美术风格一致，我们可以通过示例看到，动态UI对你传递的信息有很大的影响。这是很简单的动画，但展示了你可以用很整洁的动画，也可以用夸张的动画，或者用科技感的动画。有时候，展示动画比很多的描述都更容易被玩家理解，比如这个案例。即便是游戏发布之后，你的UI也是可以一直提升的。比如这是《孤岛危机3》的多人玩法UI，我们可以看到它的持续变化，最终版本与最初有很大的差别。
隐藏因素
最后我们需要了解的是隐藏的因素，这些东西是会影响UI的，因此你需要注意。比如本地化，你需要给有些语言版本留出40%的文本空间，不同颜色在不同文化中的意义，以及一些可能在某些文化里比较具有冒犯性的标志。
UI设计中需要考虑的隐藏因素
技术要求，这与游戏要上架的平台相关，在研发主机游戏的时候，你需要清楚这些要求，但还需要了解屏幕尺寸、输入操作、加载时间等等。最后要说的是，UI也可以做到没有UI，比如粒子效果、角色动画、音频提示等等，这些都可以替代UI。设计UI的时候我们不能做令人困惑的布局设计，也不能直接从其他游戏里抄袭，你需要为自己的游戏设计独特的风格。
总结
首先是研究，你需要对设计有整体的了解，然后为你的游戏有针对性地设计风格、主题，在做任何工作之前，确保你了解这些设计理念。视觉辨识度，排版、形状与icon以及颜色等多种元素的组合，可以让你的游戏拥有自己的风格，找到一些独特的东西，选择好的字体。执行，在了解以上理论之后，你需要做不同的尝试，让人们更容易理解游戏的体验流程和UI布局。考虑到一些隐藏因素，比如平台限制、本地化可能带来的问题。UI就像是个忍者，这是玩家们注意不到的，但当被人们看到的时候，意味着你执行的很不错。