【研发日志】注重未来科技感，UI/UE设计思路与迭代历程

大家好，我是《代号：B.E.E》的制作人FOX。

继上期介绍美术风格和角色设计之后，本期的《研发日志》想向大家分享下游戏UI/UE的设计思路，以及迭代过程。

看过《雏蜂》漫画的粉丝们都知道：尖兵与昆虫仿生，纳米机械与高科技，青春校园与残酷战争，错综复杂的世界局势、神秘未知的伊甸人与人类文明等，都是漫画里重要的元素之一。白猫老师用他的丰富构想与细腻笔触，描绘一个带有近未来科幻色彩的精彩故事。

那么，如何契合原著的世界观设定和氛围，用独特的设计加深玩家对《代号：B.E.E》的印象呢？首先，UI设计决定了玩家的初印象和初体验。因此，研发团队很注重这一块的设计，花费不少时间与精力打磨。

早在项目成立初期，游戏的整体UI走的是扁平化风格，设计师的灵感主要来源于生活中时尚杂志，大量地运用简单的几何色块与水印素材，去突出画面的信息。

说到这里，大家或许会有个疑问：为什么是选择参考时尚杂志呢？

两者看似没有什么关联性，但一本优秀的杂志，它的排版往往是非常的美观与考究：为了让读者快速抓住信息，需要非常强的信息分析与整合能力，才能把信息更好地呈现给读者。

再说回游戏UI设计，本质也是一样：为了让玩家快速理解信息，让界面更好地为玩家服务。

通过下面几张图片，能看到1.0版本的UI设计，在整体布局上更倾向于把信息尽可能全面地展示给用户，所以大部分的功能都展示在一级界面上。

然而，在内部调试过程中我们发现，采用极致的扁平化风格会有2大问题。

1、增加用户对信息的阅读成本：相较于拟物化，扁平化的设计会抹掉光影和立体感。通过二维平面的手法去表现细节，会导致用户对图标花费更长的理解时间。

2、未能与《雏蜂》IP调性高度吻合：原著漫画中一直传达着两个重要概念——科技与未来。而这两个概念，需要更为丰富的设计手法才能做更好的表达。

基于以上两大问题，我们在1.0版本基础上进行了优化和迭代，尝试加入更多的光影，以及在所有的系统和界面布局上做了操作上的优化。

其中，2.0版本最明显的视觉变化：UI主色调为灰色，关键色则从蓝色替换为蜂黄色——这也是女主角琉璃的好伙伴BEE的主要涂色。

2019年7月，我们曾邀请了一批核心玩家参与首次封闭测试。他们反馈：界面交互存在不完善和操作不便的地方，以及觉得主界面有页游既视感。

这显然是令UI设计师意外又非本意的结果。为此，我们认真听取玩家们的意见，并结合使用习惯和游戏目标进行了分析后，得出的结论为：将目标全部展示会导致同时接收的信息太多，反而会丧失目标感；其次，界面给人的视觉感受也不够美观。

为了能够给予玩家更好的视觉感受和操作体验，UI设计师熬夜爆肝头发没少掉，推翻了不少前2个版本的设计，尤其是对主界面进行了全面大改版。

首先，在整体设计层面，除了坚持之前简约的信息分布之外，会更加注重对未来感与科技感的刻画，把每个UI做得更轻量；其次，设计师研究了很多主机游戏的界面流程，发现除了简洁的UI以外，主机游戏会运用很多的特殊shader和动效来渲染科技感的氛围。

此外，在很多的系统包装上，注重模型与UI的结合也是一大特点。我们希望玩家在体验各个系统的时候，沉浸感会更强一些，能从界面的层面去接收世界观相关的设定。

所以，3.0版本的主界面较于前2个版本，主界面将所有的功能都进行分类整理，做到功能分区更为清晰，大致可分为2大类型。

1、系统养成功能：将玩家提升的方式集成到一个功能界面上，培养的目标感会更强；

2、战斗集合入口：将玩家所有的能力释放方式都集中到一起，把玩家的游戏挑战目标集中，不同类型的玩家都能在此找到游戏目标。

以【技能系统】的UI界面为例子：

由于新增超载技能，既要传达出超载技能与常规技能的差异，又要表达出两者的关联性。在原本的树状技能盘上，我们做了新方向的尝试：采用点击技能会在右侧展开分支。其次，通过一轮轮的迭代，让玩家在同一个界面层级下能完成技能相关的所有操作：包括选择、升级、降级、装配。相较于市面上的部分竞品的技能系统，极大地降低了玩家对于信息的记忆成本。

在创角界面，我们则运用了新的shader技术，来展示游戏中的重要NPC兼新手引导员的爱丽丝。当玩家输入名字后，还需要用手指触碰指定区域“输入指纹”，突出世界观中的高科技感。

一路迭代至3.0版本后，明显能感受UI的视觉与交互体验都有进步，画面上也更加有科技感。本着对精益求精的精神，UI设计师仍不是很满意，希望能融入一些新元素，更突出世界观与特点。

例如：在一款日本题材格斗手游中，采用黄调配色与诸多的日式元素（卷轴、忍具、灯笼和旗帜等）来表现历史感，合理地展示并突出世界观。若《代号：B.E.E》也运用这种设计手法，则是不合理的存在。

围绕产品的调性出发，一番苦思冥想后，我们认为将《雏蜂》IP和赛博朋克相结合，能表现出更抢眼的特征：【未来】、【科技】、【前卫】。

首先，在交互设计稿上，追求更精简信息，把同一层级的信息拆分到不同步骤，通过游戏性分步传达传达；而在UI设计稿上，也不断传达【前卫】的概念。

4.0版本给各类功能系统做了不少有趣且符合世界观的包装，把游戏设定通过不同的方式展示给玩家，更充分地展示游戏性的一面。

以【礼包兑换界面】为例子：

采用输入兑换码后会打印一张纸质票据并放入玩家背包的新包装。而不是冰冷的一个输入框和按钮能完成的机械式体验，这是游戏情感体验和纯粹功能展示的区别。

而在能向玩家展示雏蜂大世界的地图界面，也进行了全新升级：视觉设计上强调线条感、层次感与3D感。

此外，我们还参考了大量的科幻类题材的主机游戏，选取了其中一些亮点作为思考的方向。例如：《死亡搁浅》会运用多种不同的shader表现远程通讯，或表现一些前卫的设定。而我们也在思考，《代号：B.E.E》中需要做什么样的shader，会更适合表现未来科技感的设定。

（注释：shader，实现图像渲染的着色编辑器，此处特指动效编辑器。）

在游戏开发过程中，想要做一款精品游戏，动效是必不可少的。适当的动态效果可以辅助玩家更好地阅读信息、抓住重点。为此，我们内部专门开发了一套动效编辑器，希望能再度提升游戏的品质感。

每一次UI设计迭代更新的背后，我们都是希望将《雏蜂》IP中的两个概念：科技与未来，诠释得更为准确到位。 其次，通过每一次对系统结构的信息层级梳理，希望给予玩家更好的游戏交互与体验感。

而为了给玩家提供最流畅的交互与操作体验，我们正在尽所能地提高界面UI的响应速度：希望每次操作后的响应速度能够做到无缝切换。

感谢耐心看到这里的尖兵们，若大家对美术等方面有建议与意见，欢迎随时反馈，这对我们来说非常宝贵。今后也请多多支持《代号：B.E.E》！

这趟通往理想中雏蜂世界的旅程没有终点，我们一直都在努力的路上。下期再会~