親愛的網友:
為確保您享有最佳的瀏覽體驗,建議您提升您的 IE 瀏覽器至最新版本,感謝您的配合。

《公主連結R》製作秘辛公開 掌握小細節就能讓你課爆

2018-09-11 17:49遊戲角落 遊戲葡萄

《超異域公主連結 Re:Dive》
《超異域公主連結 Re:Dive》

在今年早些時候,葡萄君曾經對超異域公主連結 Re:Dive》(以下簡稱《公主連結R》)這款遊戲進行過報導,它本質上就是一款《刀塔傳奇》的換皮遊戲。

在《刀塔傳奇》之後,無論是在中國還是日本,將其玩法套用於自身的後繼者都鮮有較好的成績。不過Cygames研發的《公主連結R》卻通過將這種玩法作為核心玩法的基礎上,用動畫對遊戲的啟動頁面、主頁面、任務界面、抽卡界面及角色技能釋放等進行包裝,使遊戲在角色和世界觀的表現上更加生動。

因此它得到了日本玩家的認可,在日本 App Store 遊戲暢銷榜中達到過最高第四名的成績。就在前不久,B站宣布將代理《公主連結R》的國服,這足以說明它的遊戲品質。

《超異域公主連結 Re:Dive》加入了許多動畫,讓畫面更生動。
《超異域公主連結 Re:Dive》加入了許多動畫,讓畫面更生動。

在它之前,很少有手遊產品在遊戲內添加大量動畫。這時,將動畫和遊戲相融合後,不會讓用戶產生不協調感受的UI設計方法,就顯得至關重要。從《公主連結R》在日本取得的成績來看,它的UI設計思路已經得到了日本市場的驗證。

就在前不久舉辦的CEDEC2018日本開發者大會上,Cygames設計部的遊戲藝術總監佐佐木拓夢、UI設計師齋藤友梨子以「《公主連結R》制作事例~以實現UI高速高品質為目的的原型開發推薦」為主題,分別發表了演講,詳細解釋了這款遊戲在開發過程中短時間內製作高品質UI的方法,以及UI設計師為實現「動畫RPG」這一目的的研究方法和思考。

UI設計師齋藤友梨子、遊戲藝術總監佐佐木拓夢。
UI設計師齋藤友梨子、遊戲藝術總監佐佐木拓夢。

也正是因為有了在頁面切換、用戶引導設計和畫面等方面的思考,才能讓這款遊戲在角色、世界觀表現上能夠展現出更加出色的魅力。

動畫RPG所必備的三個UI設計技巧

首先,Cygames的演講者在現場解釋了“動畫RPG”這一概念,它包括以下三點:

1、目標是將動畫與RPG融合,展現出如同觀看動畫般的遊戲體驗。
2、它包含大量的故事動畫和專屬過場動畫。
3、動畫部分和遊戲部分可進行無縫切換。

Cygames的演講者解釋何謂「動畫RPG」
Cygames的演講者解釋何謂「動畫RPG」

針對「動畫RPG」的製作,UI設計需要做的,是在不給遊戲部分增加壓力的前提下嵌入動畫。而想要達到這一目標,則需要實現以下三點:

一、無壓力的頁面切換。
二、不會令人困惑的設計。
三、有魅力的畫面。

《公主連結R》是一款循環設計的遊戲,用戶可以多次進入同一界面,進行多次重覆操作,並可切換到不同的功能中。此時,頁面切換要解決的問題就是縮短遊戲的加載時間。因此,對應的的UI設計就要做到讓動畫簡單流暢,減少點擊次數和手指的移動次數,並達到快速切換的目的。

首先要解決的問題是,徹底實現各頁面的隨意切換。《公主連結R》背景素材種類繁多,動畫、人物立繪、效果也較為多樣。如果針對每個頁面來設計不同的UI素材,遊戲容量就會變得很大。因此開發團隊就制作出了在不同種類的背景下均可使用的設計。

《公主連接R》中亮背景和暗背景的遊戲界面實例。在保證每個頁面均可辨識的情況下,保...
《公主連接R》中亮背景和暗背景的遊戲界面實例。在保證每個頁面均可辨識的情況下,保證UI設計的一致性。

接下來要解決的是,針對不同的界面階層,調整通用素材的比例。《公主連結R》遊戲內的界面大致分為三個階層。

用戶經常能看到的故事頂部頁面等頁面為第一階層,這一階層加大了專用素材的比例,使用了通用素材較少的動畫部分。

