【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)


3楼猫 发布时间:2022-12-13 18:35:32 作者:Jake-Fu Language

《女神异闻录5》是一款具有独特风格的RPG游戏。其极具风格化的界面和配乐几乎是所有玩家的第一印象。玩家几乎每一次操作,都有伴随而来的大量界面之间的切换动画;几乎所有界面内包含的元素也都和游戏故事、主题等有关。


【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第0张

我想以自己浅薄的艺术底蕴,斗胆赏析一下这款游戏的界面,权当抛砖引玉。

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第1张

目录

注意

整体感受、字体

标题菜单

系统菜单

Skill 技能

Item 物品

Persona 人格面具

Status 队伍

Coopration 协助人

Request 查看请求

Calender 查看预定事项

System 系统

参考资料、来源

End


注意

1.     本文基于《女神异闻录5 皇家版》而制作,除标题界面外的主要界面部分和原版是相同的。

2.     文中包含大量图片和GIF动图,请确保流量充足或连接WIFI网络观看。

3.     游戏内主角的名称由玩家自定,这里我为了指代明确,一些场景中以“雨宫莲“称之。

4.     为了解释界面的元素,会需要讲述一些游戏剧情相关内容,但不会影响实际的游戏体验。

5.     若手头有《女神异闻录5》或《女神异闻录5 皇家版》,强烈推荐您一边阅读,一边在游戏内操作,阅读体验更佳。

整体感受、字体

《女神异闻录5》的 UI 设计具有强烈的波普朋克风格。使用红黑主色调,一个深沉,一个抓眼,配之以尖锐的图形,给人印象可以说是相当深刻。

游戏内几乎所有标题栏的字,各个字的大小、粗细、字体、颜色、底色、倾斜程度等版式都不完全相同。尽管如此,但总体黑白的底色也不至于让玩家迷失其中而找不到所需的项目。如果说工整的文字让人感觉是和谐一致的,那么对应的,游戏内的字体展现了一种叛逆。跃动的字体展现了怪盗的花哨行径,带有一种华丽感。

如果找一个代表的话,我选择游戏中多次出现的“预告信”。上边的字看起来是从各个地方拼贴出来的,给人一种叛逆的感觉。

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第2张

预告信,来自《女神异闻录5 动画版》


这种字体的来源之一是一些早期的犯罪片,罪犯需要发出赎金信,但又不希望自己的笔迹被人认出,于是就选择从书籍、报刊、杂志等上剪下单字拼贴而成整个信件。展示的效果就是不同版式的单字拼贴出一句话,这种字体被称为「Ransom Note Tex」,我们暂且先称其为“绑架字体”吧。

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第3张

来自于1998年科恩兄弟导演的《谋杀绿脚趾》(The Big Lebowski)中勒索信情节。

这个拼贴字体另一个参考应该是来源于上世纪六七十年代伴随朋克运动诞生的Zine文化。这是一种展示拼贴艺术、以胶水和打印机拼凑出来的书籍。

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第4张

与普通的杂志相比,Zine更偏向小众的独立出版物,通过夸张对比色的图片更多地表达个性和看法。因此,这样的风格又带上了一种叛逆的色彩。

游戏里每个人物的故事都是以压迫——冲突——抵抗的形式去完成的,贯彻游戏的理念像是一种反抗精神。界面内文字作为玩家获得信息的载体,也被用于了游戏主题的表达,而且最终的成效非常不错。


标题菜单

由于P5R已经登陆了PC,包括笔者在内有很多人是通过这种方式玩到的《女神异闻录5》,故这里也以皇家版为主。


【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第5张

雨宫莲先从林立的高楼中用飞索荡出,然后落到地面,显示游戏标志。

该场景在涩谷中央广场。


New Game 开始新游戏

切到New Game时,近景芳泽霞从屏幕右侧通过侧翻动作移动到屏幕左侧,奥村春在稍远一些的屏幕右侧,同时背后大楼的NEW GAME涂鸦风格文字被打上灯光。

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第6张

确认New Game时,镜头转向画面中央的一块屏幕,屏幕显示当前摄像机的画面。


Load Game 继续游戏

切到Load Game时,镜头转向画面右侧大楼的雨棚上,高卷杏和喜多川祐介在上边。写有LOAD GAME的预告信名片从高卷杏手中转出。

确认Load Game时,选项卡从画面右侧移动到中央。

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第7张

每个存档栏位的样式,是以线圈笔记本的形式制作的,我们看到的是每一页纸的左下角。

联系剧情,我们知道主角在被送到东京后,佐仓惣治郎要求他为每一天做记录,给了他一个笔记本,同时游戏内介绍了关于存档的教学内容。也就是说,笔记本就是存档,游戏的视觉元素和故事结合在了一起。


My Palace 我的宫殿

皇家版中,追加了我的宫殿,用于存放各种收集品和游戏内置成就的场所。

镜头转向自动售货机,同时雨宫莲从屏幕左侧走入屏幕内。

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第8张

这个画面,从左到右,从近到远的人物是:雨宫莲、坂本龙司、明智吾郎、摩尔加纳、新岛真。

这里是主角的宫殿,所以一定需要有主角在场。而且在我的宫殿中,用来设置宫殿布景等的装置也是自动售货机。


Config 设置

