《女神異聞錄5》是近兩年最為火熱的JRPG遊戲之一， 它的出色不僅在於劇情暗諷社會黑暗面的主旨展現， 那套酷炫而又極富衝擊力的動態UI設計也成為了本作的一大亮點， 不僅成為了部分同行遊戲“借鑒參考”的物件， 其中某些元素甚至被當作Cosplay的物件。
此圖應該配上《Last Surprise》的戰鬥音樂
當然， 這套UI並非一面倒的好評， 也有部分的玩家認為這套UI的效果太過“喧賓奪主”， 甚至會在長時間遊戲後產生視覺疲勞， 比如每次戰鬥結束後都無法跳過的厄長結算動畫， 對於一個近百小時才能通關的遊戲來說並不太友好。
UI設計是一門學問， 對於《女神異聞錄5》來說更是如此。 在今年10月底的日本CEDEC＋KYUSHU 2017開發者大會上， 來自Atlus的製作人和田和久先生， 以及藝術總監兼首席設計師須藤正喜先生， 便向同行們介紹了《女神異聞錄5》UI設計背後的一些故事， 我們也得以較為完整地瞭解到本作UI的最初構想、核心特色以及開發流程。
Atlus公司的危機感， 是這套獨特UI誕生的大背景。首先， 和田和久先生介紹說， 提到《女神異聞錄5》的使用者介面， 只要體驗過的玩家都會留下深刻的印象。 它不僅時尚動感， 且獨一無二， 這在本作第一部宣傳視頻中就有所展示，
當然在宣傳視頻裡的驚鴻一瞥裡想要全面瞭解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將日常生活中極為常見的顏色和形狀相組合，從而極大降低了遊戲的認知門檻。
Atlus的另一款作品《凱薩琳》使用了獨有的桃紅色，由於是專屬的油墨調色所以在列印海報的時候，還要花費更高的成本。
接下來要確定的是子色調，在《女神異聞錄3》中，遊戲中的月相變化系統使用的黃色，便被當做了子色調；《女神異聞錄4》中則使用了多色條紋設計，這與本作劇情的起點“深夜電視連續殺人事件”相呼應，功能表文字則使用黑色作為底色，以便在中和華麗色彩的同時不至於讓玩家失去關注的重點。
到了《女神異聞錄5》中，為了能讓激情的紅色更加醒目，須藤先生決定盡可能地不加入子色調。那麼在不同顏色的部分應該如何保證其“視覺可辨識度”，就成了必須要解決的問題。
除了HP和MP條，《女神異聞錄5》中的UI幾乎沒有引入其它的子色調
女神異聞錄5》遊戲主題參考了“流行朋克（Pop Punk）”的文化概念，“流行”意味著它的大眾意向，“朋克”則彰顯了它反體制的一面
當玩家在讀取文本資訊的時候，好的設計應盡可能避免視線被阻隔。為了在《女神異聞錄5》中的動態UI上實現流暢的閱讀，須藤先生引入了帶有“視覺引導線”的設計，因為人眼對線條有著天生的敏感。你在《女神異聞錄5》功能表畫面上會發現，中央便有一條白色的引導輔助線，功能表內容沿著白線整齊排列，從而起到了引導視線不受阻礙地讀取資訊的作用。
另外還有一些説明玩家讀取資訊的小設計，比如當選項向下移動的時候，佈局和角度也會隨之變化；為了讓重要的資訊更加直觀，底層背景還會不斷閃爍；優先順序較高的區域對比度也會更高，沒有那麼重要的資訊對比度則會比較低。
我們可以從兩組動態圖中，更直觀看到功能表列的效果
至於伴隨菜單一同出現的3D模型效果，則是通過特殊工具實現的。須藤介紹說，首先他會在Photoshop中做一個設計初稿，交給動作設計師為其添加動作，再使用特殊工具進行組合；當3D模型的動作確定後，須藤再在2D插畫中匹配相應動作，以便最終效果盡可能不產生偏差。
這是須藤正喜在設計稿階段未被採用的UI素材，可以看到他也有嘗試在主功能表使用子色調的效果（下排中間）
這個主人公的姿勢，就好像是好萊塢明星對著狗仔隊的攝像頭說“不要拍”
設計和構圖一旦被確定，接下來就是資料的處理工作。在《女神異聞錄5》中，戰鬥和功能表等不同UI的部分，都是由專屬程式師負責的。設計師把座標指定書交給程式師，並在程式師旁邊進行一對一的檢查確認，隨時進行框架上的調整。
這些提前設計好的、像俄羅斯方塊一樣的貼圖紋理資料，一方面可以讓《女神異聞錄5》的遊戲容量更輕量化，另一方面也是為了可以基於PS3/PS4兩個平臺的不同解析度下，都盡可能實現相同的畫面品質。這部分程式師應該是做了巨大的工作，也確實很耗費人力。
設計師向程式師說明畫面效果的時候，通常會用上手勢和肢體語言，甚至有時會通過擬聲詞來表明
最終，《女神異聞錄5》付諸於紙面的座標指定書可能有上千張，須藤先生也表示這真的是一種非常古老的遊戲開發方式。但是，如果只需要設計師來決定UI，那只要他一個人的想法就足夠了。但當這些想法經過程式師之手，也吸納了程式師自己的想法，便讓UI的品質獲得進一步提升。
《女神異聞錄5》的UI設計證明，風格化和可用性並非是一場零和博弈的遊戲，相反，這更像是一個決定優先順序的過程。事實上，《女神異聞錄5》的開發團隊所思考的是讓UI如何融入到遊戲主題之中，甚至是進一步去強化劇情的渲染力，這也是Atlus在這三代《女神異聞錄》系列作品中所一直強調、學習並改進的要素。
須藤先生最後談到自己的抱負的時候說道，今後也想繼續做憑直覺、能夠隨心所欲引導玩家的UI設計工作。這種隨心所欲包含著有趣，也包含著驚喜，而UI設計也應該是一個更生動形象、更有娛樂價值的事情吧。
原文標題：《『ペルソナ5』のカッコよすぎるUIの製作工程を紹介！アトラスの危機から生まれ、やがて特徴となったUIができるまで【CEDEC＋KYUSHU 2017】》
作者：ロマンシング★嵯峨
歡迎在頭條關注觸樂或觸樂微信（chuappgame），隨時查看更多有趣的遊戲內容。
其中衍生出來的一個方針就是在UI上的“徹底強化”，也可以理解為是全面增強——就好像是從一個默默無聞的無名英雄，變成舞臺上的搶眼主角。這也是Atlus陷入危機後所選擇的必然方向。
具體強化的方面，包括有加強標題列顏色的醒目程度、包裝效果等，以達到以低成本提升使用者體驗的目標
如何兼顧作品的形象設計和資訊傳播？Atlus藝術總監兼首席設計師須藤正喜對具體的UI設計進行了演講。他表示自己18年前就已經加入了Atlus工作，而入社的時候和現在的UI設計流程幾乎沒有發生什麼變化，甚至使用的工具都是一樣的，包括像Photoshop，Adobe Illustrator，After Effects等等。
《女神異聞錄》系列的UI，除了要達到遊戲UI本身具備的“傳達資訊”的目的，還兼顧著“構築作品主導的美術設計風格”的任務，以及擔負著把遊戲包裝成”有價值的遊戲“的重大使命。
想要做出那樣的UI，首先是要確定主色調，因為色彩能夠給人們留下深刻的印象；一旦主色調確定了，遊戲的標識也應運而生，主字體也隨之而確定。
比如在《女神異聞錄3》中，主色調是藍色的；《女神異聞錄4》的主色調則為黃色；而《女神異聞錄5》的主色調又變成了紅色。Atlus將日常生活中極為常見的顏色和形狀相組合，從而極大降低了遊戲的認知門檻。
Atlus的另一款作品《凱薩琳》使用了獨有的桃紅色，由於是專屬的油墨調色所以在列印海報的時候，還要花費更高的成本。
接下來要確定的是子色調，在《女神異聞錄3》中，遊戲中的月相變化系統使用的黃色，便被當做了子色調；《女神異聞錄4》中則使用了多色條紋設計，這與本作劇情的起點“深夜電視連續殺人事件”相呼應，功能表文字則使用黑色作為底色，以便在中和華麗色彩的同時不至於讓玩家失去關注的重點。
到了《女神異聞錄5》中，為了能讓激情的紅色更加醒目，須藤先生決定盡可能地不加入子色調。那麼在不同顏色的部分應該如何保證其“視覺可辨識度”，就成了必須要解決的問題。
除了HP和MP條，《女神異聞錄5》中的UI幾乎沒有引入其它的子色調
女神異聞錄5》遊戲主題參考了“流行朋克（Pop Punk）”的文化概念，“流行”意味著它的大眾意向，“朋克”則彰顯了它反體制的一面
當玩家在讀取文本資訊的時候，好的設計應盡可能避免視線被阻隔。為了在《女神異聞錄5》中的動態UI上實現流暢的閱讀，須藤先生引入了帶有“視覺引導線”的設計，因為人眼對線條有著天生的敏感。你在《女神異聞錄5》功能表畫面上會發現，中央便有一條白色的引導輔助線，功能表內容沿著白線整齊排列，從而起到了引導視線不受阻礙地讀取資訊的作用。
另外還有一些説明玩家讀取資訊的小設計，比如當選項向下移動的時候，佈局和角度也會隨之變化；為了讓重要的資訊更加直觀，底層背景還會不斷閃爍；優先順序較高的區域對比度也會更高，沒有那麼重要的資訊對比度則會比較低。
我們可以從兩組動態圖中，更直觀看到功能表列的效果
至於伴隨菜單一同出現的3D模型效果，則是通過特殊工具實現的。須藤介紹說，首先他會在Photoshop中做一個設計初稿，交給動作設計師為其添加動作，再使用特殊工具進行組合；當3D模型的動作確定後，須藤再在2D插畫中匹配相應動作，以便最終效果盡可能不產生偏差。
這是須藤正喜在設計稿階段未被採用的UI素材，可以看到他也有嘗試在主功能表使用子色調的效果（下排中間）
這個主人公的姿勢，就好像是好萊塢明星對著狗仔隊的攝像頭說“不要拍”
設計和構圖一旦被確定，接下來就是資料的處理工作。在《女神異聞錄5》中，戰鬥和功能表等不同UI的部分，都是由專屬程式師負責的。設計師把座標指定書交給程式師，並在程式師旁邊進行一對一的檢查確認，隨時進行框架上的調整。
這些提前設計好的、像俄羅斯方塊一樣的貼圖紋理資料，一方面可以讓《女神異聞錄5》的遊戲容量更輕量化，另一方面也是為了可以基於PS3/PS4兩個平臺的不同解析度下，都盡可能實現相同的畫面品質。這部分程式師應該是做了巨大的工作，也確實很耗費人力。
設計師向程式師說明畫面效果的時候，通常會用上手勢和肢體語言，甚至有時會通過擬聲詞來表明
最終，《女神異聞錄5》付諸於紙面的座標指定書可能有上千張，須藤先生也表示這真的是一種非常古老的遊戲開發方式。但是，如果只需要設計師來決定UI，那只要他一個人的想法就足夠了。但當這些想法經過程式師之手，也吸納了程式師自己的想法，便讓UI的品質獲得進一步提升。
《女神異聞錄5》的UI設計證明，風格化和可用性並非是一場零和博弈的遊戲，相反，這更像是一個決定優先順序的過程。事實上，《女神異聞錄5》的開發團隊所思考的是讓UI如何融入到遊戲主題之中，甚至是進一步去強化劇情的渲染力，這也是Atlus在這三代《女神異聞錄》系列作品中所一直強調、學習並改進的要素。
須藤先生最後談到自己的抱負的時候說道，今後也想繼續做憑直覺、能夠隨心所欲引導玩家的UI設計工作。這種隨心所欲包含著有趣，也包含著驚喜，而UI設計也應該是一個更生動形象、更有娛樂價值的事情吧。
原文標題：《『ペルソナ5』のカッコよすぎるUIの製作工程を紹介！アトラスの危機から生まれ、やがて特徴となったUIができるまで【CEDEC＋KYUSHU 2017】》
作者：ロマンシング★嵯峨
歡迎在頭條關注觸樂或觸樂微信（chuappgame），隨時查看更多有趣的遊戲內容。