美术丨《猎天使魔女2》UI设计分享：如何提升真实感？_【Gad腾讯游戏开发者平台】

《猎天使魔女2》UI设计师：专注于「为设计增加理由」。...

大家好，我是在《猎天使魔女2》中担任UI设计的木岛。

UI部分是担当一些类似以及锁定地点、各种菜单画面和游戏内一些表示物品的设计。

《猎天使魔女2》中关于UI部分的工作大概的流程是由UI主设计师大仓先生指出整体的方针后，来由我逐步的将他实装到游戏中。

因为大仓先生参与了前作的UI设计以及一些美术相关的工作，所以UI中的一些作画相关的主题已经确定。相对的，我主要的工作就是思考如何在超过前作质量表现的情况下构成最适合的数据以及设计格式等，在此期间也经常会和程序员与大仓先生进行沟通。

最终我们确定下来的本作UI设计的概念是在保留前作UI设计印象的同时，加入一些以为是《猎天使魔女2》才能表现出来的画面，并且进行品质上的提高，提升设计的真实感。

在提高品质方面主要的方向性主要是由导演来定的，他定下来的关键词是“真实”。

为了追求这个“真实”，在理所当然的增加质感方面以外，我在这个设计的期间非常专注于「为设计增加理由」。

例如，在受到伤害时会有玩家或者敌人的HP计量槽变红的表现。前作中只是通过改变计量槽整体的颜色平衡来让他变红。而在本作中，通过复数图层的重叠，来制造「红色的光芒照向计量槽的样子」。明确的定义计量槽变红的理由以及他的定义。

前作的计量槽（Xbox360版）

本作的计量槽（因为明确了变红的理由，所以颜色也变得更加自然）

通过这样增加「为设计增加理由」的方式，可以让观众体验到「魔法」这种存在于猎天使魔女世界中的非现实东西的真实感。

就算「红色光芒」发生源是魔法这种非现实的东西，但是通过魔法导致红色的光芒照到了计量槽上这种表现确实现实中存在的现象。所以其他方面的UI设计也以这种思考方式来进行外观以及动画的设计。

前作的商店界面（Xbox360版）

本作的商店界面（通过质感和动画的设计，更明确他是什么「东西」）

其他还有，在UI内非常乱的镜头炫光通过横长的变形镜头炫光来进行统一，通过使用同一个镜头来捕捉的方式，让他在设计方面的解释和说服力变得更强（回复的表现等设计时也有使用以「记号」来区别的其他镜头炫光）。

使用了变形镜头眩光的UI。

HP计量槽与表示连击的发光部分，使用的是菜单内的决定效果。

另外，表现出《猎天使魔女2》才有的设计也是本作UI设计概念的一个部分。

虽然前作中UI的设计采用了非常多以曲线主体的设计，本作中还是大多采用了直线与冷色之前进行搭配的设计。（后面提到的章节结束画面是个非常容易懂的例子）。

本作设计的线性由于会关系到游戏故事的情况，所以这方面请通过游戏来了解....

作为一个UI设计师，本次我还有一些其他的课题。比如将前作中那些不容易理解的部分，以及操作设计不够好的部分进行改善等。

这里以章节结束画面来做案例。本作中，文字的大小、布局的整理，通过分割为2个画面来进行情报的整理，可以让设计变得更加简单易懂。另外，表示游戏内的虚拟货币heirou的文字一律采用ICON+黄色文字来进行统一，并且让他和其他数字存在差别。

前作的章节结束画面（Xbox360版）

本作的章节结束画面（第一页主要展示的是与奖杯相关的项目，第二页则是与奖杯计算没有相关的得分项目）

关于操作感方面，这里使用了在如今的web设计中经常会看到的相关‘缓急’的设计。最开始很快，后面却很慢，这种通过有缓急感的动画可以表现出让人更加舒畅的效果。

通过制作有缓急的动作，也可以让他比等速运动显得更加具有真实感。因为人类会对自己喜欢习惯了的表现产生更加舒畅的感觉，所以动画的演出也会朝着这方面设计。

使用了缓急的动画

在被称之为辅助画面的菜单画面中，采用了被称之为圆形光标操作的独特操作方式。这个设计在团队里产生了非常激烈的讨论，并且进行了非常多的错误的尝试。这里我的想法是「想要让他是就算是第一次操作也可以简单易懂，并且具有非常流畅的操作感触」。其中也有人提出「需要重视那些已经习惯的人」这样的意见，所以多次寻找平衡点，最终设计出了大家都认同的操作。

辅助画面（在大的魔法阵上面移动光标）

另外，由于本作是Wii U的游戏，所以存在触摸操作，菜单界面也不存在例外。一边思考按钮操作的同事，一边在不影响视觉表现的情况下确保触摸的操作性。想要掌握这里的平衡是一件非常困难的事情。如果过于纠结品质的话甚至有可能让他永远都不会完成。

在这里需要先加入优先度，这里以确保按钮操作的流畅性为第一前提，在这个前提下尽量让触摸操作不要存在太多的违和感。

触摸操作相关的设计和操作方面等方面的规则也尽可能的通过调整，最后完成的效果我还是非常满意的。不同于通过光标移动的按钮操作。触摸操作则是直接通过触摸来进行选择，是一个非常迅速就可以进行操作的功能，请务必进行尝试。