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