探索頁面等界面為第二階層,這裏只準備必要的專用素材,其它的部分均由通用素材組成。而通用素材的占比約為60%。而第三階層則幾乎由100%的通用素材構成,通過減少非必要的專用素材數量來削減遊戲的容量。這樣的設計不僅縮短了遊戲的加載時間,還抑制了遊戲UI設計的重覆性,從設計的角度解決了無壓力的頁面切換這一問題。

在縮短了遊戲的加載時間後,第二個要解決的問題,就是要讓遊戲有易於上手的、不會令人困惑的設計,即讓用戶從任何地方開始都會立即明白該怎麽玩。而《公主連結R》研發團隊對不會令人困惑設計的要求,則是用戶不需要看攻略就能理解遊戲的玩法。其中包括以下三點:

1、不會感覺到遊戲的結束。
2、立即理解在遊戲中該做什麽。
3、不會喪失目標。

遊戲開發團隊在經過驗證後,設計出了“任務-任務選擇-戰鬥-勝利-任務”這樣一套玩家預定操作路線。在研究了遊戲進程卡住的節點後,要在可能卡住的頁面上加入“角色能夠變強”的引導路徑。這樣就保證了無論發生怎樣的狀況,遊戲的主循環都不會終止。

當將角色強化作為遊戲的主循環時,研發團隊對角色強化的遷移作了進一步驗證,設計出用於收集裝備的任務界面和用於使用已收集道具的角色強化界面,其目的是引導用戶能夠經常進入這兩個界面,並且讓他們毫不猶豫地不停進行循環操作。通過這兩個小循環,遊戲的主循環就不會出現停滯的情況。

遊戲的道具收集循環
遊戲的道具收集循環

遊戲的角色強化循環
遊戲的角色強化循環

之後,遊戲又進一步強化了「不令人困惑的設計」,為了不讓用戶找不到之前的界面,遊戲中還採了彈窗設計。通過功能與基本頁面的一一對應,衍生功能通過彈窗進行折疊,因為不會跳轉頁面,所以也就不會出現找不到原界面的情況。這個設計的優點,是可以在同一個彈窗內使用多個頁面。

另外,要在路徑中準備好解決問題的答案,比如引導用戶前進的按鈕為藍色,通過標記讓他們知道哪些是未通過的內容。在通過多種方法引導後,用戶就會很清晰地知道接下來應該做什麽。

達成遊戲中嵌入動畫的第三個條件,是要做有魅力的畫面。關於這一點,研發團隊給出的答案是設計出一個讓人理解這就是動畫RPG的UI。在增加用戶在《公主連結R》中與角色、世界觀接觸的機會的同時,還要讓他們通過UI設計一眼認出這個遊戲。

這就需要通過UI設計,將角色的躍動感和個性盡可能地表現出來。為此,遊戲的角色一覽頁面,並沒有采用小頭像表示的方案,而選擇了畫面更大,能夠展現角色衣服和姿勢的頭像。而借助UI提高辨識度這一觀點,則通過將動畫作為UI使用得以實現。

另外,和世界觀相匹配的設計,也要符合動畫RPG的UI設計。具體來說,就是用動畫制作的UI設計時,要和單個角色的主線采取類似的處理方式。而角色的色彩搭配、遊戲內背景的陰影處理等,也要作為UI色彩搭配和處理的參考。

高效製作高品質UI的具體流程

除了UI設計外,此次演講還重點分享了《公主連結R》如何使用原型,快速製作高品質UI。

《公主連結R》在早期階段做過評價和驗證,UI設計方面減少了返工的內容,並通過不同視角的評價,提高了UI設計的品質。其目的是為了最終能夠快速製作高品質UI。

在整個流程中,原型設計就是對角色保真度的選擇,具體分為低保真度和高保真度兩種。前者用於初期階段能夠快速確認設計,而靠近開發後期時則需要制作高成本的高保真度原型,來確認更加細節的部分。《公主連結R》在製作過程中,為了達到改善遊戲體驗來製作高品質UI,所以採用了高保真度的原型設計。

低保真度實例
低保真度實例

高保真度實例
高保真度實例

不過,對於高保真度的原型制作來說,動畫品質的改善和編碼的必要性等問題上會花費很多時間。因此,這裏會采用Adobe Animate作為解決手段。除了使用動畫工具解決這些問題外,使用內置工具將Flash數據移植到Unity中,也能實現原型制作的再現。

而制作完的原型,因為要通過多角度提升品質,所以要以交叉評論和A/B測試兩種評論來對原型進行評價。交叉評論因為可以不限工種進行評價和驗證,按照設計師、設計人員/工程師、公司內員工這樣的順序進行操作,可以得到範圍更廣的評價。

