騰訊大咖演講實(shí)錄！從3個(gè)模塊聊聊游戲擬物化UI設(shè)計(jì)

本月，騰訊獨(dú)立游戲孵化器在廣州舉辦了獨(dú)立游戲開(kāi)發(fā)者沙龍。本次活動(dòng)邀請(qǐng)了數(shù)名游戲開(kāi)發(fā)者分享他們關(guān)于項(xiàng)目制作的經(jīng)驗(yàn)，其中便有《黎明覺(jué)醒》的 UI 負(fù)責(zé)人，來(lái)自騰訊光子設(shè)計(jì)中心的 Wenbin 老師。

在游戲制作過(guò)程中，UI 設(shè)計(jì)可謂是非常重要的一環(huán)。優(yōu)秀的 UI 不僅是玩家與游戲交互的信息載體，更是有趣的、精美的、可以講故事的設(shè)計(jì)。近年來(lái)，大家對(duì)于擬物化設(shè)計(jì)與扁平化設(shè)計(jì)各執(zhí)其詞，而今天我們也邀請(qǐng)到了《黎明覺(jué)醒》的 UI 負(fù)責(zé)人 Wenbin 老師，來(lái)與大家重點(diǎn)分享擬物化 UI 設(shè)計(jì)的幾大要素。

以下是我們整理的部分演講實(shí)錄，為提升閱讀體驗(yàn)，內(nèi)容有刪減和調(diào)整：

大家下午好，我是來(lái)自騰訊光子設(shè)計(jì)中心的 GUI 設(shè)計(jì)師 Wenbin，在游戲行業(yè)有十年從業(yè)經(jīng)歷，參與過(guò)《全民超神》、《我的王朝》、《黎明覺(jué)醒》、《PUBG Mobile》等項(xiàng)目。很開(kāi)心來(lái)到廣州與大家進(jìn)行這次分享，本次分享內(nèi)容主要是針對(duì)美術(shù)設(shè)計(jì)向的。

下面從三個(gè)模塊來(lái)向大家介紹游戲的擬物化設(shè)計(jì)，分別是什么是擬物化設(shè)計(jì)，為什么要做擬物化設(shè)計(jì)，以及如何做擬物化設(shè)計(jì)。

說(shuō)到擬物化設(shè)計(jì)，首先要能夠區(qū)分?jǐn)M物化與扁平化。比如下圖中圖 A 便是擬物化設(shè)計(jì)，模擬了塔羅牌、鐘擺等現(xiàn)實(shí)事物；而圖 B 便是扁平化設(shè)計(jì)，界面主要用來(lái)凸顯角色信息。

市面上有很多游戲都采用了擬物化設(shè)計(jì)，比如《爐石傳說(shuō)》、《暗黑 3》、《魔獸世界》、《英雄聯(lián)盟》等。綜合上述游戲的界面風(fēng)格，可以看出擬物化設(shè)計(jì)的特點(diǎn)便是模擬現(xiàn)實(shí)事物，細(xì)節(jié)精美，注重?cái)⑹滦耘c情感代入感，讓玩家的心理認(rèn)知和實(shí)際感官達(dá)成一致。

而擬物化設(shè)計(jì)也有著明顯的優(yōu)缺點(diǎn)，優(yōu)點(diǎn)主要是設(shè)計(jì)擁有精美細(xì)節(jié)，可以模擬真實(shí)物件的質(zhì)感，給用戶傳達(dá)豐富的情感。而同時(shí)帶來(lái)了對(duì)設(shè)計(jì)師手繪能力要求較高，同時(shí)對(duì)信息傳達(dá)有略微犧牲的缺點(diǎn)。綜合這些特點(diǎn)，不難看出擬物化設(shè)計(jì)更加適合于歷史題材、冷兵器戰(zhàn)爭(zhēng)題材、魔幻神話題材以及重度游戲性題材的游戲。

為了加深大家的理解，我們?cè)賮?lái)對(duì)比看一些采用了扁平化設(shè)計(jì)的游戲，比如《守望先鋒》、《APEX》、《戰(zhàn)地》、《彩虹六號(hào)》等。綜合上述游戲的界面風(fēng)格，可以看出扁平化設(shè)計(jì)的特點(diǎn)是去除厚重的繁雜的裝飾，保留原始簡(jiǎn)單的幾何形態(tài)，強(qiáng)調(diào)抽象、極簡(jiǎn)、符號(hào)化，以及明快的色彩搭配。

