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

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

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

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

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

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

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

　　第一部分：找到項目的種子（想法）

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

一開始的UI是這樣的

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

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

　　下圖是我們之前做的匹配模式，我們在做匹配的時候就知道，不希望做成是在地圖上的偶遇，而是需要有搜索的感覺，所以一開始的匹配是這樣的（下圖），有人會覺得這樣也不錯對吧。

《爐石傳說》團隊最初設(shè)計的匹配模式

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

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

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

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

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

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

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

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

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

初版UI

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

3D版UI

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

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

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

　　為什么做擬物化

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

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

　　遇到的意外：

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

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

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

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

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

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

　　未來我們的問題是需要在跨平臺進行維護，比如臺式機、平板以及智能機等。PC和平板可以做到比較相似，但手機的屏幕小很多，所以做起來很有挑戰(zhàn)性。但我們覺得還是值得的，因為可以通過它吸引更多的手游玩家。

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

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

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

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

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

之前的戰(zhàn)場UI設(shè)計

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

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

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

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

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