卡比用 UI 盛情款待！以联系游戏与玩家为目标的 UI 设计
发布时间：2020-10-01 11:22:01来源：indienova
《星之卡比》系列游戏，是由HAL公司开发，任天堂发行的人气游戏，受众非常广泛，不只游戏好玩，本系列游戏的UI(使用者介面)设计，也往往为人所称道。在2020年的CEDEC，就有一场主题演讲，题目是“卡比用UI盛情款待！以『联系游戏与玩家的UI』为目标”。以下是本场演场的概要：
本场演讲的主讲人是来自HAL公司的伊藤晴香、剑持紫，两位都有着丰富的游戏制作经验，并在卡比系列最近期的《星之卡比机器人星球》、《星之卡比新星同盟》等作品担任主要UI设计师。
首先，先介绍卡比的UI设计，有机个基本目标：
不会让人迷惑的UI
不会给予压力或不快感的UI
能够留下印象、让人心动的UI
对卡比的UI团队而言，设计UI时最重要的事情，是：
考量易用性
考量游戏整体的流程
不要忘记玩心
那么，什么是容易使用的UI呢？大致上，有这样的特性：
能够知道自己现在的状况
不会不知道接下来要做什么
能够想像按了这个按钮会发生什么事
不会带来违和感与压力，就是好的UI。
游戏的UI，是联系玩家与游戏之间的事物；好的UI，能够让玩家顺利的投入游戏的世界。反之，就会影响玩家对游戏的投入。
具体来说该怎么做呢？
好用的UI，就是能够让玩家轻松地取得所需要的资讯，因此UI设计，基本上就是做好资讯“取用”与“整理”的工作
首先，决定资讯的优先顺位。UI团队会与游戏设计团队进行讨论，把游戏内所需要提供给玩家的资讯一一表列出来，并依高、中、低三个级别，分出他们的优先顺位。
接着，将资讯加以分类，例如与地点相关的资讯、分数资讯、与游戏进行相关的资讯等。
再来就是要将分类与排序好的资讯，在画面上布局配置。画面布局的第一个要点，是“接近”。
让相同类别、高关联性的资讯彼此接近，而不要四处分散，玩家自然能够更容易取得需要的资讯。以《新星同盟》为例，画面上方横向的是世界的选择标签，画面中间纵向的则是关卡资讯，两类型之间不会搞混。
第二个要点，是“对齐”。
文字与图像的配置，要做到纵向、横向或中央对齐，如果没做好对齐，会影响观看上的顺畅。传统上文字以靠左对齐最为常见，但也需要视情况调整，例如《新星同盟》里面的按键功能对照表，因为主要想凸显的是按键图示，而图示较适合中央对齐，因此说明文字的部分，也配合采用中央对齐，保持整体的一致性。
第三个要点则是“重复”。
这是指将画面内的设计元素统一、重复运用，使其模式化，在《新星同盟》里面，录音室、插画画廊、剧院等画面的左上角，都采用了相同的斜向线条设计，仅替换文字、颜色和图示，透过重复的设计元素，让玩家可以很轻易的理解它们属于同一种类的功能。
实际上，读者看到现在应该也已经发现，本场演讲所使用的投影片，标题区块的配置正运用了这样的“重复”设计元素。
接着是要记得为画面加上“对比”。
可以借由放大、变换色彩等等方式，强化资讯之间的差异，例如游戏模式选择时，目前选择中的图示会发亮、放大，在多人游戏时，选择中的图示配色明显不同。
最后，要考量视线的诱导。
电视画面是横向的，习惯上观看者的视线会是从左上到右下移动，因此最重要的、最希望第一眼被看到的资讯，就要放在左上方。
上面所说的，对于设计师来说，应该都是理所当然的基础，但卡比的UI团队，会把这种“理所当然”视为需要仔细检查的东西。
例如《新星同盟》的最佳时间画面，左边是初期的设计，经过检查验证之后，调整了三个项目，才成为了右边的最终版本。
主要调整内容：
初期的最佳时间设计是将每个小关的时间排在一起，右边再一个区块显示总和时间，调整后，总和时间与各小关时间整合成一个纵列，方便从上往下综观，也更好的呈现出两种数据之间的阶层关系。
将“最佳时间”的文字从时间数字上方移动到画面右上方，因为玩家最关心最想快点看到的就是时间数字本身，相较之下，“这个画面是最佳时间”的说明，重要性上反而是次要的，所以把数字放到视线最优先会去看的地方。
角色插画对于告知“最佳时间”这个资讯而言并不必要，因此移除了插画，换取更加凸显重点资讯、更加整齐的空间配置。
接下来，进到卡比UI团队的第二大重要事项：考量游戏整体的流程。
有些人可能会碰过这种情况：在设计UI元件时，对于比较不那么重要的资讯，就用比较小的图示来绘制，最后却导致最后整个UI上，充满了许多辨识度很低的小图示，让画面变得很难看。
又或者像这种情况：根据企画书上所叙述的调性，绘制了特殊形状的UI元件来配合，后来才发现这个UI元件会被重复使用在其他地方上，导致了UI元件与画面调性完全不合的情况。
会出现这种状况的原因，在于绘制UI时没有考虑到游戏整体的流程。因此，对卡比UI团队成员来说，最重要的，是要能解读规格，并将游戏整体流程列入考量的能力。
比方说，企划书上开出的规格，是要制作一个“A进入”的UI元件，设计师不能只是单纯把这个元件画出来就好，而是要设想这个元件被配置到整个UI里面时，会是什么样的状态，再进一步考虑诸如“适合的尺寸大小”、“与邻近的UI元件是否要统一色系”等等问题。
而在阅读企划规格书时，UI团队也会去确认，“这个元件是否仅只使用一次”，例如左边的特殊模式画面，“开始”、“排行”等选项的UI元件是专属规格，不会在其他模式使用，因此就可以配合该模式的调性，为UI元件加入专属的设计。相对的，右边画面里的“是”、“否”UI元件，会在复数的场合反覆使用，在绘制时，就采用了较为泛用的设计。
不只是单一场景，UI设计时还要考虑与前后画面之间的关联，让UI的主题、演出保持一致性或联系性。以《卡比猎人队》里的任务画面为例，最上层的UI，玩家个人档案的图案是手帐型的外观，因此从这边开启的任务选项画面，右侧就有着手帐的活页孔洞，再下一步的细项画面，孔洞开在左侧，呈现出这是“下一页”的连续性，而从手帐封面、内页主选项、任务列表，都可以看到皇冠及勋章这个共同的设计元素。
重点就是，UI设计时，观点要跳脱单一元件，整体的画面、前后的画面都要考虑，才不会产生违和感。
卡比UI团队的第三大重要事项，是不要忘记“玩心”。
UI设计当然是以容易使用、能够清楚直接的呈现资讯为基本原则，不过如果能够在UI里面加入一点可玩性或与世界观相融合的设计，将能够为玩家带来更加兴奋的体验。
在“重视功能性的设计”与“充满玩心的设计”之间如何取得平衡，往往让他们花费许多心思。
以《新星同盟》的难度选择画面为例，他们加入了难度愈高，卡比的表情与介面演出就愈夸张的效果，即使因为图像效果太过强烈，影响了文字的可读性，却具有更明确的资讯传达效果。
又例如录音室(音乐鉴赏)模式的画面，主要的功能性仅止于选取曲目、播放音乐，卡比的UI团队仍加入了卡比乐团、点唱机等许多视觉上的演出。
范例三则是先前提过的《卡比猎人队》手帐型任务选择画面，制作了翻页的演出效果。
卡比系列游戏的一大特色是：收录大量的游戏模式。为了强调这种丰富的多样性，他们不采取统一风格的设计，而故意让每种模式都各自采用不同的图像化字体，给玩家目不暇给的感觉，并且可以明显看出各自属于不同的游戏玩法。
适当的为UI加入图像或演出的变化，让游戏的UI光是看起来就觉得很有趣，能够更加强化游戏的魅力。
接下来，要谈的是卡比系列在UI设计上的传统与挑战。多数人对“卡比系列”的印象，可能是“很可爱”吧？但对团队而言，他们追求的并非可爱感，而是“温暖感”。
先说系列作传统上的温暖感，最基本的，就是避免掉攻击性的、尖锐的形状，即使是在描绘锐角型物件时，最尖端处都仍是圆弧状的。
其次，是避免使用刺激眼睛的强烈对比或颜色，就算是白底黑字的场合，也只有标题、副标会采用全黑全白色，内文会改用灰黑色，来降低整体的对比度。又例如投影片右侧的道具栏，即使有需要呈现对比性，也会将深色稍微淡化，并减少在画面上的整体所占比例。
然后，是避免在单一画面内放入大量的资讯。以这个范例介面来说，将玩家人数、模式、关卡的选项都放在单一画面内，这是很常见的作法，也没有什么不好。
但因为卡比的玩家年龄层较广，也包含了对游戏较不熟悉的轻度玩家，所以有些情况下，他们会将选项拆开成多个画面，让玩家在一个画面内一次只做一项选择，创造一件一件事缓缓温和向玩家确认的感觉，降低选择上的困惑感。
贴心、设想、安心感，这些让UI看起来舒服的要素，是卡比系列传统的温暖感，而在这系列游戏持续发展新作的情况下，制作团队也必然会面对许多新题材或风格的挑战。
《机器人星球》，就是卡比系列游戏中，相对强调科幻感的一作，左侧的初期UI设计，是以机器人的驾驶舱面板为概念绘制，虽然造型上已经很圆滑，但还是给人冰冷厚重的感觉，经过调整后的最终设计，则变得较为明亮清爽。
《卡比猎人队Z》则是加入了奇幻RPG要素的作品，为了营造古典奇幻风格的气氛，大量使用纸张、木纹等材质，无法像以往那么色彩缤纷，为了弥补，在边框装饰上下了很多功夫，增加精致度与丰富性。
《触摸！卡比超级彩虹》的特色是仿佛黏土构成的游戏世界，UI当然也尽量采用黏土风格呈现。
还有，设计时也要配合硬体的特性和时代的风格流行。在3DS上面的《三重豪华版》与《机器人星球》，采用的是“SkeuomorphismDesign”(拟真化设计)，这是在智慧型手机上曾经流行一时的图像设计方式，对于较低解析度的携带型主机来说，可以有效强化画面的质感。
而到了高解析度画面的《新星同盟》，时代流行的就变成了扁平化设计，也由于硬体提升了，所以可以加入许多的动态图像与转场效果。同时，他们也意识着不要搞得太过“可爱”，而加入了歪斜、“有形”的设计元素。
这部分的结论是，卡比的UI团队，会将“基础要素”与“温暖感”作为设计的根基，再依照作品的特性，挑战新的视觉风格。
最后，是卡比UI团队所使用的工具介绍，这些工具有一部份是内部开发，没有对外提供，但读者可以参考这些机能，自己开发类似的工具，或寻找能够达到类似效果的既有套件。
首先是素材表，他们有一个可以在网页上检视所有素材的工具，网页上可以直接看到素材的图样、被使用的场所，而且这列表是自动产生。
图像文字也有专门的列表，可以快速的一览对照，查找每个语言所使用的字体等等，并可以让档案针对不同语言自动命名。
在图像处理软体里面，使用了GroupExporter外挂，能够让采用固定重复图层、与搭配不同图层绘制出来的同类图示，以自动批次方式快速输出成档案。
游戏内，设计了文字宽度自动调整的机能，当文字长度超过显示范围时，会自动压缩文字的宽度，避免换行爆格。
让设计师可以自由指定字体大小、行距与颜色的设计。不同语言的显示特性不同，例如日文会需要标注汉字注音，所以行距会保留较多，欧系语言则不需要，因此程式不能将显示方式写死，而要保留让UI设计师手动调整的空间。
接着是与除错相关的机能。首先游戏在切换成不同语言时，要能即时显示目前是哪个语言，毕竟不是每个设计师或测试员都精通多国语言，随时显示出来可以免除误判。
然后，是随时都可以显示所有UI元件名称与状态的机能，将滑鼠移到“...”的框框上，就会显示出该UI元件的档案名称、动画画格等状态，当出问题的时候，可以迅速确认。
还有，将文字表示范围视觉化的机能，这在进行多国语言化的时候，能够起很大的帮助。
上述举例的这些工具或功能，都可以增加开发环境的便利性，也就就能够让设计师们有更多反覆试误的时间，以达到更好的UI呈现效果。
最后，回顾整场演讲的重点，就是：
考量易用性
考量游戏整体的流程
不要忘记玩心
建立传统，并且持续挑战！