對(duì)于扁平化設(shè)計(jì)來(lái)說(shuō)，優(yōu)點(diǎn)主要是讓信息直觀凸顯，但卻缺少裝飾和細(xì)節(jié)，缺乏視覺(jué)效果的沉浸式和情感化表達(dá)。綜合這些特點(diǎn)，可以看出扁平化設(shè)計(jì)更適合于現(xiàn)代未來(lái)戰(zhàn)爭(zhēng)、軍事科技、輕松休閑、體育競(jìng)技類游戲。

總的來(lái)說(shuō)，擬物化和扁平化設(shè)計(jì)各有優(yōu)勢(shì)，也各有不足。但我認(rèn)為他們兩者并不沖突并不對(duì)立，而是彼此相互依存，雙方各有側(cè)重。在 UI 設(shè)計(jì)中，不可一味追求某一類設(shè)計(jì)，而摒棄另一類。

現(xiàn)如今的美術(shù)人才會(huì)有各種組合能力，比如 2D 原畫(huà)設(shè)計(jì)能力、3D 模型設(shè)計(jì)能力、UI 動(dòng)效設(shè)計(jì)能力等，以下會(huì)著重以 2D 原畫(huà)和 3D 模型能力為基礎(chǔ)進(jìn)行介紹。

進(jìn)行擬物化設(shè)計(jì)的動(dòng)機(jī)一方面是可以通過(guò)模擬真實(shí)物件，進(jìn)行藝術(shù)加工后，達(dá)到現(xiàn)實(shí)中看不到的藝術(shù)效果。具體來(lái)說(shuō)就是模擬一些真實(shí)物件如寶石、木質(zhì)等物件的造型、材質(zhì)或光影，加工放大其中部分元素，并拋棄某些新的設(shè)計(jì)中所不需要的部分，做出符合設(shè)計(jì)需求的藝術(shù)化設(shè)計(jì)。

進(jìn)行擬物化設(shè)計(jì)的動(dòng)機(jī)另一方面是可以更好地為玩家營(yíng)造沉浸式情感表達(dá)。通過(guò)不同元素的組合，將情景化的界面賦予不同的視覺(jué)感受。

此處為大家舉個(gè)例子說(shuō)明。比如游戲商店界面的設(shè)計(jì)，從圖上可以看到初版設(shè)計(jì)比較中規(guī)中矩，后來(lái)基于希望界面的感官效果更加有趣，于是便參考現(xiàn)實(shí)中的店鋪原型，而優(yōu)化出了一版新的商店界面設(shè)計(jì)。新的設(shè)計(jì)中做了一個(gè)仿真的書(shū)架，旁邊擺放一只符合游戲形象的企鵝，既有趣且符合功能需求。

下面我們將從三個(gè)方面來(lái)說(shuō)明如何做擬物化設(shè)計(jì)，分別是設(shè)計(jì)原則、設(shè)計(jì)方法以及設(shè)計(jì)形式。

擬物化的設(shè)計(jì)原則需要遵循以下四點(diǎn)，分別是主次突出、統(tǒng)一性、習(xí)慣與認(rèn)知、代表玩家說(shuō)話。下面結(jié)合實(shí)例為大家具體說(shuō)明。

1. 主次突出

設(shè)計(jì)界面時(shí)不能喧賓奪主，要細(xì)節(jié)豐富但主次分明。下面舉例兩種不同的商店界面設(shè)計(jì)，第一種界面元素過(guò)多，讓人一眼看不到重點(diǎn)信息；而對(duì)比來(lái)說(shuō)第二種界面既有設(shè)計(jì)感又突出了主體信息。

2. 統(tǒng)一性

界面設(shè)計(jì)的結(jié)構(gòu)和風(fēng)格要與游戲主題一致。這方面爐石做的非常好，各種界面的顏色和風(fēng)格都比較一致。

3. 習(xí)慣與認(rèn)知

