DICE首席图形设计师：如何做好3A游戏的UI？
2022-07-30 15:14:14
GameLook报道/对良众人来说，用户体验（UX）和用户界面（UI）很容易被污染，你很难说显现两者之间的不同是什么。
正在此前的GDC演讲中，EA公司DICE洛杉矶处事室首席图形计划师Omer Younas指出，UI实质上只是UX的逛戏内部门，他正在分享中提到了3A逛戏UI的计划理念，并遵循实在案例先容了UI计划的良众举措。
即日咱们有良众东西要说，这是重要的内容列外，但我也心愿即日的分享是互动的。咱们即日不会提到挪动运用研发，而是聚焦于3A逛戏范围，重要是正在PC和主机设置。
出手之前，做一个容易的毛遂自荐，我正在伦敦出生并长大，是四兄弟当中最小的一个，我的父亲是做电脑的，于是玩逛戏是我儿时最重要的文娱行动之一。众年之后，我移居到了5500英里之外的洛杉矶，而且自此之后都正在逛戏行业处事，仍然进步了10年。
这些是我从事过的少许逛戏、就职过的少许处事室，第一张是正在DICE洛杉矶处事室做的《疆场1》，中央是正在小岛处事室做的《合金装置5》，正在此之前，我正在英邦的Crytek插足过《孤岛危害》系列的研发。
良众人以为UX和UI是统一件事，但它们并不是统一件事，UX是很大的一个观念，实质上从用户正在市肆置备你的逛戏出手，到真正进入逛戏体验，是一系列继续的互动。UI只是UX的一部门，从用户体验来说，UI影响的是逛戏内的东西。
良众人听到UI也许都邑思到菜单散布，但UI照旧逛戏的视觉识别符，转达逛戏格调、调性以及每一个细节，通过声响、视觉、颠簸等众种格式向玩家呈现讯息，于是也相当于用户反应，你思正在逛戏里向用户外达的任何东西，根本都要通过UI来告竣。
往往来说，人们思到UI，往往会思到HUD，也即是实质体验中的主旨玩法，但我目标于把它看作两件事，由于咱们再有前端和菜单。假使说HUD属于上下文情况式的内容，那么前端就像是逛戏的实在构造。
咱们都晓畅唆使不是线性的，它就像是一团乱麻，你要继续迭代、调治，再有时期全部放弃之前做的东西。然而，咱们试图让它更容易少许，通过对艺术对象和认知计划两个方面来对于，看咱们是否不妨让它更通畅、引颈咱们走出窘境。
当咱们道到逛戏的时期，并不心愿让玩家只看到UI，你既要让它看起来很雅观，却又不行成为最前端和最核心的东西，由于你并不是思让人们玩UI，而是让他们玩逛戏，UI是用来援救这些行动的。
假使没有艺术对象，你也许会做出云云的画面，一起东西都正在屏幕上闪现，也没有连贯的格调，只是正在统一个场景扩展了数百样东西。当你思要提示玩家康健值很低的时期，他们也许很难看到对应的提示，你要把紧张的讯息放正在屏幕中央，而且让他们纰漏其他作对讯息。
咱们既要让UI具有视觉吸引力，又要担保它具有奇特点。正在之前的一个演讲中，有位着名计划师说要针对人的五种官能实行计划，囊括触觉、听觉、视觉、味觉和嗅觉，当然这不是针对逛戏行业，并且后两样正在逛戏计划历程中还不是主流，于是咱们重要针对前三种。
咱们从平台的转折来懂得逛戏的输入格式，要晓畅这些手柄的输入格式会如何影响逛戏UI，晓畅咱们的逛戏能够做如何的操作格式、以及它正在屏幕上是奈何出现的。
PC平台的键鼠操作也是一律，然而还要照看到玩家对键盘和鼠标的操作度，确保你的逛戏尽也许做到见谅更众人。
声响占了用户体验的50%，你正在看最锺爱的影戏时，能够把声调子到0也不会有很大的影响，但逛戏却不可。只然而，我不擅长声响范围的计划，于是即日咱们不会提及。
咱们聚焦的是视觉，这里须要明了少许症结范围的少许外面，咱们奈何让这些与逛戏计划闭系起来、奈何让咱们的图形具有吸引力？
这是《2049》当中的一个场景，对人的眼睛相当友情，颜色、明暗以及内容量计划都相当好，脚色正好正在屏幕中央，你看到之后就能戒备到产生了什么。
正在口舌形式下，这个场景也很不错，你要确保一起的内容都能起到各自的效力，UI计划也是如许，你能够把视觉计划的这些外面直接用到逛戏UI计划上。
同样，这张图也许就不那么好，固然饱和度、光暗都不错，但看待你的眼睛来说，屏幕上有太众的东西，你要晓畅人们是奈何认知这些讯息和视觉身分的，为此，咱们须要明了人类的眼睛是奈何处事的。
光照到咱们眼球，进入视神经，它是由良众杆状和锥状体构成，信号被传输到咱们的大脑，锥状体有特定的颜色，并基于红绿蓝反响看到的颜色，咱们能够从图形中看到多量的红绿颜色，蓝色则比力少。所以，咱们的眼球对赤色好坏常敏锐的，所以正在UI计划的时期咱们也须要戒备，用赤色惹起用户的戒备，譬喻损害或者紧张的事故、讯息。
容易来说，人们眼球聚焦的是中央红绿色的区域，向外是蓝色、黄色和亮度，这正在计划UI的时期是很紧张的，生物学仍然告诉咱们正在计划UI的时期该奈何散布颜色。
接下来咱们来看大脑对讯息的懂得格式，最初咱们的大脑拣选的是式样，所以，有特质的剪影、很大的式样容易给人留下印象；第二是颜色，这和情绪以及品牌相干干系；第三是式样，这须要很长时代才干变成，这即是咱们的大脑对看到东西的懂得。
正在UI计划的时期，（心绪学的）式样塔道理（Gestalt Theory）好坏常紧张的，对全体计划范围也很有影响力，咱们能够遵命个中的少许正派来计划咱们思呈现的东西。
闭合定律（Closure），咱们看到的只是少许点，但大脑很容易把它懂得成一个圆；亲密法（Proximity），当少许东西正在沿途的时期，咱们的大脑目标于以为它们是一个群组的；连结性（Continuity），固然这条线被横线阻隔，但还是给人的感受是上卑劣通的；形似性（Similarity），这里有良众灰色的方形和圆形，大脑会以为他们也许是一组的。
图形配景联系（Figure-Ground），虽然这张图是2D，但你会看到3D式样，只是不晓畅哪里是前景、哪里是配景；外壳（Enclosure），你用这些灰色的圆圈将它们盘绕起来，大脑就会目标于以为纵使被阻隔，这些圆圈还是是一组的；再有即是对称性（Symmetry）远离。
这是《疆场1》的一个截图，用的是查察者形式，咱们能够看到截图中的内容变成了闭合的场景亲密的东西都正在统一片地方，囊括icon也很亲密。然后是连结性，你能够连结看到分歧的性能，形似性展现正在夸大内容都利用了同样的颜色并加粗。图形配景，这些框内的巨细实质上能够转折，没有谁是配景；外壳，咱们都利用盒子一律的式样将分歧的性能包罗正在内部。
再有少许合用性方面的正派咱们也应当戒备，正在你计划任何屏幕的时期，都不要同时闪现7个以上的奇特物品，这会让用户认为讯息量太大。菜单的计划不要进步3层，性能可视性指的是少许性能要符适用户预期；你的UI还须要有一个聚焦区域，让人们晓畅他们正在看的是什么。
你要让形态转折相当分明，让用户点了按钮之后就能够看到彰着蜕变；还要有页面流，让分歧的内容制品级散布，还要供应助助以及提示拣选。
这是《合金装置》里的定制化，你能够看到屏幕里有7个物品，咱们不心愿扩展更众，由于怕让用户认为狐疑。这些菜单惟有3层，你只需重心击三次就能够告竣定制化，每个按钮都有对应的性能，再有聚焦区域，形态转折也相当彰着，内容散布也比力有序，咱们还供应了助助与提示。
实质上来说，咱们计划是为了被用户高效劳懂得，但同时还心愿视觉协调，不行让分歧的物品互相冲突。
这时期咱们就须要收罗数据，最好是明了你的逛戏，创意对象、艺术对象、倾向墟市，要将这些顺序与艺术、代码、唆使团结起来，确保一起人对逛戏的倾向相同。你须要问的是，什么是对玩家最好的？
你做的是一款逛戏，但它会给玩家带来体验感，你还要明了逛戏的特质，调性是什么、格调是什么？焦点处于什么时期？这些都邑影响UI计划。
你还能够寻找参照物，譬喻视频、影戏、册本、挪动平台等等，由于你的参照物越众，就会对你的决议带来更众的讯息。
你还要认识到计划趋向，业内有良众的趋向，你不心愿自身的计划被看作是PS2时期的产品，而是为新主机世代或者最新的计划对象。即使是系列逛戏，也要确保每一款逛戏看起来以及给人的感受都是奇特的。
这部门笼盖的内容良众，但咱们要从网格说起，它能够用于逛戏里的良众方面，咱们说的是2013的网格。
还要戒备长宽比，目前咱们体贴的是16：9的比例，但你也要戒备4：3，假使人们没有最新科技的设置，你照旧要确保他们不妨体验逛戏，而不会看到良众东西重叠正在一块。另日也许再有更前辈的科技，也不清扫21：9的比例，于是你要对此坚持体贴。
其余，把一起紧张的讯息都坚持正在90%的屏幕之内，这个区域也被称为太平框架，譬喻文字、icon以及对UI相当紧张的东西。
要坚持UI的相同性和协作性，纵使是右边的情状实质上也有晋升的空间，要尽量让UI构造尽量有连贯性，参预尽也许众的锚定点。
这是《BF1》的截图，假使把它分成9块，咱们能够看到9个锚定点。做UI的时期，良众讯息容易重叠，你要确保这些区域不妨精准外达某些讯息。这还意味着，当你的长宽比转折的时期，能够对应把这些锚定点和对应的讯息变动。
你们能够看到为什么拣选对的字体很紧张，咱们须要看更众的讯息，譬喻是否有公法题目、是否具有可读性，字体的格调、当地化方面的考量、预算等等。
这是《孤岛危害》的一个画面，实质上是实行中的，但由于利用的字体不适合逛戏格调，咱们不得不从新拣选。
这条正派指的是，当玩家利用主机玩逛戏的时期，他们离电视屏幕的间隔是6英尺把握，这不光意味着你要审慎字体巨细，还要确保所选字体正在这个间隔边界内不妨分明地被玩家看到。
计划字体是有正派的，但咱们最体贴的事故是x-height，也即是o、p、b等字母统一个区域的高度。
譬喻这里的b和e正在分歧字体下的比例也是纷歧律的，字体越小越难看清，所以你要确保正在更远的间隔下，逛戏里的文字不妨被玩家读懂。
不要只是容易下载免费字体利用，这正在3A逛戏里是行欠亨的，要确保你的字体援救外语字母，囊括数学符号、格外字符等等。
往往来说，你要买下全体字体族，由于这对你会相当有效，专业的字体验有多量分歧的展现形势，看待比力大的文字，利用平常字体，要担保字体不会太薄，以致于正在屏幕上看不到，于是粗少许的字体适适用于比力小的文字。
假使你对字体不明了，不晓畅该选哪一个，这个列外能够助你出手，这些字体都是能够从主流字体网站取得的，固然不足圆满，然则不错的出手。
其余，请不要拉伸字体，由于这就像把图片中的人脸拉伸一律，人们不会锺爱云云，假使要伸缩，坚持比例。
正在利用文本的时期，不要正在统一行排太众字，最好的边界是每行60-120个字母，左对齐以便阅读。
当地化的时期，要留40%的空间用于分歧发言的字符超标（德语、土耳其语）。其余要戒备的是，阿拉伯语和希伯来语都是从右到左摆列的。
这是《BF：Operation》英文版UI，右下角的箱子咱们不得不重做，由于它太长了，于是正在计划的时期要商酌分歧发言的UI构造。
也许良众人不晓畅这是什么，这是逛戏标签长度的上限，譬喻正在一句话当中，假使有良众内容构成，你就要商酌随机部门的长度，譬喻正在玩家看到的对话中，假使要参预玩家名字，就要担保这个长度不妨适合。
这是技巧是逛戏标签计划最倒霉的场景，有的是用了另外形势，譬喻WMWM，但用云云标签是有题目的。
接下来咱们要说的是式样发言，它能够支柱你逛戏的认知懂得的部门，越发是具有连贯性的式样，能够助你的逛戏变成特定的外观和感受，譬喻节拍、纹理、标记元素等等。
咱们还须要确保式样具有连贯性，譬喻你正在逛戏里做报复行动，假使出手是上面的式样，竣事是底部的式样，正在UI当中就会给人很瑰异的感受，看起来是不连贯的，角度和圆角也是一律，这些东西也要具有连结性。
这是《合金装置》里的截图，当你定制化的时期，这些元素给人感受是它们底本即是一体的，没有什么式样给人的感受是比力瑰异的，它们都比力适合军事焦点。
这是《孤岛危害3》的截图，来自分歧场所的截屏，咱们能够看到不管是正在哪个地方，给人的感受都是正在一个产物之内，让逛戏体验具有连贯性。
要确保它们正在最小化的屏幕尺寸下也能很好地显现，做到容易又不失众样化，确保斜视情状下也能正确地看到式样，这才是好的icon，屏幕上的icon最大尺寸为1英尺 X 1英尺。
要取得增光的icon计划，你最初要有构制网格，以便让你的icon正在UI当中显得自然而具有连结性。
看待icon，咱们还要做平均，虽然三角形和圆形没有占那么大的空间，但咱们还是要对它的巨细实行调治，让咱们的icon看起来是连贯的。
譬喻这些icon，它们固然盘踞的空间分歧，但尺寸都正在同样巨细的正方形内，虽然正在数学上并不全部相称，但起码它们给人的感受是相同的，你正在UI计划的时期应当戒备，云云做能够确保视觉协调。
轮廓与可读性：测试icon分歧视角的感受，由于这会影响分歧间隔下的icon成就，虽然因为玩法的原由它们之间的不同很小，假使不行第一眼就看出icon是什么，那么玩家很也许会错过少许紧张的性能。于是，你要正在逛戏里测试分歧的成就，看哪些有效，哪些欠好用。
有时期icon给人的感受还也许是优柔寡断的，于是有时期也许须要用文字标注其寓意，假使你没有看到这些讲明的文字，也许良众人不晓畅这些icon是什么兴味。
确保你的每一个icon都有连贯的格调，这不光与式样发言相闭，还和逛戏的视觉识别度相闭，也即是把你的艺术对象显现到每一个icon当中，有时期它们乃至能够庖代文字，有了识别度较高的icon，你能够俭省多量的UI空间。
颜色正在情绪外达和品牌方面饰演良众的脚色，我总体来说，我心愿你们不要依赖于颜色，虽然它对品牌推论有效，但颜色也许会被以分歧的格式解读。
良众人也许都晓畅颜色外面，假使不晓畅，你们能够特意去寻求（Color Theory），很容易懂得。
然则，正在分歧的文明配景下，每个颜色都也许有分歧的意旨，于是正在利用颜色的时期，你要戒备不让它冲撞特定用户的文明习俗。因为你的逛戏是3A，于是将会被环球玩家体验，于是正在计划颜色之前要商酌颜色正在分歧文明当中的意旨。
总体来说，咱们还要束缚利用的颜色数目，最好是5个以内，当然，每一个颜色最好都有其目标，避免全部饱和的颜色。
这是《孤岛危害》的另一个案例，咱们利用分歧颜色流露按钮的分歧形态，这些颜色相当适合军事焦点，咱们并不全部依赖颜色，但它们确凿能够带来视觉懂得上的助助。
这张图的右侧咱们能够看到，分歧的背风物也会对式样带来很大的影响，于是正在计划UI的时期要商酌到，计划奇特式样的时期，分歧配景下它们也许被用分歧的格式解读，你最初的计划也许会行欠亨。
良众的3A逛戏都邑体贴色盲，然而你也不心愿只为一小部门用户计划，于是最好是给用户自界说颜色的性能，让他们拣选自身认为痛速的颜色。
这些看起来好坏常高主意设定的东西，譬喻non-diegetic、diegetic，Spatial、Meta，前两个是与影戏相闭，它们的出现格式和剧情干系。
往往来说，大大都逛戏看到的是Non-Diegetic式UI，它与玩法闭系不大，用户实质上不须要和UI互动，就像是逛戏寰宇上重叠了一层UI。
Diegetic是和逛戏玩法互动的，它们被计划正在逛戏寰宇之内、玩家们能够看到乃至能直接互动，我片面比力锺爱这类UI。
Spatial UI往往与文字、脚色轮廓等方面相干正在沿途，更众与成就相闭，譬喻《结果生还者》和《奥秘海域4》都有脚色轮廓。
然而，良众逛戏里利用的轨范UI格调并不虞味着它即是最好的，譬喻这张图中的香蕉（由于外形很像），它只是用2D素材出现了3D成就，当我体验FPS或者TPS的时期，这些东西是2D的，你不晓畅某些东西是正在你的上方或者下方，这些东西能够告诉你对象，但无法出现空间感，譬喻上下前后。
假使你要用2D格式外达3D讯息，不要照搬一起人都正在用的举措，最好是寻找其他格式来出现，由于这也许无法被玩家正确解读，譬喻《合金装置4》的格式就很不错。
2D美术:2D犹如与UI的一起方面都相闭系，譬喻具有识别性的东西，咱们奈何出现给玩家,囊括少许屏幕截图和加载界面。
明了咱们的限度，做UI的时期咱们须要晓畅引擎的束缚，你须要什么样的技巧、奈何宽裕诈骗编制、奈何做文档以及测试等等。
正在实验的时期会比力风趣，你能够将UI与玩法相干起来，能够时时测试，由于你不心愿UI与逛戏无闭。
做数据模子的时期，你心愿搞显现UI的分歧部门，确定你的格调、焦点，通过Illustrator你能够实验良众东西。
动态模子也是很容易惹起玩家戒备力的一个元素，只须要容易的动画就好，它须要与你的美术格调相同，咱们能够通过示例看到，动态UI对你转达的讯息有很大的影响。
譬喻这是《孤岛危害3》的众人玩法UI，咱们能够看到它的一连转折，最终版本与最初有很大的不同。
譬喻当地化，你须要给有些发言版本留出40%的文本空间，分歧颜色正在分歧文明中的意旨，以及少许也许正在某些文明里比力具有冲撞性的标记。
技巧条件，这与逛戏要上架的平台干系，正在研发主机逛戏的时期，你须要显现这些条件，但还须要明了屏幕尺寸、输入操作、加载时代等等。
结果要说的是，UI也能够做到没有UI，譬喻粒子成就、脚色动画、音频提示等等，这些都能够替换UI。
计划UI的时期咱们不行做令人狐疑的构造计划，也不行直接从其他逛戏里模仿，你须要为自身的逛戏计划奇特的格调。
最初是探索，你须要对计划有具体的明了，然后为你的逛戏有针对性地计划格调、焦点，正在做任何处事之前，确保你明了这些计划理念。
视觉辨识度，排版、式样与icon以及颜色等众种元素的组合，能够让你的逛戏具有自身的格调，找到少许奇特的东西，拣选好的字体。