PUBG Mobile主題UI設計：廢土藝術風格探索

以下文章來源於光子設計中心 ，作者木木三
文丨木木三、加薪、Alphonse


一、廢土藝術風格

01、廢土定義

廢土題材作為科幻題材系統下的一個子型別，通常探討的是文明在經歷巨大劫難之後的變遷和末日浩劫後的世界，是表現一種虛構的世界中，人類生存環境受到嚴重破壞，倖存者在殘酷環境中掙扎求存的狀態。常見的型別有：隕石行星衝撞、核災難、自然毀滅性疾病、人工生化危機、外星人入侵、人工智慧覺醒與黑化、物種變異、超級自然災難、超自然現象、宗教式的終極審判等

02、世界觀的型別

輕度損壞：這種型別的末日世界通常是來自非物理的損壞，比如病毒爆發、核武器汙染、生化危機等。在這樣的設定下，大多數硬表面的結構、建築、汽車和物件等都只遭到輕微的損壞，核心結構仍然保留。

中度、重度損壞：這種型別的末世，主要源於核戰爭、地震、外星人入侵、海嘯洪水、流星隕落等大災難，而導致人類和其他生物的滅亡。環境被大幅度破壞，極端的天氣，整個世界呈現極度的破損狀態。（如瘋狂麥克斯/未來水世界等）



二、PUBGM廢土主題UI設計

PUBG MOBILE每一期的絕地通行證（ROYALE PASS，下文統一簡稱RP）主題都是獨立的包裝形式，與遊戲核心世界觀沒有強關聯，所以給了RP主題系列更自由的設計空間。

01、RP賽季世界觀

PUBG MOBILE第十賽季的主題是末日廢土，定義在世界戰爭之後造成中輕度的破壞，水資源匱乏，沙漠環境惡劣，世界文明傾塌落陷，生存下來的人們在沙漠廢墟里挖掘出可利用物資進行生存鬥爭與權利的重組。


02、PUBGM廢土風的設計原則

生存本能驅使的產物

在這個世界觀下，人們使用常人無法預料到的物件（隨機物件），通常是經過熔鍊、貼合、纏繞、混合等方式把不同的物件組合在一起。所以造型粗糙且不符合常理。


利用好僅有的資源

在廢土世界下，並不是擁有精良的製造工藝和豐富的供應商，他們很難找到理想的資源，但是要想達到你的目的，常常人類需要利用好身邊的既有資源。



過度誇張的設計

在末日環境下，所有的設計都為了生存，外觀或者實用度都是，外觀上的誇張可以給遇到的敵人產生恐懼感，實用度上人類需要多個備用計劃，來應對環境的變化，因此設計相對複雜和混搭。



視覺元素在使用破舊/鏽跡/拼接/噴濺/塗鴉等搭建出廢土世界的環境，能看見各種帶有鏽跡、破損修補的金屬 、鐵網、管道等，通過焊接、釘子各種手段熔鍊到一起，加入噴繪展示人類生存不屈的意志。






主題背景關鍵詞：

低科技  戰損  腐蝕鐵鏽

塗裝   霓虹燈管   烈日沙漠環境

03、主題元素分析及風格定義

低科技

雖然時間線往前推進了，但是由於戰爭的摧毀導致科技程度衰退，所以需要控制高科技表現的出現。


戰損和腐蝕

戰爭導致環境的破壞和惡化，惡劣的氣候腐蝕著一切事物，金屬被氧化，焊接和熔鍊各種金屬碎片是主流手段。


塗裝

在廢土的世界中，一個人是很難生存下來的，所以通常很多人就會聚集在一起，成立一個組織進行防禦或者掠奪。不同的人聚集在一起就需要能識別是敵是友的標誌，所以這也是非常重要的元素之一。



霓虹燈管

在各種金屬和荒漠包裝的世界中，霓虹燈代表著生活，生機，這裡會有人們去聚集的酒吧或者商店，他一定程度上代表著現代人類的光明和希望、生存的不屈意志。


烈日沙漠

通常沙漠給人一種生態惡劣的感受，在烈日下的沙漠更能奪人性命，體現了生存環境的極其嚴苛，更加引起使用者的共鳴。


04、RP系統主logo設計

結合了故事背景，通過對關鍵詞的提取和分析，我們的設計進入到腦暴階段，其實市面上各類風格的末日廢土視覺種類已經很全面了，類似《無主之地》美漫風格、《瘋狂麥克斯》超寫實的視覺效果深入人心，那麼我們需要結合PUBGM的遊戲題材（寫實題材）進行自我包裝。

以下是部分設計過程展示：


最終確定稿：



三、延續案例設計分析

RP系統購買介面 & 獎勵介面：








資源兌換活動：


上圖是一個收集資源兌換服裝的活動介面，營造一個荒野中資源匱乏的環境。破舊不堪的荒野加油點，蕭條幹枯的氛圍為主要基調，以加油機作為主要的UI承載區域，通過收集特定資源來兌換物品，與現實生活中你用貨幣去加油站進行補給同理。

全服購買：


賽季首充：


不放回抽獎：




黑五折扣活動：

黑色星期五的活動設計渲染的是一種美國80年代地下酒吧的氛圍，正好來印證末日世界中人們輕鬆休閒的環境，他們白天為了生存進行反抗或者掠奪，到了晚上就可以來酒吧放鬆。


設計手法上用CD機，復古電視，霓虹燈，水泥磚牆等為設計裝飾元素，在第一次進入這個系統的時候會有一個折扣TIPS，但是如果直接用彈窗來實現會顯得很乾很無趣。所以結合了一個復古的CD機器，來營造一氛圍，也可以加深你對於這次獲得所獲得獨有的折扣比，會有更深刻的記憶點



圖鑑、活動：



值得一提的是，介面中的廢土風道具，也是光子設計中心的設計師們繪製的！對題材的深度理解和掌控，加上高超的手繪能力，UI設計師也可以做出精彩的2D概念設定。本期先給大家展示其中一張。


四、品牌運營設計分析

RP設計

1、用較為飽和的顏色並結合泥土沙塵方向，從聚合到消散，設計立體的環繞形文字。


2、文字延展到主KV。


3、主題商品分前後展示，前方採用區域性特寫，遠方的商品營造情節感。


4、用鋼鐵、木材、霓虹等元素組合成的概念化資訊牌，配合獎勵展示。


5、依舊沿用賽季的破舊的告示牌，鏈條、排氣，用噴火動效點名該主題的狂野風格


賽季包裝

1、整體採用鏽跡金屬、布料、木材和霓虹這些比較粗獷又對衝的素材，成為西部廢土風格的主元素。結合陽光的反射展現一些光澤，加上區域性描邊，破開廢土的部分頹廢感。


2、結合載具的排氣管，輪胎等物件，也是設計元素的延伸。


3、賽季段位展示。


4、商品展示。


5、一些破舊的告示牌、鏈條，和顯得狂野的噴火效果，配上主角，繼續營造廢土風氛圍。


五、寫在最後

本篇我們嘗試對廢土藝術風格的概念做了總結，結合對PUBG Mobile第十賽季的主題UI案例分析，可以看出廢土風的設計手段主要是通過對故事背景的分析和拆解，再進行重組，進而形成自己的主題風格。但設計風格因故事背景的不同在視覺呈現上又較為多樣化。


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