而A/B測試,則是在交叉品類的基礎上,在兩個方案之間無法敲定時,隨機抽選公司內的員工,以問卷的形式進行。這種評判方式,適合判斷細微的設計差別時使用。

另外,關於導入原型設計時,應該考慮以下三點:

1、決定修正、試行錯誤的時間;
2、明確畫面制作中的目標
3、原型在實機中進行確認。

演講最後,項目組認為,以動畫RPG這一概念為基礎,為了實現用戶所追求的東西,一邊通過UI的觀點進行摸索,一邊進行應對。像這樣,將遊戲性、角色、世界觀等方面的魅力最大程度上發揮出來,才是UI設計師的工作。

[文章來源:SGI&Gamer,遊戲葡萄編譯整理]

超異域公主連結Cygames手遊遊戲葡萄

延伸閱讀

男女都受害 遊戲中的「性別騷擾」有多嚴重?

小動作卻是大工程 為什麼電玩裡的角色幾乎從都不「脫衣服」?

體育競賽也曾源自暴力 奧林匹克精神不是藉口

咕嚕靈波(●′∀‵)ノ邪教的起源?中毒用語從洗頻誕生

遊戲葡萄

遊戲葡萄是北京酷玩東西科技有限公司旗下網站,公司成立於2013年,專註於移動遊戲新媒體領域,公司成員20人左右。遊戲葡萄是有前瞻、有判斷的遊戲行業媒體。遊戲葡萄為開發商、發行商、渠道、投資商等手遊行業鏈各方提供商業信息服務。▍網站連結:http://youxiputao.com
分享給好友加入udn

同類好文

擔心女模「小雪」染肺炎 狂粉護花揚言到電玩展放炸彈

日官員失言「不像哥吉拉大聲咳嗽不會傳染」 厚生省道歉

發明「剪下複製貼上」的電腦科學家Larry Tesler逝世,享壽74歲

毛小孩也要防疫!「口罩貓」意外爆紅 日神人將迷因動物公仔化

還原度3000倍!《對魔忍》井河淺蔥可動figure開賣,連M字腿都做得到

靠打遊戲學英文 高中生多益考965高分

【meme週記】Meme Man與「俗頭」的產地、大冒險還是抽25張牌?

台北國際書展確定延期至五月 文化部有三點考量

配完音才知道是《人中之龍7》!台灣配音員赴日錄音心得

角落漫談/我的硬漢朋友愛上了《人中之龍》的桐生一馬

你各位還不升級啊!Win7正式步入歷史,未來將以「全螢幕」提醒伺候

想給遊戲宅男友一個驚喜?那麽送禮物的細節一定要知道!

【meme週記】第三次世界大戰未爆發,網路迷因先開打

研究統計:中老年族群中,女性反而更熱衷於電子遊戲

這也太突然!《秒約陪玩》緊急宣布即日起停止儲值相關服務

孩子玩遊戲浪費生命?帶我踏入電玩世界的推手就是我的爸爸

該入手了吧!Steam公布年度暢銷遊戲 《隻狼》《絕地求生》登榜

【meme週記】2019迷因回顧精選,這些你都看過了嗎?

數字網虛寶賣家月賺460萬漏稅,國稅局要求補稅加罰共486萬元

老司機飆起來!國產互動飛機杯《A-GUI搖桿》集資一週就超標

臺北大學宿舍命名「是在哈樓」位居第一,「瘋狗棟」緊追在後

【meme週記】環保少女P圖之亂、超萌尤達寶寶也難逃迷因化

國外正妹實測新款Mac Pro是否真的能刨起司絲,結果卡了滿滿起司

Win7將於2020年全面結束技術支援 未升級者「全螢幕提醒」伺候

遊戲類唯一入榜!小草Yue登上2019台灣十大Youtube熱門影片排行

夾到手也可以玩!2020選舉格鬥遊戲 臉書訊息直接開打

PS4形象廣告爆抄襲 被抓包後動畫導演直接神隱

【meme週記】「以前的我與現在的我」,千禧世代的厭世哲學

日人砸5.6萬課金被電視台公審 網批:花錢是個人自由

牛也戴VR?俄羅斯乳品業者讓牛體驗虛擬夏季,以增加牛乳產量

傳網易暴力裁員?網易回應:確有不妥,將妥善處理

皮卡丘人人皆愛!深入分析「寶可夢」屹立不敗的三大關鍵

日本環球影城「任天堂世界」開幕預備!超夢幻主題樂園視覺曝光

【回顧】母湯難過!紀念那個溫暖、善良的「光頭哥哥」

