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

请看施雷的精彩分享：

导语

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

一  《ob电竞》的UI设计，如何开始第一步？

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

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

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

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

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

二《ob电竞》UI设计要领

1.低信息干扰

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

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

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

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

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

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

2.如何降低信息干扰？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6.让步原则：战斗内UI不抢场景戏份，尽量精简，目的将原本就出色的美术效果毫无保留地展现给OB欧宝体育电竞官网

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

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

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

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

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

示例3：背包界面换成黑色尝试发到外网，被OB欧宝体育电竞官网反馈：UI明度与游戏画面太接近。

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

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

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

《ob电竞》也设计了不少有意思的体验，比如，当欧洲服务器上线时，在Loading界面的护目镜上加了欧洲地图特写，欧洲OB欧宝体育电竞官网看见自己家乡的地图，特别有认同感。

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

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

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

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

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

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

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

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

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

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

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

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

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

第一， 分析游戏世界观；

第二， 提炼成关键词；

第三， 将关键词图形化。

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

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

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

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

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

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

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

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

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

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

14.留白与空白：

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

——《ob电竞》

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

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

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

《ob电竞》出生选点地图界面：目前是平面思维

《ob电竞》出生选点地图界面：未来可以尝试立体化概念设定

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

三 界面设计注意要点

1.交互：尺寸与布局。

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

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

4.习惯：遵循OB欧宝体育电竞官网习惯常规设计，针对不同的用户，交互上可做一定的差异化。

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

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

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

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

四  界面设计技巧

1.故事情节：让大众的心理产生“共鸣”，带动OB欧宝体育电竞官网内心的情绪，加深对游戏的印象。

《ob电竞》黑夜模式宣传图（无人版）

《ob电竞》黑夜模式宣传图（角色版）

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

2.不仅仅是极简主义

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

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

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

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

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

4.软硬虚实

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

五  图标设计要领

1.图标存在的意义

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

2.图标设计原则

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

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

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

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

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

· 统一性

①朝向统一；

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

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

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

3.注意事项

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

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

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

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

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

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

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

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