《女神異聞錄5》那套酷炫介面的背後，是18年來的始終如一

原文載於2017年。

《女神異聞錄5》是近兩年最為火熱的JRPG遊戲之一，它的出色不僅在於劇情暗諷社會黑暗面的主旨展現，那套酷炫而又極富衝擊力的動態UI設計也成為了本作的一大亮點，不僅成為了部分同行遊戲“借鑑參考”的物件，其中某些元素甚至被當作Cosplay的物件。

當然，這套UI並非一面倒的好評，也有部分的玩家認為這套UI的效果太過“喧賓奪主”，甚至會在長時間遊戲後產生視覺疲勞，比如每次戰鬥結束後都無法跳過的厄長結算動畫，對於一個近百小時才能通關的遊戲來說並不太友好。


UI設計是一門學問，對於《女神異聞錄5》來說更是如此。在今年10月底的日本CEDEC＋KYUSHU 2017開發者大會上，來自Atlus的製作人和田和久先生，以及藝術總監兼首席設計師須藤正喜先生，便向同行們介紹了《女神異聞錄5》UI設計背後的一些故事，我們也得以較為完整地瞭解到本作UI的最初構想、核心特色以及開發流程。

Atlus公司的危機感，是這套獨特UI誕生的大背景

首先，和田和久先生介紹說，提到《女神異聞錄5》的使用者介面，只要體驗過的玩家都會留下深刻的印象。它不僅時尚動感，且獨一無二，這在本作第一部宣傳視訊中就有所展示，玩家也能初探這套獨特的UI的端倪。


當然在宣傳視訊裡的驚鴻一瞥裡想要全面瞭解UI並不容易，而UI也是《女神異聞錄5》不可忽視的一大特色。因此當PV釋出後，很多人都對這套設計感到新奇，他們都向和田和久提出疑問，說為何這套UI會製作成這樣？

提起這套獨特的UI的誕生，和田和久說，這還要回歸到《女神異聞錄》系列的發展中，因為第三作是一個重大的轉折點。


2000年，《女神異聞錄2 罰》釋出，但在時隔六年後，我們才迎來了《女神異聞錄3》的誕生。第三作被譽為本系列新時代的開啟，不僅美術風格大為革新，而且還承擔著“拓寬玩家群”的這一設計責任（即使這一作的開發預算很低），這在當時已經不僅是一個目標，而是一個必須要實現的任務。

和田先生說，當時Atlus開發部深陷於一個遊戲叫好不叫座的危機，《女神異聞錄3》希望能打破這個局面，即使開發預算有限也必須要成功，這就讓《女神異聞錄3》的開發策略演變成以市場為導向。


其中衍生出來的一個方針就是在UI上的“徹底強化”，也可以理解為是全面增強——就好像是從一個默默無聞的無名英雄，變成舞臺上的搶眼主角。這也是Atlus陷入危機後所選擇的必然方向。


如何兼顧作品的形象設計和資訊傳播？

Atlus藝術總監兼首席設計師須藤正喜對具體的UI設計進行了演講。他表示自己18年前就已經加入了Atlus工作，而入社的時候和現在的UI設計流程幾乎沒有發生什麼變化，甚至使用的工具都是一樣的，包括像Photoshop，Adobe Illustrator，After Effects等等。

《女神異聞錄》系列的UI，除了要達到遊戲UI本身具備的“傳達資訊”的目的，還兼顧著“構築作品主導的美術設計風格”的任務，以及擔負著把遊戲包裝成”有價值的遊戲“的重大使命。

想要做出那樣的UI，首先是要確定主色調，因為色彩能夠給人們留下深刻的印象；一旦主色調確定了，遊戲的標識也應運而生，主字型也隨之而確定。



比如在《女神異聞錄3》中，主色調是藍色的；《女神異聞錄4》的主色調則為黃色；而《女神異聞錄5》的主色調又變成了紅色。Atlus將日常生活中極為常見的顏色和形狀相組合，從而極大降低了遊戲的認知門檻。


