2021年12月4日下午，騰訊獨(dú)立游戲孵化器在廣州舉辦了獨(dú)立游戲開發(fā)者沙龍。本次活動(dòng)邀請(qǐng)了數(shù)名游戲開發(fā)者分享他們關(guān)于項(xiàng)目制作的經(jīng)驗(yàn)，其中便有《黎明覺醒》的UI負(fù)責(zé)人，來自騰訊光子設(shè)計(jì)中心的Wenbin老師。
    在游戲制作過程中，UI設(shè)計(jì)可謂是非常重要的一環(huán)。優(yōu)秀的UI不僅是玩家與游戲交互的信息載體，更是有趣的、精美的、可以講故事的設(shè)計(jì)。近年來，大家對(duì)于擬物化設(shè)計(jì)與扁平化設(shè)計(jì)各執(zhí)其詞，而今天我們也邀請(qǐng)到了《黎明覺醒》的UI負(fù)責(zé)人Wenbin老師，來與大家重點(diǎn)分享擬物化UI設(shè)計(jì)的幾大要素。
    以下是我們整理的部分演講實(shí)錄，為提升閱讀體驗(yàn)，內(nèi)容有刪減和調(diào)整：
    大家下午好，我是來自騰訊光子設(shè)計(jì)中心的GUI設(shè)計(jì)師Wenbin，在游戲行業(yè)有十年從業(yè)經(jīng)歷，參與過《全民超神》、《我的王朝》、《黎明覺醒》、《PUBG Mobile》等項(xiàng)目。很開心來到廣州與大家進(jìn)行這次分享，本次分享內(nèi)容主要是針對(duì)美術(shù)設(shè)計(jì)向的。
    下面從三個(gè)模塊來向大家介紹游戲的擬物化設(shè)計(jì)，分別是什么是擬物化設(shè)計(jì)，為什么要做擬物化設(shè)計(jì)，以及如何做擬物化設(shè)計(jì)。
    說到擬物化設(shè)計(jì)，首先要能夠區(qū)分?jǐn)M物化與扁平化。比如下圖中圖A便是擬物化設(shè)計(jì)，模擬了塔羅牌、鐘擺等現(xiàn)實(shí)事物；而圖B便是扁平化設(shè)計(jì)，界面主要用來凸顯角色信息。
    市面上有很多游戲都采用了擬物化設(shè)計(jì)，比如《爐石傳說》、《暗黑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í)帶來了對(duì)設(shè)計(jì)師手繪能力要求較高，同時(shí)對(duì)信息傳達(dá)有略微犧牲的缺點(diǎn)。綜合這些特點(diǎn)，不難看出擬物化設(shè)計(jì)更加適合于歷史題材、冷兵器戰(zhàn)爭題材、魔幻神話題材以及重度游戲性題材的游戲。
    為了加深大家的理解，我們再來對(duì)比看一些采用了扁平化設(shè)計(jì)的游戲，比如《守望先鋒》、《APEX》、《戰(zhàn)地》、《彩虹六號(hào)》等。綜合上述游戲的界面風(fēng)格，可以看出扁平化設(shè)計(jì)的特點(diǎn)是去除厚重的繁雜的裝飾，保留原始簡單的幾何形態(tài)，強(qiáng)調(diào)抽象、極簡、符號(hào)化，以及明快的色彩搭配。
    對(duì)于扁平化設(shè)計(jì)來說，優(yōu)點(diǎn)主要是讓信息直觀凸顯，但卻缺少裝飾和細(xì)節(jié)，缺乏視覺效果的沉浸式和情感化表達(dá)。綜合這些特點(diǎn)，可以看出扁平化設(shè)計(jì)更適合于現(xiàn)代未來戰(zhàn)爭、軍事科技、輕松休閑、體育競技類游戲。
    總的來說，擬物化和扁平化設(shè)計(jì)各有優(yōu)勢，也各有不足。但我認(rèn)為他們兩者并不沖突并不對(duì)立，而是彼此相互依存，雙方各有側(cè)重。在UI設(shè)計(jì)中，不可一味追求某一類設(shè)計(jì)，而摒棄另一類。
    現(xiàn)如今的美術(shù)人才會(huì)有各種組合能力，比如2D原畫設(shè)計(jì)能力、3D模型設(shè)計(jì)能力、UI動(dòng)效設(shè)計(jì)能力等，以下會(huì)著重以2D原畫和3D模型能力為基礎(chǔ)進(jìn)行介紹。
    進(jìn)行擬物化設(shè)計(jì)的動(dòng)機(jī)一方面是可以通過模擬真實(shí)物件，進(jìn)行藝術(shù)加工后，達(dá)到現(xiàn)實(shí)中看不到的藝術(shù)效果。具體來說就是模擬一些真實(shí)物件如寶石、木質(zhì)等物件的造型、材質(zhì)或光影，加工放大其中部分元素，并拋棄某些新的設(shè)計(jì)中所不需要的部分，做出符合設(shè)計(jì)需求的藝術(shù)化設(shè)計(jì)。
    進(jìn)行擬物化設(shè)計(jì)的動(dòng)機(jī)另一方面是可以更好地為玩家營造沉浸式情感表達(dá)。通過不同元素的組合，將情景化的界面賦予不同的視覺感受。
    此處為大家舉個(gè)例子說明。比如游戲商店界面的設(shè)計(jì)，從圖上可以看到初版設(shè)計(jì)比較中規(guī)中矩，后來基于希望界面的感官效果更加有趣，于是便參考現(xiàn)實(shí)中的店鋪原型，而優(yōu)化出了一版新的商店界面設(shè)計(jì)。新的設(shè)計(jì)中做了一個(gè)仿真的書架，旁邊擺放一只符合游戲形象的企鵝，既有趣且符合功能需求。

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

