下载 App
【研发日志】注重未来科技感，UI/UE设计思路与迭代历程
大家好，我是《代号：B.E.E》的制作人FOX。
看过《雏蜂》漫画的粉丝们都知道：尖兵与昆虫仿生，纳米机械与高科技，青春校园与残酷战争，错综复杂的世界局势、神秘未知的伊甸人与人类文明等，都是漫画里重要的元素之一。白猫老师用他的丰富构想与细腻笔触，描绘一个带有近未来科幻色彩的精彩故事。
那么，如何契合原著的世界观设定和氛围，用独特的设计加深玩家对《代号：B.E.E》的印象呢？首先，UI设计决定了玩家的初印象和初体验。因此，研发团队很注重这一块的设计，花费不少时间与精力打磨。
主打扁平化风格的1.0版本
早在项目成立初期，游戏的整体UI走的是扁平化风格，设计师的灵感主要来源于生活中时尚杂志，大量地运用简单的几何色块与水印素材，去突出画面的信息。
说到这里，大家或许会有个疑问：为什么是选择参考时尚杂志呢？
两者看似没有什么关联性，但一本优秀的杂志，它的排版往往是非常的美观与考究：为了让读者快速抓住信息，需要非常强的信息分析与整合能力，才能把信息更好地呈现给读者。
再说回游戏UI设计，本质也是一样：为了让玩家快速理解信息，让界面更好地为玩家服务。
通过下面几张图片，能看到1.0版本的UI设计，在整体布局上更倾向于把信息尽可能全面地展示给用户，所以大部分的功能都展示在一级界面上。
主城界面（1.0版本）
战斗界面（1.0版本）
技能界面（1.0版本）
然而，在内部调试过程中我们发现，采用极致的扁平化风格会有2大问题。
1、增加用户对信息的阅读成本：相较于拟物化，扁平化的设计会抹掉光影和立体感。通过二维平面的手法去表现细节，会导致用户对图标花费更长的理解时间。
2、未能与《雏蜂》IP调性高度吻合：原著漫画中一直传达着两个重要概念——科技与未来。而这两个概念，需要更为丰富的设计手法才能做更好的表达。
在基础上迭代更新的2.0版本
基于以上两大问题，我们在1.0版本基础上进行了优化和迭代，尝试加入更多的光影，以及在所有的系统和界面布局上做了操作上的优化。
其中，2.0版本最明显的视觉变化：UI主色调为灰色，关键色则从蓝色替换为蜂黄色——这也是女主角琉璃的好伙伴BEE的主要涂色。
战斗界面（2.0版本）
技能界面（2.0版本）
2019年7月，我们曾邀请了一批核心玩家参与首次封闭测试。他们反馈：界面交互存在不完善和操作不便的地方，以及觉得主界面有页游既视感。
这显然是令UI设计师意外又非本意的结果。为此，我们认真听取玩家们的意见，并结合使用习惯和游戏目标进行了分析后，得出的结论为：将目标全部展示会导致同时接收的信息太多，反而会丧失目标感；其次，界面给人的视觉感受也不够美观。
为了能够给予玩家更好的视觉感受和操作体验，UI设计师熬夜爆肝头发没少掉，推翻了不少前2个版本的设计，尤其是对主界面进行了全面大改版。
注重刻画未来科技感的3.0版本
首先，在整体设计层面，除了坚持之前简约的信息分布之外，会更加注重对未来感与科技感的刻画，把每个UI做得更轻量；其次，设计师研究了很多主机游戏的界面流程，发现除了简洁的UI以外，主机游戏会运用很多的特殊shader和动效来渲染科技感的氛围。
此外，在很多的系统包装上，注重模型与UI的结合也是一大特点。我们希望玩家在体验各个系统的时候，沉浸感会更强一些，能从界面的层面去接收世界观相关的设定。
所以，3.0版本的主界面较于前2个版本，主界面将所有的功能都进行分类整理，做到功能分区更为清晰，大致可分为2大类型。
1、系统养成功能：将玩家提升的方式集成到一个功能界面上，培养的目标感会更强；
2、战斗集合入口：将玩家所有的能力释放方式都集中到一起，把玩家的游戏挑战目标集中，不同类型的玩家都能在此找到游戏目标。
主界面（3.0版本）
以【技能系统】的UI界面为例子：
由于新增超载技能，既要传达出超载技能与常规技能的差异，又要表达出两者的关联性。在原本的树状技能盘上，我们做了新方向的尝试：采用点击技能会在右侧展开分支。其次，通过一轮轮的迭代，让玩家在同一个界面层级下能完成技能相关的所有操作：包括选择、升级、降级、装配。相较于市面上的部分竞品的技能系统，极大地降低了玩家对于信息的记忆成本。
技能界面（3.0版本）
在创角界面，我们则运用了新的shader技术，来展示游戏中的重要NPC兼新手引导员的爱丽丝。当玩家输入名字后，还需要用手指触碰指定区域“输入指纹”，突出世界观中的高科技感。
创角界面（3.0版本）
在追求完美路上的4.0版本
一路迭代至3.0版本后，明显能感受UI的视觉与交互体验都有进步，画面上也更加有科技感。本着对精益求精的精神，UI设计师仍不是很满意，希望能融入一些新元素，更突出世界观与特点。
例如：在一款日本题材格斗手游中，采用黄调配色与诸多的日式元素（卷轴、忍具、灯笼和旗帜等）来表现历史感，合理地展示并突出世界观。若《代号：B.E.E》也运用这种设计手法，则是不合理的存在。
围绕产品的调性出发，一番苦思冥想后，我们认为将《雏蜂》IP和赛博朋克相结合，能表现出更抢眼的特征：【未来】、【科技】、【前卫】。
如何基于现有的【未来】、【科技】元素，再加入【前卫】的设计呢？
首先，在交互设计稿上，追求更精简信息，把同一层级的信息拆分到不同步骤，通过游戏性分步传达传达；而在UI设计稿上，也不断传达【前卫】的概念。
4.0版本给各类功能系统做了不少有趣且符合世界观的包装，把游戏设定通过不同的方式展示给玩家，更充分地展示游戏性的一面。
以【礼包兑换界面】为例子：
采用输入兑换码后会打印一张纸质票据并放入玩家背包的新包装。而不是冰冷的一个输入框和按钮能完成的机械式体验，这是游戏情感体验和纯粹功能展示的区别。
礼包兑换界面（4.0版本）
而在能向玩家展示雏蜂大世界的地图界面，也进行了全新升级：视觉设计上强调线条感、层次感与3D感。
世界地图界面（4.0版本）
此外，我们还参考了大量的科幻类题材的主机游戏，选取了其中一些亮点作为思考的方向。例如：《死亡搁浅》会运用多种不同的shader表现远程通讯，或表现一些前卫的设定。而我们也在思考，《代号：B.E.E》中需要做什么样的shader，会更适合表现未来科技感的设定。
（注释：shader，实现图像渲染的着色编辑器，此处特指动效编辑器。）
在游戏开发过程中，想要做一款精品游戏，动效是必不可少的。适当的动态效果可以辅助玩家更好地阅读信息、抓住重点。为此，我们内部专门开发了一套动效编辑器，希望能再度提升游戏的品质感。
主界面UI（4.0版本）
每一次UI设计迭代更新的背后，我们都是希望将《雏蜂》IP中的两个概念：科技与未来，诠释得更为准确到位。 其次，通过每一次对系统结构的信息层级梳理，希望给予玩家更好的游戏交互与体验感。
而为了给玩家提供最流畅的交互与操作体验，我们正在尽所能地提高界面UI的响应速度：希望每次操作后的响应速度能够做到无缝切换。
感谢耐心看到这里的尖兵们，若大家对美术等方面有建议与意见，欢迎随时反馈，这对我们来说非常宝贵。今后也请多多支持《代号：B.E.E》！
这趟通往理想中雏蜂世界的旅程没有终点，我们一直都在努力的路上。下期再会~
02:10
『新游实测』雏蜂•深渊天使到底值不值得玩？#劳动最光荣#
说是数值游戏真的不过份，为了强行增加玩家游戏时长出体力和养成模式，导致副本过于吃数值，难道一款动作游戏不应该是吃操作手法的么？挑战本怪物一点伤害压迫感都没有，强行用时间击退玩家搞数值我想问一下策划自己玩不玩啊？
@野生鱼头
57 赞
53 回复
01:50
『雏蜂：深渊天使』三测开启很幸运拿到资格#劳动最光荣#
大家可以评论一下游戏改动之后对游戏的看法。求关注😇
@小卿yo
38 赞
55 回复
档案库 | 解禁资料#序列001——尖兵
//你好尖兵，欢迎登陆NPSA档案库
//解禁资料#序列001——尖兵
//爱丽丝解码资料中......
//尖兵（Vanguard）
[附录①]尖兵的训练以及改造都需要消耗极大的一笔资金，不仅如此，成为尖兵还需要极其严苛的身体条件，以及最重要的——自体不排斥生物纳米机器。
[附录②]第一代尖兵的研究，从上世纪70年代延续至今。从初代的单项精准改造，到如今的整体替换型改造，尖兵的能力在不断上升，但
官方
@雏蜂：深渊天使官方
32 赞
12 回复
档案库 | 解禁资料#序列002——纯白引擎
//你好尖兵，欢迎登陆NPSA档案库
//解禁资料#序列002——纯白引擎
//爱丽丝解码资料中......
//纯白引擎 Yesod Foundation
[附录①]在反复的实验中，纯白引擎被证实拥有收容伊甸能量的用途，但因为伊甸能量的特殊性，只有极少数的特殊尖兵，才能装载这个引擎。
[附录②]纯白引擎于瓦尔哈拉舰上的虚拟显示是一棵树，树上规律环绕着七个承托基盘，用于收容伊甸方块—— 唯一的问题
官方
@雏蜂：深渊天使官方
21 赞
7 回复
档案库 | 解禁资料#序列005——回声系统
//你好尖兵，欢迎登陆NPSA档案库
//解禁资料#序列005——回声系统
//爱丽丝解码资料中......
[附录①]回声空间中包含了大量的过去，追寻回声碎片，确定锚点，再依靠爱丽丝的协助，过滤掉大量繁杂信息，才能获得比较清晰的回声。
[附录②]太过久远的回声存在难以读取，或是回声反射混杂不清无法定位的情况。
[附录③]回声空间只能依靠当前场景进行搭建。
[附录④]当外界存在一定额度的伊甸辐射时
官方
@雏蜂：深渊天使官方
13 赞
4 回复
档案库 | 解禁资料#序列004——伊甸方块
//你好尖兵，欢迎登陆NPSA档案库
//解禁资料#序列004——伊甸方块
//爱丽丝解码资料中......
//伊甸方块 Eden Block
[附录①]抛开这些神话中的传说，伊甸方块本身也拥有足够让人类争夺的资本——它蕴含着超额的能量，只要靠近它们，拥有特殊天赋的“聆听者”就能够接收到更多属于异空间的神秘科技。
[附录②]但伊甸方块同时也拥有极大的隐患。只要没有得到足够妥当的收容，它们就会爆发
官方
@雏蜂：深渊天使官方
25 赞
4 回复
《雏蜂：深渊天使》公测延期上线公告
尊敬的各位玩家：
《雏蜂：深渊天使》自立项以来，经过几轮测试调优，目前已进入最后阶段的的打磨，感谢过程中大家提出的每一条测试体验与优化建议。
产品在较早前已成功到申请版号，而近两年来伴随着研发进程的更迭升级，现阶段产品的玩法内容有了不少新的调整与改变。按照相关政策的规定，团队内部经过反复评估、慎重考虑，做出一个很艰难的决定：为了保障产品在符合规定的情况下顺利公测，我们需要对《雏蜂：深渊天使》的版号
官方
@雏蜂：深渊天使官方
50 赞
119 回复