暴雪《炉石传说》UI设计师:如何创造沉浸式用户界面
当前位置 :首页>产业新闻>返回
时间:2015-05-26 编辑: 来源:

  手游客栈今日消息(2015.05.25)用户界面(UI)设计在游戏研发最终阶段之前,通常都是被忽略的,但是,在项目的一开始就为UI问题加入一点点的思考,可以给你的研发过程带来很大的帮助。今天,Gamelook找到了《炉石传说》高级UI设计师Derek Sakamoto在GDC 2015上的演讲。

  在演讲中,他详细讲解了暴雪在免费卡牌游戏《炉石传说》这个项目中是如何进行UI设计、修改以及重新设计的过程,据Derek Sakamoto透露,当前版本《炉石传说》的概念用了1年左右的时间才最终确定,而且,如他在演讲中所说,UI设计是和游戏策划同时进行的。

QQ图片20150526000700.png

  对于任何游戏策划、美术师以及希望提高自己游戏项目视觉表现的有关人士来说,都是非常值得一读的。

  以下请看Gamelook整理的演讲稿:

  首先,感谢你们所有人的参与,很高兴在这里看到你们,我叫Derek Sakamoto,是《炉石传说》项目的高级UI设计师,我今天要讲的内容是,我们是如何创作沉浸式用户界面的(Immersive UI)。

  这里做一个简单的自我介绍,到现在为止,我已经在暴雪工作超过12年了,我的第一份工作是《魔兽世界》的UI设计,参与过《巫妖王之怒》,6年多之后,我迎来了职业生涯的转变,非常幸运的参与了Pegasus项目,也就是现在的《炉石传说》。

  所以在接下来的30分钟里,我将会讲述《炉石传说》项目创意中的一些高级原则,正是由于这些,《炉石传说》的UI以及游戏本身才成为了今天的样子。第一部分讲如何找到项目的种子、第二部分是做拟物化风格,最后一部分讲的是UI与游戏设计是同步的。

  第一部分:找到项目的种子(想法)

  什么是找到项目的种子,对我来说可能是一个想法、一张图片、一场电影或者是一首歌,它可以让你的团队成员们都了解项目的发展方向。所以在展示我们的种子之前,我会告诉你们在获得《炉石传说》的核心概念之前我们是怎么工作的。当时由于团队只有5个人,而且团队规模还在增长,所以很多人可能对项目不是那么了解。

  一开始的UI是这样的

  所以我先向你们介绍《魔兽传奇(Warcraft Legends)》,这个创意里面有冰与火和兽人等魔兽元素,但很明显不是我们要的结果。我们的另一个想法是做一个世界地图,你可以在地图上旅行并解锁新区域,做单机任务,然后解锁新内容。我们最初用Flash做了创意原型,由于是单机模式,所以我们并没有投入太多。下面的图片是首测之前我视觉效果目标,可能你们很多人都会说,幸好这个目标没有实现。

  这个效果看起来毫无生机,而且超级复杂。我们后来还陆陆续续尝试了很多想法,比如WoW地图、单机模式冒险书籍、3D卡牌甚至全息卡等等。

  下图是我们之前做的匹配模式,我们在做匹配的时候就知道,不希望做成是在地图上的偶遇,而是需要有搜索的感觉,所以一开始的匹配是这样的(下图),有人会觉得这样也不错对吧。

  《炉石传说》团队最初设计的匹配模式

  过去的《炉石传说》和现在的版本是很不一样的,所以这就是你需要项目种子的原因,这个过程很长,我们在不断尝试可以做什么,什么才是我们要的效果。

  之前设计的盒子(可打开获得地图进行匹配)

  我们还做了另外一个模式的匹配,开场是一个盒子(上图),你点击放大就可以打开玩家地图、选择自己的英雄,然后点进去获得匹配对手,然后再缩小就可以开始对战游戏了。这种感觉看起来可能有点像现在的《炉石传说》,但其实并不一样,而只是给了现在的游戏一些参考,这个想法或许可以做的不错。

  ‘盒子’版的战斗开场界面

  上面说的那个盒子的想法被团队所认可,这些想法就像树根,最终让《炉石传说》得以开花结果。我们现在的游戏开始界面就是一个盒子,玩过游戏的人都应该比较了解。

  在盒子之后,我们就有了基本的UI框架,想要把它做成一个珠宝盒或者音乐盒一样的感觉,所以我们很自然的加入了钥匙、树等元素,包括后来的加载界面也是按照这样框架来做的。

  关键的美术设计:桌子出现之前的门

  然后,问题来了:盒子一直是放在桌子上的,有一天我们在想,桌子要放在哪儿呢?因此我们又开始新的创意,所以我们做了下图这样的加载界面,看起来像是一扇门,在服务器繁忙的时候会显示‘桌满’,玩家需要等待一定的时间才能进入游戏。

  下面是我们的关键美术,有一张卡牌桌子,背景是魔兽主题,让玩家们觉得是在魔兽世界的大环境里玩《炉石传说》,这个想法让我们很兴奋,而且感觉也比较好。在暴雪嘉年华上,我们还专门为此设计了场景,希望获得更多的灵感,但目前还没有更好的想法。

  可能会有人问,你们如何找到一个好的想法呢?这才是真正的大问题,但其实我也没有答案,我唯一可以给的提示只能是自己搜索。一开始的时候,我们的UI是这样的(下图),看起来很丑,就像是垃圾堆里捡来的。

  初版UI

  然后我们觉得,这款游戏或许应该做成3D的,后来我们希望做的更有实物的感觉,加入更多的魔法、希望它更有吸引力,所以做了很多模式。

  3D版UI

  最后我们一致认为,应该做的看起来更有结构感,更有价值,因此就得到了现在的UI主界面。

  最终版UI

  所以,寻找项目种子的经验是:没有办法直接得到,除非你是超级幸运或者你非常的有才华;你应该在项目的一开始就去寻找,因为它可以让你的项目研发变得更为顺畅;它可以让所有事都变得更好,可以让所有的元素看起来都很适合,组合起来就像是一个完整的游戏;而且,如果你想要做一款具有吸引力的游戏,或者是做一款独特的类型,那就必须找到这个种子。

  第二部分:拟物化的视觉风格

  为什么做拟物化

  这是什么意思呢?在研发的过程中,我们一直都在做3D用户界面,但后来我们开始思考,现代UI研发的趋势是什么,当时的趋势似乎是所有的设计都在偏向扁平化设计,一切看起来都平滑顺畅,而且只需要2D效果就可以做到。但我们做《炉石传说》的时候,由于一直是做3D设计,所以觉得扁平化不适合我们,因此决定使用拟物化风格,这种风格影响了整个游戏的研发过程。

  所以我们把东西做的看起来更有价值,比如设计出人们可以一眼就看得出价值的材料,这一点对我们来说尤其重要,因为,作为一款免费游戏,我们需要尊重玩家们所投入的时间和金钱,让他们觉得投入是值得的。作为一款卡牌收集游戏,我们试图通过视觉和音效来实现,让一切看起来更酷。然后我们把所有的因素都做成浑然一体的游戏体验,比如后面的匹配效果、游戏内商店开启效果等等,这些虽然看起来可能设计有所不同,但它们给玩家的感觉是一体的,体验是完整流畅的。

  遇到的意外:

  《炉石传说》这个项目其实也遇到了一些意外,比如一开始该游戏是为PC平台设计的,但到了触屏设备上,操作就成了问题。但后来我们决定针对触屏进行优化,可以点击和拖拽卡牌,这样在释放技能的时候反而更有神奇的效果,这是我最开心的地方,你触碰卡牌之后就会看到效果,这样看起来更有代入感。

  作为一款卡牌收集游戏,我们觉得还应该为它加入更多的吸引力,比如点击桌子角上的按钮会有不同的音效和视觉效果,这些都可以让玩家们在战斗之余享受更多的乐趣。我之所以加这些效果,是因为我2岁的孩子,他每天晚上都会玩《炉石传说》,他的意思是把这个桌子填满,不要显得太空旷,所以就加入了这些附加功能。

  而且,似乎粉丝们非常欢迎,比如他们会为这款游戏制作定制化的周边,有蛋糕、木盒、钱包等特色物品。

  《炉石传说》的挑战

  首先是很难进行内容扩展,比如图片的左边是9个英雄,但问题是,如果再加入新的英雄该怎么做呢?我也不知道。但我们的原则是每一张卡牌都要做的好看,并且各有作用,我们只为当前版本做设计,这句话的意思是,我们的时间有限,不可能现在就预见未来的问题,虽然有时候也会考虑未来的事情,但最后时间总是不够用。

  Reddit论坛的玩家建议

  另一个问题就是游戏内的资源比较多,当你收集的卡牌越来越多的时候,可能一眼很难看到想要使用的卡牌,这样会导致玩家困惑。有人说我们的游戏最关键的就是UI,《炉石传说》没有庞大的虚拟世界可以让玩家们在里面来回散步,我们只有桌子以及盒子。我自己也经常看Reddit论坛,但其中的一些建议并不合适我们使用。总体来讲,我们更倾向于高效率的UI,我们设计的是一个盒子,你可以从一个地方很快的转向另一个地方,在手机平台,问题可能会更多一些,因为有些东西在大屏幕上一页就可以搞定,但到了小尺寸设备可能需要2个界面,而我们的游戏是玩法优先的,因此必须做出一些妥协。

  未来我们的问题是需要在跨平台进行维护,比如台式机、平板以及智能机等。PC和平板可以做到比较相似,但手机的屏幕小很多,所以做起来很有挑战性。但我们觉得还是值得的,因为可以通过它吸引更多的手游玩家。

  因此,在适合的情况下,拟物风格的UI是非常好的,这样做需要很多的努力,但却很适合触屏设备。如果拟物不适合你的游戏,那么你就要尝试找到更合适的,这样才能发挥游戏最大的潜力。

  最后一部分:UI和游戏设计同步进行

  这种做法可能并不适合所有的项目,但我看到很多策划想到一个游戏创意的时候,往往会想到对应的UI设计风格。而且,UI设计就像是另一种形式的游戏策划,有些团队可能会有专门的UI、程序员、美术师,也有的团队并没有专门人员去做这件事,有些问题我们也在尝试着解决,但我们的团队领导对UI很重视,把它看作几乎是和游戏设计同等地位。

  在做了一些比较零碎的设计之后,我们会制作模型,如果UI超级复杂的话,我们就需要反思哪些地方设计有问题,是什么问题导致了UI看起来如此的复杂,比如卡牌上的文字内容。最开始我们希望通过文字描述把卡牌的类别、等级、以及数字的功能等进行详细说明,但后来没有这么做。我很确定没有人愿意去单纯的看无聊的文字,而且我们不想因此吓走新玩家,毕竟,他们可以在不断的游戏中逐渐了解所有的功能。而且,在每次战斗中,玩家最多可以出战的军队数为7个,这也是降低游戏复杂性的做法之一,尤其是在放大或者缩小的时候,太多的卡牌会让屏幕看起来不自然。

  我们的卡牌类别过去有60个,这就意味着右边的列表可能有3页,这样在固定的时间内很难选择,而且对于新手玩家们来说,压力会比较大。所以我们把数量减少到了30个,即便这样,有些新手玩家仍然会觉得难以选择。

  之前的战场UI设计

  上图是之前的设计,在下一个回合开始之前,玩家本场生于的生命和法力会继承到下一场,很明显,这样做就需要在桌子上放更多的数字,而且会压缩可以出场的卡牌数量限度,因此我们决定不这么做。

  上图是我们之前设计的卡牌反应链,可以让玩家选择特定的卡牌对抗敌人的特定卡牌,但这么做的结果是,让UI看起来既混乱又复杂,而且看起来也不好,所以我们放弃了这个设计。

  2012年的《炉石传说》制作团队,作者是红圈中的UI Designer

  另一个理念就是,UI的制作就等于游戏制作。下面这张图是我们2012年时的整个团队,图中画红圈的就是我。不过,虽然我的职位是UI设计,但其实游戏的UI设计并不是我一个人在做,你可以从另一张图中看到我们的分工,比如我们的3D美术、设计总监、美术总监、策划以及技术美工都参与了UI设计。

  《炉石传说》游戏功能的制作流程草图

  最近,我们扩张了团队,所以UI设计师也变成了2个。所以,我可以用一张图来说明游戏中的一个功能需要多少人的参与,首先是UI设计,我们会根据不同阶段和设计需求,让2D以及3D美术师参与,随后还会让程序员参与一些功能的实现。


2017年IP粉丝行为报告

残酷的电竞梦

尴尬的主机行情

健康游戏忠告:抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防上当受骗 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活

京ICP备15024595号-1

游戏客栈 游戏客栈