不同人群擁有不同的成長(zhǎng)背景，所以認(rèn)知有較大區(qū)別。比如年輕一代和老一代對(duì)于美的認(rèn)知就有所不同。所以做游戲 ui 設(shè)計(jì)時(shí)要了解到游戲定位的玩家群體，不同群體有不同審美認(rèn)知和接受度。

4. 代表玩家說(shuō)話

我們來(lái)看糖果傳奇、暗黑 3 等游戲界面，可以看到不同的設(shè)計(jì)要素，比如鐵絲網(wǎng)、明度較高的色彩、幽詭的曲線等，這些會(huì)給玩家?guī)?lái)完全不同的氛圍感。

下面為大家介紹擬物化的設(shè)計(jì)方法，主要包含以下五個(gè)方面，分別是外輪廓、體積感、空間層次、材質(zhì)、光影色彩。結(jié)合實(shí)例為大家具體說(shuō)明。

外輪廓

擬物化設(shè)計(jì)中外輪廓設(shè)計(jì)需飽滿，設(shè)計(jì)元素有理有據(jù)、有內(nèi)涵。從風(fēng)格上來(lái)說(shuō)大體分有兩種外輪廓設(shè)計(jì)，一種是圓潤(rùn)型輪廓，特點(diǎn)是比較 Q 萌，適合較卡通的界面設(shè)計(jì)；另一種是尖銳型輪廓，適合超寫(xiě)實(shí)、戰(zhàn)爭(zhēng)、科幻等題材。在設(shè)計(jì)時(shí)需要根據(jù)游戲風(fēng)格運(yùn)用不同輪廓風(fēng)格。

體積感

也就是物體所占空間的大小，是薄還是厚，是單一構(gòu)成或組合構(gòu)成。要根據(jù)界面的需要，把握體積感的設(shè)計(jì)。

空間層次

也就是物件前后左右上下的距離，主體和陪襯的關(guān)系。在設(shè)計(jì)時(shí)要注意，有主次、有虛實(shí)、有景深、有穿插、有呼應(yīng)、有對(duì)比。

材質(zhì)

當(dāng)我們的設(shè)計(jì)需要體現(xiàn)出一定的精度，或有別于其他較平常的設(shè)計(jì)時(shí)，材質(zhì)便是很重要的一環(huán)。材質(zhì)主要包括表面色彩、紋理、光滑度、反射、折射、發(fā)光度等要素。在設(shè)計(jì)時(shí)，為了讓材質(zhì)看起來(lái)更接近真實(shí)，需要遵循自然法則對(duì)這些要素進(jìn)行加工。比如說(shuō)石頭上會(huì)出現(xiàn)一些隨機(jī)的裂縫，又比如金屬剛出廠時(shí)十分光滑、紋路清晰，但隨著時(shí)間流逝，會(huì)出現(xiàn)銹痕。但需要注意的一點(diǎn)是，材質(zhì)是附著于物體本身的，做設(shè)計(jì)時(shí)不要一味突出材質(zhì)。

光影色彩

光影由光源、反光、環(huán)境光、投影構(gòu)成。如果做好了光影的處理，界面會(huì)呈現(xiàn)優(yōu)秀的氛圍感。比如爐石界面上的一束打光，細(xì)節(jié)處理到位，模擬了自然并加以了美化處理。但要注意，做光影設(shè)計(jì)時(shí)需要光源統(tǒng)一，符合邏輯，不可到處都是光影。

基于上面的理論基礎(chǔ)，為大家?guī)?lái)一個(gè)我過(guò)往項(xiàng)目的界面設(shè)計(jì)經(jīng)歷，來(lái)幫助大家更好理解。這是當(dāng)時(shí)《全民超神》項(xiàng)目的一個(gè)圖標(biāo)需求，圖標(biāo)名叫做萬(wàn)魔峽谷，在收到需求后，我先做了關(guān)鍵詞發(fā)散，然后尋找相近參考圖，之后出了一版草圖，最后依照以上五個(gè)方面對(duì)外輪廓、體積感、空間層次、材質(zhì)、光影進(jìn)行細(xì)化。

接下來(lái)介紹擬物化的設(shè)計(jì)形式，主要為主題化設(shè)計(jì)。此處會(huì)為大家?guī)?lái)多個(gè)界面實(shí)例，通過(guò)對(duì)比來(lái)進(jìn)一步理解擬物化設(shè)計(jì)能帶來(lái)的情景化感受。

