人气 208

[GUI] 废土艺术风格丨主题UI探索 [复制链接]

九艺网 2020-12-19 10:19:29

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?注册

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


一、废土艺术风格

01、废土定义

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

02、世界观的类型

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

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

141152ompw4nm4pu45spds.jpg

141152e8qinrnfghnqgl9p.jpg

141152pklllktftiypkfl3.jpg

二、PUBGM废土主题UI设计

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

01、RP赛季世界观

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

141153gw0q1lrru3n4ln12.jpg

02、PUBGM废土风的设计原则

生存本能驱使的产物

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

141153v5nsg01bsdksrn6d.jpg

利用好仅有的资源

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

141154j1o44ppp41313f3z.jpg

141154vrlirrkj41zmuz77.jpg

过度夸张的设计

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

141155j1xq1vx4a4c1kqxg.jpg

141155c88z9avxvipppzpw.jpg

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

141155cfea0kaprptuprpt.jpg

141156zaa6jlw67alrquxa.jpg

141156t49iimtmm9mompdw.jpg

141157avhc1j99sktz0tot.jpg

141157bm1toirdtrur13m1.jpg

主题背景关键词:

低科技  战损  腐蚀铁锈

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

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

低科技

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

141158e4dg4eyfb3hh4giy.jpg

战损和腐蚀

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

141158bxf0vbsbtz1cbzw1.jpg

涂装

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

141159cnyvjsi7v39yygxg.jpg

141159qrbqdq81jdhjpqd1.jpg

霓虹灯管

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

141159xvdw9vwcdtewd7f2.jpg

烈日沙漠

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

141200mao44l13qll3omeg.jpg

04、RP系统主logo设计

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

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

141201ab54ibw7979w5rr5.jpg

最终确定稿:

141201texxa3v4jxpj22mz.jpg

141202seuu0wcz8quviliu.jpg

三、延续案例设计分析

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


141203a7wygoug9l8m9m8q.jpg

141203ubv0natfup0vtdbt.jpg

141204m9f929r3d2hdrhnx.jpg

141205x81miay2ztmm2tyt.jpg

141205u77vl3pq77l22o7y.jpg

141206enocxohhizi7xy5y.jpg

141206suoeoldnhvdvovhx.jpg

资源兑换活动:

141207bmyrhrs3jojrrpxl.jpg

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

全服购买:


141207pp9xpnk0csc9kpzw.jpg

赛季首充:

141208i1t1j178j4hzsd93.jpg

不放回抽奖:

141208ktfz8xyw55xtix27.jpg

141209rkfqu8q4araum968.jpg

141209ewhjhehrmuhsj6ew.jpg

黑五折扣活动:

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

141209nicgrucunw01gfqb.jpg

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

141210ziytuu50qh125eti.jpg

141210qr5qi0557503q587.jpg

图鉴、活动:

141211sd44d6b64d6lly5d.jpg

141211lsenskxfskd8psns.jpg

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

141212l3wz6m22wkmpm53t.jpg

四、品牌运营设计分析

RP设计

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

141213v2z4tti4ckzjzzjs.jpg

2、文字延展到主KV

141213ryh22o6yh6y96oo6.jpg

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

141214g2xidpnxystyngse.jpg

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

141214htcf7bcb3174a1zo.jpg

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

141214we2y2fv4vr3ryuzi.jpg

赛季包装

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

141215ni8v14cjre4gvvfu.jpg

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

141215icgyzdf3w67z5wqj.jpg

3、赛季段位展示。

141216vdwmxodidt25zw9w.jpg

4、商品展示。

141216nnnuffnnjk7fkfj7.jpg

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

141217s9bka1qc6quc5tk6.jpg

五、写在最后

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


来源:光子设计中心
原文:https://mp.weixin.qq.com/s/ZLiTS1QxmwsuNLv4h70Jxg
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

QQ|手机版|小黑屋|九艺游戏动画论坛 ( 津ICP备2022000452号-1 )

GMT+8, 2024-3-29 16:11 , Processed in 0.128733 second(s), 27 queries .

Powered by Discuz! X3.4  © 2001-2017 Discuz Team.