卡比用 UI 盛情款待!以联系游戏与玩家为目标的 UI 设计

作者:IGDSHARE.ORG
2020-09-23
14 14 3

《星之卡比》系列游戏,是由 HAL 公司开发,任天堂发行的人气游戏,受众非常广泛,不只游戏好玩,本系列游戏的 UI (使用者介面) 设计,也往往为人所称道。在 2020 年的 CEDEC,就有一场主题演讲,题目是“卡比用 UI 盛情款待!以『联系游戏与玩家的 UI』为目标”。以下是本场演场的概要:

本场演讲的主讲人是来自 HAL 公司的伊藤晴香、剑持紫,两位都有着丰富的游戏制作经验,并在卡比系列最近期的《星之卡比 机器人星球》、《星之卡比 新星同盟》等作品担任主要 UI 设计师。

首先,先介绍卡比的 UI 设计,有机个基本目标:

  • 不会让人迷惑的 UI
  • 不会给予压力或不快感的 UI
  • 能够留下印象、让人心动的 UI

对卡比的 UI 团队而言,设计 UI 时最重要的事情,是:

  • 考量易用性
  • 考量游戏整体的流程
  • 不要忘记玩心

那么,什么是容易使用的 UI 呢?大致上,有这样的特性:

  • 能够知道自己现在的状况
  • 不会不知道接下来要做什么
  • 能够想像按了这个按钮会发生什么事

不会带来违和感与压力,就是好的 UI。

游戏的 UI,是联系玩家与游戏之间的事物;好的 UI,能够让玩家顺利的投入游戏的世界。反之,就会影响玩家对游戏的投入。

具体来说该怎么做呢?

好用的 UI,就是能够让玩家轻松地取得所需要的资讯,因此 UI 设计,基本上就是做好资讯“取用”与“整理”的工作

首先,决定资讯的优先顺位。UI 团队会与游戏设计团队进行讨论,把游戏内所需要提供给玩家的资讯一一表列出来,并依高、中、低三个级别,分出他们的优先顺位。

接着,将资讯加以分类,例如与地点相关的资讯、分数资讯、与游戏进行相关的资讯等。

再来就是要将分类与排序好的资讯,在画面上布局配置。画面布局的第一个要点,是“接近”。

让相同类别、高关联性的资讯彼此接近,而不要四处分散,玩家自然能够更容易取得需要的资讯。以《新星同盟》为例,画面上方横向的是世界的选择标签,画面中间纵向的则是关卡资讯,两类型之间不会搞混。

第二个要点,是“对齐”。

文字与图像的配置,要做到纵向、横向或中央对齐,如果没做好对齐,会影响观看上的顺畅。传统上文字以靠左对齐最为常见,但也需要视情况调整,例如《新星同盟》里面的按键功能对照表,因为主要想凸显的是按键图示,而图示较适合中央对齐,因此说明文字的部分,也配合采用中央对齐,保持整体的一致性。

第三个要点则是“重复”。

这是指将画面内的设计元素统一、重复运用,使其模式化,在《新星同盟》里面,录音室、插画画廊、剧院等画面的左上角,都采用了相同的斜向线条设计,仅替换文字、颜色和图示,透过重复的设计元素,让玩家可以很轻易的理解它们属于同一种类的功能。

实际上,读者看到现在应该也已经发现,本场演讲所使用的投影片,标题区块的配置正运用了这样的“重复”设计元素。

接着是要记得为画面加上“对比”。

可以借由放大、变换色彩等等方式,强化资讯之间的差异,例如游戏模式选择时,目前选择中的图示会发亮、放大,在多人游戏时,选择中的图示配色明显不同。

最后,要考量视线的诱导。

电视画面是横向的,习惯上观看者的视线会是从左上到右下移动,因此最重要的、最希望第一眼被看到的资讯,就要放在左上方。

上面所说的,对于设计师来说,应该都是理所当然的基础,但卡比的 UI 团队,会把这种“理所当然”视为需要仔细检查的东西。