接下來要確定的是子色調，在《女神異聞錄3》中，遊戲中的月相變化系統使用的黃色，便被當做了子色調；《女神異聞錄4》中則使用了多色條紋設計，這與本作劇情的起點“深夜電視連續殺人事件”相呼應，選單文字則使用黑色作為底色，以便在中和華麗色彩的同時不至於讓玩家失去關注的重點。



到了《女神異聞錄5》中，為了能讓激情的紅色更加醒目，須藤先生決定儘可能地不加入子色調。那麼在不同顏色的部分應該如何保證其“視覺可辨識度”，就成了必須要解決的問題。


當玩家在讀取文字資訊的時候，好的設計應儘可能避免視線被阻隔。為了在《女神異聞錄5》中的動態UI上實現流暢的閱讀，須藤先生引入了帶有“視覺引導線”的設計，因為人眼對線條有著天生的敏感。你在《女神異聞錄5》選單畫面上會發現，中央便有一條白色的引導輔助線，選單內容沿著白線整齊排列，從而起到了引導視線不受阻礙地讀取資訊的作用。



另外還有一些幫助玩家讀取資訊的小設計，比如當選項向下移動的時候，佈局和角度也會隨之變化；為了讓重要的資訊更加直觀，底層背景還會不斷閃爍；優先順序較高的區域對比度也會更高，沒有那麼重要的資訊對比度則會比較低。


至於伴隨選單一同出現的3D模型效果，則是通過特殊工具實現的。須藤介紹說，首先他會在Photoshop中做一個設計初稿，交給動作設計師為其新增動作，再使用特殊工具進行組合；當3D模型的動作確定後，須藤再在2D插畫中匹配相應動作，以便最終效果儘可能不產生偏差。



設計和構圖一旦被確定，接下來就是資料的處理工作。在《女神異聞錄5》中，戰鬥和選單等不同UI的部分，都是由專屬程式設計師負責的。設計師把座標指定書交給程式設計師，並在程式設計師旁邊進行一對一的檢查確認，隨時進行框架上的調整。

這些提前設計好的、像俄羅斯方塊一樣的貼圖紋理資料，一方面可以讓《女神異聞錄5》的遊戲容量更輕量化，另一方面也是為了可以基於PS3/PS4兩個平臺的不同解析度下，都儘可能實現相同的畫面質量。這部分程式設計師應該是做了巨大的工作，也確實很耗費人力。


最終，《女神異聞錄5》付諸於紙面的座標指定書可能有上千張，須藤先生也表示這真的是一種非常古老的遊戲開發方式。但是，如果只需要設計師來決定UI，那隻要他一個人的想法就足夠了。但當這些想法經過程式設計師之手，也吸納了程式設計師自己的想法，便讓UI的品質獲得進一步提升。


《女神異聞錄5》的UI設計證明，風格化和可用性並非是一場零和博弈的遊戲，相反，這更像是一個決定優先順序的過程。事實上，《女神異聞錄5》的開發團隊所思考的是讓UI如何融入到遊戲主題之中，甚至是進一步去強化劇情的渲染力，這也是Atlus在這三代《女神異聞錄》系列作品中所一直強調、學習並改進的要素。

須藤先生最後談到自己的抱負的時候說道，今後也想繼續做憑直覺、能夠隨心所欲引導玩家的UI設計工作。這種隨心所欲包含著有趣，也包含著驚喜，而UI設計也應該是一個更生動形象、更有娛樂價值的事情吧。

本文參考來源：famitsu.com

原文標題：《『ペルソナ5』のカッコよすぎるUIの製作工程を紹介！アトラスの危機から生まれ、やがて特徴となったUIができるまで【CEDEC＋KYUSHU 2017】》

作者：慕斯
來源：觸樂
地址：http://www.chuapp.com/article/284630.html