【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