例如《新星同盟》的最佳时间画面,左边是初期的设计,经过检查验证之后,调整了三个项目,才成为了右边的最终版本。

主要调整内容:

  1. 初期的最佳时间设计是将每个小关的时间排在一起,右边再一个区块显示总和时间,调整后,总和时间与各小关时间整合成一个纵列,方便从上往下综观,也更好的呈现出两种数据之间的阶层关系。
  2. 将“最佳时间”的文字从时间数字上方移动到画面右上方,因为玩家最关心最想快点看到的就是时间数字本身,相较之下,“这个画面是最佳时间”的说明,重要性上反而是次要的,所以把数字放到视线最优先会去看的地方。
     
  3. 角色插画对于告知“最佳时间”这个资讯而言并不必要,因此移除了插画,换取更加凸显重点资讯、更加整齐的空间配置。

接下来,进到卡比 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 上面的《三重豪华版》与《机器人星球》,采用的是“Skeuomorphism Design”(拟真化设计),这是在智慧型手机上曾经流行一时的图像设计方式,对于较低解析度的携带型主机来说,可以有效强化画面的质感。

而到了高解析度画面的《新星同盟》,时代流行的就变成了扁平化设计,也由于硬体提升了,所以可以加入许多的动态图像与转场效果。同时,他们也意识着不要搞得太过“可爱”,而加入了歪斜、“有形”的设计元素。

这部分的结论是,卡比的 UI 团队,会将“基础要素”与“温暖感”作为设计的根基,再依照作品的特性,挑战新的视觉风格。

最后,是卡比 UI 团队所使用的工具介绍,这些工具有一部份是内部开发,没有对外提供,但读者可以参考这些机能,自己开发类似的工具,或寻找能够达到类似效果的既有套件。

首先是素材表,他们有一个可以在网页上检视所有素材的工具,网页上可以直接看到素材的图样、被使用的场所,而且这列表是自动产生。

图像文字也有专门的列表,可以快速的一览对照,查找每个语言所使用的字体等等,并可以让档案针对不同语言自动命名。

在图像处理软体里面,使用了 GroupExporter 外挂,能够让采用固定重复图层、与搭配不同图层绘制出来的同类图示,以自动批次方式快速输出成档案。

游戏内,设计了文字宽度自动调整的机能,当文字长度超过显示范围时,会自动压缩文字的宽度,避免换行爆格。

让设计师可以自由指定字体大小、行距与颜色的设计。不同语言的显示特性不同,例如日文会需要标注汉字注音,所以行距会保留较多,欧系语言则不需要,因此程式不能将显示方式写死,而要保留让 UI 设计师手动调整的空间。

接着是与除错相关的机能。首先游戏在切换成不同语言时,要能即时显示目前是哪个语言,毕竟不是每个设计师或测试员都精通多国语言,随时显示出来可以免除误判。

然后,是随时都可以显示所有 UI 元件名称与状态的机能,将滑鼠移到“...”的框框上,就会显示出该 UI 元件的档案名称、动画画格等状态,当出问题的时候,可以迅速确认。

还有,将文字表示范围视觉化的机能,这在进行多国语言化的时候,能够起很大的帮助。

上述举例的这些工具或功能,都可以增加开发环境的便利性,也就就能够让设计师们有更多反覆试误的时间,以达到更好的 UI 呈现效果。

最后,回顾整场演讲的重点,就是:

  • 考量易用性
  • 考量游戏整体的流程
  • 不要忘记玩心
  • 建立传统,并且持续挑战!

近期点赞的会员

 分享这篇文章

您可能还会对这些文章感兴趣

参与此文章的讨论

  1. vethenc 2020-09-23

    这篇文章很棒,如果能有大佬把日文PPT对应翻译P成中文PPT就完美了。

  2. Yulins 2020-09-23

    不愧是任天堂,真的是每一帧都能感受到这高超的技术含量和设计师们的心血。还有谢谢作者为我们带来精彩的UI设计解说。

  3. rddOnIndieNova 2020-09-24

    感谢整理!

您需要登录或者注册后才能发表评论

登录/注册