任天堂2人团队如何利用自动化打造《塞尔达传说：荒野之息》的开放世界UI

在CEDEC2017的最后一天，任天堂举办了一场名为“《塞尔达传说：荒野之息》的UI追求：融入世界，同时留下深刻印象的UI表达”的演讲。

演讲者是该公司的前端工程师北山茂寿和UI主设计师长谷隆広，长谷先生主讲UI设计的理念，而北山先生主讲如何利用自动化生成工具帮助UI设计团队方便快捷地制作。

值得一提的是，长谷先生所率领的UI团队，除了专职绘制图标的画师外只有两个人，他们使如何在北山先生的自动化技术支持下做出如此宏大开放世界的UI的呢？

>

北山茂寿

2005年毕业后加入任天堂情报开发本部负责程序开发工作，参与游戏引擎、UI系统等开发工作，《荒野之息》前端工程师。

>

长谷隆广

入职任天堂前曾在其他公司负责手机的GUI设计，《荒野之息》UI主设计师。

“没有UI会更好”的UI设计理念

本场演讲将从长谷隆广先生负责的UI设计部分开始。

和“迷宫探索为核心”的系列前作风格截然不同，《塞尔达传说：荒野之息》是以“在广阔的世界自由探索”为主题的系列首个“开放世界”游戏。

《塞尔达传说》系列常见的大型迷宫，图片为《时之笛》水之神殿

完全革新的游戏类型，需要用完全革新的思维去创作，这也是《塞尔达传说》系列一贯的坚持。

《塞尔达传说》系列的制作人青沼英二曾在2013年的“Nintendo Direct”上展望了WiiU的《塞尔达传说》（即2017年发售的《荒野之息》），表示这次的开发主题是“重新审视《塞尔达传说》系列中那些理所当然的设定”，希望在保留系列风格的前提下对一些守旧的元素进行改革。

为此，制作团队大胆取消了系列传统的线性剧情、固定顺序的大型迷宫、永不会损坏的大师剑等诸多设定。

而UI团队也以“重新审视UI的理所当然”为方向进行探索，试图打造出不同于以往作品完全焕然一新的UI风格。

他们也的确做到了。

以系列前作《塞尔达传说：天空之剑》的UI为例，左上角代表体力的粉红色心型标志、系列传统货币的绿色卢比，以及右上角的弹弓，都采用了非常精美细腻偏实物的设计风格。

《天空之剑》的UI

相比之下，《塞尔达传说：荒野之息》的UI风格则极度扁平化，所占画面的比例也被缩小，整个屏幕上只显示最基本的UI元素，卢比等不重要的元素被暂时省略，给人一种清爽的感觉。

《荒野之息》的UI

长谷先生表示，这种UI设计有两个目标：

一、让玩家第一眼就看出与系列作品不同的革新感；

二、以不妨碍游戏体验的方式让玩家沉浸其中，回归UI的本质。

为了实现这两个目标，长谷先生提出了“没有UI会更好”的UI设计理念，也就是在不使用UI的情况下也能让玩家快捷舒适地操作。

没有UI会更好？说到这一点，笔者首先想到的是《死亡空间》里的UI设计。

在《死亡空间》中，角色的血量通过背上的发光管数量呈现（下图左下角），武器的弹药数量则是通过全息图像的方式呈现（下图中央处的“12”），这种UI和游戏设定完全融合的设计受到了游戏行业同仁的一致好评。

但《死亡空间》的UI设计，和游戏的世界观设定是分不开的，随着游戏开发的进行，长谷先生发现：UI的本质是向玩家传达信息，为了向玩家传达信息，有一些UI是无法取消的。

于是长谷先生做出了妥协，决定以抑制UI的存在感为目标，设计出不妨碍玩家、不喧宾夺主的UI。

为此他把《荒野之息》UI分为四个类型进行介绍：图形元素、字体、规范和动效。

极简扁平化的图形元素

首先是图形元素。

