深受玩家们喜爱与支持的Cygames代表作《Granblue Fantasy(以下简称GBF)》,最近迎来了开服6周年的纪念日。

而在支撑着《GBF》世界观的众多要素中,有一项便是“保持统一的UI设计”。虽然在6年的过程中也不断有着些许的变化,但游戏始终保持着其“不变的《GBF》风格”……在这背后藏着的是UI设计师们对于品质的严格要求。而这次作为“Cyskill”的企划之一,我们围绕着对于《GBF》UI的讲究以及对UI的回顾与展望,与《GBF》的UI设计师们进行了访谈。

互动设计师团队 UI设计师Nozomi
gutenberg-examples
具有社交网络游戏设计师的经历,于2015年入职Cygames。被分配到《GBF》之后,担任过UI团队领队,现在同时担任制作与UI设计的监修。
互动设计师团队 UI设计师Sayaka
gutenberg-examples
具有社交网络服务2D设计师的经历,于2015年入职Cygames。现在作为设计师负责《GBF》的研发工作,并负责培育第一线成员。

UI设计师所追求的
保持统一的“《GBF》风格”是什么

首先,能够简单地向我们介绍一下UI设计师的工作内容吗?

Nozomi:所谓的UI,就是指“User Interface(用户界面)”。这在游戏中指的是画面的显示与切换画面时的动作。具体来说,指的是窗口、按键一类、菜单项目等,玩家能够看到并实际操作的部分。
当玩家觉得“想要使用这个功能”、“想要了解这个信息”的时候,UI设计师要制作能让玩家流畅操作的UI;为了让玩家更好地享受游戏世界的乐趣,也要对于各个部分的设置、大小、外观、字体的种类与字号等进行合适的规划与设计。

这是能够影响玩家游玩体验的重要因素呢。那么《GBF》在UI设计上对哪些方面有特别的讲究呢?

Nozomi:从开服以来我们一直坚持的是,首先将《GBF》的世界观摆在第一位。《GBF》的世界观,包括浮在蓝天中的岛屿、像“格兰赛法号”这样的骑空艇在空中航行等等……我想,凡是知道《GBF》的人,一定都能够想象出一些画面。我们将这样的画面融入到UI设计当中,让各位玩家能够舒适地融入游戏中的世界。
具体来说,我们将骑空艇的设计、人物角色们穿戴的铠甲、武器上的装饰、流畅的曲线,都融入到了游戏中的框架与按键等UI部分的设计当中。像这样在每一个要素上定下规则,帮助我们实现了保持统一的《GBF》风格。

也就是说,将游戏中常常看到的要素融入UI当中,就能够让玩家自然地觉得“这很有《GBF》的感觉”对吧。

Nozomi:是的。除了形状以外,《GBF》对于颜色也很有讲究。特别是作为天空的颜色“天蓝色”,我们在各个部分都使用了这个颜色。而与之相对的,就是骑空艇船体的颜色“褐色”。当时的UI设计师告诉我,褐色与天蓝色有良好的互补关系。举例来说,我们将“框架使用褐色,而按键使用天蓝色”作为一个设计时的原则。其他的还比如,“取消”按键是淡褐色,“确定”按键是蓝色等,像这样在颜色的使用上定下了最基本的规则。在《GBF》当中,我们精简了通用颜色的数量,并明确了颜色所代表的功能,让玩家能够一目了然。

《GBF》的世界观说明资料。从这些资料中也能够感受到UI设计师的“规划与设计理念”!

Nozomi:另外,UI部件的素材方面也有使用规则。框架的形象是纤细并且坚硬的,而按键类的形象则是像矿物一样高透明度的东西。在功能不同的部件之间不仅仅是颜色,连素材也有所区别,以此让玩家能够明白其中的不同,我们在这一点上下了一番功夫。我们将这些规则覆盖到游戏的所有内容当中,从而形成了《GBF》统一的世界观。

原来如此。除此之外,开服以来过了6年,如今《GBF》的世界也变得愈发广阔了呢。比如说在剧情活动方面,我们看到了和其他作品的联动;从轻松有趣的,到严肃正经的,内容十分丰富。风格差异如此不同的内容,是否也对UI造成了影响呢?