案例 1：《我的王朝》中的勝利結(jié)算界面。《我的王朝》是一款中世紀(jì)背景的 slg 游戲，需要設(shè)計(jì)一個(gè)勝利結(jié)算界面，起初根據(jù)策劃效果圖做出一版初版設(shè)計(jì)，設(shè)計(jì)雖完美體現(xiàn)了策劃案中需求的交互細(xì)節(jié)，但卻較為普通，缺少沉浸感，與市面上大多游戲類似，基本屬于功能化界面，缺少細(xì)節(jié)和渲染。

交互和初版設(shè)計(jì)

之后在進(jìn)行優(yōu)化時(shí)，我認(rèn)為可以參照現(xiàn)實(shí)生活中勝利場(chǎng)景中的元素來(lái)設(shè)計(jì)。于是便聯(lián)想了一些勝利場(chǎng)景，譬如紅軍打仗歸來(lái)時(shí)騎的高頭大馬、拿破侖凱旋歸來(lái)時(shí)的形象。再根據(jù)整個(gè)游戲的故事背景及 IP，發(fā)散出了一些與勝利相關(guān)的關(guān)鍵詞。

最后勝利界面的終版設(shè)計(jì)如圖，保留了右側(cè)必要的信息區(qū)，在左側(cè)留出了較大空間來(lái)做視覺(jué)設(shè)計(jì)。在背景圖中渲染了騎馬凱旋歸來(lái)的勝利喜悅，并在右側(cè)圖標(biāo)上添加了西方文化中代表勝利的雄獅元素，輔以月桂、皇冠等裝飾，做出了一版充滿勝利氛圍感的界面。通過(guò)這個(gè)案例，希望向大家說(shuō)明，如果想鍛煉自己成為高階設(shè)計(jì)師，那么設(shè)計(jì)界面時(shí)不僅要滿足策劃的基本需求，更要盡量做到讓界面更加有趣，甚至附有靈魂。

正式視覺(jué)

案例 2：《Pubg Mobile》中地鐵玩法的任務(wù)界面。當(dāng)時(shí)《PubgMobile》要新推出地鐵玩法，在設(shè)計(jì)對(duì)應(yīng)的任務(wù)界面時(shí)，我認(rèn)為《Pubg Mobile》的風(fēng)格并不適合采用扁平化設(shè)計(jì)，看起來(lái)會(huì)比較普通、缺少趣味性。

交互稿

為了做出更貼切主題的設(shè)計(jì)，我分析了《Pubg Mobile》和《地鐵 2033》，希望找出一些共性和各自的特點(diǎn)。分析發(fā)現(xiàn)兩款游戲的世界背景有很多相似之處，充滿了戰(zhàn)損和殘破感。于是提取出了很多元素，譬如地鐵站中的老式設(shè)備、設(shè)備的破碎生銹痕跡等。

最終在任務(wù)界面做出了一個(gè)類似電視機(jī)的設(shè)計(jì)。并且值得一提的是，在交互操作方面也做了擬真化設(shè)計(jì)，比如玩家的操作會(huì)帶來(lái)電視機(jī)扳手的旋轉(zhuǎn)，而扳手的旋轉(zhuǎn)對(duì)應(yīng)著頁(yè)簽的切換。當(dāng)時(shí)推出這款設(shè)計(jì)后，許多玩家被這樣的交互操作所吸引，一度導(dǎo)致電視機(jī)扳手的按鈕點(diǎn)擊率非常高。

視覺(jué)稿

案例 3：《Pubg Mobile》在“黑五”期間推出的打折促銷運(yùn)營(yíng)活動(dòng)界面。當(dāng)時(shí)在接到需求后，考慮到玩家對(duì)于獎(jiǎng)券的設(shè)計(jì)已經(jīng)審美疲勞，于是我們打算摒棄常見(jiàn)的抽獎(jiǎng)券形式。既然是“黑五”活動(dòng)，我便充分調(diào)查了“黑五”的歷史及傳統(tǒng)，了解到“黑五”名字的由來(lái)是因?yàn)槿藗兊拇罅慷谪浶袨榘l(fā)生在夜晚，并且商家收益后會(huì)用黑筆記錄盈利，于是便引入了“黑夜”這個(gè)設(shè)計(jì)元素。同時(shí)結(jié)合《Pubg Mobile》7-80 年代的時(shí)代背景，做出了一些復(fù)古的如霓虹燈的元素。