擬物化的設(shè)計(jì)原則需要遵循以下四點(diǎn)，分別是主次突出、統(tǒng)一性、習(xí)慣與認(rèn)知、代表玩家說話。下面結(jié)合實(shí)例為大家具體說明。
    1. 主次突出設(shè)計(jì)界面時(shí)不能喧賓奪主，要細(xì)節(jié)豐富但主次分明。下面舉例兩種不同的商店界面設(shè)計(jì)，第一種界面元素過多，讓人一眼看不到重點(diǎn)信息；而對(duì)比來說第二種界面既有設(shè)計(jì)感又突出了主體信息。
    2. 統(tǒng)一性界面設(shè)計(jì)的結(jié)構(gòu)和風(fēng)格要與游戲主題一致。這方面爐石做的非常好，各種界面的顏色和風(fēng)格都比較一致。
    3. 習(xí)慣與認(rèn)知不同人群擁有不同的成長背景，所以認(rèn)知有較大區(qū)別。比如年輕一代和老一代對(duì)于美的認(rèn)知就有所不同。所以做游戲ui設(shè)計(jì)時(shí)要了解到游戲定位的玩家群體，不同群體有不同審美認(rèn)知和接受度。
    4. 代表玩家說話我們來看糖果傳奇、暗黑3等游戲界面，可以看到不同的設(shè)計(jì)要素，比如鐵絲網(wǎng)、明度較高的色彩、幽詭的曲線等，這些會(huì)給玩家?guī)�來完全不同的氛圍感�?/span>
    下面為大家介紹擬物化的設(shè)計(jì)方法，主要包含以下五個(gè)方面，分別是外輪廓、體積感、空間層次、材質(zhì)、光影色彩。結(jié)合實(shí)例為大家具體說明。
    1. 外輪廓擬物化設(shè)計(jì)中外輪廓設(shè)計(jì)需飽滿，設(shè)計(jì)元素有理有據(jù)、有內(nèi)涵。從風(fēng)格上來說大體分有兩種外輪廓設(shè)計(jì)，一種是圓潤型輪廓，特點(diǎn)是比較Q萌，適合較卡通的界面設(shè)計(jì)；另一種是尖銳型輪廓，適合超寫實(shí)、戰(zhàn)爭、科幻等題材。在設(shè)計(jì)時(shí)需要根據(jù)游戲風(fēng)格運(yùn)用不同輪廓風(fēng)格。
    2. 體積感也就是物體所占空間的大小，是薄還是厚，是單一構(gòu)成或組合構(gòu)成。要根據(jù)界面的需要，把握體積感的設(shè)計(jì)。
    3. 空間層次也就是物件前后左右上下的距離，主體和陪襯的關(guān)系。在設(shè)計(jì)時(shí)要注意，有主次、有虛實(shí)、有景深、有穿插、有呼應(yīng)、有對(duì)比。
    4. 材質(zhì)當(dāng)我們的設(shè)計(jì)需要體現(xiàn)出一定的精度，或有別于其他較平常的設(shè)計(jì)時(shí)，材質(zhì)便是很重要的一環(huán)。材質(zhì)主要包括表面色彩、紋理、光滑度、反射、折射、發(fā)光度等要素。在設(shè)計(jì)時(shí)，為了讓材質(zhì)看起來更接近真實(shí)，需要遵循自然法則對(duì)這些要素進(jìn)行加工。比如說石頭上會(huì)出現(xiàn)一些隨機(jī)的裂縫，又比如金屬剛出廠時(shí)十分光滑、紋路清晰，但隨著時(shí)間流逝，會(huì)出現(xiàn)銹痕。但需要注意的一點(diǎn)是，材質(zhì)是附著于物體本身的，做設(shè)計(jì)時(shí)不要一味突出材質(zhì)。
    5. 光影色彩光影由光源、反光、環(huán)境光、投影構(gòu)成。如果做好了光影的處理，界面會(huì)呈現(xiàn)優(yōu)秀的氛圍感。比如爐石界面上的一束打光，細(xì)節(jié)處理到位，模擬了自然并加以了美化處理。但要注意，做光影設(shè)計(jì)時(shí)需要光源統(tǒng)一，符合邏輯，不可到處都是光影。
    基于上面的理論基礎(chǔ)，為大家?guī)�來一個(gè)我過往項(xiàng)目的界面設(shè)計(jì)經(jīng)歷，來幫助大家更好理解。這是當(dāng)時(shí)《全民超神》項(xiàng)目的一個(gè)圖標(biāo)需求，圖標(biāo)名叫做萬魔峽谷，在收到需求后，我先做了關(guān)鍵詞發(fā)散，然后尋找相近參考圖，之后出了一版草圖，最后依照以上五個(gè)方面對(duì)外輪廓、體積感、空間層次、材質(zhì)、光影進(jìn)行細(xì)化。
    接下來介紹擬物化的設(shè)計(jì)形式，主要為主題化設(shè)計(jì)。此處會(huì)為大家?guī)�來多個(gè)界面實(shí)例，通過對(duì)比來進(jìn)一步理解擬物化設(shè)計(jì)能帶來的情景化感受。
    案例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í)生活中勝利場景中的元素來設(shè)計(jì)。于是便聯(lián)想了一些勝利場景，譬如紅軍打仗歸來時(shí)騎的高頭大馬、拿破侖凱旋歸來時(shí)的形象。再根據(jù)整個(gè)游戲的故事背景及IP，發(fā)散出了一些與勝利相關(guān)的關(guān)鍵詞。
    最后勝利界面的終版設(shè)計(jì)如圖，保留了右側(cè)必要的信息區(qū)，在左側(cè)留出了較大空間來做視覺設(shè)計(jì)。在背景圖中渲染了騎馬凱旋歸來的勝利喜悅，并在右側(cè)圖標(biāo)上添加了西方文化中代表勝利的雄獅元素，輔以月桂、皇冠等裝飾，做出了一版充滿勝利氛圍感的界面。通過這個(gè)案例，希望向大家說明，如果想鍛煉自己成為高階設(shè)計(jì)師，那么設(shè)計(jì)界面時(shí)不僅要滿足策劃的基本需求，更要盡量做到讓界面更加有趣，甚至附有靈魂。
    正式視覺

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

