介绍
制作游戏产品和制作艺术品之间存在巨大差异。 艺术家的思维模式是：作品足够美，不需要太多的言语来表达； 而产品思维模式是：设计要服务于产品本身，依靠具体。 这种方法帮助产品将模糊的概念确定为特定的艺术风格。 同时，也需要团队协作，不断完善自身。 本文将分享《无限规则》的UI模块如何将规划项目模糊的概念具体化为实用的设计，使其可量产、可重复使用并具有独特的艺术风格。
一
《无限法则》的UI设计如何入手？
立项之初，《无限规则》整个团队约有十几名成员。 作为项目组唯一的UI设计师，在项目前期，面对“蓝天白云、无边无际的大海、远处的小岛和一棵树”的游戏场景，领导表示对我说：“请开始你的 UI 设计。”
在一无所知的状态下，我们先不要急于设计，而是需要思考项目的设计风格。 大致分为三步：
首先，找到大量有代表性的参考资料，进行分析总结。 比如《生存法则》的设计有破旧感、荒野感、质感感； 《Warframe》的设计有点透视，质感比较薄； 《战地4》的设计结构扎实、块状，而且设计比较严肃； 《命运》的设计会有大面积留白、开阔感、图形、色彩搭配活跃。
其次，根据以上四点参考绘制风格稿，与项目制作人和主美师沟通，确定UI设计的大方向。
第三，我们最终提炼出“无限规则”项目UI设计的关键词：现代、扁平化、色彩的克制、无特定材质、横向设计、国际化。
探索方向：《无限法则》Demo初步设计稿
（部分素材来源于网络）
二
《无限规则》UI设计精要
1、信息干扰低
什么是低信息干扰？ 根据《眼孔追踪研究（2018）》：网页上的文字内容只有不到20%被用户真正阅读过。 要将其结论应用到游戏中的UI设计中，我们需要了解用户需要获得的UI界面。 这20%的有效信息是什么，尤其是避免战斗中出现太多令人不安的信息。 因此，游戏中的UI应该尽可能的简约、简洁，把亮点留给场景和人物本身，让人们沉浸在游戏中。 冗余的UI会造成视觉干扰。 我们必须坚持妥协的原则，把所有的体验留给游戏本身。 。
比如拿同类产品，对比不同时期的设计思路：
2002年发售的《GTA罪恶都市》中（图片来自网络），右上角的UI信息采用了色彩缤纷的设计，生命条和护甲均以数字方式显示。
2004年发售的《GTA圣安地列斯》中（图片来自网络），将上一代数字显示屏在右上角显示的信息转变为条形图形设计，减少了颜色的使用和面积UI也减少了，但仍然占据了整个单屏区域的一部分。
接下来是2013年发布的《GTA5》，相比《GTA圣安地列斯》的UI设计，保留了条形图形设计，并且条形的位置从下方框架的右上角移动到了左下角地图。 仅使用一根单杠的风格最大化了三种不同信息的内容：生命条、护甲/防弹衣和特殊能力条。 所有剩余的装饰或次要信息都被隐藏。
同时，游戏中射击时，只有在射击和切换枪械时才会调用右上角的子弹数量。 默认情况下，子弹数量是隐藏的。 这是一种增强游戏体验的设计方法，最终所有的体验都留给游戏本身，只有最重要的信息保留在HUD中作为恒定的显示。
2、如何减少信息干扰？
在项目初期，没有交互设计师，信息干扰较多时，一般采用三种方法：
1、精简不常出现的小界面；
2、暂时隐藏一些不重要的信息，使其不总是可见；
3.优化或寻求新的替代方法。 简单的理解就是将UI融入到场景中，比如基于场景的设计UI，使其成为场景的一部分。
示例1：上图中，左侧为早期泰语测试版本。 HUD中的枪械切割面板始终显示，让你清楚地看到自己总共有多少枪； 右侧显示当前HUD切割面板。 枪支接口暂时隐藏枪支信息，使其不会一直显示，仅在需要时调用。 目的是避免 HUD 中携带过多信息。
例2：《无限规则》背包界面的优化过程。 背包界面是战斗中的核心界面。 早期我觉得这个结构比较稳定。 对象逐行排列，旁边有简短的文字描述。 13 行显示 13 个对象。
我们来看看现阶段优化后的背包界面。 首先，对象显示已被网格布局取代。 从原来的13行显示13个对象，优化为8行显示23个对象。 同时，描述文字会被隐藏，并通过提示进行提示。
3. Margin：UI组件与屏幕边缘的距离，保持高度的均匀性
边距是我们在制作UI尤其是战斗界面时需要考虑的第一步，因为之前的项目组开发FPS游戏的经验相对较少，对于这种类型的UI边距没有足够的经验。 将同类别游戏测量的几个项目进行类比，取平均值； 并将其与“无限规则”项目结合起来。
《无限法则》早期版本：margin 30px； 优化迭代后：margin 55px
《无限法则》正常瞄准中心：62px； 瞄准中心最大距离：126px
在UI设计之初，根据我们的测量参考，最初设定的边距在游戏中会更合适。 后来会加上动态效果，或者需要携带的内容越来越多，导致边距越来越大，导致位置发生变化。 抵消; 相反，如果我们一开始将边距设计得太小，则在组队时，屏幕边缘的其他队友图标的内容会与HUD中的其他UI重叠。 因此，整个UI设计过程就像版本的迭代更新。 每次都会根据实际情况进行优化和调整，以确保最佳效果。
4、视觉元素高度统一：形式感或视觉元素贯穿整个游戏
视觉元素的高度统一就是如何建立形式感和品牌感。 它需要统一所有的视觉元素，并将它们融入到游戏的各个方面。
《无限规则》视觉元素01：点和水平点装饰元素、水平控制设计、半透明UI是贯穿整个游戏的视觉设计元素。 （为了考虑到可以容纳多种语言的文本长度，控件基本上都是以水平度为设计指导）。
《无限规则》视觉元素02：横向设计，标题标题前竖线，视觉设计元素贯穿整个游戏。
《无限规则》视觉元素03：水平选项卡和选中时的白色背景，这是贯穿整个游戏的视觉设计元素。
《无限规则》视觉元素04：选项卡传递状态伴有白线响应动画，选中状态有白色背景，是贯穿整个游戏的视觉设计元素。
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组件，以反映枪上的实际情况。 我们当时为这把枪做了阿凡达系统，这种设计在市面上很少见。 像这样的小设计也为游戏增添了很多额外的期待和令人惊喜的意外体验。
9.树立品牌意识，避免山寨设计
品牌感是无法量化的东西，但对于一个成功的品牌来说，当人们看到一件物品的某个部分或者某个经典配色时，就会将其与某种类型的品牌联系起来。 如果你想建立品牌感，你需要制作一个具有固定形状和颜色的视觉设计元素。
我们分析了《无限规则》各个时期的品牌标志。 从标志的演变中，我们可以感受到品牌升级的过程。 这款游戏比较硬核，所以标志整体感觉会设计得硬朗。 早期的Logo源自游戏《无限规则》英文名中的第一个单词“Ring”，并在外侧设计了一个圆圈作为辅助设计。 后来觉得多余，去掉之后就变得更加简洁干练； 同时，我们还对标志做了一些非常微妙的处理。 例如，早期尖角处存在间隙，该间隙在后续迭代中被闭合； 并调整了切削刃的曲率。 虽然这种细节的处理看起来并没有太大的不同，但在后期的迭代中造型上还是会存在一定的细微差别。
统一的视觉元素有利于人们在传播过程中对产品的认知，加深人们对产品的印象。 黑白金银三角加黄色是我们对外宣传的核心视觉元素之一。 我们来感受一下品牌标志是如何运用在传播中的。
示例1：《无限规则》在Steam上发布之前，第一版封面图片上显示的标志是蓝色的，但整体产品品牌的标志默认是黄色的。 对于同一品牌，在初期宣传时使用不同的颜色会影响玩家对品牌的认知度。 如果它造成一些认知干扰或混乱，我们将在后续迭代中进行更新。
例2：在最初的海报宣传中，分析了标志的基本元素，即三角形和黄色。 在后续做延伸设计时，将这两个元素融入到促销设计的各个方面。
例3：从标志的三角形形状出发，将统一的视觉元素应用到外星人计算机合作项目活动小卡片的设计中。
例4：《无限规则》Steam DLC显示界面，统一视觉元素：三角形+对角线； 色彩元素：黑、白、金、银。
例5：购买《无限规则》DLC后，进入大厅领取界面。 形状元素：三角形+对角线； 色彩元素：黑、白、金、银。
例6：《无限规则》购买冒险家通行证界面，形状元素：三角形+对角线； 色彩元素：黑、白、金、银。
例7：《无限规则》：标志造型融入到游戏的各个环节，包括战斗等级图标、荣耀图标、经验图标、滑翔机的皮肤、感谢信信封上的封蜡，以及背包的设计。
综上所述，我们如何打造品牌意识？
首先分析游戏的世界观；
其次，细化为关键词；
第三，以图形方式可视化关键字。
10、颜色数量控制：主色不超过2种； 辅助色不超过3种。
关于颜色数量的控制，有一个总结：大口味一定要清淡，也就是说，在享受了太多的山珍海味之后，来一杯清爽的柠檬水会感觉特别美味。 所以，我们这款游戏的UI设计的出发点也是一样的。 如果人物和物体足以表达这款游戏的亮点和品质，那么UI就会退一步。 所有的亮点都留给了场景和人物。 UI尽量克制色彩的过度使用，保留了黑白主题色以及黄蓝两个带有情感的按钮。 所有其他丰富多彩的表达方式都是为物体本身保留的。
11、资源复用性：在设计控件和界面背景时，要考虑在设计过程中资源是否可以在其他地方不断复用。
关于资源的复用，网上有很多实践作品。 界面采用弧形设计，美观。 在实际项目中，曲面设计资源处理起来比较困难。 大量使用弧形设计会造成资源浪费。 在设计时，我们应该更多地考虑开发的实施。 同时，我们将为所有资源对象建立一个公共资源池。 一方面可以快速获取资源； 另一方面，我们可以系统地管理项目中的所有资源要素。
12、信息分组（分块）：拉近相似元素之间的距离，合而为一； 功能按模块划分，层次明显，易用。
对信息进行分块处理：设计师拿到方案后，首先要理解方案文本，将其分类，然后开始具体的执行图。 完成这项前期工作是为了方便信息分类，缩短相似元素之间的距离，并使界面更有条理，更易于用户阅读和理解。
比如在制作HUD武器信息界面时，在左侧版本迭代之前，枪械切割界面、装甲状态、手雷状态等信息都是堆叠在一起的，没有对信息进行分类游戏ui按钮素材，使得所有的内容都非常复杂； 右边版本迭代后，枪切界面、装甲状态、手雷状态等信息堆叠起来，界面默认是分割隐藏的。 当前武器状态信息和生命栏被分成一个单独的面板。 将信息进行分类、分块，目的是提高识别度。
同样的，在背包界面中，对象栏也是网格化的。 子弹栏和配件栏分开分组橙光游戏，医疗用品和手榴弹分别分组并有快捷键提示。 在战斗模式下，你可以通过常用快捷键调用相应的医疗用品、手雷和武器，而无需每次都打开背包。
13.对齐：任何元素都应该与其他元素有明确的关系
对齐是平面设计中最基本的一点，也是很容易被忽视的一点。 从宏观角度来看，界面中的每个元素都不会孤立存在。 它必须基于某种东西或形式来对齐。 如果没有直接的对齐参考，则会基于骨线，即设计中的额定网格。 线对齐。 从微观的角度来说，有时候你在做文本对齐的时候，会发现界面中的标题或者Tab按钮或者描述文本是左对齐还是居中对齐？ 除非是要表达非常正式、庄严的情况，否则尽量避免居中对齐。
14.留白与留白：
“白”并不是白。 使白成为可能的是对感觉白的耐受性。 这是对一种感觉白色的方式的探索。
——《设计中的设计》
很多人认为“空白”和“空白”是同一个词。 事实上，它们是相互依存的。 “留白”是相对局部的，“留白”是相对整体的。 大的留白会营造出奢华或高端的感觉，而小的留白则会营造出活泼、愉悦的感觉。 界面对象之间的留白关系以及线条之间留白的大小都会影响界面整体的视觉平衡。
15、三维化：UI可以三维化、场景化，增加代入感。
三维化也是一种思维方式和解决方案。 当UI布局在平面上不完整时，三维化可能是一种额外的体验。
《无限法则》出生点选择图界面：目前是二维思维
《无限规则》出生点选择图界面：以后可以尝试三维概念设定
比如，如果把平面的画面融入到3D中，就会给人一种新奇的感觉。 假设地图是 3D。 点击鼠标滚轮时，就会向玩家呈现一张3D地图，空间感会更强。 也可以将 2D 和 3D 结合起来。 除了二维方式之外，你还可以考虑三维表现。
三
界面设计需要注意的要点
1.交互：尺寸和布局。
2.层次结构：突出重点，减少干扰。
3、信息：简洁清晰、快速准确、可读性强、信息分类全面。 大面积的文字可以理解为块状构成，文字甚至在设计中起到了平衡的作用。
4、习惯：遵循玩家习惯的常规设计。 对于不同的用户，交互可以有一定的差异化。
5.资源：重用概念来控制资源。
6、风格：避免过度设计、色彩杂乱、层次混乱、缺乏精致、风格不明确。
7、行距：在同一品类的同一界面设计中，避免出现多个不同的行距。
8、字体边距：外边距>内边距原则。
四
界面设计技巧
1、故事情节：让大众心理“产生共鸣”，带动玩家内心情感，加深对游戏的印象。
《无限规则》暗色模式宣传图（无人版）
《无限规则》深色模式宣传图（人物版）
故事情节旨在引起用户共鸣。 例如，上图是《无限规则》深色模式的宣传图。 当时的主题是“黑夜即将来临”。 其实从片面的角度来看，无人版足以表达黑暗模式，但如何表达更强的故事性呢？ 性呢？ 我们添加了 4 个游戏角色，并围着炉子聊天。 这种形式会让气氛更加浓厚。
2. 不仅仅是极简主义
什么是极简主义？ 被誉为“极简主义之父”的约翰·帕森（John Parson）将极简主义定义为：当一个物体的内容被减少到最低限度，当所有的组成部分、所有的细节和所有的联系都被减少或压缩到本质时所散发出来的完美感觉，它就会有这个特性，这是去掉非必要元素的结果。
极简主义是每个人都适用于设计的定义，所以我们不会详细说明。 我在这里想分享的是“不仅仅是极简主义”，也就是说不要盲目地简化所有的设计。 有些物品可以传达情感、魅力或特殊感受，并能保留物品的本质。
比如上图中的UI界面，设计风格极简、扁平化，但荣耀图标的质感和细节却很有深度，让人感受到满足感和成就感，有利于营造情感反差。
3、对比：差异越大，对比越明显，可以使特定元素更加显眼。
设计师经常被问到，这两个草稿有什么区别？ 所以，设计稿在进行项目评审的时候，如果想要对比，就加大对比吧！ 比如我们刚开始做人物外观界面的时候，比例是1:1。 默认情况下，角色显示全身，无论是角色还是界面都显得比较平淡。 调整后，在UI界面不变的情况下，如果将相机拉近，人物比例放大，UI界面自然会后移，其在形状的大小和面积中的比例会产生一定的比例。对比。
4.软、硬、虚拟
虚实形的运用是指设计中直线和曲线的运用。 比如上图中的游戏内个性化动作选择界面，所有UI都是方形界面，中间嵌入圆形，调解整个造型的柔软、刚硬、真实的关系。
五
图标设计要点
1.图标存在的意义
游戏图标有很多种类型。 它们存在的意义就是比文字更直观地体现信息游戏ui按钮素材，将其转化为视觉元素，融入到游戏产品中。
2.图标设计原则
例如，个人信息界面：荣耀图标传统与简约的层次结构（尺寸对比、形状繁简对比、颜色与材质对比）。
·统一
①走向团结；
②统一的视角和图标，具有相同的层级关系。 确保如果使用透视，是完全透视的，避免混合透视和非透视；
③视觉平衡统一音乐，在额定内部安全框架内，复杂形状图标可略小于简单形状；
④光源统一，光源的方向、光源的强度、光源的加热和冷却程度统一。
3、注意事项
4.总结：世界顶级设计团队的设计原理
最后还有世界顶级设计团队的设计原则。 比如，苹果的设计认为，好的设计就是整体的美观。 在iPhone推出之前，大多数手机的电子板都是可以拆卸的，但苹果却强制iPhone的电子板不能拆卸，强调不能破坏整体美观。 即使配电板使用一段时间后没电了，也不能破坏设计。
Facebook认为，好的设计在于完整性，其中重要的一点就是全球思维。 微软的设计也是如此。 好的设计应该给人们带来惊喜的额外体验，并保持简单。
火狐浏览器非常有趣。 这就是所谓的照顾你。 如果你有一个好的设计，你会觉得它有体温，有人文关怀，那么它的目的就是照顾你。 而且它还提到了很重要的一点——全球化。
好的UI设计就像一个不需要设计手册的产品。 不用解释你就能明白如何操作，让大家感受到我们设计师的用心。
·结尾·
