《爐石傳說》設(shè)計(jì)師:如何創(chuàng)造沉浸式用戶界面

　　用戶界面（UI）設(shè)計(jì)在游戲研發(fā)最終階段之前，通常都是被忽略的，但是，在項(xiàng)目的一開始就為UI問題加入一點(diǎn)點(diǎn)的思考，可以給你的研發(fā)過程帶來(lái)很大的幫助。金天，Gamelook找到了《爐石傳說》高級(jí)UI設(shè)計(jì)師Derek Sakamoto在GDC 2015上的演講。

　　在演講中，他詳細(xì)講解了暴雪在免費(fèi)卡牌游戲《爐石傳說》這個(gè)項(xiàng)目中是如何進(jìn)行UI設(shè)計(jì)、修改以及重新設(shè)計(jì)的過程，據(jù)Derek Sakamoto透露，當(dāng)前版本《爐石傳說》的概念用了1年左右的時(shí)間才最終確定，而且，如他在演講中所說，UI設(shè)計(jì)是和游戲策劃同時(shí)進(jìn)行的。

　　對(duì)于任何游戲策劃、美術(shù)師以及希望提高自己游戲項(xiàng)目視覺表現(xiàn)的有關(guān)人士來(lái)說，都是非常值得一讀的。以下請(qǐng)看Gamelook整理的演講稿：

　　首先，感謝你們所有人的參與，很高興在這里看到你們，我叫Derek Sakamoto，是《爐石傳說》項(xiàng)目的高級(jí)UI設(shè)計(jì)師，我今天要講的內(nèi)容是，我們是如何創(chuàng)作沉浸式用戶界面的（Immersive UI）。

　　這里做一個(gè)簡(jiǎn)單的自我介紹，到現(xiàn)在為止，我已經(jīng)在暴雪工作超過12年了，我的第一份工作是《魔獸世界》的UI設(shè)計(jì)，參與過《巫妖王之怒》，6年多之后，我迎來(lái)了職業(yè)生涯的轉(zhuǎn)變，非常幸運(yùn)的參與了Pegasus項(xiàng)目，也就是現(xiàn)在的《爐石傳說》。

　　所以在接下來(lái)的30分鐘里，我將會(huì)講述《爐石傳說》項(xiàng)目創(chuàng)意中的一些高級(jí)原則，正是由于這些，《爐石傳說》的UI以及游戲本身才成為了今天的樣子。第一部分講如何找到項(xiàng)目的種子、第二部分是做擬物化風(fēng)格，最后一部分講的是UI與游戲設(shè)計(jì)是同步的。

　　第一部分：找到項(xiàng)目的種子（想法）

　　什么是找到項(xiàng)目的種子，對(duì)我來(lái)說可能是一個(gè)想法、一張圖片、一場(chǎng)電影或者是一首歌，它可以讓你的團(tuán)隊(duì)成員們都了解項(xiàng)目的發(fā)展方向。所以在展示我們的 種子之前，我會(huì)告訴你們?cè)讷@得《爐石傳說》的核心概念之前我們是怎么工作的。當(dāng)時(shí)由于團(tuán)隊(duì)只有5個(gè)人，而且團(tuán)隊(duì)規(guī)模還在增長(zhǎng)，所以很多人可能對(duì)項(xiàng)目不是那 么了解。

一開始的UI是這樣的

　　所以我先向你們介紹《魔獸傳奇（Warcraft Legends）》，這個(gè)創(chuàng)意里面有冰與火和獸人等魔獸元素，但很明顯不是我們要的結(jié)果。我們的另一個(gè)想法是做一個(gè)世界地圖，你可以在地圖上旅行并解鎖新 區(qū)域，做單機(jī)任務(wù)，然后解鎖新內(nèi)容。我們最初用Flash做了創(chuàng)意原型，由于是單機(jī)模式，所以我們并沒有投入太多。下面的圖片是首測(cè)之前我視覺效果目標(biāo)，可能你們很多人都會(huì)說，幸好這個(gè)目標(biāo)沒有實(shí)現(xiàn)。

　　這個(gè)效果看起來(lái)毫無(wú)生機(jī)，而且超級(jí)復(fù)雜。我們后來(lái)還陸陸續(xù)續(xù)嘗試了很多想法，比如WoW地圖、單機(jī)模式冒險(xiǎn)書籍、3D卡牌甚至全息卡等等。

　　下圖是我們之前做的匹配模式，我們?cè)谧銎ヅ涞臅r(shí)候就知道，不希望做成是在地圖上的偶遇，而是需要有搜索的感覺，所以一開始的匹配是這樣的（下圖），有人會(huì)覺得這樣也不錯(cuò)對(duì)吧。