最終我將獎(jiǎng)券界面做成一個(gè)復(fù)古 DVD 樣式，折扣顯示在屏幕上。玩家確定了折扣力度后，鏡頭拉伸，來(lái)到了一個(gè)貨架界面，一些商品信息和折扣信息都用 led 形式表現(xiàn)出來(lái)，道具品質(zhì)也摒棄傳統(tǒng)品質(zhì)框，采用了燈管打光的設(shè)計(jì)。當(dāng)時(shí)界面反響非常好，由此帶來(lái)了顯著的運(yùn)營(yíng)數(shù)據(jù)提高。

案例 4：《Pubg Mobile》的一次重大活動(dòng)。最后重點(diǎn)來(lái)說(shuō)下《Pubg Mobile》的一次重大活動(dòng)，首先為大家介紹一下活動(dòng)的背景。活動(dòng)周期為一年兩次，在活動(dòng)期間會(huì)一次性推出五個(gè)皮膚，其中主推的是一款“血誓”圣裝，這款皮膚期望塑造的形象是在暗夜中維護(hù)正義與秩序的審判者。

接到上述需求后，我整理了已知的信息，根據(jù)皮膚角色的身份、性格，背景故事以及稀有度，做出了四版活動(dòng)界面方案設(shè)計(jì)。第一版強(qiáng)調(diào)主推的“血誓”皮膚，其余四款皮膚圍繞其身側(cè)，如暗夜仆從；第二版采用了扁平化設(shè)計(jì)；第三版營(yíng)造了一種封印的氣息，五個(gè)皮膚角色等待玩家的交互操作將其激活；最后一版考慮到“血誓”的罰罪者身份，模擬教堂那種天光的效果，并營(yíng)造了逆光的環(huán)境氛圍。最終在綜合了多方面考慮后，敲定了第四版方案。

方案草圖

方案確定后，就開(kāi)始下一步細(xì)化工作，考慮到活動(dòng)會(huì)設(shè)置一個(gè)可視化抽獎(jiǎng)環(huán)節(jié)，需要做 3D 的轉(zhuǎn)盤(pán)展示，便拆解了轉(zhuǎn)盤(pán)的細(xì)節(jié)比如材質(zhì)、花紋、三維面等方便建模參照。

三維拆解圖

一系列設(shè)計(jì)工作后，最終呈現(xiàn)出如圖的效果，在玩家未操作時(shí)，皮膚角色身后的大門(mén)緊閉，玩家點(diǎn)擊抽取后，大門(mén)打開(kāi)投射出束光，緊接著鏡頭推進(jìn)來(lái)到了抽獎(jiǎng)轉(zhuǎn)盤(pán)界面，五個(gè)半身像代表著五個(gè)獎(jiǎng)池。整個(gè)界面富有極強(qiáng)的渲染力和沉浸感。

正式稿

以上便是今天的內(nèi)容，最后再分享一個(gè)我平日里的積累方法，就是多玩游戲，多看電影，從中汲取靈感。謝謝大家！

在分享結(jié)束后，Wenbin 也細(xì)致耐心地解答了現(xiàn)場(chǎng)觀眾的提問(wèn)，我們同樣整理了部分問(wèn)答。

Q1：策劃提出需求時(shí)，是否需要提出一些設(shè)計(jì)風(fēng)格的建議？如果提出的話會(huì)對(duì) UI 工作有什么影響嗎？

A1：策劃提需求時(shí)，如果能提出更明確的需求取向的話，對(duì)美術(shù)來(lái)說(shuō)是正向的。但更重要的是盡可能把需要的功能點(diǎn)、信息點(diǎn)都提清楚，這樣可以避免在界面效果圖成型后，還要做反復(fù)的修改和增減的情況。

歡迎關(guān)注作者微信公眾號(hào)：「騰訊GWB游戲無(wú)界」