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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

關(guān)鍵的美術(shù)設(shè)計(jì)：桌子出現(xiàn)之前的門(mén)

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

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

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

初版UI

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

3D版UI

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

最終版UI

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

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

　　為什么做擬物化

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

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

　　遇到的意外：

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

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

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

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

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

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

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

　　因此，在適合的情況下，擬物風(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ì)有專(zhuān)門(mén)的UI、程序員、美術(shù)師，也有的團(tuán)隊(duì)并沒(méi)有專(zhuān)門(mén)人員去做這件事，有些問(wèn)題我們也在嘗試著解決，但我們的團(tuán)隊(duì)領(lǐng)導(dǎo)對(duì)UI很重視，把它看作幾乎是和游戲設(shè)計(jì)同等地位。

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

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

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

　　上圖是之前的設(shè)計(jì)，在下一個(gè)回合開(kāi)始之前，玩家本場(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ì)，圖中畫(huà)紅圈的就是我。不過(guò)，雖然我的職位是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)說(shuō)明游戲中的一個(gè)功能需要多少人的參與，首先是UI設(shè)計(jì)，我們會(huì)根據(jù)不同階段和設(shè)計(jì)需求，讓2D以及3D美術(shù)師參與，隨后還會(huì)讓程序員參與一些功能的實(shí)現(xiàn)。