《爐石傳說》團(tuán)隊(duì)最初設(shè)計(jì)的匹配模式

　　過去的《爐石傳說》和現(xiàn)在的版本是很不一樣的，所以這就是你需要項(xiàng)目種子的原因，這個(gè)過程很長(zhǎng)，我們?cè)诓粩鄧L試可以做什么，什么才是我們要的效果。

之前設(shè)計(jì)的盒子（可打開獲得地圖進(jìn)行匹配）

　　我們還做了另外一個(gè)模式的匹配，開場(chǎng)是一個(gè)盒子（上圖），你點(diǎn)擊放大就可以打開玩家地圖、選擇自己的英雄，然后點(diǎn)進(jìn)去獲得匹配對(duì)手，然后再縮小就可以開始對(duì)戰(zhàn)游戲了。這種感覺看起來(lái)可能有點(diǎn)像現(xiàn)在的《爐石傳說》，但其實(shí)并不一樣，而只是給了現(xiàn)在的游戲一些參考，這個(gè)想法或許可以做的不錯(cuò)。

‘盒子’版的戰(zhàn)斗開場(chǎng)界面

　　上面說的那個(gè)盒子的想法被團(tuán)隊(duì)所認(rèn)可，這些想法就像樹根，最終讓《爐石傳說》得以開花結(jié)果。我們現(xiàn)在的游戲開始界面就是一個(gè)盒子，玩過游戲的人都應(yīng)該比較了解。

　　在盒子之后，我們就有了基本的UI框架，想要把它做成一個(gè)珠寶盒或者音樂盒一樣的感覺，所以我們很自然的加入了鑰匙、樹等元素，包括后來(lái)的加載界面也是按照這樣框架來(lái)做的。

　　然后，問題來(lái)了：盒子一直是放在桌子上的，有一天我們?cè)谙耄�桌子要放在哪兒呢？因此我們又開始新的創(chuàng)意，所以我們做了下圖這樣的加載界面，看起來(lái)像是一扇門，在服務(wù)器繁忙的時(shí)候會(huì)顯示‘桌滿’，玩家需要等待一定的時(shí)間才能進(jìn)入游戲。

　　下面是我們的關(guān)鍵美術(shù)，有一張卡牌桌子，背景是魔獸主題，讓玩家們覺得是在魔獸世界的大環(huán)境里玩《爐石傳說》，這個(gè)想法讓我們很興奮，而且感覺也比較好。在暴雪嘉年華上，我們還專門為此設(shè)計(jì)了場(chǎng)景，希望獲得更多的靈感，但目前還沒有更好的想法。

　　可能會(huì)有人問，你們?nèi)绾握业揭粋�(gè)好的想法呢？這才是真正的大問題，但其實(shí)我也沒有答案，我唯一可以給的提示只能是自己搜索。一開始的時(shí)候，我們的UI是這樣的（下圖），看起來(lái)很丑，就像是垃圾堆里撿來(lái)的。

初版UI

　　然后我們覺得，這款游戲或許應(yīng)該做成3D的，后來(lái)我們希望做的更有實(shí)物的感覺，加入更多的魔法、希望它更有吸引力，所以做了很多模式。

3D版UI

　　最后我們一致認(rèn)為，應(yīng)該做的看起來(lái)更有結(jié)構(gòu)感，更有價(jià)值，因此就得到了現(xiàn)在的UI主界面。

　　所以，尋找項(xiàng)目種子的經(jīng)驗(yàn)是：沒有辦法直接得到，除非你是超級(jí)幸運(yùn)或者你非常的有才華；你應(yīng)該在項(xiàng)目的一開始就 去尋找，因?yàn)樗�可以讓你的�?xiàng)目研發(fā)變得更為順暢；它可以讓所有事都變得更好，可以讓所有的元素看起來(lái)都很適合，組合起來(lái)就像是一個(gè)完整的游戲；而且，如果 你想要做一款具有吸引力的游戲，或者是做一款獨(dú)特的類型，那就必須找到這個(gè)種子。

第二部分：擬物化的視覺風(fēng)格

　　為什么做擬物化