Nozomi:是的。设计的方向性会随着活动发生很大的变化,因此我们会在不破坏《GBF》世界观的前提之下进行设计。不过,能做到什么程度我们也没有办法明确地画出一条底线,比如说保持原来色调的前提下,试着使用新的图案,或是试着改变字体与框架等等。每一次的活动,各个负责人都会不断地进行摸索与尝试。

Sayaka:由于Nozomi会详细地检查,我们可以放心大胆地进行设计。在剧情活动中,既有像是“000(零零零)”(2019年2月底举办)那样很有《GBF》风格的王道活动,也有像是“A Walk on the Wild Side”(2019年3月底举办)那样有趣的内容。其实“A Walk on the Wild Side”是我负责的……当时真是大胆地设计了一番呢(笑)。

Nozomi:因为“A Walk on the Wild Side”走的是综艺节目风格的路线,所以在设计上特地使用了平时《GBF》不会使用的颜色。而在那样“超出规则”的设计与保持《GBF》风格之间把握好平衡就是我的责任。

每次剧情活动时都会准备“序言”。每一个的印象都截然不同

也就是说,在保留原本《GBF》世界观的前提下,根据活动的方针,原来的特征会留下多少,又会拿掉多少,这当中拿捏的分寸也会产生改变吗?

Nozomi:会的。我们每次活动都会在保持《GBF》的风格和素材基调的前提下,以每个活动为单位,加入新的世界观。至于联动活动,则是配合联动作品的世界观,为了将那部作品的有趣之处表现出来而进行设计。不过,如果做得太过头的话就会失去《GBF》的风格,因此团队全体成员都会好好地思考如何拿捏分寸。

Sayaka举出一个“超出规则”的设计范例,就是在设计“A Walk on the Wild Side”的社交网络宣传图片时,使用了《GBF》不会使用的鲜艳蓝色,并且让框架重叠,以表现出充满冲击性的设计。在游戏中也是,在活动的Tips里,与共通要素的多人战斗说明部分组合起来也不会产生违和感的同时,也做出了与平时的剧情活动截然不同的设计。

具有综艺节目风格的“A Walk on the Wild Side”社交网络宣传图片
活用各个剧情活动的特征,同时也与共通要素融合得恰到好处

Sayaka:虽然有时会一不小心做过头,不过这时Nozomi会提醒我(笑)。

Nozomi:只要理解了基本的规则,大家也不会交出完全不符合要求的设计。之后就是要做到什么程度的问题了,我们就不断摸索,直到找到一个定位。

“规划”与“设计”
凝聚了UI设计精髓的小游戏

在各种各样的UI设计案例中,你们是如何分配负责的部分的呢?

Nozomi:基本上是由领队根据时间表分配给各个UI成员。其中有成员自愿负责的部分,也有根据专长来决定负责人的情况。

Sayaka如果是联动活动,喜欢联动作品的人一定会参与呢!正因为喜欢那部作品,才会想到“想以这种方法来玩”、“这样表现的话粉丝应该会喜欢”等等之类的点子。而为了实现这一点,我们也经常会想些点子,向策划提案说“这样做会不会比较好呢?”
有时候对方会接受我们的意见,但也曾经被说过“似乎有点太过头了”。因此在提出草案和设计的时候,我们会一开始就提出“随心所欲的方案”、“偏向《GBF》风格的方案”和“折中方案”。

剧情活动“A Walk on the Wild Side”UI的设计草案案例。最终采用了C方案

Nozomi:提到采用“随心所欲的方案”的例子,刚才的“A Walk on the Wild Side”就是其中之一呢。最近在剧情活动里加入小游戏的情况变多了,小游戏的UI经常偏向“随心所欲的方案”。

Sayaka:像是在剧情活动“THE MAYDAYS”(2019年6月底举办)的“SHARK PANIC”当中,打倒会飞的鲨鱼的小游戏,或是在“Kappa Summer Chronicle”(2019年7月底举办)的“Supreme Sushi Chef”当中,做寿司的小游戏等等……热闹的作品比较多呢(笑)。

根据客户的需求制作寿司的小游戏受到了好评
起草时提出了3个方案,最终似乎采用了“传统寿司店”的方案

“ Supreme Sushi Chef ”真的很有趣。我也沉迷其中了(笑)。

Nozomi:其实这个小游戏,可是凝聚了很多UI设计的精髓哦。虽然剧情活动本身的大框架设计已经决定好了,但是小游戏的内容每次都会不一样,因此不仅仅是外观的“设计”,游戏画面的“规划”也是需要考虑的内容之一。