【meme週記】暖心Google VS. 冷血Bing、這個是何年何月發明的?

吸睛度破表!星宇航空飛安影片曝光 還以為在看星際動畫片

「光頭哥哥」陳俊傑因病逝世 幾天前還不畏病痛回應網友點歌

全球唯一!《戰車世界》迷彩BelAZ自動卸貨卡車,天價拍賣120萬美元

YouTube Music台灣正式上線!Premium訂閱每月最低149台幣

【meme週記】萬聖節起來High!經典「骷髏歌」與「南瓜舞」你一定要認識

火熱排行

玩家在《碧血狂殺2》重現R星黑歷史「熱咖啡」事件,遭官方警告求下架

《Love Live! Sunshine》不雅作畫激怒廠商抽贊助 粉絲發起連署搶救

發明「剪下複製貼上」的電腦科學家Larry Tesler逝世,享壽74歲

聯盟戰棋/第三季棋組「星系」公開 !聯盟宇宙大戰即將引爆

真香!《戰慄深隧:流亡》重返Steam仍大賣 執行長驚訝「亞洲最大國」的貢獻

傑出的一手!N社限量《電馭叛客2077》特製顯卡RTX 2080 Ti只送不賣

日官員失言「不像哥吉拉大聲咳嗽不會傳染」 厚生省道歉

87歲阿嬤都瘋《鬼滅之刃》! 四代同堂聊劇情畫炭治郎

哈利波特 in《Minecraft》!國外團隊製作Mod體驗霍格華茲魔法世界

動畫歌帝水木一郎玩《曠野之息》減壓 巨大古代核心竟刷到999個

千呼萬喚!《騎馬與砍殺2》正式宣布搶先體驗日期與定價

媽媽玩《英雄聯盟》遭隊友怒噴 她的幽默反應被網友讚爆

妮柯基慢/盤點五大最婆的女角 你最想跟誰渡過餘生?

非洲青年自製難民生存遊戲《Salaam》 內購資源可幫助實際難民

小島秀夫發佈《死亡擱淺》新預告,致敬一戰電影《1917》

回合制戰略《彼岸花 Othercide》 培育自己的「女兒」軍團迎戰敵人吧

獨立遊戲《Kunai》遭有心人士隨機負評轟炸 Metacritic 8.1一度跌到1.7

Epic本週五起免費送《刺客教條:梟雄》和卡牌戰棋《Faeria》

Need Something?網友幽默模仿《上古卷軸5》NPC怪異行為

《寶可夢 劍/盾》短篇動畫第2集公開!欣賞黑肉館主和她的格鬥小夥伴

《巫師3》過去一年多只在Steam就破15億收入,CDPR成為歐洲第二大遊戲商

《音速小子》真人電影票房跌破眼鏡 破遊戲改編電影首週紀錄

玩家上網求助「左手斷掉可以玩什麽遊戲」網:回合制歡迎你

你也是個好人嗎?《質量效應》前電影設計師:92%玩家選擇善良路線

《返校》《還願》列入哈佛大學圖書館館藏 赤燭:創作理念不曾改變

Switch「胖丁」手把粉白配色超燒火 用來玩大亂鬥剛剛好

《碧血狂殺Online》的奇妙BUG 邊嘔吐邊墜崖就不會死

經典奇幻小說改編遊戲《羅德斯島戰記:蒂德莉特的奇境冒險》即將推出搶先體驗

《最後生還者 二部曲》總監:我們將重新定義「3A」大作

感謝紳士支持!國產飛機杯《A-GUI搖桿》改版升級,追加「學姊」跟「早餐店女兒」

等了14年!《戰慄時空》最強粉絲重製版《黑色高地》正式版本即將推出

《民主社會主義模擬器》你將扮演首位公開支持社會主義的美國總統

《閃耀暖暖》X《新世紀福音戰士》合作展開 暖暖化身明日香與綾波零

《崩壞3rd》宣布正式登陸PC平台 新版本《墨書華歲》同步上線

北川景子與渡邊直美出演《約定的夢幻島》真人電影,分飾媽媽與修女

《七大罪:光與暗之交戰》執行製作人專訪:考慮為台灣增加時裝

擔心女模「小雪」染肺炎 狂粉護花揚言到電玩展放炸彈

暴雪要出動畫了!《暗黑破壞神》改編動畫製作中,將在Netflix上線

暴雪取消開發的《星海爭霸:暗影獵殺》 近日流出大量實機遊玩畫面

據傳《獵魔士》有意找麥斯密克森與米高基頓出演維瑟米爾

留言