　　這是什么意思呢？在研發(fā)的過程中，我們一直都在做3D用戶界面，但后來(lái)我們開始思考，現(xiàn)代UI研發(fā)的趨勢(shì)是什么，當(dāng)時(shí)的趨勢(shì)似乎是所有的設(shè)計(jì)都在偏 向扁平化設(shè)計(jì)，一切看起來(lái)都平滑順暢，而且只需要2D效果就可以做到。但我們做《爐石傳說》的時(shí)候，由于一直是做3D設(shè)計(jì)，所以覺得扁平化不適合我們，因 此決定使用擬物化風(fēng)格，這種風(fēng)格影響了整個(gè)游戲的研發(fā)過程。

　　所以我們把東西做的看起來(lái)更有價(jià)值，比如設(shè)計(jì)出人們可以一眼就看得出價(jià)值的材料，這一點(diǎn)對(duì)我們來(lái)說尤其重要，因?yàn)�，作為一款免費(fèi)游戲，我們需要尊重 玩家們所投入的時(shí)間和金錢，讓他們覺得投入是值得的。作為一款卡牌收集游戲，我們?cè)噲D通過視覺和音效來(lái)實(shí)現(xiàn)，讓一切看起來(lái)更酷。然后我們把所有的因素都做 成渾然一體的游戲體驗(yàn)，比如后面的匹配效果、游戲內(nèi)商店開啟效果等等，這些雖然看起來(lái)可能設(shè)計(jì)有所不同，但它們給玩家的感覺是一體的，體驗(yàn)是完整流暢的。

　　遇到的意外：

　　《爐石傳說》這個(gè)項(xiàng)目其實(shí)也遇到了一些意外，比如一開始該游戲是為PC平臺(tái)設(shè)計(jì)的，但到了觸屏設(shè)備上，操作就成了問題。但后來(lái)我們決定針對(duì)觸屏進(jìn)行 優(yōu)化，可以點(diǎn)擊和拖拽卡牌，這樣在釋放技能的時(shí)候反而更有神奇的效果，這是我最開心的地方，你觸碰卡牌之后就會(huì)看到效果，這樣看起來(lái)更有代入感。

　　作為一款卡牌收集游戲，我們覺得還應(yīng)該為它加入更多的吸引力，比如點(diǎn)擊桌子角上的按鈕會(huì)有不同的音效和視覺效果，這些都可以讓玩家們?cè)趹?zhàn)斗之余享受 更多的樂趣。我之所以加這些效果，是因?yàn)槲?歲的孩子，他每天晚上都會(huì)玩《爐石傳說》，他的意思是把這個(gè)桌子填滿，不要顯得太空曠，所以就加入了這些附加 功能。

　　而且，似乎粉絲們非常歡迎，比如他們會(huì)為這款游戲制作定制化的周邊，有蛋糕、木盒、錢包等特色物品。

　　《爐石傳說》的挑戰(zhàn)

　　首先是很難進(jìn)行內(nèi)容擴(kuò)展，比如圖片的左邊是9個(gè)英雄，但問題是，如果再加入新的英雄該怎么做呢？我也不知道。但我們的原則是每一張卡牌都要做的好看，并且各有作用，我們只為當(dāng)前版本做設(shè)計(jì)，這句話的意思是，我們的時(shí)間有限，不可能現(xiàn)在就預(yù)見未來(lái)的問題，雖然有時(shí)候也會(huì)考慮未來(lái)的事情，但最后時(shí)間總是不夠用。

　　另一個(gè)問題就是游戲內(nèi)的資源比較多，當(dāng)你收集的卡牌越來(lái)越多的時(shí)候，可能一眼很難看到想要使用的卡牌，這樣會(huì)導(dǎo)致玩家困惑。有人說我們的游戲最關(guān)鍵 的就是UI，《爐石傳說》沒有龐大的虛擬世界可以讓玩家們?cè)诶锩鎭?lái)回散步，我們只有桌子以及盒子。我自己也經(jīng)�？碦eddit論壇，但其中的一些建議并不 合適我們使用�？傮w來(lái)講，我們更傾向于高效率的UI，我們?cè)O(shè)計(jì)的是一個(gè)盒子，你可以從一個(gè)地方很快的轉(zhuǎn)向另一個(gè)地方，在手機(jī)平臺(tái)，問題可能會(huì)更多一些，因 為有些東西在大屏幕上一頁(yè)就可以搞定，但到了小尺寸設(shè)備可能需要2個(gè)界面，而我們的游戲是玩法優(yōu)先的，因此必須做出一些妥協(xié)。

　　未來(lái)我們的問題是需要在跨平臺(tái)進(jìn)行維護(hù)，比如臺(tái)式機(jī)、平板以及智能機(jī)等。PC和平板可以做到比較相似，但手機(jī)的屏幕小很多，所以做起來(lái)很有挑戰(zhàn)性。但我們覺得還是值得的，因?yàn)榭梢酝ㄟ^它吸引更多的手游玩家。

