《炉石传说》设计师:如何创造沉浸式用户界面.

   

    用户界面（UI）设计在游戏研发最终阶段之前，通常都是被忽略的，但是，在项目的一开始就为UI问题加入一点点的思考，可以给你的研发过程带来很大的帮助。金天，Gamelook找到了《炉石传说》高级UI设计师Derek Sakamoto在GDC 2015上的演讲。
　　在演讲中，他详细讲解了暴雪在免费卡牌游戏《炉石传说》这个项目中是如何进行UI设计、修改以及重新设计的过程，据Derek Sakamoto透露，当前版本《炉石传说》的概念用了1年左右的时间才最终确定，而且，如他在演讲中所说，UI设计是和游戏策划同时进行的。
　　对于任何游戏策划、美术师以及希望提高自己游戏项目视觉表现的有关人士来说，都是非常值得一读的。以下请看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主界面。
　　所以，寻找项目种子的经验是：没有办法直接得到，除非你是超级幸运或者你非常的有才华；你应该在项目的一开始就 去寻找，因为它可以让你的项目研发变得更为顺畅；它可以让所有事都变得更好，可以让所有的元素看起来都很适合，组合起来就像是一个完整的游戏；而且，如果 你想要做一款具有吸引力的游戏，或者是做一款独特的类型，那就必须找到这个种子。

第二部分：拟物化的视觉风格
　　为什么做拟物化
　　这是什么意思呢？在研发的过程中，我们一直都在做3D用户界面，但后来我们开始思考，现代UI研发的趋势是什么，当时的趋势似乎是所有的设计都在偏 向扁平化设计，一切看起来都平滑顺畅，而且只需要2D效果就可以做到。但我们做《炉石传说》的时候，由于一直是做3D设计，所以觉得扁平化不适合我们，因 此决定使用拟物化风格，这种风格影响了整个游戏的研发过程。
　　所以我们把东西做的看起来更有价值，比如设计出人们可以一眼就看得出价值的材料，这一点对我们来说尤其重要，因为，作为一款免费游戏，我们需要尊重 玩家们所投入的时间和金钱，让他们觉得投入是值得的。作为一款卡牌收集游戏，我们试图通过视觉和音效来实现，让一切看起来更酷。然后我们把所有的因素都做 成浑然一体的游戏体验，比如后面的匹配效果、游戏内商店开启效果等等，这些虽然看起来可能设计有所不同，但它们给玩家的感觉是一体的，体验是完整流畅的。
　　遇到的意外：
　　《炉石传说》这个项目其实也遇到了一些意外，比如一开始该游戏是为PC平台设计的，但到了触屏设备上，操作就成了问题。但后来我们决定针对触屏进行 优化，可以点击和拖拽卡牌，这样在释放技能的时候反而更有神奇的效果，这是我最开心的地方，你触碰卡牌之后就会看到效果，这样看起来更有代入感。
　　作为一款卡牌收集游戏，我们觉得还应该为它加入更多的吸引力，比如点击桌子角上的按钮会有不同的音效和视觉效果，这些都可以让玩家们在战斗之余享受 更多的乐趣。我之所以加这些效果，是因为我2岁的孩子，他每天晚上都会玩《炉石传说》，他的意思是把这个桌子填满，不要显得太空旷，所以就加入了这些附加 功能。
　　而且，似乎粉丝们非常欢迎，比如他们会为这款游戏制作定制化的周边，有蛋糕、木盒、钱包等特色物品。
　　《炉石传说》的挑战
　　首先是很难进行内容扩展，比如图片的左边是9个英雄，但问题是，如果再加入新的英雄该怎么做呢？我也不知道。但我们的原则是每一张卡牌都要做的好看，并且各有作用，我们只为当前版本做设计，这句话的意思是，我们的时间有限，不可能现在就预见未来的问题，虽然有时候也会考虑未来的事情，但最后时间总是不够用。
　　另一个问题就是游戏内的资源比较多，当你收集的卡牌越来越多的时候，可能一眼很难看到想要使用的卡牌，这样会导致玩家困惑。有人说我们的游戏最关键 的就是UI，《炉石传说》没有庞大的虚拟世界可以让玩家们在里面来回散步，我们只有桌子以及盒子。我自己也经常看Reddit论坛，但其中的一些建议并不 合适我们使用。总体来讲，我们更倾向于高效率的UI，我们设计的是一个盒子，你可以从一个地方很快的转向另一个地方，在手机平台，问题可能会更多一些，因 为有些东西在大屏幕上一页就可以搞定，但到了小尺寸设备可能需要2个界面，而我们的游戏是玩法优先的，因此必须做出一些妥协。
　　未来我们的问题是需要在跨平台进行维护，比如台式机、平板以及智能机等。PC和平板可以做到比较相似，但手机的屏幕小很多，所以做起来很有挑战性。但我们觉得还是值得的，因为可以通过它吸引更多的手游玩家。
　　因此，在适合的情况下，拟物风格的UI是非常好的，这样做需要很多的努力，但却很适合触屏设备。如果拟物不适合你的游戏，那么你就要尝试找到更合适的，这样才能发挥游戏最大的潜力。
　　最后一部分：UI和游戏设计同步进行
　　这种做法可能并不适合所有的项目，但我看到很多策划想到一个游戏创意的时候，往往会想到对应的UI设计风格。而且，UI设计就像是另一种形式的游戏 策划，有些团队可能会有专门的UI、程序员、美术师，也有的团队并没有专门人员去做这件事，有些问题我们也在尝试着解决，但我们的团队领导对UI很重视， 把它看作几乎是和游戏设计同等地位。
　　在做了一些比较零碎的设计之后，我们会制作模型，如果UI超级复杂的话，我们就需要反思哪些地方设计有问题，是什么问题导致了UI看起来如此的复 杂，比如卡牌上的文字内容。最开始我们希望通过文字描述把卡牌的类别、等级、以及数字的功能等进行详细说明，但后来没有这么做。我很确定没有人愿意去单纯 的看无聊的文字，而且我们不想因此吓走新玩家，毕竟，他们可以在不断的游戏中逐渐了解所有的功能。而且，在每次战斗中，玩家最多可以出战的军队数为7个， 这也是降低游戏复杂性的做法之一，尤其是在放大或者缩小的时候，太多的卡牌会让屏幕看起来不自然。
　　我们的卡牌类别过去有60个，这就意味着右边的列表可能有3页，这样在固定的时间内很难选择，而且对于新手玩家们来说，压力会比较大。所以我们把数量减少到了30个，即便这样，有些新手玩家仍然会觉得难以选择。

更多精彩图片 请登录

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

更多精彩图片 请登录

　　上图是我们之前设计的卡牌反应链，可以让玩家选择特定的卡牌对抗敌人的特定卡牌，但这么做的结果是，让UI看起来既混乱又复杂，而且看起来也不好，所以我们放弃了这个设计。
　　另一个理念就是，UI的制作就等于游戏制作。下面这张图是我们2012年时的整个团队，图中画红圈的就是我。不过，虽然我的职位是UI设计，但其实 游戏的UI设计并不是我一个人在做，你可以从另一张图中看到我们的分工，比如我们的3D美术、设计总监、美术总监、策划以及技术美工都参与了UI设计。

更多精彩图片 请登录

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