UI设计团队将游戏必须传达的信息进行整合，减少需要玩家查看的地方，并缩小UI的整体尺寸，确保不会干扰玩家的游戏体验。

对比《天空之剑》和《荒野之息》来看就很明显：《天空之剑》中玩家需要关注左上、左下、和右侧的信息。

但《荒野之息》则是把信息集合在左上和右下，而且所占画面的面积也大大缩小。

长谷先生也提到，在开发早期尝试过把相关信息放在左下和右上等位置，面积也比现在更大，但经过多次推敲采用了现在的设计。

不仅是图形元素的位置和大小，早期的图标（下图左）也因为有太多细节过于引人注目，设计团队通过去除图标的边框、减少细节、纯色填充使其扁平化来抑制其存在感，让成品版图标（下图右）不会喧宾夺主。

不仅是图标，按键也做了相应调整。

比如拾取物品时的提示按键，也由线性图标改为面性图标。

极简的风格不仅体现在图标和按键，也体现在开始菜单界面。

《天空之剑》的开始菜单中，标题LOGO和选项非常明显，而且有细致精美的修饰。

而《荒野之息》是利用留白设计，将LOGO选项集中于右侧，左侧则是大片留白，使其看起来清爽整洁。

在武器和装备的选择界面中，采用了游戏中常用令人一目了然的构图，左侧是装备，右侧是穿在林克身上的样子。

放一张游戏中清晰的图片。

此外，游戏对话和日志中显示的文字、标题LOGO等所使用的白色实际上并不是纯白，而是统一使用略带黄色的白色，这种白色在团队内部被称为“塞尔达白”。

这是因为真正的纯白在自然界不存在，通过将游戏中的白色统一为更接近自然中存在白色的“塞尔达白”，不仅让游戏风格更加统一，也能让玩家有更强的沉浸感。

“塞尔达白”最初只应用于游戏UI，但随后也被应用于官方网站、游戏包装、过场动画等地，成为了代表《塞尔达传说：荒野之息》的主色彩。

PS：对塞尔达白感兴趣的朋友，颜色代码已经帮你找到了，是“#ffffe5”。

复古扁平化的字体

接下来看一下《荒野之息》的字体。

标题LOGO的字体笔者之前分析过，是选择与系列初代LOGO近似的硬朗厚重风格，对比来看是不是很像？

据长谷先生介绍，之所以与初代LOGO相似的字体，目的是希望给玩家营造回归系列原点的怀旧复古风格。

本作的字体同样采用和整体UI一致的极简扁平化风格。

地名、任务名等字体采用单色填充、无边框、无修饰的扁平化风格，将不必要的元素减少到最低限度。

日语版字体旨在同时表达力量和怀旧感，采用了粗体风格的字体。

片假名部分采用了視覚デザイン研究所设计的"ロゴGブラック"（LOGO G Black），汉字采用了フォントワークス（FontWorks）设计的"ラグランパンチ"（Raglan Punch），并对字体进行略微倾斜和更加紧凑的修改，旨在在不凸显文字的同时，通过字体本身传达出《塞尔达》的特色和复古风格。

下图是全部采用"ラグランパンチ"早期开发版（下图蓝色划线字体），以及片假名替换为"ロゴGブラック"的成品版（下图红色划线字体），旨在强化复古和力量的感觉。

这两类字体都是在确保可读性和设计性的前提下，试图挑战粗体风格的极限，有些动画迷对"ラグランパンチ"字体可能比较熟悉，没错，这也是经典动画《斩服少女》（Kill la Kill）采用的字体。

不仅是日语版如此，英文版的字体也是保持游戏标题LOGO和游戏内文本统一的风格。

英文版LOGO其实是《塞尔达传说》系列自《时之笛》开始所使用的日英通用LOGO。

这次LOGO日英版分家，英文版字体跟着《时之笛》LOGO风格，而日文版则是跟着系列初代风格。

极简的规范

在设计规范方面，开发团队秉持着简单的“尽量去除不必要的设计”的理念进行开发。

