腾讯美术师分享：《无限法则》背后的UI设计原则

近日，腾讯互动娱乐北极光工作室群高级游戏美术师施雷对《无限法则》的UI设计进行了分享。一个好的UI模块，是如何把策划模糊的概念具象化为落地的设计，使之批量生产，具备复用性和独特美术风格的呢？


请看施雷的精彩分享：

导语

做游戏产品与做艺术之间是有巨大区别的，艺术家的思维模式是：作品足够美，不需要过多的言语去表达；而产品的思维模式是：设计应该服务于产品本身，依靠具象化的方式帮助产品将模糊的概念确定为具体的美术风格，同时需要团队配合协作，不断提升自我。本文将分享《无限法则》的UI模块是如何把策划案模糊的概念具象化为落地的设计，使之批量生产，具备复用性和独特美术风格。

一《无限法则》的UI设计，如何开始第一步？


项目初期，《无限法则》整个团队约十几名成员，作为项目组的唯一一名UI设计师，项目刚起步阶段，面对这“蓝天白云、无际大海、远处一座小岛和一颗树”的游戏场景，领导对我说：“请开始你的UI设计。”

在一无所知的状态下，我们先不要急着着手设计，而是需要对项目设计风格展开思考。大致分为三个步骤：

第一，找大量代表性的参考资料，进行分析以及归纳总结。例如，《生存法则》的设计，具有残破感、荒野感以及带有材质感；《Warframe》的设计，有点微微透视，比较轻薄的质感；《战地4》的设计，结构稳健、块面化、偏严肃感的设计；《Destiny》的设计，会有大面积的留白、空旷感、图表化，以及配色活跃。

第二，根据以上4种参考，绘制风格稿，与项目制作人、主美进行沟通，确定UI设计的大致方向。

第三，最终提取《无限法则》项目UI设计的关键词：现代、扁平、克制用色、无具体材质、横向性设计以及国际化。


二《无限法则》UI设计要领

1.低信息干扰

什么是低信息干扰性？根据《眼洞追踪研究（2018）》研究：网页上真正有被用户阅读过的文字内容不到20%，把其结论运用到游戏局内的UI设计中，我们需要知道用户需要获取的UI界面中这20%的有效信息是什么，尤其避免在战斗局内，出现过多的干扰信息。所以说游戏局内UI应该尽量少而精悍，把亮点留给场景和角色本身，让人沉浸到游戏局内，多余的UI会造成视觉干扰，我们要做到让步原则，把所有的体验留给游戏本身。

如拿同类产品，在不同时期的设计思路类比举例：


在2002年发行的《GTA罪恶都市》中（图片来自网络），右上角的UI信息采取色彩丰富，血条、护甲为数字化显示的设计。


在2004年发行的《GTA圣安地列斯》（图片来自网络），右上角将上一代数字显示的信息进行条状图形化设计转变，减少用色，UI的面积也有所减少，但是还是占据整个单屏的一部分面积。


接下来到了2013年发行的《GTA5》，相对于《GTA圣安地列斯》的UI设计作比较，保留条状图形化设计，条的位置由右上角迁移到画幅的左下角地图下方，同时只用1根横条的样式最大化包含了血条、护甲/防弹衣以及特殊能力条3个不同的信息。剩下的装饰性或次要性信息，全部进行了隐藏。


同时，游戏中射击时，只有当射击和切换枪支的时候，右上角子弹的数量才会被调用，子弹数默认态为隐藏状态，这是为了增强游戏体验的一种设计方式，最终把所有的体验都留给游戏本身，HUD中只保留最重要的信息为常显状态。

2.如何降低信息干扰？

项目初期，在没有交互设计师的情况下，当遇到信息干扰多的情况下，一般采取三个方法：

1.精简低频率出现的小界面；

2.临时隐藏一些不重要的信息，变成不是常显状态；

3.优化或者寻求新的替换方式，简单理解就是让UI融入场景，如UI进行场景化设计，使其成为场景的一部分。


