親愛的網友:
為確保您享有最佳的瀏覽體驗,建議您提升您的 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

同類好文

舊稿重投?UNIQLO x《寶可夢》設計大賽中國冠軍遭爆違規參賽

《寶可夢》「小拳石」擔任岩手縣應援大使 雙腳是透明圖層超搶戲

「繳工會年費不如買遊戲主機!」美國達美航空宣傳海報惹議

昔日交友神器榮光不再!《BeeTalk》台灣宣布520停止營運

4+2不等於6!《UNO》官方認證「+4」、「+2」無法堆疊使用

前YouTube工程師自爆:我們用假廣告,加速了IE6的衰退

傳Pornhub欲收購Tumblr 成人內容有望繼續發車?

《迪士尼》釋出12星座代表公主 獨立的貝兒不意外是獅子座!

培養meme/網路迷因解析聲音篇:Yee、卡翹

LINE推出「隨拍即譯」功能 安卓用戶搶先體驗!

迷因是什麼可以吃嗎? 新世代的網路爆紅事物大解析

一台手機要價六萬台幣!美國記者評測三星手機用兩天就掛

下一代PS主機規格曝光 SSD、全新AMD處理器、向下相容PS4

《復仇者聯盟4:終局之戰》上映前必須了解的十大知識!

PSN 開放更改ID 首次免費但名字要小心起爭議

UNIQLO X《快打旋風》《魔物獵人》推出聯名T恤 4月15日在台發售

平台大混戰! 騰訊遊戲服務平台「WeGame X」進軍海外市場

幫上司的電腦「澆水」!網友惡搞企鵝家族扭蛋超有創意

熟悉《JOJO》各種MEME還不夠 這十點冷知識知道算你厲害!

超佛!多部正版動畫YouTube免費看 《黃金神威》、《企鵝家族》通通有

三星推出可拋式「滅火器花瓶」 危機時刻就直接丟吧!

樂高推出「腳底按摩健康組」 盒子背面還有穴道對應指南!

成人遊戲業者祭出「全身感應」VR裝置 人類要滅絕了嗎?

日清聯合金士頓推出電競耳機 杯麵變耳罩、叉子成了麥克風

少女心炸裂!日本推出「美少女戰士」製冰盒 冰塊猶如水晶般夢幻

《海賊王》魯夫變身《玩具總動員》胡迪警長 完全無違和!

蘋果遊戲訂閱服務「Apple Arcade」秋季登場 百款獨家遊戲任你玩

票選美國各州玩家心目中的遊戲平台首選 Xbox榮登冠軍

Google坦承串流服務Stadia 初期無法讓格鬥遊戲順暢運行

蘋果串流遊戲服務 可能選在春季發表會上揭曉

尺度爆表!《Fate/stay night HF II.迷途之蝶》影評&劇情解析

召喚青眼白龍!《遊戲王》實體決鬥盤開放預購 快來找人決鬥吧

Google雲端遊戲服務「Stadia」預計今年上線 不用主機就可玩3A大作!

創辦人不認為EPIC Game Store限時獨佔遊戲銷售影響玩家權益

為了與Steam拼比 Epic Games Store線上遊戲商店將加入一連串更新

「RC語音」宣布3月底停止營運 8年歲月終成回憶

串流遊戲蓄勢待發 Chrome瀏覽器將支援Switch Joy-Cons手把

搭配PlayStation 5使用? Sony可能準備推出無線化的新款PS VR

《Garena 極速領域》X《MyMusic》飆樂派對 藝人愷樂、J.Sheon、納豆共襄盛舉

30年升值2000倍:一盒價值10萬美元的瑪利歐NES卡帶

火熱排行

大家就是不升級! 微軟更新久違地包括XP等舊版系統

華為傳遭Google終止合作 未來將無法用Gmail等相關google軟體

井川一/《冰與火之歌》第八季大失敗 編劇難以企及《復仇者》高度

笑得你心裡發寒! 首位模改「湯瑪士小火車」的玩家被美泰兒告了

《瘟疫傳說:無罪》明天即將發售!你需要知道的 10 個關鍵字

【回顧】平成時代結束 那些30年來我們一起看的經典動畫

九歲兒花萬元買遊戲點數 媽媽崩潰痛罵超商店員

賣雞的槓吃雞 肯德基酸Apex更新慢反被開發人員嗆爆

《巫師加強版》免費拿! 註冊訂閱GOG新聞就這麼簡單

輕鬆擊敗古墓正妹蘿拉! 《名偵探皮卡丘》萌破票房紀錄

Steam夏日特賣日期洩露 6月底請保護好你的荷包

次世代主機即將來臨 卡普空:我們準備好了!

劫薪日錢難賺! 《Payday 2》發行商 Starbreeze 可能撐不過今年

爐石/「準備」迎接平衡! 盜賊遭砍三刀,管理員被戰士拖下水

索尼:PS5 將會讓遊戲「讀取畫面」走入歷史

開分身、玩小號虐菜 是破壞遊戲體驗還是情有可原?

爐石/單人副本「達拉然大劫案」即將上線 全解鎖就送免費金卡

《寶可夢》「小拳石」擔任岩手縣應援大使 雙腳是透明圖層超搶戲

《戰國BASARA》系列公布手遊新作 網失望:還我家機續作

搶打寶可夢道館 知名餅店老闆與玩家互毆被送辦

《冰與火之歌》第八季咖啡杯迷因 竟然變成《上古卷軸 5》模組!

《APEX 英雄》新版本將會處分消極對戰的「抱大腿」玩家

慶祝十週年《Minecraft classic》免費上線 瀏覽器直接開玩

Newzoo:有超過 10 億女性是活躍的遊戲玩家

井川一/JOJO冷知識第二彈! 這10點都知道就超厲害

《墨西哥英雄大混戰》限時免費領取 戴上面具拯救世界

《魔獸世界》歡慶 15 週年! 8 月經典版帶你回到最初始的艾澤拉斯

騰訊正能量吃雞遊戲《和平精英》借殼上市 死亡還會揮手說再見

原本是教人怎樣用滑鼠的「微軟接龍」 入選電子遊戲名人堂 

《UNDEFEATED》連小島秀夫都按讚! 大學生自製虛幻4爽作免費玩

前YouTube工程師自爆:我們用假廣告,加速了IE6的衰退

《復仇者聯盟4》之後呢? 蜘蛛人、緋紅女巫...英雄們的未來大解析

《惡靈古堡2 重製版》模組修改 承太郎提槍大戰迪奧!

成人遊戲《Subverse》募資達6700萬!科幻老婆你要選哪位?

「我不是機器人」被牆了 中國玩家一度無法註冊 Steam 新帳號

暴雪動畫資深總監陳璿訪談精華 每個工作環節都是說故事

4+2不等於6!《UNO》官方認證「+4」、「+2」無法堆疊使用

榮光不再?Garena電競館傳熄燈 三創羅技電競館接力發展

挑戰觀影極限!「漫威馬拉松」59小時看22部片 挑戰者最後吐了

《哆啦A夢牧場物語》Switch中文版7月25日溫暖上市 steam再等等

留言