举个例子，前作《塞尔达传说：天空之剑》中，画面上同时显示了心、盾的耐久值、卢比、操作指南和快捷键，显得非常繁琐。

为了重新审视“塞尔达系列的理所当然”，团队经过反复考虑，决定暂时隐藏武器的耐久值、操作指南、卢比等信息，只在必要时才进行显示。

下图左上角是武器的耐久值，只在快损坏时通过文字提示玩家；操作指南只在玩家进行相应操作时显示在画面下方；卢比也只在获取时显示。

通过制订规范，成功地减轻了常驻UI界面繁多信息带来的压迫感。

当然，随着游戏的进行，心的数量也变得非常多，某些常驻显示的关键物品也出现，导致游戏后期难免会有一定的屏幕压迫感。

这点我们拿游戏后期的图片对比来看，后期增加四英杰能力图标，能力BUFF图标，以及探测器图标，占画面的面积的确会增多。

但是这种UI在欧美地区特别不受欢迎，因此为了减少常驻UI显示，使屏幕更加清爽整洁，团队在选项中加入了“专家模式”。

如下图所示，在这种模式下，画面只显示代表体力的心。

长谷先生曾经担忧这种变化会让游戏变得难玩，但实际上，由于常驻UI的消失，玩家更加沉浸于游戏中，此举受到了欧美用户的广泛好评。

不过，也不是所有游戏都使用极简的UI风格。

对于协助林克冒险的关键物品“希卡石板”中的UI，则是与主游戏完全相左的UI设计风格。

希卡石板的相关设计使用了希卡族古代文字和充满想象空间的特效等精致的设计元素，目的是凸显自然风光的“海拉尔世界”与古代高科技“希卡文明”的区别。

比如下图，可以看出希卡石板界面UI拥有写实风格的边框，细致的背景纹路，凸显和海拉尔世界的区别。

我们来对比看一下，下图是记者现场拍摄的图片，笔者找来清晰图片进行对比。

首先是代表“海拉尔世界”的装备界面。

然后是代表“希卡文明”的地图界面，可以看出区别：地图界面的字体比装备界面的字体更端正一些，主色调也是代表希卡文明的蓝色而不是“塞尔达白”。

此外，本作在游戏开始时没有游戏教程存在，而是采用在需要玩家执行操作的瞬间才会显示帮助信息的形式。

比如，当玩家捡起武器时，会显示操作指南；当接近树木时，会显示能够攀爬的提示；攀爬时会显示精力槽……

这里请看一张大图，只有在靠近可捕捉生物时，才会显示捕捉要按A键的提示信息，以及可捕捉生物的名称。

这样的设计是为了让玩家不会有被强迫的感觉，而是在玩家积极主动地朝着目标前进后才显示UI。为了实现这一点，UI团队与策划团队进行了多次磋商和讨论。

这样的设计理念，其实和育碧后来逐渐放弃“清问号”UI是一致的。

《刺客信条》满是待探索地区的UI设计

问号就是为玩家制订目标，强迫玩家进行操作。育碧后来逐渐修改了这一设计，在《孤岛惊魂6》中，大部分问号只有在玩家打听了相应情报后才会开启。

帮助传达信息的动效

接下来是关于UI动效。

UI动效指的是：当受到伤害时屏幕上的心会闪烁，或者在捡起物品时物品图标从屏幕边缘滑动出来等动画特效。

在本作中，由于采用简洁清爽的UI设计，一些不容易被注意到的信息通过动效进行强调。

例如，在受到伤害时心会闪烁减少，这样一来注意力就会集中在心上，还可以根据动效判断伤害量。

不过，简洁清爽的UI往往会给人廉价的感觉。对此，北山先生制作了“实时捕捉画面并将其作为游戏中贴图纹理”的功能，提高了UI动效的质感。

在游戏中表现为下图的样子，注意看红色的“GAME OVER”动效。

开始的时候，长谷先生还没有了解这个功能有多好用，但是随着工作的进行这个功能的好用程度超乎长谷先生的想象。