示例1：上图中，左侧显示的是早期泰国测试版本，HUD中的切枪面板为常显状态，目的在于能够清楚地看见自己一共有多少把枪；右侧是现阶段HUD中的切枪界面，把枪支信息临时隐藏处理，变成不是常显状态，需要时才被调用，目的在于在HUD中避免承载过多的信息。


示例2：《无限法则》背包界面的优化过程。背包界面属于战斗中核心的一个界面，前期的时候，觉得这种结构相对比较稳定，物件一行一行排版，旁边会有简短文字描述，13行展示13个物件。


我们再来看下现阶段优化后的背包界面，首先将物件展示换成了格子化的排版，从原先的13行展示13个物体，优化成为了8行展示容纳的物体为23个，同时将描述文字隐藏，通过tips进行提示。

3.边距：UI组件与屏幕边缘的距离，保持高度统一

边距是我们做UI尤其是战斗界面当中需要考虑的第一步，因为之前项目组对FPS品类游戏的研发经验相对较少，对于这种类型的UI边距还没有足够的经验，我们对大型同品类的游戏测量过的几款项目进行类比，得出一个平均值；并将其结合运用到《无限法则》项目中。


UI设计之初，根据我们的测量参考，原本额定的边距在游戏中会比较合适，后期加上动效，或者需要承载的内容会越来越多，导致边距越来越大，造成位置的偏移；反之，如果我们一开始把边距设计的过小，组队时屏幕边缘的其他队友图标内容就会与HUD中其他UI重叠。所以整个UI设计的过程，就如同版本迭代更新一样，每次都会根据实际情况，进行优化调整，确保最佳效果。

4.视觉元素高度统一：形式感或视觉元素贯通到整款游戏

视觉元素的高度统一，就是要如何去树立形式感以及品牌感，需要将它的视觉元素全部的统一，并且融会贯通到游戏的方方面面。


《无限法则》视觉元素01：点横点装饰元素、控件横向性设计、半透化UI贯穿整款游戏的视觉设计元素。（为考虑到能容纳多国语言的文字长度，因此控件在设计上基本以横向性作为设计导向）。


《无限法则》视觉元素02：横向性设计、抬头标题前加竖线、贯穿整款游戏的视觉设计元素。


《无限法则》视觉元素03：横向性Tab、选中态为白底，贯穿整款游戏的视觉设计元素。


《无限法则》视觉元素04：Tab经过态伴随白线响应动画、选中态白底，贯穿整款游戏的视觉设计元素。

5.合适：适合游戏的UI才是好UI，而不是单纯为了好看

合适原则不是说UI它本身独立的表现有多么好，而是UI更像是一个配合工作，服务于产品，仿佛为产品量身定做一样，所以我们在拿到一款产品要开展UI设计的时候，看它世界观的年代感和整体的设计语言，并找到合适的字体。试想一下，如果我们一开始参考的游戏UI都是一些科幻类型，未来向的，但是我们整款游戏所有的概念设定，包括人物角色模型动作以及场景等，所有东西都是写实的，如果突然UI特别科幻，那违和感会特别强。

6.让步原则：战斗内UI不抢场景戏份，尽量精简，目的将原本就出色的美术效果毫无保留地展现给玩家


在战斗局内，画面中展示的所有的内容，每多一个UI都是一种视觉干扰。所以我们的目的就是在战斗内做一种配合，把所有的关注点全都让给场景和角色本身，目的是将原本美术效果很不错的画面保留给玩家。

7.明度关系：特效≥UI＞角色＞场景

我总结了的一个关于明度关系的理论：特效的明度≥UI的明度＞角色＞场景。在整体视觉感官的层次关系处理上，特效和UI相对于角色和场景而言可以奠定一个相对较高的明度起点，换句话说就是游戏局内最高明度的点留给特效及UI，然后角色的明度对比可以低一个层级，场景可以更低一层。但由于特效和UI在面积上没有那么的大，所以我们需要将其明度拉高，尤其是做MOBA游戏的时候，如果游戏场景明度基调过高，画面中的英雄势必会是看不清的，技能特效和UI也就更加看不清晰了。


示例1：《无限法则》泰国测试版本中：调子相对偏平、角色和场景颜色融合在一起，同时场景相对明度较高，UI层次会受到一定影响。


