游戏开发论坛

 找回密码
 立即注册
搜索
查看: 7252|回复: 0

PUBG Mobile主题UI设计:废土艺术风格探索

[复制链接]

4万

主题

4万

帖子

8万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
85217
发表于 2020-11-9 14:31:44 | 显示全部楼层 |阅读模式
以下文章来源于光子设计中心 ,作者木木三
文丨木木三、加薪、Alphonse

“废土”作为一种艺术风格在二战后开始大行其道,起源来自人类对核战危机的忧虑。直到上个世纪末,随着电影《疯狂的麦克斯》和游戏《废土》的诞生,“废土”这个词汇作为一种艺术形式被人们认知和热捧。生存与毁灭是人类历史上长久以来的议题之一,废土即是毁灭之后的重生,依然是寓意人类对美好的向往。

一、废土艺术风格

01、废土定义

废土题材作为科幻题材系统下的一个子类型,通常探讨的是文明在经历巨大劫难之后的变迁和末日浩劫后的世界,是表现一种虚构的世界中,人类生存环境受到严重破坏,幸存者在残酷环境中挣扎求存的状态。常见的类型有:陨石行星冲撞、核灾难、自然毁灭性疾病、人工生化危机、外星人入侵、人工智能觉醒与黑化、物种变异、超级自然灾难、超自然现象、宗教式的终极审判等

02、世界观的类型

轻度损坏:这种类型的末日世界通常是来自非物理的损坏,比如病毒爆发、核武器污染、生化危机等。在这样的设定下,大多数硬表面的结构、建筑、汽车和物件等都只遭到轻微的损坏,核心结构仍然保留。

中度、重度损坏:这种类型的末世,主要源于核战争、地震、外星人入侵、海啸洪水、流星陨落等大灾难,而导致人类和其他生物的灭亡。环境被大幅度破坏,极端的天气,整个世界呈现极度的破损状态。(如疯狂麦克斯/未来水世界等)

微信图片_20201109141726.jpg

微信图片_20201109141734.jpg
[部分图片来自网络]

二、PUBGM废土主题UI设计

PUBG MOBILE每一期的绝地通行证(ROYALE PASS,下文统一简称RP)主题都是独立的包装形式,与游戏核心世界观没有强关联,所以给了RP主题系列更自由的设计空间。

01、RP赛季世界观

PUBG MOBILE第十赛季的主题是末日废土,定义在世界战争之后造成中轻度的破坏,水资源匮乏,沙漠环境恶劣,世界文明倾塌落陷,生存下来的人们在沙漠废墟里挖掘出可利用物资进行生存斗争与权利的重组。

微信图片_20201109141736.jpg
[ 本期设定图 ]

02、PUBGM废土风的设计原则

生存本能驱使的产物

在这个世界观下,人们使用常人无法预料到的物件(随机物件),通常是经过熔炼、贴合、缠绕、混合等方式把不同的物件组合在一起。所以造型粗糙且不符合常理。

微信图片_20201109141738.png

利用好仅有的资源

在废土世界下,并不是拥有精良的制造工艺和丰富的供应商,他们很难找到理想的资源,但是要想达到你的目的,常常人类需要利用好身边的既有资源。

微信图片_20201109141739.jpg

微信图片_20201109141741.jpg

过度夸张的设计

在末日环境下,所有的设计都为了生存,外观或者实用度都是,外观上的夸张可以给遇到的敌人产生恐惧感,实用度上人类需要多个备用计划,来应对环境的变化,因此设计相对复杂和混搭。

微信图片_20201109141743.jpg

微信图片_20201109141745.jpg

视觉元素在使用破旧/锈迹/拼接/喷溅/涂鸦等搭建出废土世界的环境,能看见各种带有锈迹、破损修补的金属 、铁网、管道等,通过焊接、钉子各种手段熔炼到一起,加入喷绘展示人类生存不屈的意志。

微信图片_20201109141747.jpg

微信图片_20201109141749.jpg

微信图片_20201109141752.jpg

微信图片_20201109141755.jpg

微信图片_20201109141757.jpg

主题背景关键词:

低科技  战损  腐蚀铁锈

涂装   霓虹灯管   烈日沙漠环境

03、主题元素分析及风格定义

低科技

虽然时间线往前推进了,但是由于战争的摧毁导致科技程度衰退,所以需要控制高科技表现的出现。

微信图片_20201109141759.jpg

战损和腐蚀

战争导致环境的破坏和恶化,恶劣的气候腐蚀着一切事物,金属被氧化,焊接和熔炼各种金属碎片是主流手段。

微信图片_20201109141801.jpg

涂装

在废土的世界中,一个人是很难生存下来的,所以通常很多人就会聚集在一起,成立一个组织进行防御或者掠夺。不同的人聚集在一起就需要能识别是敌是友的标志,所以这也是非常重要的元素之一。

微信图片_20201109141802.jpg

微信图片_20201109141804.jpg

霓虹灯管

