(點擊上方↑↑↑↑↑↑「GameLook」,訂閱微信)
用戶界面（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主界面。
最終版UI
所以，尋找項目種子的經驗是：沒有辦法直接得到，除非你是超級幸運或者你非常的有才華；你應該在項目的一開始就去尋找，因為它可以讓你的項目研發變得更為順暢；它可以讓所有事都變得更好，可以讓所有的元素看起來都很適合，組合起來就像是一個完整的遊戲；而且，如果你想要做一款具有吸引力的遊戲，或者是做一款獨特的類型，那就必須找到這個種子。
第二部分：擬物化的視覺風格
為什麼做擬物化
這是什麼意思呢？在研發的過程中，我們一直都在做3D用戶界面，但後來我們開始思考，現代UI研發的趨勢是什麼，當時的趨勢似乎是所有的設計都在偏向扁平化設計，一切看起來都平滑順暢，而且只需要2D效果就可以做到。但我們做《爐石傳說》的時候，由於一直是做3D設計，所以覺得扁平化不適合我們，因此決定使用擬物化風格，這種風格影響了整個遊戲的研發過程。
所以我們把東西做的看起來更有價值，比如設計出人們可以一眼就看得出價值的材料，這一點對我們來說尤其重要，因為，作為一款免費遊戲，我們需要尊重玩家們所投入的時間和金錢，讓他們覺得投入是值得的。作為一款卡牌收集遊戲，我們試圖通過視覺和音效來實現，讓一切看起來更酷。然後我們把所有的因素都做成渾然一體的遊戲體驗，比如後面的匹配效果、遊戲內商店開啟效果等等，這些雖然看起來可能設計有所不同，但它們給玩家的感覺是一體的，體驗是完整流暢的。
遇到的意外：
《爐石傳說》這個項目其實也遇到了一些意外，比如一開始該遊戲是為PC平臺設計的，但到了觸屏設備上，操作就成了問題。但後來我們決定針對觸屏進行優化，可以點擊和拖拽卡牌，這樣在釋放技能的時候反而更有神奇的效果，這是我最開心的地方，你觸碰卡牌之後就會看到效果，這樣看起來更有代入感。
作為一款卡牌收集遊戲，我們覺得還應該為它加入更多的吸引力，比如點擊桌子角上的按鈕會有不同的音效和視覺效果，這些都可以讓玩家們在戰鬥之餘享受更多的樂趣。我之所以加這些效果，是因為我2歲的孩子，他每天晚上都會玩《爐石傳說》，他的意思是把這個桌子填滿，不要顯得太空曠，所以就加入了這些附加功能。
而且，似乎粉絲們非常歡迎，比如他們會為這款遊戲製作定製化的周邊，有蛋糕、木盒、錢包等特色物品。
《爐石傳說》的挑戰
首先是很難進行內容擴展，比如圖片的左邊是9個英雄，但問題是，如果再加入新的英雄該怎麼做呢？我也不知道。但我們的原則是每一張卡牌都要做的好看，並且各有作用，我們只為當前版本做設計，這句話的意思是，我們的時間有限，不可能現在就預見未來的問題，雖然有時候也會考慮未來的事情，但最後時間總是不夠用。
Reddit論壇的玩家建議
另一個問題就是遊戲內的資源比較多，當你收集的卡牌越來越多的時候，可能一眼很難看到想要使用的卡牌，這樣會導致玩家困惑。有人說我們的遊戲最關鍵的就是UI，《爐石傳說》沒有龐大的虛擬世界可以讓玩家們在裡面來回散步，我們只有桌子以及盒子。我自己也經常看Reddit論壇，但其中的一些建議並不合適我們使用。總體來講，我們更傾向於高效率的UI，我們設計的是一個盒子，你可以從一個地方很快的轉向另一個地方，在手機平臺，問題可能會更多一些，因為有些東西在大屏幕上一頁就可以搞定，但到了小尺寸設備可能需要2個界面，而我們的遊戲是玩法優先的，因此必須做出一些妥協。
未來我們的問題是需要在跨平臺進行維護，比如臺式機、平板以及智能機等。PC和平板可以做到比較相似，但手機的屏幕小很多，所以做起來很有挑戰性。但我們覺得還是值得的，因為可以通過它吸引更多的手遊玩家。
因此，在適合的情況下，擬物風格的UI是非常好的，這樣做需要很多的努力，但卻很適合觸屏設備。如果擬物不適合你的遊戲，那麼你就要嘗試找到更合適的，這樣才能發揮遊戲最大的潛力。
最後一部分：UI和遊戲設計同步進行
這種做法可能並不適合所有的項目，但我看到很多策劃想到一個遊戲創意的時候，往往會想到對應的UI設計風格。而且，UI設計就像是另一種形式的遊戲策劃，有些團隊可能會有專門的UI、程式設計師、美術師，也有的團隊並沒有專門人員去做這件事，有些問題我們也在嘗試著解決，但我們的團隊領導對UI很重視，把它看作幾乎是和遊戲設計同等地位。
在做了一些比較零碎的設計之後，我們會製作模型，如果UI超級複雜的話，我們就需要反思哪些地方設計有問題，是什麼問題導致了UI看起來如此的複雜，比如卡牌上的文字內容。最開始我們希望通過文字描述把卡牌的類別、等級、以及數字的功能等進行詳細說明，但後來沒有這麼做。我很確定沒有人願意去單純的看無聊的文字，而且我們不想因此嚇走新玩家，畢竟，他們可以在不斷的遊戲中逐漸了解所有的功能。而且，在每次戰鬥中，玩家最多可以出戰的軍隊數為7個，這也是降低遊戲複雜性的做法之一，尤其是在放大或者縮小的時候，太多的卡牌會讓屏幕看起來不自然。
我們的卡牌類別過去有60個，這就意味著右邊的列表可能有3頁，這樣在固定的時間內很難選擇，而且對於新手玩家們來說，壓力會比較大。所以我們把數量減少到了30個，即便這樣，有些新手玩家仍然會覺得難以選擇。
之前的戰場UI設計
上圖是之前的設計，在下一個回合開始之前，玩家本場生於的生命和法力會繼承到下一場，很明顯，這樣做就需要在桌子上放更多的數字，而且會壓縮可以出場的卡牌數量限度，因此我們決定不這麼做。
上圖是我們之前設計的卡牌反應鏈，可以讓玩家選擇特定的卡牌對抗敵人的特定卡牌，但這麼做的結果是，讓UI看起來既混亂又複雜，而且看起來也不好，所以我們放棄了這個設計。
2012年的《爐石傳說》製作團隊，作者是紅圈中的UI Designer
另一個理念就是，UI的製作就等於遊戲製作。下面這張圖是我們2012年時的整個團隊，圖中畫紅圈的就是我。不過，雖然我的職位是UI設計，但其實遊戲的UI設計並不是我一個人在做，你可以從另一張圖中看到我們的分工，比如我們的3D美術、設計總監、美術總監、策劃以及技術美工都參與了UI設計。
《爐石傳說》遊戲功能的製作流程草圖
最近，我們擴張了團隊，所以UI設計師也變成了2個。所以，我可以用一張圖來說明遊戲中的一個功能需要多少人的參與，首先是UI設計，我們會根據不同階段和設計需求，讓2D以及3D美術師參與，隨後還會讓程式設計師參與一些功能的實現。