切换到设置选项时,镜头转向佐仓双叶,她打了一个响指,同时左侧的大楼上各个房间的灯光组成“CONFIG“。

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第9张

这个界面和故事有很高的相性,她是精通心理学,情报学,程序设计,尤其是黑客技术的天才少女,这个画面看起来就好像是她把整座大楼的电力系统劫持了一样。


系统菜单

Command 指令界面

 

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第10张

主角伸出手,拍向屏幕。

中央有一条白线,充当左右部分的分隔和对选项的视觉引导。所有选项都排布在白线左侧,当前选中的选项由变形的色块突出。

如果当前选项并非活动的,则色块会变为黑白同时停止变形运动。(如:装备——任意角色)

当前选中选项由变形色块突出,这用在游戏里非常多的地方。

返回到上一级时,用了类似刷子擦除画面的效果。


Skill 技能

主角抬脚踩到屏幕右下角的一条线上,眼睛向右下方看。跟着他的视线就能看到可使用技能列表。

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第11张

选择使用哪一个技能时,脚踩得更深了一些。选中的人物头像会随时间跳动。


Item 物品

主角挥手,其右手托起所有人的HP、SP量表在屏幕左侧,头略向屏幕右侧看。

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第12张

顺着他的眼神,就能看到所持有的物品列表。

可以使用的物品中,大多数是药品。主角的表情就像在说“要吃什么呢?”


Equip 装备

中间的白线旋转,主角同时持手枪指向屏幕右下方。

那条白线依然起到了视觉引导(所有角色名称都在中间的区域)

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第13张

选择更换一名角色身上的哪一件装备时,主角的眼睛离手枪更近,相比上一级的画面,就像是仔细端详着武器一样。

 

再继续,主角原本手中的手枪变成了子弹,被弹了出去。

另外,如果是P5原版,远程武器会在子弹上显示当前剩余弹量。

原版的子弹每次进入/退出异世界才会重置;但皇家版中,子弹每场战斗后都会重置,也就根本没必要显示当前弹量了(在这里就算能看到也肯定是满的,毫无意义)。


Persona 人格面具

主角挥手转身(像是摘掉面具的动作一样),离开屏幕,手的动作引出屏幕中的白色带。

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第14张

查看人格面具状态时,白色带的变换引出该面具的抗性表,同时将面具模型包了起来。


Status 队伍

随着中间的白线旋转,主角把腿搭载了什么东西上,眼睛看着屏幕左边(也就是角色列表)。

切换到战术指示时,主角把手靠近脑袋,好像在想着什么。

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第15张

查看每名角色的状态时,右侧角色的画像,是以“悬赏令”的形式设计的,人物画像下方数字则是该角色总共获得的经验值(对于悬赏令来说,通常这里是标明赏金的)。

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第16张

游戏内界面

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第17张

悬赏令,来自《荒野大嫖客2》

悬赏令这种情节我们可以从很多西部片里看见,画像是通缉犯的头像,下边标明赏金。

怪盗团的行径“改心“实际上是脱离法律之外的”私刑“,而且游戏故事到了中后段后,怪盗团也真的会被列为通缉对象。这里使用悬赏令来展示人物的画像,暗示了游戏故事情节,并且强化了游戏中”反叛“的基调。


Cooperation 协助人关系

浏览所有角色的协助人等级(以下简称coop)时,雨宫莲看向左下角,各个协助人的选项卡位于左侧。

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第18张

选择某一个协助人后,雨宫莲转身,其背后便是对应角色的画像。主角和协助人背靠背,容易让人想到他们之间互相信赖的关系。


Request 查看请求

雨宫莲侧身到画面左侧,用手机浏览怪盗ch

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第19张

这是由三岛设立的网站,用于收集请求和委托。右侧就是委托列表,我们的主角看到的东西。

查看详情时,就好像是有一张纸从屏幕底部旋转到屏幕右侧,然后显示任务状态。


Calender 查看预定事项

位于中央的白线右移,以其为分割,左侧为黑色背景的日历,右侧为白色显示该日的详情。

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第20张

可以通过这个系统查看之前每一天都做了什么。所做的事情显示在屏幕右下的笔记本上。还记得之前说佐仓惣治郎让雨宫莲每天记录的事情吗?这个系统也和故事结合起来了。


System 系统

【PC游戏】热情之红,反抗之心!——《女神异闻录5》界面赏析(上)-第21张

选择后,主角会使用绳索从画面左侧荡到屏幕右侧,这个画面是他正在向右边荡的时候。

同时绳索起到引导线作用,帮助玩家确认有用的选项位置。

这个菜单内再继续选择,主角都会荡出屏幕,然后从右侧转身向左侧跳出,随后玻璃破碎,显示具体内容。有时还会出现令人发笑的翻车场面:主角飞索失败,撞到屏幕上导致玻璃破碎。


参考资料、来源

https://indienova.com/indie-game-development/p5-ui-design/

浅谈 Persona5 UI #1:HowPop X Punk?!

 

https://cowlevel.net/article/2012502

Persona5 UI 解析视频 记录

 

https://www.youtube.com/watch?v=DxOGkhLfPf8

Examining Persona 5's Menus - Video Noteson P5's UI


End

下半部分,我们将一起欣赏关于游戏内战斗、天鹅绒房间、商店的界面。


© 2022 3楼猫 下载APP 站点地图 广告合作:asmrly666@gmail.com