示例2：调子相对偏平、颜色较生，角色和场景颜色同样融合，场景明度高，UI拉不开层次、颜色层次感不明显。


示例3：背包界面换成黑色尝试发到外网，被玩家反馈：UI明度与游戏画面太接近。

当时对于以上几种情况的解决方案就是，把场景明度降低，让场景、人物在虚实上能拉出层次，保持UI高明度，使得UI更加清晰可见。

8.意外性设计:有隐性的、出色的意外性设计,在交互上提升一定的尖叫度

意外性的设计是一种额外的体验，它就像一个彩蛋藏在游戏里面。


《无限法则》也设计了不少有意思的体验，比如，当欧洲服务器上线时，在Loading界面的护目镜上加了欧洲地图特写，欧洲玩家看见自己家乡的地图，特别有认同感。


再例如，《无限法则》背包界面的枪支配件局部设计。枪支配件会随装卸情况，用2D组件逐个单独配表，将实际情况反映在枪械上，我们当时做了枪械的Avatar系统，这个设计在市面上也是很少会出现的。类似这样的小设计，也增加了在游戏中许多额外的期待和惊喜的意外体验。

9.树立品牌感、避免山寨设计

关于品牌感，是一个无法量化的东西，但是成功的品牌，当人们看见一样物品的某个局部或某一种经典配色，大家就会联想起是某一类品牌。如果要树立品牌感需要做好形状固定的视觉设计的一个元素，以及它的颜色。


我们对《无限法则》各时期品牌Logo进行分析，从Logo的演变中，可以感受到品牌升级的过程。这款游戏比较硬核，所以Logo的整体感觉也会设计的偏硬朗，早期的Logo从《无限法则》游戏英文名的首个单词“Ring”衍生而来，外部做了一个圆圈的辅助设计，后续觉得是多余的，去掉后显得更加简洁干练；同时，我们对Logo也进行了几处非常细微的一些处理。比如早期的尖角是有一条缝隙的，后续迭代中把其闭合处理；以及切边的弧度都做了调整。这种细节的处理虽然看上去差别不大，但是在后来的版本迭代中造型上都会有一定细微区别。

统一化的视觉元素，便于在传播过程中，提高人们对产品的识别度，加深人们对产品的印象。黑白金银三角形加黄色，是我们的一个核心的对外宣传的视觉元素，我们来感受一下品牌Logo如何运用到传播中的。


示例1：《无限法则》上架Steam前，第一版封面图的展示的Logo为蓝色，但是产品整体品牌的Logo默认是黄色，同一品牌，初步宣传时采用不同颜色会对玩家对品牌度的认知上产生一定干扰或困惑，后续迭代版本中，我们将其更新。


示例2：初期海报宣传中，解析了Logo的基础元素，是三角形加黄色，后续做延伸设计的时候，把这2个元素融会贯通到所有的宣传设计层面。


示例3：从Logo的三角形造型为出发，统一化的视觉元素，运用到外星人电脑合作项目活动小卡片设计中。



示例4：《无限法则》Steam DLC展示界面，统一视觉元素：三角形+斜切线；颜色元素：黑白金银。


示例5：《无限法则》购买DLC后进入大厅领取界面，形状元素：三角形+斜切线；颜色元素：黑白金银。


示例6：《无限法则》购买冒险者通行证界面，形状元素：三角形+斜切线；颜色元素：黑白金银。


示例7：《无限法则》：Logo造型融入到游戏的方方面面，包括战阶图标、荣耀图标、经验图标、滑翔翼的皮肤、感谢信信封上的封蜡以及背包的设计。

小结，我们要如何去树立品牌感呢？

第一，分析游戏世界观；

第二，提炼成关键词；

第三，将关键词图形化。

10.颜色数量控制：主色不超过2种色系；辅助色不超过3种色系。


关于颜色数量的控制，总结一句话：大味必淡而淡而有味，就是说享受了太多的山珍海味，突然来一杯清爽的柠檬水，会觉得特别好喝。所以我们这款游戏的UI设计出发点也是这样，如果当角色和物件足够表达这款游戏的亮点和品质时，那UI就往后退。把所有的亮点都留给场景和角色，UI尽量克制过度用色，保留黑白的主题色以及带有情绪的两个黄蓝按钮以外，其他色彩丰富表现全都留给物件本身。