Sayaka:是的。当我们参与的时候,虽然分数框架或是剩余时间条等等“需要加入的信息”已经确定下来了,不过要如何设置这些才最合适,则要重新思考。相等于设计图的线型框架已经由策划替我们做好了,UI团队则需要按照那个框架根据实际的部件尝试进行布局,如果发现用起来不方便,还是用别的方式能显示得更明确等等,就会提出各种方案再进行修饰。

Nozomi:除了像这样的“规划”工作,还要考虑按键和图标等等各个部件的形状、颜色,动画素材之类的“设计”。这些都是能够让游戏变得更加有趣的小巧思。好的UI需要在“规划”与“设计”两个方面都做好。从这一点上来说,小游戏或许可以说是测试UI设计实力的工作呢。

在“ Supreme Sushi Chef ”当中居然有这么多的UI部件,令人大吃一惊!

Sayaka:在UI设计师当中,有擅长规划的人,也有擅长设计的人。根据项目,也有规划与设计各别设立负责人的场合。不过在《GBF》当中,这两个部分合起来由一个人负责的情况比较多。

你是说在1个剧情活动中,由1个人全面负责吗?

Nozomi:是的。包含小游戏在内全部由一个人负责的情况比较多。在剧情活动时会产生的工作有Logo、TOP、Tips、各种横幅、社交网络的公告制作等等。周年纪念日之类的大型活动也是,虽然会根据工作状况调整,但是基本上是由一个人负责。

思考“是谁在使用那个功能”
进行修改,不让其产生违和感

在进行规划或设计时,各个部件当中有没有不实际设置就不明白的部分呢?是不是在不断实行中一边找灵感,一边反复尝试呢?

Sayaka:这得根据活动的情况来看……小游戏以外的部分,基本上在做线型框架的时候就已经决定好了,在规划上没有多少需要烦恼的部分。举例来说,在设计《Granblue Fantasy: Versus(以下简称GBVS)》的游戏内特设页面时,大部分的内容已经由线型框架决定了,而在细节部分,只调整了适合阅读的文字大小,PV的位置等。

《GBVS》特设页面的设计流程

Nozomi:说到反复摸索的例子,以2019年3月的5周年为契机,剧情活动TOP的UI进行了大幅度的修改。由于那时候改变了许多UI,因此不断尝试了很多次。我们根据策划制作的线型框架将1张画面图案做了几个版本提交给总监,我们收到反馈后逐调整方向,再次提交然后再次修改……就这样不断地重复直到最终版敲定。

Sayaka:要修改已经在使用的东西的确比较困难。已经习惯的东西如果发生了改动很容易产生违和感。反而是制作新的东西时,由于UI团队会从一开始就参与制作,因此不容易产生违和感。

对于UI设计来说,不让人感觉到很大的变化会比较好吗?

Nozomi:那种情况也有。由于长年游玩《GBF》的玩家比较多,如果改动太多而让玩家们感到疑惑也不好,从这一点上来说,刚才提到的剧情活动的修改也是一种挑战,我们也十分在意玩家们的反应。

Sayaka:其他最近的大改动还有“排序功能”的修改呢。一开始我们计划像“物品兑换”页面实装中的那样以简洁的版面重新制作,但是最终在外观上和以前没有太大的改动。由于是习惯了原来画面的玩家经常使用的画面,我们以不让外观产生违和感,但是又能够让玩家感受到便利性为目标而进行了设计。

简洁又方便使用的A方案和活用玩家习惯的原设计的B方案,最终采用了B方案
《GBF》的许多页面都有排序功能,经批准的设计覆盖了整个游戏

Nozomi:在修改的时候,我们会重点思考什么样的玩家会常用该画面。因此,设定和帮助等新手使用得比较多的部分,和之前说的相反,我们会优先考虑是否能顺利上手,如果有必要的话也会做出较大的改动。

预测到新手使用得较多的“引导功能”,其风格便和其他页面不同,是优先考虑“初次使用也能轻松上手”而进行了设计

另外也想问问,有没有修改了UI但没有造成什么话题的例子?

Sayaka:其实“决战!星之古战场”就做了相当大的改动呢。

Nozomi:在复刻活动中进行平淡的修改是挺新鲜的尝试呢。

