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

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

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

案例2：《Pubg Mobile》中地鐵玩法的任務界面。當時《PubgMobile》要新推出地鐵玩法，在設計對應的任務界面時，我認為《Pubg Mobile》的風格并不適合采用扁平化設計，看起來會比較普通、缺少趣味性。

交互稿

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

最終在任務界面做出了一個類似電視機的設計。并且值得一提的是，在交互操作方面也做了擬真化設計，比如玩家的操作會帶來電視機扳手的旋轉，而扳手的旋轉對應著頁簽的切換。當時推出這款設計后，許多玩家被這樣的交互操作所吸引，一度導致電視機扳手的按鈕點擊率非常高。

視覺稿

案例3：《Pubg Mobile》在“黑五”期間推出的打折促銷運營活動界面。當時在接到需求后，考慮到玩家對于獎券的設計已經審美疲勞，于是我們打算摒棄常見的抽獎券形式。既然是“黑五”活動，我便充分調查了“黑五”的歷史及傳統，了解到“黑五”名字的由來是因為人們的大量囤貨行為發生在夜晚，并且商家收益后會用黑筆記錄盈利，于是便引入了“黑夜”這個設計元素。同時結合《Pubg Mobile》7-80年代的時代背景，做出了一些復古的如霓虹燈的元素。

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

案例4：《Pubg Mobile》的一次重大活動。最后重點來說下《Pubg Mobile》的一次重大活動，首先為大家介紹一下活動的背景。活動周期為一年兩次，在活動期間會一次性推出五個皮膚，其中主推的是一款“血誓”圣裝，這款皮膚期望塑造的形象是在暗夜中維護正義與秩序的審判者。
    接到上述需求后，我整理了已知的信息，根據皮膚角色的身份、性格，背景故事以及稀有度，做出了四版活動界面方案設計。第一版強調主推的“血誓”皮膚，其余四款皮膚圍繞其身側，如暗夜仆從；第二版采用了扁平化設計；第三版營造了一種封印的氣息，五個皮膚角色等待玩家的交互操作將其激活；最后一版考慮到“血誓”的罰罪者身份，模擬教堂那種天光的效果，并營造了逆光的環境氛圍。最終在綜合了多方面考慮后，敲定了第四版方案。
    方案草圖
    方案確定后，就開始下一步細化工作，考慮到活動會設置一個可視化抽獎環節，需要做3D的轉盤展示，便拆解了轉盤的細節比如材質、花紋、三維面等方便建模參照。
    三維拆解圖
    一系列設計工作后，最終呈現出如圖的效果，在玩家未操作時，皮膚角色身后的大門緊閉，玩家點擊抽取后，大門打開投射出束光，緊接著鏡頭推進來到了抽獎轉盤界面，五個半身像代表著五個獎池。整個界面富有極強的渲染力和沉浸感。
正式稿

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

本文由培訓無憂網長沙牛耳教育課程顧問老師整理發布，希望能夠對想參加長沙UI設計培訓的學生有所幫助。更多課程信息可關注培訓無憂網電腦IT培訓或添加老師微信：15033336050

      注：尊重原創文章,轉載請注明出處和鏈接 http://m.dedgn.cn/news-id-11339.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注UI設計頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050