腾讯美术师分享：《无限法则》背后的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如何运用到传播中的。 
（编辑：顺游网_765游戏网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330581号