11.资源可复用性：设计控件和界面背景时，设计过程中考虑该资源在其他地方是否可以不断被复用

关于资源的复用性，网上很多练习作品，界面为了美观采用弧面设计，实际项目中弧面设计的资源相对难做九宫处理，大量采用弧面设计会带来资源量的浪费。我们在设计时，应该更多考虑开发的实现性。同时，我们会把所有的资源物件，建立公共资源池，一方面是为了快速获取资源；另一方便可以把项目中所有资源元素做体系化的管理。

12.信息分组（块面化）：拉近相似元素的距离，成为一体；功能按模块区分、层级明显、具有易用性

信息块面化处理：当设计师拿到策划案时，首先要读懂方案文字，按照类别分档，再开始具体做执行绘制。做这些前期工作是为了方便信息作块面化归类，拉近相似元素之间的距离，让界面更加有条理，便于用户阅读理解。


例如在做HUD武器信息界面的时候，左图版本迭代前，切枪界面、护甲状态、手雷状态等信息堆叠，没有做信息分类，显得所有内容特别繁杂；右图版本迭代后，把切枪界面拆分，并做默认隐藏处理，当前武器状态信息和血条独立成一个面板出来，将信息归类并块面化划分，目的在于提高识别度。


同理，背包界面中，物件栏格子化。子弹栏与配件栏拆分成组，医疗品、手雷单独成组并有快捷键提示，在战斗状态下，不用每次都打开背包，便能通用快捷键调用对应的医疗品、手雷和武器。


13.对齐：任何元素都应与其它元素有着明确纽带关系

对齐就是在平面设计当中，最基础同时也是大家很容易忽视的一点。从宏观视角出发，即一个界面中每一样元素都不会孤立存在，一定会基于某一样东西或形式对齐，如果没有直接的对齐参照物，那它会基于骨骼线也就是设计中额定的网格线对齐。从微观视角出发，大家有时候在做文字对齐的时候，会发现标题或Tab按钮或界面中的描述文字到底是左对齐还是居中对齐？除非是为了表达极正式、庄重的情形，尽量避免居中对齐。

14.留白与空白：

“白”不是白的。是让白得以诞生的是一种感受白的容纳性。是搜寻一种能感受白的感觉方式。

——《设计中的设计》

“留白”与“空白”之间，很多人觉得是同一个词，其实它们俩是有依存关系的，“留白”相对局部，“空白”相对整体。大面积空白会营造奢华感或高级感，小面积会营造热闹欢快感。界面物体之间的空白关系以及字里行间的留白面积大小，会影响整体界面视觉上的平衡关系。

15.立体化：可将UI立体化、场景化，增加代入感

立体化也是个思维，是一种解决方式，当UI在平面内布局不完整的时候，立体化或许是一种额外的体验。


比如说像平面的图片，把它融合到3D里面，就会给人有另外一种新奇的感觉。假设地图就是3D的，当鼠标滚轮点击的时候，会有一个3D的地图呈现给玩家，空间感会更加强烈，也可以做到2D与3D的结合，跳出二维的思考方式，可以考虑一下立体化表现。

三界面设计注意要点

1.交互：尺寸与布局。

2.层级：突出重点减弱干扰。

3.信息：简洁清晰、快速准确、可读性强，信息归类块面化。大面积文字当块面构图去理解，文字甚至在设计中起到配平作用。

4.习惯：遵循玩家习惯常规设计，针对不同的用户，交互上可做一定的差异化。

5.资源：复用理念控制资源。

6.风格：避免过度设计、色彩杂乱、层级混乱、不够精致、风格不明确。

7.行间距：同一套同类别的界面设计中，避免出现多种不同的行间距。

8.字体边距：外边距＞内边距原则。

四界面设计技巧

1.故事情节：让大众的心理产生“共鸣”，带动玩家内心的情绪，加深对游戏的印象。