例如，在获得武器时的物品背景里引入捕捉特效。具体实现方法是，捕捉帧缓冲，调整亮度和色阶调整，然后将其作为背景展示。使明亮的部分变暗，暗的地方不至于太过昏暗，这样可以减小胶片效果中的亮度差异。

这一功能被广泛用于显示物品窗口、物品选择界面以及屏幕上显示的简短消息等约200个地方，超乎长谷先生预想的好用。

得益于UI设计师和前段工程师的合作，本作UI实现了超乎想象的高质量效果。

自动化技术支持下的两人UI团队

除了专门负责图标设计的员工，《荒野之息》的UI设计团队只有长谷先生和另外一位成员，总共两人。在如此少人数的情况下，他们是如何实现如此宏大的开放世界UI工程的呢？

下面，由北山先生来进行技术部分的讲解。

北山先生认为，小团队中要完成整个开放世界游戏的UI设计，首先要提高开发环境的效率。

UI团队使用了"LayoutEditor"进行UI开发，在LayoutEditor中，设计师不仅可以设置节点和制作动效，还可以让程序员使用扩展资源库控制UI。此外，节点之间建立了父子关系，使得父节点的移动、缩放和旋转能够传递给子节点。

这样的好处是，即使不编辑UI数据，也可以在游戏运行时调整绘制节点，方便程序员做Debug。

此外，在以往的制作环境中，创建好的UI数据无法在游戏中展示，因此设计师设计好UI后需要程序员在游戏中实装才能看到实际效果。

当UI设计师有一个想法，比如"将体力条显示在右上方"时，通常的制作流程是：UI设计制作好数据后发给程序员，然后在游戏中进行实装，最后通过开发机进行确认。

这样效率太低了。

为此，北山先生改进了开发工具，使得可以在电脑上预览游戏画面中的UI，省去了多余的流程，只需要UI设计师进行尝试和调整，从而实现更精细的UI布局，提高工作效率。

即便如此，要完全制作出庞大的UI数据仍然需要很长时间。为此，北山先生还加入了自动化生成数据的功能。

比如下图的物品图标不是人工手绘的，而是由物品的3D模型自动生成插画式的图标。

此外，作为开放世界的象征，《荒野之息》的地形图上绘有大约120个区域，地图的缩放有4个级别。另外，根据玩家开启地图的顺序，地图的连接处也会改变，因此仅准备地形图像就需要2344张。

比如上面展示的一块地图中有四个区域，根据玩家是否通过开启了当前区域的地图，就需要多个地图图片。

为了简化这项繁重的工作，北山开发了自动生成地图的工具，通过从3D地形图中自动读取等高线等地形数据，并将水域、树木、建筑物、道路等16种元素以及高度信息合成到地图中，从而实现地图绘制的自动化。

其他方面也进行了自动化改进，对于之前提到的利用捕捉技术制作的UI特效，如果每次都对画面进行捕捉会增加硬件负荷。因此，他们还加入了能够让一次捕捉的特效能在其他地方重复使用的功能。这不仅减轻了工作量，还使得硬件不会承受太大的负担。

此外，北山先生还对其他UI设计流程增加了自动化改进。例如，在游戏中使用的字体数量很多，为了简化字体的管理和使用，开发了字体制作工具，可以根据需要生成不同风格和大小的字体。

最后，北山先生分享了一个有关UI设计的秘诀：团队成员将自己作为玩家的视角融入到UI设计中，通过亲身体验游戏、感受操作和反馈，以确保UI的可用性和用户体验，这种将玩家视角融入设计中的方法为他们带来了宝贵的洞察和灵感。

结语

尽管UI设计团队规模较小，但通过优化制作工具、自动化、提高工作效率等手段，小团队也能成功制作出大开放世界中精心设计的UI布局。同时，UI团队通过玩家的视角去体验游戏并进行设计，也提高了UI质量。

这些努力和创新共同促成了《荒野之息》独特而出色的UI设计。