交互稿

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

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

視覺稿

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

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

案例4：《Pubg Mobile》的一次重大活動(dòng)。最后重點(diǎn)來說下《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ì)；第三版營造了一種封印的氣息，五個(gè)皮膚角色等待玩家的交互操作將其激活；最后一版考慮到“血誓”的罰罪者身份，模擬教堂那種天光的效果，并營造了逆光的環(huán)境氛圍。最終在綜合了多方面考慮后，敲定了第四版方案。
    方案草圖
    方案確定后，就開始下一步細(xì)化工作，考慮到活動(dòng)會(huì)設(shè)置一個(gè)可視化抽獎(jiǎng)環(huán)節(jié)，需要做3D的轉(zhuǎn)盤展示，便拆解了轉(zhuǎn)盤的細(xì)節(jié)比如材質(zhì)、花紋、三維面等方便建模參照。
    三維拆解圖
    一系列設(shè)計(jì)工作后，最終呈現(xiàn)出如圖的效果，在玩家未操作時(shí)，皮膚角色身后的大門緊閉，玩家點(diǎn)擊抽取后，大門打開投射出束光，緊接著鏡頭推進(jìn)來到了抽獎(jiǎng)轉(zhuǎn)盤界面，五個(gè)半身像代表著五個(gè)獎(jiǎng)池。整個(gè)界面富有極強(qiáng)的渲染力和沉浸感。
正式稿

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

本文由培訓(xùn)無憂網(wǎng)長沙牛耳教育課程顧問老師整理發(fā)布，希望能夠?qū)ο雲(yún)⒓娱L沙UI設(shè)計(jì)培訓(xùn)的學(xué)生有所幫助。更多課程信息可關(guān)注培訓(xùn)無憂網(wǎng)電腦IT培訓(xùn)或添加老師微信：15033336050

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://m.hebeijilong.cn/news-id-11339.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注UI設(shè)計(jì)頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050