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

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

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

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

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

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

　　摸索方向：《无限法则》Demo初期设计草稿（部分素材资源来自网络）

　　二《无限法则》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边距还没有足够的经验，我们对大型同品类的游戏测量过的几款项目进行类比，得出一个平均值；并将其结合运用到《无限法则》项目中。

　　《无限法则》早期版本：边距30px；优化迭代后：边距55px

　　《无限法则》准心常态：62px；准心最大距离：126px

（编辑：顺游网_765游戏网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!