別隻關注扁平化！還有這類常用的UI設計方法值得學習

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的轉盤展示，便拆解了轉盤的細節比如材質、花紋、三維面等方便建模參照。


一系列設計工作後，最終呈現出如圖的效果，在玩家未操作時，皮膚角色身後的大門緊閉，玩家點選抽取後，大門開啟投射出束光，緊接著鏡頭推進來到了抽獎轉盤介面，五個半身像代表著五個獎池。整個介面富有極強的渲染力和沉浸感。




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

在分享結束後，Wenbin也細緻耐心地解答了現場觀眾的提問，我們同樣整理了部分問答。

Q1：策劃提出需求時，是否需要提出一些設計風格的建議？如果提出的話會對UI工作有什麼影響嗎？

A1：策劃提需求時，如果能提出更明確的需求取向的話，對美術來說是正向的。但更重要的是儘可能把需要的功能點、資訊點都提清楚，這樣可以避免在介面效果圖成型後，還要做反覆的修改和增減的情況。


來源：騰訊遊戲學堂
原文：https://mp.weixin.qq.com/s/IWI5qdmrP88Bjb6Oaahjww