type
status
date
category
summary
language
面向群体
游戏品类
资料类型
平台
tags
password
Sub-项目
作者
文章链接
来源
标签
Parent 项目
发布时间
slug
icon
全世界销量超790万份的《喷射战士3》，其独特的UI不仅便于理解也让人印象深刻，那么这样的UI是怎样设计出来的呢？
>
橘 磨理子
多摩美术大学平面设计毕业，2012年加入任天堂。主要负责《喷射战士》1·2和《皮克敏3》的UI设计。
任天堂已经推出过《超级马里奥》、《塞尔达传说》、《动物之森》等热门IP，但这并没有停下他们在新领域开发新作的步伐，这一次则是《喷射战士》（官方译名：斯普拉遁）。
不出所料，这部作品不仅大受欢迎，还在日本掀起了一波射击游戏的风潮。
相比其他游戏，《喷射战士》独特的世界观吸引了许多玩家：在这个世界里，人类灭绝，而软体动物进化成人形并统治世界。
而负责UI设计的橘磨理子希望在保持「易理解」和「新鲜感」平衡的基础上，凸显这一世界观。
橘磨理子说：“UI 不应该太喧宾夺主，‘易理解’比一切都重要。但艺术总监说‘想要点新鲜的UI设计’。所以在《喷射战士》中，我的目标就是在UI 的易理解与美术的新鲜感之间取得一个平衡。”
易理解与新颖感
UI要便于理解、但从美术上看又要有新鲜感。
为此，该如何设计UI？
首先，橘磨理子提到在思考《喷射战士》UI 设计的时候，最先想到的就是要比较一下不同作品的UI 设计。
譬如将大名鼎鼎的《超级马里奥》系列的UI设计摆到一起进行思考，并从中寻找《喷射战士》的特点。
“与UI 设计成品相比较，有助于我们定下品质的目标，也有助于我们做得更新颖。在设计的时候时常对比，更易于发现《喷射战士》的特色所在。”
开发独特的字体
《喷射战士》在确定UI 风格上进展非常顺利，却在意想不到的地方碰了壁──在选择游戏内使用的字体的时候，没有找到符合世界观的字体。
于是乎，抱着“没有字体的话就自己做”这种想法开始从零制作字体。
橘磨理子展示了字体设计初期的手稿，她表示：“这是最初的草图。最初的势头和印象很重要，所以尽快画了出来。即使是一个模糊的印象，也应该尽早向设计总监和其他设计师展示，以确定方向是否合适。我觉得这对开发周期短、制作人数少的游戏来说非常重要。”
以草图为基础，微调字体。在设计时带有“体育用品品牌”的意识去思考字体的厚度，有分量感、结实的文字，在此基础加上液态般如同活物一般的线条，字体的设计就基本确定下来了。
“不单纯要考虑新鲜感，还要注意在极限下的可读性。对于被认为“难以辨认”的字，需要反复微调字宽以及字距。”
就这样，《喷射战士》所使用的字体就做好了。与《超级马里奥》里所使用的字体摆到一起，不仅一目了然，也能传达出其独特的世界观。
塑造UI的形状
接下来，介绍按钮和元件等UI的形状。
橘磨理子希望：仅靠游戏中所出现的UI，就能感受到《喷射战士》的氛围。
首先，我们从给人以“乌贼”和“运动”印象的词汇开始，先写下词汇给人的印象。（乌贼：软体、液体、海洋、活物、缓慢的、不均匀）（体育：厚重、强大、简洁明了、快速、年轻）
再把这些词给人的印象反映到UI设计当中。（滴水、歪斜、摇曳）
结果如下，即使还未上色也能感受到《喷射战士》的氛围：左图是《超级马里奥》的UI风格，右图则是《喷射战士》的UI风格。
另外，按钮和指针的动画效果也考虑到了《喷射战士》的特点做了特殊设计。
游戏的配色
橘磨理子表示，《喷射战士》的配色也希望凸显游戏风格。
“马里奥图标是在自然光线下拍摄的，因此阴影的亮度较暗。但在《喷射战士》上，我们想尽可能给人留下‘明快清新’的印象，所以在阴影上使用的不是在亮度上调暗的颜色，而是与原本的色相所偏离的颜色。比如，黄色的阴影用的不是暗黄色而是橙色。粉红色的话，我就会用紫色来搭配。”
下图为《喷射战士》的“服装技能”图标，左图为草图，右图为正式版，可以看出不仅外形，颜色也有一定调整，这是为了方便辨认和理解。
“清晰”的UI
橘磨理子表示，可以通过让画面变为黑白来确认UI是否清晰。
我们先看彩色画面。
然后把游戏画面设为黑白，就能很容易地确认UI是否清晰。
“黑色容易被人忽视，白色则引人注目。文字和图示是最白最显眼的，如果窗口和背景显示成灰色，那这就是易认的介面。”
“除了把画面弄成黑白外，还经常用到“眯眼看画面”的手法。当你眯着眼睛看屏幕时，白色的部分会更显眼。”
也就是说，《喷射战士》调高了图标的色彩饱和度，使之更加显眼；而除此之外，窗口之类的背景则将饱和度设定得比较低。
也就是说，对重要的图标使用高饱和度，只强调重要的内容。
UI 与3D间的平衡
为实现「易理解」所做的第二点就是平衡UI与游戏3D模型。
在《喷射战士》中，根据场景的不同，信息的优先度也会发生变化。为此与3D模型设计人员沟通，请他们做出改变。
“在战斗画面中，要把角色和场景摆在第一位。《喷射战士》是用彩墨来涂地的游戏。应尽量不挡住画面，为此把UI 置于游戏画面的上方，底色统一为黑色，使两种彩墨的颜色更加醒目。”
而在购买道具的界面中，请3D设计师删掉了墙上的海报并模糊背景，让3D设计师删掉辛辛苦苦做出来的海报的确有点儿为难，但好在3D设计师也理解UI的重要性。
追求易理解和新鲜感的结果
可以说，UI 上的易理解与美术上的新鲜感是《喷射战士》大受欢迎的重要因素。
作为一个新IP，《喷射战士》得到了玩家的认可。
《喷射战士》的独特字体得到了玩家的欢迎。
相关的IP周边也得到了玩家的认可，这可能就是UI设计的绝妙之处吧！
结语
如果说有哪个手游利用好的UI吸引到玩家的注意，那笔者第一个想到的就是《第五人格》。独特的UI不仅有助于营造世界观，对于开发周边也很有帮助。
- 作者:何北航
- 链接:http://gamesushi.cn/article/6bcee5dc-62da-4a2f-90b4-a42b1c345c0e
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。