[爐石傳說]設計師:如何創造沉浸式用戶界面

【Gamelook專稿,轉載請註明出處】

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

Derek Sakamoto

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

對於任何遊戲策劃、美術師以及希望提高自己遊戲項目視覺表現的有關人士來說,都是非常值得一讀的。以下請看Gamelook整理的演講稿:

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

這裡做一個簡單的自我介紹,到現在為止,我已經在暴雪工作超過12年瞭,我的第一份工作是《魔獸世界》的UI設計,參與過《巫妖王之怒》,6年多之後,我迎來瞭職業生涯的轉變,非常幸運的參與瞭Pegasus項目,也就是現在的《爐石傳說》。

所以在接下來的30分鐘裡,我將會講述《爐石傳說》項目創意中的一些高級原則,正是由於這些,《爐石傳說》的UI以及遊戲本身才成為瞭今天的樣子。第一部分講如何找到項目的種子、第二部分是做擬物化風格,最後一部分講的是UI與遊戲設計是同步的。

第一部分:找到項目的種子(想法)

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

ui1

一開始的UI是這樣的

所以我先向你們介紹《魔獸傳奇(Warcraft Legends)》,這個創意裡面有冰與火和獸人等魔獸元素,但很明顯不是我們要的結果。我們的另一個想法是做一個世界地圖,你可以在地圖上旅行並解鎖新區域,做單機任務,然後解鎖新內容。我們最初用Flash做瞭創意原型,由於是單機模式,所以我們並沒有投入太多。下面的圖片是首測之前我視覺效果目標,可能你們很多人都會說,幸好這個目標沒有實現。

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

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

ui2

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

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

ui3

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

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

ui4

‘盒子’版的戰鬥開場界面

上面說的那個盒子的想法被團隊所認可,這些想法就像樹根,最終讓《爐石傳說》得以開花結果。我們現在的遊戲開始界面就是一個盒子,玩過遊戲的人都應該比較瞭解。

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

ui5

關鍵的美術設計:桌子出現之前的門

然後,問題來瞭:盒子一直是放在桌子上的,有一天我們在想,桌子要放在哪兒呢?因此我們又開始新的創意,所以我們做瞭下圖這樣的加載界面,看起來像是一扇門,在服務器繁忙的時候會顯示‘桌滿’,玩傢需要等待一定的時間才能進入遊戲。

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

可能會有人問,你們如何找到一個好的想法呢?這才是真正的大問題,但其實我也沒有答案,我唯一可以給的提示隻能是自己搜索。一開始的時候,我們的UI是這樣的(下圖),看起來很醜,就像是垃圾堆裡撿來的。

ui6

初版UI

然後我們覺得,這款遊戲或許應該做成3D的,後來我們希望做的更有實物的感覺,加入更多的魔法、希望它更有吸引力,所以做瞭很多模式。

ui7

3D版UI

最後我們一致認為,應該做的看起來更有結構感,更有價值,因此就得到瞭現在的UI主界面。

ui8

最終版UI

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

第二部分:擬物化的視覺風格

為什麼做擬物化

這是什麼意思呢?在研發的過程中,我們一直都在做3D用戶界面,但後來我們開始思考,現代UI研發的趨勢是什麼,當時的趨勢似乎是所有的設計都在偏向扁平化設計,一切看起來都平滑順暢,而且隻需要2D效果就可以做到。但我們做《爐石傳說》的時候,由於一直是做3D設計,所以覺得扁平化不適合我們,因此決定使用擬物化風格,這種風格影響瞭整個遊戲的研發過程。

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

遇到的意外:

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

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

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

《爐石傳說》的挑戰

首先是很難進行內容擴展,比如圖片的左邊是9個英雄,但問題是,如果再加入新的英雄該怎麼做呢?我也不知道。但我們的原則是每一張卡牌都要做的好看,並且各有作用,我們隻為當前版本做設計,這句話的意思是,我們的時間有限,不可能現在就預見未來的問題,雖然有時候也會考慮未來的事情,但最後時間總是不夠用。

ui9Reddit論壇的玩傢建議

另一個問題就是遊戲內的資源比較多,當你收集的卡牌越來越多的時候,可能一眼很難看到想要使用的卡牌,這樣會導致玩傢困惑。有人說我們的遊戲最關鍵的就是UI,《爐石傳說》沒有龐大的虛擬世界可以讓玩傢們在裡面來回散步,我們隻有桌子以及盒子。我自己也經常看Reddit論壇,但其中的一些建議並不合適我們使用。總體來講,我們更傾向於高效率的UI,我們設計的是一個盒子,你可以從一個地方很快的轉向另一個地方,在手機平臺,問題可能會更多一些,因為有些東西在大屏幕上一頁就可以搞定,但到瞭小尺寸設備可能需要2個界面,而我們的遊戲是玩法優先的,因此必須做出一些妥協。

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

因此,在適合的情況下,擬物風格的UI是非常好的,這樣做需要很多的努力,但卻很適合觸屏設備。如果擬物不適合你的遊戲,那麼你就要嘗試找到更合適的,這樣才能發揮遊戲最大的潛力。

最後一部分:UI和遊戲設計同步進行

這種做法可能並不適合所有的項目,但我看到很多策劃想到一個遊戲創意的時候,往往會想到對應的UI設計風格。而且,UI設計就像是另一種形式的遊戲策劃,有些團隊可能會有專門的UI、程序員、美術師,也有的團隊並沒有專門人員去做這件事,有些問題我們也在嘗試著解決,但我們的團隊領導對UI很重視,把它看作幾乎是和遊戲設計同等地位。

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

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

ui10

之前的戰場UI設計

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

ui11

上圖是我們之前設計的卡牌反應鏈,可以讓玩傢選擇特定的卡牌對抗敵人的特定卡牌,但這麼做的結果是,讓UI看起來既混亂又復雜,而且看起來也不好,所以我們放棄瞭這個設計。

Hearthstoneteam2012

2012年的《爐石傳說》制作團隊,作者是紅圈中的UI Designer

另一個理念就是,UI的制作就等於遊戲制作。下面這張圖是我們2012年時的整個團隊,圖中畫紅圈的就是我。不過,雖然我的職位是UI設計,但其實遊戲的UI設計並不是我一個人在做,你可以從另一張圖中看到我們的分工,比如我們的3D美術、設計總監、美術總監、策劃以及技術美工都參與瞭UI設計。

ui12

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

最近,我們擴張瞭團隊,所以UI設計師也變成瞭2個。所以,我可以用一張圖來說明遊戲中的一個功能需要多少人的參與,首先是UI設計,我們會根據不同階段和設計需求,讓2D以及3D美術師參與,隨後還會讓程序員參與一些功能的實現。

Comments are closed.