《炉石传说》设计师：如何创造沉浸式用户界面
用户界面(UI)设计在游戏研发最终阶段之前，通常都是被忽略的，但是，在项目的一开始就为UI问题加入一点点的思考，可以给你的研发过程带来很大的帮助。《炉石传说》高级UI设计师Derek Sakamoto在GDC 2015在演讲中，他详细讲解了暴雪在免费卡牌游戏《炉石传说》这个项目中是如何进行UI设计、修改以及重新设计的过程，据Derek Sakamoto透露，当前版本《炉石传说》的概念用了1年左右的时间才最终确定，而且，如他在演讲中所说，UI设计是和游戏策划同时进行的。
对于任何游戏策划、美术师以及希望提高自己游戏项目视觉表现的有关人士来说，都是非常值得一读的。以下请看Gamelook整理的演讲稿：
首先，感谢你们所有人的参与，很高兴在这里看到你们，我叫Derek Sakamoto，是《炉石传说》项目的高级UI设计师，我今天要讲的内容是，我们是如何创作沉浸式用户界面的(Immersive UI)。
这里做一个简单的自我介绍，到现在为止，我已经在暴雪工作超过12年了，我的第一份工作是《魔兽世界》的UI设计，参与过《巫妖王之怒》，6年多之后，我迎来了职业生涯的转变，非常幸运的参与了Pegasus项目，也就是现在的《炉石传说》。
所以在接下来的30分钟里，我将会讲述《炉石传说》项目创意中的一些高级原则，正是由于这些，《炉石传说》的UI以及游戏本身才成为了今天的样子。第一部分讲如何找到项目的种子、第二部分是做拟物化风格，最后一部分讲的是UI与游戏设计是同步的。
第一部分：找到项目的种子(想法)
什么是找到项目的种子，对我来说可能是一个想法、一张图片、一场电影或者是一首歌，它可以让你的团队成员们都了解项目的发展方向。所以在展示我们的 种子之前，我会告诉你们在获得《炉石传说》的核心概念之前我们是怎么工作的。当时由于团队只有5个人，而且团队规模还在增长，所以很多人可能对项目不是那 么了解。
所以我先向你们介绍《魔兽传奇(Warcraft Legends)》，这个创意里面有冰与火和兽人等魔兽元素，但很明显不是我们要的结果。我们的另一个想法是做一个世界地图，你可以在地图上旅行并解锁新 区域，做单机任务，然后解锁新内容。我们最初用Flash做了创意原型，由于是单机模式，所以我们并没有投入太多。下面的图片是首测之前我视觉效果目标，可能你们很多人都会说，幸好这个目标没有实现。
这个效果看起来毫无生机，而且超级复杂。我们后来还陆陆续续尝试了很多想法，比如WoW地图、单机模式冒险书籍、3D卡牌甚至全息卡等等。
下图是我们之前做的匹配模式，我们在做匹配的时候就知道，不希望做成是在地图上的偶遇，而是需要有搜索的感觉，所以一开始的匹配是这样的(下图)，有人会觉得这样也不错对吧。
过去的《炉石传说》和现在的版本是很不一样的，所以这就是你需要项目种子的原因，这个过程很长，我们在不断尝试可以做什么，什么才是我们要的效果。
我们还做了另外一个模式的匹配，开场是一个盒子(上图)，你点击放大就可以打开玩家地图、选择自己的英雄，然后点进去获得匹配对手，然后再缩小就可以开始对战游戏了。这种感觉看起来可能有点像现在的《炉石传说》，但其实并不一样，而只是给了现在的游戏一些参考，这个想法或许可以做的不错。
上面说的那个盒子的想法被团队所认可，这些想法就像树根，最终让《炉石传说》得以开花结果。我们现在的游戏开始界面就是一个盒子，玩过游戏的人都应该比较了解。
在盒子之后，我们就有了基本的UI框架，想要把它做成一个珠宝盒或者音乐盒一样的感觉，所以我们很自然的加入了钥匙、树等元素，包括后来的加载界面也是按照这样框架来做的。
然后，问题来了：盒子一直是放在桌子上的，有一天我们在想，桌子要放在哪儿呢？因此我们又开始新的创意，所以我们做了下图这样的加载界面，看起来像是一扇门，在服务器繁忙的时候会显示‘桌满’，玩家需要等待一定的时间才能进入游戏。
下面是我们的关键美术，有一张卡牌桌子，背景是魔兽主题，让玩家们觉得是在魔兽世界的大环境里玩《炉石传说》，这个想法让我们很兴奋，而且感觉也比较好。在暴雪嘉年华上，我们还专门为此设计了场景，希望获得更多的灵感，但目前还没有更好的想法。
可能会有人问，你们如何找到一个好的想法呢？这才是真正的大问题，但其实我也没有答案，我唯一可以给的提示只能是自己搜索。一开始的时候，我们的UI是这样的(下图)，看起来很丑，就像是垃圾堆里捡来的。
然后我们觉得，这款游戏或许应该做成3D的，后来我们希望做的更有实物的感觉，加入更多的魔法、希望它更有吸引力，所以做了很多模式。
最后我们一致认为，应该做的看起来更有结构感，更有价值，因此就得到了现在的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的制作就等于游戏制作。下面这张图是我们2012年时的整个团队，图中画红圈的就是我。不过，虽然我的职位是UI设计，但其实 游戏的UI设计并不是我一个人在做，你可以从另一张图中看到我们的分工，比如我们的3D美术、设计总监、美术总监、策划以及技术美工都参与了UI设计。
最近，我们扩张了团队，所以UI设计师也变成了2个。所以，我可以用一张图来说明游戏中的一个功能需要多少人的参与，首先是UI设计，我们会根据不同阶段和设计需求，让2D以及3D美术师参与，随后还会让程序员参与一些功能的实现。
《炉石传说》设计师：如何创造沉浸式用户界面相关推荐
- 项目式教学：为学生创造沉浸式学习体验
近日,笔者认真阅读了< 项目式教学:为学生创造沉浸式学习体验 >一书(中国人民大学出版社),对教师如何开展项目式教学有了清晰的认识.在阅读期刊网上下载的相关文章时,笔者留意到,我国的不少研 ...
- 超高清直播“出圈”下的沉浸式文博会
在引领文化产业发展的文博会现场,前沿科技元素随处可见.VR.AR.4K/8K.元宇宙--各种"文化+科技"的元素以刷新视听极限的美好体验,冲击着观众的眼球和感知.文博会现场,BOS ...
- 使用主题Theme实现Android沉浸式状态栏
使用主题Theme实现Android沉浸式状态栏 很早的时候,通过主题设置activity沉浸式,发现坑很多,就开始使用各种StatusBarUtils,放弃了主题修改沉浸式这种方式,不知道大家有没有 ...
- android:沉浸模式_2020年电子商务技术趋势：沉浸式技术时代
android:沉浸模式 Technologies like AI, VR/AR, Cryptocurrency, IoT will take center stage in 2020 and als ...
- latex 新定义环境 引用_炉石传说：完全虐杀式上分！新版本第二天动物园迅速定义环境！...
炉石传说新版本"暗影崛起",已经来到国服两天了,在新版本我们见证了地雷战的快速崛起,小光头终于不用挨打了! 不仅如此,由于现在的环境aoe很少,只有战士和控制萨比较多aoe,导致快 ...
- 炉石传说的代码是Java吗,炉石传说：设计师亲儿子，上千行代码写出来的，却天天被玩家怼！...
炉石传说的玩家,总是喜欢把某个职业,当然是暴雪亲儿子亲女儿.哪个登顶了,哪个拥有一套T0级别的卡组了,哪个职业就成了暴雪亲生的了.哪怕这个时间往往不会太长,最多只能维持几个月,但只要有T0卡组,甚至是 ...
- c语言炉石传说算法设计,炉石传说：下棋吃鸡还扣分？设计师：现在已经改回去了...
原标题:炉石传说:下棋吃鸡还扣分?设计师:现在已经改回去了 随着16.0补丁的上线,很多酒馆战棋的高分玩家发现了一件非常反常的事情.那就是补丁更新之后,赢一局不仅不加分而且会扣分(前四名),甚至于吃鸡 ...
- 看炉石传说如何围绕核心理念打造浑然一体的游戏
游戏作为文化产品,必须要符合整体性,整体性是最高原则,在满足整体性的前提下,任何达到目的的方式.任何表现形式都是可以接受的.要有整体性,就必须有核心理念,围绕这一核心进行创造,你的作品就会符合整体性. ...
- 如何最大化利用CPU性能创作沉浸式VR体验
-- 本文来自英特尔游戏开发部门的 Justin Link -- 在三年多的时间,我有幸负责管理一家名为Chronosapien的工作室,而我们主要是通过新兴技术组件来创建交互式内容.我们涉足了大量不 ...
最新文章
- 如何在Java中检查字符串是否为数字
- JavaScript 页面跳转的几种方式
- 像素位移_1亿像素放大也清晰 OPPO Ace2超清四摄解析
- 在线用户管理－－ESFramework 4.0 进阶（05）
- 智慧医院建设背景下的电子病历分析利用框架
- absolute和relative元素 设置百分比宽高的差异
- 大规模搜索+预训练，百度是如何落地的？
- webAppbuilder微件使用教程2 常用微件介绍
- iis php日志查看工具,教你如何查看IIS日志
- 数据结构笔记（七）-- 顺序栈
- C++ const和static const的区别
- linux /etc/fstab详解
- level shifter和isolation cell如何摆放
- ETL工作经验分享（1）
- Total Variation
- 鸿蒙轻量级数据存储Preferences
- php的tips（mysql语句union等问题）
- 神经网络参数初始化方法
- cmake编译so库
- 哔哩哔哩（B 站）刚刚崩了