在各种金属和荒漠包装的世界中,霓虹灯代表着生活,生机,这里会有人们去聚集的酒吧或者商店,他一定程度上代表着现代人类的光明和希望、生存的不屈意志。

微信图片_20201109141806.jpg

烈日沙漠

通常沙漠给人一种生态恶劣的感受,在烈日下的沙漠更能夺人性命,体现了生存环境的极其严苛,更加引起用户的共鸣。

微信图片_20201109141808.jpg

04、RP系统主logo设计

结合了故事背景,通过对关键词的提取和分析,我们的设计进入到脑暴阶段,其实市面上各类风格的末日废土视觉种类已经很全面了,类似《无主之地》美漫风格、《疯狂麦克斯》超写实的视觉效果深入人心,那么我们需要结合PUBGM的游戏题材(写实题材)进行自我包装。

以下是部分设计过程展示:

微信图片_20201109141810.jpg

最终确定稿:

微信图片_20201109141812.jpg

微信图片_20201109141814.jpg

三、延续案例设计分析

RP系统购买界面 & 奖励界面:

微信图片_20201109141818.jpg

微信图片_20201109141820.jpg

微信图片_20201109141821.jpg

微信图片_20201109141823.jpg

微信图片_20201109141825.jpg

微信图片_20201109141827.jpg

微信图片_20201109141828.jpg

资源兑换活动:

微信图片_20201109141830.png

上图是一个收集资源兑换服装的活动界面,营造一个荒野中资源匮乏的环境。破旧不堪的荒野加油点,萧条干枯的氛围为主要基调,以加油机作为主要的UI承载区域,通过收集特定资源来兑换物品,与现实生活中你用货币去加油站进行补给同理。

全服购买:

微信图片_20201109141832.jpg

赛季首充:

微信图片_20201109141833.jpg

不放回抽奖:

微信图片_20201109141835.jpg

微信图片_20201109141837.jpg

微信图片_20201109141838.jpg

黑五折扣活动:

黑色星期五的活动设计渲染的是一种美国80年代地下酒吧的氛围,正好来印证末日世界中人们轻松休闲的环境,他们白天为了生存进行反抗或者掠夺,到了晚上就可以来酒吧放松。

微信图片_20201109141840.jpg

设计手法上用CD机,复古电视,霓虹灯,水泥砖墙等为设计装饰元素,在第一次进入这个系统的时候会有一个折扣TIPS,但是如果直接用弹窗来实现会显得很干很无趣。所以结合了一个复古的CD机器,来营造一氛围,也可以加深你对于这次获得所获得独有的折扣比,会有更深刻的记忆点

微信图片_20201109141841.jpg

微信图片_20201109141843.jpg

图鉴、活动:

微信图片_20201109141845.jpg

微信图片_20201109141846.jpg

值得一提的是,界面中的废土风道具,也是光子设计中心的设计师们绘制的!对题材的深度理解和掌控,加上高超的手绘能力,UI设计师也可以做出精彩的2D概念设定。本期先给大家展示其中一张。

微信图片_20201109141848.jpg

四、品牌运营设计分析

RP设计

1、用较为饱和的颜色并结合泥土沙尘方向,从聚合到消散,设计立体的环绕形文字。

微信图片_20201109141849.jpg

2、文字延展到主KV。

微信图片_20201109141851.jpg

3、主题商品分前后展示,前方采用局部特写,远方的商品营造情节感。

微信图片_20201109141853.jpg

4、用钢铁、木材、霓虹等元素组合成的概念化信息牌,配合奖励展示。

微信图片_20201109141856.jpg

5、依旧沿用赛季的破旧的告示牌,链条、排气,用喷火动效点名该主题的狂野风格

微信图片_20201109141857.jpg

赛季包装

1、整体采用锈迹金属、布料、木材和霓虹这些比较粗犷又对冲的素材,成为西部废土风格的主元素。结合阳光的反射展现一些光泽,加上局部描边,破开废土的部分颓废感。

微信图片_20201109141859.jpg

2、结合载具的排气管,轮胎等物件,也是设计元素的延伸。

微信图片_20201109141901.jpg

3、赛季段位展示。

微信图片_20201109141903.jpg

4、商品展示。

微信图片_20201109141904.jpg

5、一些破旧的告示牌、链条,和显得狂野的喷火效果,配上主角,继续营造废土风氛围。

微信图片_20201109141906.jpg

五、写在最后

本篇我们尝试对废土艺术风格的概念做了总结,结合对PUBG Mobile第十赛季的主题UI案例分析,可以看出废土风的设计手段主要是通过对故事背景的分析和拆解,再进行重组,进而形成自己的主题风格。但设计风格因故事背景的不同在视觉呈现上又较为多样化。

文/木木三
来源:腾讯游戏学院
原文:https://mp.weixin.qq.com/s/nZ5qW8TwquZWtayc2lZNnA
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

作品发布|文章投稿|广告合作|关于本站|游戏开发论坛 ( 闽ICP备17032699号-3 )

GMT+8, 2024-10-7 09:17

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表