　　因此，在適合的情況下，擬物風(fēng)格的UI是非常好的，這樣做需要很多的努力，但卻很適合觸屏設(shè)備。如果擬物不適合你的游戲，那么你就要嘗試找到更合適的，這樣才能發(fā)揮游戲最大的潛力。

　　最后一部分：UI和游戲設(shè)計(jì)同步進(jìn)行

　　這種做法可能并不適合所有的項(xiàng)目，但我看到很多策劃想到一個(gè)游戲創(chuàng)意的時(shí)候，往往會(huì)想到對(duì)應(yīng)的UI設(shè)計(jì)風(fēng)格。而且，UI設(shè)計(jì)就像是另一種形式的游戲 策劃，有些團(tuán)隊(duì)可能會(huì)有專門的UI、程序員、美術(shù)師，也有的團(tuán)隊(duì)并沒有專門人員去做這件事，有些問題我們也在嘗試著解決，但我們的團(tuán)隊(duì)領(lǐng)導(dǎo)對(duì)UI很重視， 把它看作幾乎是和游戲設(shè)計(jì)同等地位。

　　在做了一些比較零碎的設(shè)計(jì)之后，我們會(huì)制作模型，如果UI超級(jí)復(fù)雜的話，我們就需要反思哪些地方設(shè)計(jì)有問題，是什么問題導(dǎo)致了UI看起來(lái)如此的復(fù) 雜，比如卡牌上的文字內(nèi)容。最開始我們希望通過文字描述把卡牌的類別、等級(jí)、以及數(shù)字的功能等進(jìn)行詳細(xì)說明，但后來(lái)沒有這么做。我很確定沒有人愿意去單純 的看無(wú)聊的文字，而且我們不想因此嚇走新玩家，畢竟，他們可以在不斷的游戲中逐漸了解所有的功能。而且，在每次戰(zhàn)斗中，玩家最多可以出戰(zhàn)的軍隊(duì)數(shù)為7個(gè)， 這也是降低游戲復(fù)雜性的做法之一，尤其是在放大或者縮小的時(shí)候，太多的卡牌會(huì)讓屏幕看起來(lái)不自然。

　　我們的卡牌類別過去有60個(gè)，這就意味著右邊的列表可能有3頁(yè)，這樣在固定的時(shí)間內(nèi)很難選擇，而且對(duì)于新手玩家們來(lái)說，壓力會(huì)比較大。所以我們把數(shù)量減少到了30個(gè)，即便這樣，有些新手玩家仍然會(huì)覺得難以選擇。

之前的戰(zhàn)場(chǎng)UI設(shè)計(jì)

　　上圖是之前的設(shè)計(jì)，在下一個(gè)回合開始之前，玩家本場(chǎng)生于的生命和法力會(huì)繼承到下一場(chǎng)，很明顯，這樣做就需要在桌子上放更多的數(shù)字，而且會(huì)壓縮可以出場(chǎng)的卡牌數(shù)量限度，因此我們決定不這么做。

　　上圖是我們之前設(shè)計(jì)的卡牌反應(yīng)鏈，可以讓玩家選擇特定的卡牌對(duì)抗敵人的特定卡牌，但這么做的結(jié)果是，讓UI看起來(lái)既混亂又復(fù)雜，而且看起來(lái)也不好，所以我們放棄了這個(gè)設(shè)計(jì)。

　　另一個(gè)理念就是，UI的制作就等于游戲制作。下面這張圖是我們2012年時(shí)的整個(gè)團(tuán)隊(duì)，圖中畫紅圈的就是我。不過，雖然我的職位是UI設(shè)計(jì)，但其實(shí) 游戲的UI設(shè)計(jì)并不是我一個(gè)人在做，你可以從另一張圖中看到我們的分工，比如我們的3D美術(shù)、設(shè)計(jì)總監(jiān)、美術(shù)總監(jiān)、策劃以及技術(shù)美工都參與了UI設(shè)計(jì)。

《爐石傳說》游戲功能的制作流程草圖

　　最近，我們擴(kuò)張了團(tuán)隊(duì)，所以UI設(shè)計(jì)師也變成了2個(gè)。所以，我可以用一張圖來(lái)說明游戲中的一個(gè)功能需要多少人的參與，首先是UI設(shè)計(jì)，我們會(huì)根據(jù)不同階段和設(shè)計(jì)需求，讓2D以及3D美術(shù)師參與，隨后還會(huì)讓程序員參與一些功能的實(shí)現(xiàn)。