Sayaka:此外也悄悄地整理过TOP页面。长年累积下来的道具越来越多,因此我们将它们分类整理起来了。同时,我们也想让玩家看到高质量的插图,因此没有改变按下“开始游戏”时的操作感,而是把显示范围扩大了。

Nozomi:在帮助功能中也为了让新手容易理解,出了不少力。

Sayaka:虽然很不起眼,在“最新消息”的各个项目里也添加了图标(笑)。

Nozomi:是的。《GBF》的更新量很大,其中的每一个案件,UI团队都会很仔细讲究地去设计,不放过任何细节。色调稍微有点不同,或者是光彩的分布程度之类的,我们都会在1~2像素的级别进行微调。虽然只是细小的变动,但若是改变了就一定能变得更好,因此我们都是以“想要做出更好的东西”为理念而努力的。

Nozomi:我在监修的时候就是将这些细小的部分找出来,给出反馈,让成员修改……虽然是个很朴素的过程,但是团队的成员也不放弃,一起努力地做出更好的东西。之后我们将做好的东西上交给总监,如果能够一次OK就会很有成就感呢(笑)。

Sayaka:就像UI团队的妈妈一样(笑)。

这么说,果然一次OK这种事是很难得的吗?

Nozomi:这也要根据实际情况呢。创作新的东西时也需要不断摸索,多的时候修改3~4次也是有的。在我监修的阶段甚至有时候要修改4~5次。不过,这样重复的修改之后,确实能够感觉到质量在提高。我自己也从总监、前任的监修者所做的监修中学到了很多,因此现在也在将我所学到的东西传达给成员们。

Sayaka实际上,反馈里的内容都是自己没注意到的部分。即使只是很小的细节,但是只要修改真的能够变得更好哦。因此有监修这个过程真的太感激了。看到自己努力做出来的东西上线之后,就会觉得做出了很好的设计而感到高兴。

Nozomi:是啊……开服以来过了6年,如今,玩家们的感觉已经倾向于以“本地应用(※)标准”来判断了,因此我们不得不将那之间的差别也考虑进来。比如说,由于网页游戏会在画面变更时进行大量的通讯,而为了减少通讯我们在一个画面里放入了大量的要素,因此较多画面都是纵向滚动的。相对的,在本地应用里这样的画面设计就不太常见。所以,能不能设计玩家不需要滚动的画面,这方面的方案我们UI团队也会提出来讨论。

(※)通过各个应用程序的商店,安装在智能手机或者平板终端设备上来使用的应用程序。

Sayaka如果不得不滚动画面的话,我们也会想办法加入一些能够让玩家乐在其中的要素。就以刚才提到过的《GBVS》特设页面为例,点击游戏画面就能够将图片放大显示,而不只是让玩家盯着画面。我们都会尝试像这样加入一些更深入的体验。

Nozomi反过来说,正因为是网页游戏,才能做到细微的数据更新。就算数据量大也不会占用终端的容量,这是本地应用所没有的优点!

想要同时兼顾《GBF》的世界观与使用时的上手度,需要做到什么呢?

Nozomi:由于《GBF》UI的世界观是以插画团队制作的高质量插图为基础的,因此需要活用插图进行设计。在绘制页眉或横幅的图案时,需要从角色或背景中将颜色提取出来并使用,或是配合插图的色调进行调整。UI部件也是,需要使用放置在角色附近也不会感到违和感的颜色,将插图的要素反映出来,用来衬托出插图。
在此之上,什么样的设计或规划才比较好看、容易操作,像这样时常以玩家的角度来考虑,才完成了现在的《GBF》UI。

Sayaka:我认为UI是玩家们与游戏世界相连的入口。为了加强《GBF》的代入感,需要当一个“好的配角”,衬托以插画为首的“主要角色”,就是我们的工作。


下周,在将于3月23日公开的后篇当中,我们会向设计《GBF》活动与周边等“游戏外设计”的UI团队负责人,请教对于设计的想法。到底是什么使得《GBF》的世界不仅仅局限在游戏中,使得它在现实世界中也逐步得以展开?还有UI设计师最看重的事情等等,将在后篇继续探讨。敬请期待!

■编辑后记

由于《GBF》6年间的“更新内容”数量之大,无法完整地收录在采访中。在此将直到去年年底实装的内容当中,接近UI设计的部分列出来。
如果将这里没有记载的、更为细微的更新、还有UI设计以外的更新也考虑进去的话,数量更为惊人!

