在對(duì)的方向上一路堅(jiān)持，終可成就偉大。
《女神異聞錄5》是近兩年最為火熱的JRPG游戲之一，它的出色不僅在于劇情暗諷社會(huì)黑暗面的主旨展現(xiàn)，那套酷炫而又極富沖擊力的動(dòng)態(tài)UI設(shè)計(jì)也成為了本作的一大亮點(diǎn)，不僅成為了部分同行游戲“借鑒參考”的對(duì)象，其中某些元素甚至被當(dāng)作Cosplay的對(duì)象。
當(dāng)然，這套UI并非一面倒的好評(píng)，也有部分的玩家認(rèn)為這套UI的效果太過(guò)“喧賓奪主”，甚至?xí)陂L(zhǎng)時(shí)間游戲后產(chǎn)生視覺(jué)疲勞，比如每次戰(zhàn)斗結(jié)束后都無(wú)法跳過(guò)的厄長(zhǎng)結(jié)算動(dòng)畫(huà)，對(duì)于一個(gè)近百小時(shí)才能通關(guān)的游戲來(lái)說(shuō)并不太友好。
UI設(shè)計(jì)是一門(mén)學(xué)問(wèn)，對(duì)于《女神異聞錄5》來(lái)說(shuō)更是如此。在今年10月底的日本CEDEC＋KYUSHU 2017開(kāi)發(fā)者大會(huì)上，來(lái)自Atlus的制作人和田和久先生，以及藝術(shù)總監(jiān)兼首席設(shè)計(jì)師須藤正喜先生，便向同行們介紹了《女神異聞錄5》UI設(shè)計(jì)背后的一些故事，我們也得以較為完整地了解到本作UI的最初構(gòu)想、核心特色以及開(kāi)發(fā)流程。
首先，和田和久先生介紹說(shuō)，提到《女神異聞錄5》的用戶界面，只要體驗(yàn)過(guò)的玩家都會(huì)留下深刻的印象。它不僅時(shí)尚動(dòng)感，且獨(dú)一無(wú)二，這在本作第一部宣傳視頻中就有所展示，玩家也能初探這套獨(dú)特的UI的端倪。
當(dāng)然在宣傳視頻里的驚鴻一瞥里想要全面了解UI并不容易，而UI也是《女神異聞錄5》不可忽視的一大特色。因此當(dāng)PV發(fā)布后，很多人都對(duì)這套設(shè)計(jì)感到新奇，他們都向和田和久提出疑問(wèn)，說(shuō)為何這套UI會(huì)制作成這樣？
提起這套獨(dú)特的UI的誕生，和田和久說(shuō)，這還要回歸到《女神異聞錄》系列的發(fā)展中，因?yàn)榈谌魇且粋€(gè)重大的轉(zhuǎn)折點(diǎn)。
2000年，《女神異聞錄2?罰》發(fā)布，但在時(shí)隔六年后，我們才迎來(lái)了《女神異聞錄3》的誕生。第三作被譽(yù)為本系列新時(shí)代的開(kāi)啟，不僅美術(shù)風(fēng)格大為革新，而且還承擔(dān)著“拓寬玩家群”的這一設(shè)計(jì)責(zé)任（即使這一作的開(kāi)發(fā)預(yù)算很低），這在當(dāng)時(shí)已經(jīng)不僅是一個(gè)目標(biāo)，而是一個(gè)必須要實(shí)現(xiàn)的任務(wù)。
和田先生說(shuō)，當(dāng)時(shí)Atlus開(kāi)發(fā)部深陷于一個(gè)游戲叫好不叫座的危機(jī)，《女神異聞錄3》希望能打破這個(gè)局面，即使開(kāi)發(fā)預(yù)算有限也必須要成功，這就讓《女神異聞錄3》的開(kāi)發(fā)策略演變成以市場(chǎng)為導(dǎo)向。
其中衍生出來(lái)的一個(gè)方針就是在UI上的“徹底強(qiáng)化”，也可以理解為是全面增強(qiáng)——就好像是從一個(gè)默默無(wú)聞的無(wú)名英雄，變成舞臺(tái)上的搶眼主角。這也是Atlus陷入危機(jī)后所選擇的必然方向。
Atlus藝術(shù)總監(jiān)兼首席設(shè)計(jì)師須藤正喜對(duì)具體的UI設(shè)計(jì)進(jìn)行了演講。他表示自己18年前就已經(jīng)加入了Atlus工作，而入社的時(shí)候和現(xiàn)在的UI設(shè)計(jì)流程幾乎沒(méi)有發(fā)生什么變化，甚至使用的工具都是一樣的，包括像Photoshop，Adobe Illustrator，After Effects等等。
《女神異聞錄》系列的UI，除了要達(dá)到游戲UI本身具備的“傳達(dá)信息”的目的，還兼顧著“構(gòu)筑作品主導(dǎo)的美術(shù)設(shè)計(jì)風(fēng)格”的任務(wù)，以及擔(dān)負(fù)著把游戲包裝成”有價(jià)值的游戲“的重大使命。
想要做出那樣的UI，首先是要確定主色調(diào)，因?yàn)樯誓軌蚪o人們留下深刻的印象；一旦主色調(diào)確定了，游戲的標(biāo)識(shí)也應(yīng)運(yùn)而生，主字體也隨之而確定。
比如在《女神異聞錄3》中，主色調(diào)是藍(lán)色的；《女神異聞錄4》的主色調(diào)則為黃色；而《女神異聞錄5》的主色調(diào)又變成了紅色。Atlus將日常生活中極為常見(jiàn)的顏色和形狀相組合，從而極大降低了游戲的認(rèn)知門(mén)檻。
接下來(lái)要確定的是子色調(diào)，在《女神異聞錄3》中，游戲中的月相變化系統(tǒng)使用的黃色，便被當(dāng)做了子色調(diào)；《女神異聞錄4》中則使用了多色條紋設(shè)計(jì)，這與本作劇情的起點(diǎn)“深夜電視連續(xù)殺人事件”相呼應(yīng)，菜單文字則使用黑色作為底色，以便在中和華麗色彩的同時(shí)不至于讓玩家失去關(guān)注的重點(diǎn)。
到了《女神異聞錄5》中，為了能讓激情的紅色更加醒目，須藤先生決定盡可能地不加入子色調(diào)。那么在不同顏色的部分應(yīng)該如何保證其“視覺(jué)可辨識(shí)度”，就成了必須要解決的問(wèn)題。
當(dāng)玩家在讀取文本信息的時(shí)候，好的設(shè)計(jì)應(yīng)盡可能避免視線被阻隔。為了在《女神異聞錄5》中的動(dòng)態(tài)UI上實(shí)現(xiàn)流暢的閱讀，須藤先生引入了帶有“視覺(jué)引導(dǎo)線”的設(shè)計(jì)，因?yàn)槿搜蹖?duì)線條有著天生的敏感。你在《女神異聞錄5》菜單畫(huà)面上會(huì)發(fā)現(xiàn)，中央便有一條白色的引導(dǎo)輔助線，菜單內(nèi)容沿著白線整齊排列，從而起到了引導(dǎo)視線不受阻礙地讀取信息的作用。
另外還有一些幫助玩家讀取信息的小設(shè)計(jì)，比如當(dāng)選項(xiàng)向下移動(dòng)的時(shí)候，布局和角度也會(huì)隨之變化；為了讓重要的信息更加直觀，底層背景還會(huì)不斷閃爍；優(yōu)先級(jí)較高的區(qū)域?qū)Ρ榷纫矔?huì)更高，沒(méi)有那么重要的信息對(duì)比度則會(huì)比較低。
至于伴隨菜單一同出現(xiàn)的3D模型效果，則是通過(guò)特殊工具實(shí)現(xiàn)的。須藤介紹說(shuō)，首先他會(huì)在Photoshop中做一個(gè)設(shè)計(jì)初稿，交給動(dòng)作設(shè)計(jì)師為其添加動(dòng)作，再使用特殊工具進(jìn)行組合；當(dāng)3D模型的動(dòng)作確定后，須藤再在2D插畫(huà)中匹配相應(yīng)動(dòng)作，以便最終效果盡可能不產(chǎn)生偏差。
設(shè)計(jì)和構(gòu)圖一旦被確定，接下來(lái)就是數(shù)據(jù)的處理工作。在《女神異聞錄5》中，戰(zhàn)斗和菜單等不同UI的部分，都是由專(zhuān)屬程序員負(fù)責(zé)的。設(shè)計(jì)師把坐標(biāo)指定書(shū)交給程序員，并在程序員旁邊進(jìn)行一對(duì)一的檢查確認(rèn)，隨時(shí)進(jìn)行框架上的調(diào)整。
這些提前設(shè)計(jì)好的、像俄羅斯方塊一樣的貼圖紋理數(shù)據(jù)，一方面可以讓《女神異聞錄5》的游戲容量更輕量化，另一方面也是為了可以基于PS3/PS4兩個(gè)平臺(tái)的不同分辨率下，都盡可能實(shí)現(xiàn)相同的畫(huà)面質(zhì)量。這部分程序員應(yīng)該是做了巨大的工作，也確實(shí)很耗費(fèi)人力。
最終，《女神異聞錄5》付諸于紙面的坐標(biāo)指定書(shū)可能有上千張，須藤先生也表示這真的是一種非常古老的游戲開(kāi)發(fā)方式。但是，如果只需要設(shè)計(jì)師來(lái)決定UI，那只要他一個(gè)人的想法就足夠了。但當(dāng)這些想法經(jīng)過(guò)程序員之手，也吸納了程序員自己的想法，便讓UI的品質(zhì)獲得進(jìn)一步提升。
《女神異聞錄5》的UI設(shè)計(jì)證明，風(fēng)格化和可用性并非是一場(chǎng)零和博弈的游戲，相反，這更像是一個(gè)決定優(yōu)先級(jí)的過(guò)程。事實(shí)上，《女神異聞錄5》的開(kāi)發(fā)團(tuán)隊(duì)所思考的是讓UI如何融入到游戲主題之中，甚至是進(jìn)一步去強(qiáng)化劇情的渲染力，這也是Atlus在這三代《女神異聞錄》系列作品中所一直強(qiáng)調(diào)、學(xué)習(xí)并改進(jìn)的要素。
須藤先生最后談到自己的抱負(fù)的時(shí)候說(shuō)道，今后也想繼續(xù)做憑直覺(jué)、能夠隨心所欲引導(dǎo)玩家的UI設(shè)計(jì)工作。這種隨心所欲包含著有趣，也包含著驚喜，而UI設(shè)計(jì)也應(yīng)該是一個(gè)更生動(dòng)形象、更有娛樂(lè)價(jià)值的事情吧。
本文參考來(lái)源：famitsu.com
原文標(biāo)題：《『ペルソナ5』のカッコよすぎるU(xiǎn)Iの制作工程を紹介！アトラスの危機(jī)から生まれ、やがて特徴となったUIができるまで【CEDEC＋KYUSHU 2017】》
作者：ロマンシング★嵯峨
* 本文系作者投稿，不代表觸樂(lè)網(wǎng)站觀點(diǎn)。
