美术丨《尼尔：机械纪元》UI设计分享：科幻与幻想的平衡

大家好，我是在《尼尔：机械纪元（NieR: Automata）》的开发中担任UI与机械设计的木嶋。回想起上一次写开发日志还是在刚开发完《猎天使魔女2》的时候。虽然是个平常并不怎么引人注目的UI，但是因为收到一些玩家们的请求，所以我得到了这个执笔的机会。在《尼尔：机械纪元》的UI的设计中也存在一些关于横尾太郎的意见，所以我想将这些囊括在一起，今天就来说说《尼尔：机械纪元》中有关于UI方面的介绍。 

UI设计师主要制作一些类似体力槽、对话窗口以及各种菜单界面等游戏内表示的东西。

大致的工作流程如下。

1、确定UI概念设计的方向

2、根据规范来进行各菜单画面与表示物品的量产

3、制作UI的游戏数据来让程序员实装

4、实际操作UI后进行动画的调整， 提高品质

这次我主要为大家说明步骤1的概念设计与2的菜单界面设计中需要下功夫的地方。

这次的作品《尼尔：机械纪元》的世界观非常偏向于科幻的风格，但是因为前作《尼尔 完全形态&伪装者(NieR Replicant/Gestalt)》是一个幻想世界的世界观，所以在科幻的基础上还要组合一些幻想风格的要素。

首先从前作的UI设计、科幻要素、2B的角色设计以及废墟的世界观来进行头脑风暴。最终将「系统又简洁的设计」定做本次UI设计的关键。在这个时候我就已经决定并不是用华美来进行装饰，而是用精细的布局与平面的基准为主旨来设计。但是单纯以这个形式来进行设计的话却会显得过于平淡.......

所以这里我选择更加膨胀「系统又简洁的设计」这个概念，将「乐谱」作为一个隐藏的主题，并在此之上加入了幻想风的要素。

虽然说是乐谱，但并不像DO音记号那般的流利。而是选择一些象征性的元素，例如在五线谱中经常使用到的符号一样。

另外，菜单画面上下放的装饰采取了类似前作的设计。像这种将这种幻想风格的类比物以数字风格的字号来进行组合表现，可以一边控制幻想与科幻的平衡，一边组合到概念设计上。

虽然概念的主题基本都是使用平面的设计来进行制作，但是为了更加符合世界观，最终将表现出显示器效果的网格纹理与根据摄像头镜面歪曲导致的周边减光效果也加入了最终设计当中。

我觉得像这样加入一些真实感的设计（+α）后，就变得不是单纯的平面设计，而是更加具有实在感的设计。

另外，为了不让平面设计的画面显得非常无味枯燥，UI的动画设计一定要设计的非常细心，我个人特别在意系统界面的动画，我也觉得这是UI设计最重要的地方。

横尾太郎先生最开始关于UI的设计方面提出了「以温和又柔软的米色作为基础温」的需求。

虽然是这样说，但是最开始在无机质的技术表现上加入米色的组合方式让我烦恼了很久......

首先，我考虑的是自己可以凭脑海中想到的感觉来进行设计。以黑与白对比度较强的设计来进行思考，慢慢偏移到柔软的米色的形式来确定颜色。在柔软印象的低对比度的情况下，统合与米色同色系的颜色，并且让各个颜色之间不要产生误认情况的确认着实让我花费了一番心思。

初期颜色。相比自重版，对比度会更高一些。

最終版的颜色。

另外，由于导演那边还有一个不想让颜色过于杂乱的需求，需要在UI的表现尽可能不依靠颜色，这一点也花了我不少工夫。

数据的增减方面通过字体的粗细与颜色的浓度来进行表现。

无论如何都需要是使用到颜色的部分，仅使用淡淡的橙色。（也有极少部分使用了白色与淡绿色）

根据不同分类必须进行颜色区分的插入式芯片方面，通过多次失败的尝试后确保了他的颜色设计。

像这样的颜色设计也将他反映到了黑客入侵的3D模型上，对游戏整体的设计进行彻底的统一。

黑客入侵画面的概念设计。

地图画面的3D模型。

我甚至想起了在开发时横尾太郎导演提出了「想要将他设计成平常不怎么玩主机游戏的初学者，甚至老婆婆都能操作的简洁设计」这样的要求。

菜单的基本规则是这样的内容。

基本操作是通过摇杆进行的移动操作以及○×按钮就可以操作到所有的功能。

按钮指南中也只表示了上面这些按钮的说明，尽可能的减少展示物。

由于没有平常在游戏UI中使用到的L1・R1和△□相关的操作，所以在画面转移以及画面移动的地方让我烦恼了很久。开发中那简洁的操作与复杂的设计导致会存在一些不好理解到的操作，所以我多次与横尾太郎先生商讨来确定方向。

虽然是这么说，但是单纯以摇杆和○×按钮的操作对于一些已经习惯了手柄操作的玩家而言是非常不方便的，虽然在操作说明中并没有写，但是部分地方实装了一些L1・R1按钮和△□按钮的快捷键（你们有发现吗？）。

系统菜单内的种类移动与武器的详细和故事，个体数据画面可以通过L1・R1来进行切换操作。

在个体数据一览中，装备变更与动画的再生可以通过△和□来进行操作。也可以通过右摇杆来进行模型的旋转。

地图界面首页可以通过右摇杆以及L2・R2按钮来切换到全画面地图显示。

系统菜单内基本无论是在什么阶层只可以通过OPTIONS按钮返回游戏（设置画面除外）。另外，在打开系统菜单时，所演出的动画也可以通过任何按钮来进行跳过。

在与横尾太郎先生第一次进行UI的商讨时，有个关于「想加入奇怪的UI」的话题。普通的UI在这个世界上各个游戏都在用，所以想做一些奇怪的UI。但是，在进行开发中却慢慢的让这些东西变得非常统一，一直都没有加入这些奇怪UI的机会……

但是，会有一些少根筋的规划人员出一些主意，还有一些程序员通过自己的兴趣来制作一些奇怪的功能（最后被上司批评了）还有一部分人暴走。最终做出让横尾太郎先生满意的UI，真是万幸。

自爆后等时候可以看到的UI。

让画面显得非常怀旧的怀旧过滤器。

这次的UI设计是我自己最喜欢的一次设计。玩家们的较高评价也让我非常高兴。像这样回顾开发时的一些事，让我重新认知到横尾太郎导演游戏的妙处。文章似乎有点长，非常感谢各位能够看到最后。

今日推荐

游戏开发者年终考试，你能得多少分？

来自One Pixel Brush工作室的概念设计思路

如何用Photoshop制作独立的建筑物和整个城市？

一键添加

加小编微信，享双重福利

1.加入GAD美术交流群，获取行业干货；

2.领取20G腾讯内部分享等独家美术资料。