2014年更新
3月在“列表”、“出售”、“编成”、“骑空团”页面里显示武器·召唤石的上限解锁阶段
4月个人简介画面追加Twitter·LINE的投稿功能
使用能力时可选择是否显示详情
6月个人简介画面显示“编成队伍”
追加“决战!星之古战场”首页里的聊天功能
推荐一键强化设定里,追加“有Bonus”、“无Bonus”的项目
7月追加武器·召唤石的保护功能
8月追加武器·召唤石仓库
可固定支援召唤石
“救援系统”能够向骑空团成员和好友发送救援申请
10月奥义槽可以显示数值
追加任务收藏功能
2015年更新
2月追加战斗时的“AUTO”按键
使用“红色药水”“红色药水(小)”时,恢复之后能够超出AP最大值
3月追加Zenith Perk(旧·LimitBonus)
4月追加武器·召唤石元素化功能
7月追加Zenith Ability
10月追加“武勋之辉”“荣誉之辉”系统
11月追加Twitter救援功能
追加“编成组合”功能
2016年更新
3月在礼物中追加“整理功能”

在商店中追加“月亮兑换”“Siero's Special Pick Tickets”
9月追加“测试战斗”功能
追加“能力序列”功能
12月编成页面中追加“显示预测伤害”功能
2017年更新
3月“Zenith Perk”变更为“Limit Bonus”,主角以外追加“Limit Bonus”
修改露利亚笔记
4月追加大厅功能
追加多人战斗的自动功能
6月追加道具列表的筛选功能
7月追加“Side Stories”
追加“连续任务设定”
8月新手指南漫画“This is Granblue Fantasy”开始连载
9月追加传说10连扭蛋的“SKIP”功能
10月最初阶段即可看出是否为最终上限解放的武器·角色·召唤石
在任务开始前的编成选择画面里显示EX能力
通过“天星器的强化”扩充设备时,点击各个武器就会显示可以获得该武器的“推荐任务”
11月开放“Arcarum: The World Beyond”
2018年更新
1月“编成组合”的数量变为2倍
“世界”画面上显示岛屿的名字
追加“批量元素化”功能
2月追加“自动出售·骑空艇强化”功能
“申请救援”时显示插图
3月“设定画面”翻新

追加“EX Limit Bonus”(旧·Zenith Perk废弃)
4月点击物品图标能够显示详情
追加能够重新开始同一个任务的功能
5月多人战斗大厅中追加筛选功能
能够在战斗开始前的画面上切换自动功能的ON/OFF
“Arcarum: The World Beyond”中加入“简易探索”功能
6月变更角色·武器·召唤石强化时的演出
7月能够当场兑换上限解锁需要的素材
显示“护盾”的剩余HP数
追加“回收功能”
能够在角色的详细画面中确认能力效果
8月追加“Journey into Granblue Fantasy”功能
9月变更露利亚笔记中“剧情”的显示方式
11月追加“取消攻击按键”
称号页面翻新
2019年更新
3月实装十贤者
追加能够从上限解锁画面的物品选择中挑战可获得相应物品的功能
剧情活动的TOP页面翻新
5月多人战斗的一览画面显示可以参战的人数与救援申请者的职业图标
6月帮助页面翻新

测试战斗翻新
能够确认对应任务中主要出现的道具
追加“皮肤组合”商店
7月追加能够从道具详细的“获得方法”中收集物品的功能
仓库翻新
8月角色的Lv达到最大时,能够从结算画面直接进行上限解锁
9月选择武器的强化素材时能够确认技能Lv的上升几率

追加“Rusted Weapons”的整理功能
职业取得页面翻新
英雄武器的制作页面翻新
10月追加“全自动功能”
My Page的浮窗调整
点击My Page的AP/BP槽可使用回复道具
11月在装备中的武器和召唤石的详细画面里加入“批量卸下”按键
追加能够对角色的擅长武器进行排序、筛选的功能
排序设定翻新
12月在My Page的最新消息里显示图标
追加游玩方法引导功能

※所有截图均为2020年3月截取的图片

从开服就游玩至今的骑空士们,有没有发出“虽然现在很自然地在使用,原来以前没有这种功能啊!”这样的感叹呢?
《GBF》研发营运团队今后也会一步一步,在操作以及乐趣上不断进行尝试与更新。