故事情节是为了让用户产生一定的共鸣。例如上图中是《无限法则》黑夜模式宣传图，当时的主题是“黑夜来临”，其实从片面角度来说，无人版就足以能够表达黑夜模式，但是如何做到能够表达更强的故事性呢？我们加入了4名游戏角色，围着火炉交谈，这种形式会使氛围感更强烈。

2.不仅仅是极简主义

什么是极简主义？享有“极简主义之父”之称的约翰帕森把极简主义定义为：当内容被减至最低限度时，它所散发出来的完美感觉，当物体的所有组成部分、所有细节以及所有的连接都被减少或压缩至精华，它就会拥有这种特性，这就是去掉非本质元素的结果。

极简主义是大家都会运用到设计中的一个定义，我们就不多加阐述，这里我想分享的是“不仅仅是极简主义”，意思是说不要把所有设计都盲目极简化处理，有的物件能传达情感、韵味或特殊感受，可以保留该物件本质。


例如，上图的UI界面是极简和扁平设计，但荣耀图标的材质感和细节刻画是非常深入的，让人能够感受到满足感与成就感，这样利于产生情感的对比。

3.反差：差异越大反差越明显，能让特定要素更显眼



设计师经常会被问到，这前后两稿有什么区别？所以设计稿在做项目评审的时候，如果要做对比，那么请加大对比！比如一开始我们做角色外观界面，比例是1:1，默认角色显示全身，角色和界面看上去都比较平淡。调整后，在UI界面不变的情况下，镜头拉近，角色比例拉大，UI界面自然就往后退，它在造型的大小面积上的比重就会产生一定的反差。

4.软硬虚实


形状的虚实运用是指设计当中直线加曲线的一种运用。例如上图中局内个性动作选择界面，所有的UI都是全四方菱角界面，在这当中嵌入圆形来调和整个形状上的软硬虚实的关系。

五图标设计要领

1.图标存在的意义

游戏图标的类型有很多种，它们存在意义就是会比文字更加直观的体现信息，让其变成视觉元素，融入到游戏产品中。

2.图标设计原则

可用性：高识别度、直接、统一、差异化、特定使用环境。

美观性：构图、配色、繁简程度。

原创性：为该款游戏量身定做，从游戏世界观中提炼风格。

繁简性（层级性）：根据策划案需求，将图标分级，越高层级的图标在造型、色彩、材质、表现形式上越丰富。


例如，个人信息界面：荣耀图标繁简层级性（大小对比、造型繁简度对比、颜色材质对比）。

·统一性

①朝向统一；

②透视统一，同等层级关系的图标，确保如果用透视形式那就全透视，避免透视和不透视混用；

③视觉平衡统一，在额定的内安全框内，复杂造型图标可以比简单造型稍微小一些；

④光源统一，光源方向、光源强度、光源冷暖程度统一。

3.注意事项

过度设计：避免过度追求风格化导致的过度原创、表意不足。

用户习惯性理解导向：比如设置界面是一个齿轮，大家潜意识里面已经习惯这个符号性标志。

差异化不明显：太相似、难识别。

4.总结：全球顶尖设计团队设计原则

最后是全球顶尖设计团队的设计原则，比如说苹果的设计，认为好的设计是整体的美学，在iphone上市前，绝大多数手机的电板都是能够被拆卸的，但苹果是强制让iphone电板不能拆卸，强调整体美学不可破坏，即便它的这个电板用一会就没有电，但是你不能破坏这个设计。

Facebook认为好的设计是讲诚信的，它其中很重要一点叫做全球化思维。同样道理，就是微软的设计，好的设计要给人一种惊喜的额外体验，并且保持简单。

火狐的就非常有意思，它叫做照顾你，如果一个好的设计你会觉得它是有体温的，它是有人文关怀的，那么它的宗旨就是照顾你。并且它也提到了很重要的一点——全球化。

好的UI设计就像一本不用设计说明书的产品，不需要解释，就明白怎么操作，让大家感受到我们设计师的用心。

作者：施雷
来源：腾讯游戏学院
原地址：https://mp.weixin.qq.com/s/Bl4YX3DyeJe1-iGHzEw1Lg