本文首發(fā)于騰訊游戲?qū)W院GWB。 作者:yulia 騰訊互動(dòng)娛樂品質(zhì)管理部 游戲性測(cè)評(píng)分析團(tuán)隊(duì) 在日本和美國(guó)市場(chǎng),卡牌RPG的UI設(shè)計(jì)有什么特點(diǎn)?和國(guó)內(nèi)有什么不同之處?本文將設(shè)法找到一些專業(yè)的評(píng)價(jià)方式或者關(guān)注點(diǎn),希望能為出海游戲的UI設(shè)計(jì)提供素材和建議。 研究背景及游戲介紹1. 研究背景 在我們接觸的海外游戲的測(cè)試中,UI的布局和易用性也常是玩家比較關(guān)注的對(duì)象。但是玩家有時(shí)候比較難從專業(yè)視角回答為什么覺得布局不滿意,或者UI按鈕應(yīng)該用什么更好。通過收集和分析卡牌RPG在日本和美國(guó)市場(chǎng)UI特點(diǎn),我們?cè)O(shè)法找到一些專業(yè)的評(píng)價(jià)方式或者關(guān)注點(diǎn),希望能為出海游戲的UI設(shè)計(jì)提供素材和建議。 本文不會(huì)涉及太多UI交互設(shè)計(jì)中一些比較通用的準(zhǔn)則,比如尼爾森十大交互原則,而更偏向找到一些地區(qū)本地化特色的UI表現(xiàn)方式。通過對(duì)兩個(gè)市場(chǎng)該品類的榜單游戲從以下維度拆解后,后文將僅針對(duì)有明顯特點(diǎn)的模塊進(jìn)行分析。 2. 游戲名單相關(guān)信息 本次研究所選品類游戲均來自美國(guó)和日本市場(chǎng)中,近3個(gè)月內(nèi)(9~12月)暢銷榜排名在前50左右的卡牌RPG游戲。美國(guó)市場(chǎng)共計(jì)14款,日本市場(chǎng)共計(jì)14款,以下為部分游戲名稱。由于整體美國(guó)的卡牌角色扮演游戲數(shù)量和暢銷榜表現(xiàn)不如日本,因此排名數(shù)據(jù)上略微靠后。 日本市場(chǎng)卡牌RPG的UI設(shè)計(jì)特點(diǎn)及啟示1. 界面設(shè)計(jì) 特點(diǎn)1:主界面多使用人物居中式或左右分布式布局 日本卡牌RPG游戲中比較常見的兩種模式,人物居中和左右分布式。兩者的部分區(qū)域有一定的相似性,比如狀態(tài)信息和工具欄,但人物主KV的位置和主要功能的布局會(huì)有一定差異。 下圖中截取的主要是橫屏游戲布局,以我們收集的游戲來看,豎屏游戲大多數(shù)會(huì)采用第一種。
優(yōu)點(diǎn):對(duì)玩家產(chǎn)生視覺上第一印象的吸引,更能體驗(yàn)角色細(xì)節(jié)。而較大的人物占比區(qū)域也便于增加其他交互功能,提升玩家與角色的聯(lián)結(jié)性。 缺點(diǎn):功能按鈕和部分副功能區(qū)域展示方式較為邊緣化,部分主要入口無法凸顯。
優(yōu)點(diǎn): 在突出養(yǎng)成人物的同時(shí),也突出了核心玩法的功能入口,便于玩家視覺快速定位。 缺點(diǎn):相較人物居中式布局,副功能欄的空間進(jìn)一步被擠壓,因此對(duì)主界面功能按鈕數(shù)量和優(yōu)先級(jí)展現(xiàn)形式有一定要求。如果核心功能區(qū)入口較多,整個(gè)界面UI會(huì)出現(xiàn)較為擁擠的情況。 特點(diǎn)2:豎屏兼顧人物展示與核心玩法,圍繞核心入口排布 類似人物居中式的一種精簡(jiǎn)壓縮版本,視覺上會(huì)對(duì)界面上的信息做一個(gè)優(yōu)先級(jí)處理,具體的方式可能是對(duì)關(guān)鍵信息用高飽和、放大等處理方式來突出。 豎屏游戲中弱化了除人物立繪外其他交互表現(xiàn),由于空間需同時(shí)滿足立繪表現(xiàn)和功能入口的分布,更多在“7±2”法則上做信息減法。相對(duì)于橫屏游戲,豎屏游戲?qū)τ诠δ軆?nèi)容的選擇和排布要求相對(duì)較高。 *“7±2”法則:指對(duì)不同字母、音節(jié)、字詞等,短時(shí)記憶的容量為7±2 ,即一般為7 ,并在5-9之間波動(dòng)。 優(yōu)點(diǎn):主界面上仍保留較大面積來凸顯人物,以滿足玩家對(duì)喜愛人物的展示需求,同時(shí)也突出了該游戲最主要的核心玩法,降低玩家對(duì)其他功能按鈕的認(rèn)知負(fù)擔(dān)。 缺點(diǎn):受空間限制,對(duì)游戲功能數(shù)量和排布視覺比重分配有很高的要求。 特點(diǎn)3:角色界面中立繪與人物信息布局1:1,數(shù)值和文字較多 無論橫屏或者豎屏,14款日本游戲中,有8款游戲的角色界面的立繪與人物信息布局1:1,數(shù)值和文字信息的界面占比有時(shí)甚至大于50%。 特點(diǎn)4:主要功能欄區(qū)域中按鈕位置固定,數(shù)量遵循“7±2”法則 ① 功能欄區(qū)域位置也相對(duì)固定,均分散在界面底部,按鈕水平排布緊密。 ② 同一水平面按鈕數(shù)量:橫屏游戲中按鈕數(shù)量約在7-8個(gè);豎屏游戲中的數(shù)量約在5-6個(gè)。 2. 交互形式 特點(diǎn)1:養(yǎng)成界面多采用局部分頁(yè)切換來詳細(xì)展示角色數(shù)值與人設(shè) 考慮到日本玩家的用戶屬性中往往帶有較多的二次元背景,這使得玩家會(huì)更為關(guān)注世界觀、劇情以及人物設(shè)定。因此游戲中會(huì)準(zhǔn)備很多塑造IP的內(nèi)容,如故事鋪墊和人物小傳。在角色界面,為了解決信息較多的問題,日本RPG游戲多數(shù)采用局部分頁(yè)的交互形式,將以戰(zhàn)力數(shù)字為主的數(shù)值信息和以文字為主的人設(shè)信息加以區(qū)分。這種對(duì)不同信息的分類方式,既降低了閱讀成本,同時(shí)也滿足部分玩家對(duì)人物設(shè)定深入了解的需求。 分欄形式:主要有嵌入式分頁(yè)欄和頁(yè)簽式 特點(diǎn)2:特殊入口按鈕動(dòng)態(tài)切換,“一鍵直達(dá)”跳轉(zhuǎn)層級(jí)少 此類限時(shí)入口可靈活配置,會(huì)自動(dòng)以幻燈片的模式切換。在無人為操作下,一般1-2秒自動(dòng)播放下一張圖片。限時(shí)入口按鈕較重點(diǎn)入口要小,而素材常以“人物+活動(dòng)名稱”形式展示。 這種入口以較少的跳轉(zhuǎn)層級(jí)來幫助玩家快速、有效的參與活動(dòng),提高活動(dòng)轉(zhuǎn)化率。但需要注意的是,由于用戶在主界面停留的時(shí)間不會(huì)太久,以之前項(xiàng)目經(jīng)驗(yàn)來看,圖片數(shù)量在3-4個(gè)以內(nèi)是比較有效的。 此外,我們?cè)谑占a(chǎn)品的時(shí)候還會(huì)發(fā)現(xiàn),一些豎屏游戲考慮單手操作的使用場(chǎng)景,主功能的頁(yè)面是能夠通過滑動(dòng)切換的,這種形式會(huì)比較適合玩法和系統(tǒng)較為簡(jiǎn)潔的游戲,而且比較強(qiáng)調(diào)場(chǎng)景連貫性。因?yàn)閿?shù)量比較少,就沒有作為特點(diǎn)說明。 3. ICON設(shè)計(jì) 特點(diǎn)1:偏好對(duì)應(yīng)游戲世界觀定制化設(shè)計(jì)ICON樣式 日本RPG游戲中許多ICON設(shè)計(jì)都是圍繞著游戲內(nèi)的元素進(jìn)行設(shè)計(jì)的,比如下圖中,同樣表達(dá)“角色養(yǎng)成”功能, 《怪物彈珠》中使用“小恐龍”,而《公主連結(jié)》則直接使用游戲中角色的Q版頭像;“副本”在《智龍迷城》中則使用石頭門,而《偶像大師》中則用演唱會(huì)表示。 優(yōu)點(diǎn):因IP而關(guān)注手游的玩家較多,更容易產(chǎn)生沉浸感和認(rèn)同感。 缺點(diǎn):提高了玩家對(duì)信息識(shí)別的下限,初次進(jìn)入時(shí)需要額外學(xué)習(xí)。 特點(diǎn)2:ICON語義區(qū)分細(xì)致,部分類型詞匯使用存在共性 在不同的題材和IP中,游戲中ICON和詞匯會(huì)有一定重合率,但也會(huì)結(jié)合世界觀和劇情做許多定制化的表達(dá)。
4. 日本頭部卡牌RPG對(duì)中國(guó)市場(chǎng)出海手游的啟示 UI設(shè)計(jì)應(yīng)當(dāng)從玩家特點(diǎn)和需求出發(fā),由于日本卡牌RPG的題材多面向二次元用戶,而這批玩家也受日本長(zhǎng)久的動(dòng)漫作品影響,對(duì)游戲的世界觀塑造、美術(shù)表現(xiàn)、人物設(shè)定等有比較高的要求??紤]到這樣的用戶特點(diǎn),總結(jié)了以下日本市場(chǎng)卡牌RPG的注意點(diǎn)。 4.1 界面設(shè)計(jì)啟示 要點(diǎn)1:注重玩家與角色之間的聯(lián)結(jié)感 主界面除了預(yù)留較大區(qū)域展示角色,也要注重角色的呈現(xiàn)形式(如動(dòng)/靜態(tài)、2D/3D、是否是主界面獨(dú)有立繪等)。除了立繪展示,主界面還會(huì)承載一些角色培養(yǎng)的周邊功能(如互動(dòng)、拍照等)。 要點(diǎn)2:注意角色界面多種信息分類和呈現(xiàn)形式 由于東亞地區(qū)(包括日本)對(duì)數(shù)字、數(shù)值強(qiáng)度比較敏感,玩家有能力處理數(shù)據(jù)變化和角色強(qiáng)度之間的關(guān)聯(lián)性,也關(guān)注此類數(shù)值信息,因此養(yǎng)成數(shù)值在界面中占比較大,對(duì)部分的數(shù)值也會(huì)以突出形式呈現(xiàn)。 而對(duì)于存在較多信息需要展示的情況,可通過局部切換分頁(yè)的方式來實(shí)現(xiàn)對(duì)內(nèi)容的有效分類,盡量不要在同一界面中出現(xiàn)大量且多種類型的信息內(nèi)容(如大段文字和數(shù)字一起展示)。 4.2 ICON設(shè)計(jì)啟示 要點(diǎn)1:從圖標(biāo)細(xì)節(jié)入口,全方位塑造IP 通過選用游戲中特色的角色或象征性元素,在細(xì)節(jié)處呼應(yīng)游戲獨(dú)有的設(shè)定從而提升玩家對(duì)于IP題材的認(rèn)同度和沉浸感體驗(yàn)。目前,中國(guó)市場(chǎng)手游也有相同的趨勢(shì),但需要注意的是由于定制化的圖標(biāo)會(huì)增加新手玩家的認(rèn)知成本,在游戲初期需要介入引導(dǎo)強(qiáng)化認(rèn)知。 受玩家特點(diǎn)影響,日本RPG游戲整體比較重視世界觀的塑造或IP的還原。ICON作為UI展示的重要部分,都會(huì)做一定程度的定制化設(shè)計(jì)。 要點(diǎn)2:可使用部分通用詞匯,定制化時(shí)要注意世界觀鋪墊 盡管ICON圖標(biāo)上有較多定制,但部分文字說明仍會(huì)存在一定共性,如表達(dá)“體力”時(shí)甚至直接使用文字“スタミナ”或“AP”,這種外來語的表述可能由于早期日本游戲受到了較多歐美游戲設(shè)定的影響,而在中國(guó)市場(chǎng)部分圖標(biāo)文字的運(yùn)用更加多元和抽象化,因此在游戲出海時(shí),需要注意本地化。 除了以上總結(jié)外,在對(duì)日本市場(chǎng)卡牌RPG游戲榜單的整理中發(fā)現(xiàn),豎屏游戲的占比是比較大的。即便是相同的玩法,如回合制,《死亡愛麗絲》、《ONE PIECE》和《ドラゴンエッグ》也都采用了豎屏形式,這可能與當(dāng)?shù)厥袌?chǎng)用戶體驗(yàn)手游的生活場(chǎng)景有關(guān)(如工薪族通勤時(shí)的碎片化時(shí)間)。但由于豎屏和橫屏形式的選擇會(huì)很大程度影響玩法、美術(shù)表現(xiàn)和題材,需要游戲立項(xiàng)時(shí)就考慮,且在后期UI設(shè)計(jì)優(yōu)化調(diào)整空間小,因此不在本文里做衍生分析。 美國(guó)市場(chǎng)卡牌RPG的UI設(shè)計(jì)特點(diǎn)及啟示1. 界面特點(diǎn)1:主視覺區(qū)域功能入口多點(diǎn)狀分布,功能區(qū)域劃分不明顯 美國(guó)市場(chǎng)選取的RPG榜單游戲中,在主界面結(jié)構(gòu)和按鈕分布上有比較明顯的共性,如場(chǎng)景界面的整體主題塑造、間隔較開的入口位置、右下角高亮突出的“Call To Action”按鈕設(shè)計(jì)。在收集的14款美國(guó)RPG榜單游戲中,有9款游戲運(yùn)用了相似的主界面結(jié)構(gòu)。 優(yōu)點(diǎn):
缺點(diǎn):
特點(diǎn)2:界面信息內(nèi)容精簡(jiǎn),以圖形呈現(xiàn)為主 通過運(yùn)用大塊的圖形,并配合較少的文字,整個(gè)界面包含的信息內(nèi)容較少,如《漫威:未來之戰(zhàn)》中主要系統(tǒng)僅有6個(gè)按鈕,但這種極簡(jiǎn)的主界面對(duì)整個(gè)游戲系統(tǒng)數(shù)量有較高的要求。 注意:圖形化≠精簡(jiǎn),文字內(nèi)容、圖形數(shù)量(較多入口都用圖形呈現(xiàn))和呈現(xiàn)形式(圖形重疊、排布無規(guī)律和圖形形狀多樣)都會(huì)影響界面精簡(jiǎn)度和可閱讀性,如下方《Idle Heroes》主界面中多種飽和度高的顏色與形狀各異的圖形、ICON都容易增加玩家尋找功能的時(shí)間。 而《漫威:神威戰(zhàn)隊(duì)》與《漫威:未來之戰(zhàn)》的主界面就嚴(yán)格控制了界面上的功能模塊數(shù)量和視覺優(yōu)先級(jí)突出方式。在商城界面中,美國(guó)這類游戲也大多運(yùn)用了簡(jiǎn)單的“商品大圖+價(jià)格”的展現(xiàn)形式,具體禮包內(nèi)物品及數(shù)量更多以浮窗或彈窗的方式展示。 優(yōu)點(diǎn):直觀圖形化的展示方式極大降低了玩家的認(rèn)知和閱讀成本。 缺點(diǎn):弱化了人物設(shè)定、技能等信息介紹,也無法清楚定位到角色之間戰(zhàn)斗屬性的差異,但也適用于一些角色差異化小的游戲。 2. ICON設(shè)計(jì) 特點(diǎn)1:注重通用化的表達(dá),常直接以詞匯作為按鈕主體 即便是不同的題材和IP,美國(guó)卡牌RPG游戲中ICON重合率也較高,并且固定題材下也存在一些通用的圖標(biāo)或固定的詞匯表示。
在生活中相比stamina,使用energy的場(chǎng)景更為廣泛。除了能量,它還能表示活力、精力和能源等。那閃電的英文lightning與energy又是如何關(guān)聯(lián)的呢?大家都知道電能electric energy,而電能的發(fā)現(xiàn)其實(shí)與閃電是有關(guān)的,科學(xué)家富蘭克林著名的風(fēng)箏實(shí)驗(yàn)證明了閃電也是一種放電現(xiàn)象。目前電器產(chǎn)品對(duì)電量的標(biāo)識(shí)也會(huì)使用閃電形狀,而游戲作為生活的衍生,也會(huì)運(yùn)用類似的圖標(biāo)來表達(dá)“活力/體力”。此處的推測(cè)和發(fā)現(xiàn)也許并不完全準(zhǔn)確,但也提醒了我們?cè)谠O(shè)計(jì)出海游戲的ICON時(shí),是需要關(guān)注一些語意和詞匯在當(dāng)?shù)剡\(yùn)用時(shí)背后場(chǎng)景或者歷史。
特點(diǎn)2:玩法入口融合場(chǎng)景定制化設(shè)計(jì),常規(guī)入口標(biāo)準(zhǔn)化處理 《RAID》和《Disney Sorcerer's Arena》主界面上的玩法系統(tǒng)入口均復(fù)用了場(chǎng)景物件,使得功能按鈕的大小和樣式差異性大。此類占據(jù)主視覺區(qū)域的系統(tǒng)按鈕一般較為重要,如《RAID》中的酒館(養(yǎng)成)和《Disney Sorcerer's Arena》的工會(huì)地下城(核心玩法)。相比之下,常規(guī)系統(tǒng)入口如任務(wù)、收集、成就等則采用統(tǒng)一標(biāo)準(zhǔn)大小和顏色。 優(yōu)點(diǎn):強(qiáng)調(diào)場(chǎng)景與功能入口的結(jié)合增強(qiáng)了世界觀的塑造(如中世紀(jì)的房屋、未來科技的全息影像)。 缺點(diǎn):大部分情況下實(shí)際功能意義與建筑本身沒有關(guān)系,無法完成圖形對(duì)詞意的表達(dá),往往忽略了ICON信息傳遞的有效性(如“酒館”本身很難關(guān)聯(lián)到角色養(yǎng)成)。同時(shí)一些邊緣的場(chǎng)景化入口(如上圖《RAID》的“大殿”如不配合文字標(biāo)注非常容易忽略)。 3. 美國(guó)頭部卡牌RPG對(duì)中國(guó)市場(chǎng)出海手游的啟示 3.1 界面設(shè)計(jì) 要點(diǎn)1. 場(chǎng)景化主界面要避免“形式主義”,應(yīng)結(jié)合游戲體驗(yàn)與用戶視覺習(xí)慣安排主次 雖然這種布局的主界面有不錯(cuò)的氛圍塑造能力,但很多游戲產(chǎn)品在主界面設(shè)計(jì)時(shí)并沒有考慮游戲中用戶實(shí)際體驗(yàn)感受,進(jìn)而忽略了功能布局的實(shí)用性。 下面以《RAID》作為案例說明,實(shí)際14款美國(guó)市場(chǎng)游戲中,《Idle Heroes》和《Hero Wars-Fantasy World》也有出現(xiàn)。 主次分布的結(jié)構(gòu)中,主視圖中的內(nèi)容安排非常重要,應(yīng)按照系統(tǒng)優(yōu)先級(jí)設(shè)置。一般RPG游戲中,角色、抽卡、商店、副本、任務(wù)等是比較重要的系統(tǒng)。而《RAID》中,非重要和非高頻使用的系統(tǒng)占據(jù)了主視覺區(qū)(如大殿、鍛造、訓(xùn)練場(chǎng)、圖鑒),而比較重要的英雄(角色)系統(tǒng)則被分配在次級(jí)位置。 要點(diǎn)2:適當(dāng)取舍,區(qū)域化界面功能,做輕量化設(shè)計(jì) 輕量化設(shè)計(jì),無論是圖形化還是區(qū)域化,都是為了降低信息理解成本,提升理解效率。對(duì)于同一系統(tǒng)多層功能的情況,一方面可以區(qū)域化歸類入口,另一方面也可以采取部分收納、懸浮展示子功能的形式,減少界面上的信息內(nèi)容。 仍以《RAID》為例,其主界面中去除上方功能欄共計(jì)17個(gè)按鈕,數(shù)量偏多,在保留部分重要入口展示區(qū)域后,功能布局上還有調(diào)整空間。比如右下角三個(gè)按鈕Mission, target, challenge(綠色模塊)實(shí)際對(duì)應(yīng)的系統(tǒng)功能是比較重復(fù)的,當(dāng)三個(gè)功能同時(shí)展現(xiàn)在主界面時(shí),用戶其實(shí)較難理解三者間的主次和功能區(qū)別,這種問題可能是因?yàn)橄到y(tǒng)策劃與UI設(shè)計(jì)者理解上的偏差導(dǎo)致的。 要點(diǎn)3:角色界面弱化數(shù)值、背景說明,注重養(yǎng)成功能實(shí)用性 可以發(fā)現(xiàn),下面的角色界面不同于日本市場(chǎng)游戲RPG手游會(huì)詳細(xì)介紹人物背景故事,美國(guó)市場(chǎng)的此類游戲更多聚焦于“人物養(yǎng)成”這一界面的實(shí)用性和視覺表現(xiàn)上。界面一般以占比過半的人物立繪或者模型為中心,圍繞搭載便捷的裝備穿搭,而關(guān)于人物的信息和技能表述則都以簡(jiǎn)略的方式體現(xiàn)。 概括來說,就是需要減少?gòu)?fù)雜信息的出現(xiàn),增設(shè)更加明確突出的形式來建立目標(biāo),同時(shí)要增加視覺表現(xiàn)。 3.2 ICON設(shè)計(jì) 要點(diǎn)1:差異化場(chǎng)景化界面的功能入口 受場(chǎng)景主題化影響,主界面功能入口往往容易出現(xiàn)以下兩種問題:1)按鈕完全融入整張場(chǎng)景圖,變得難以辨識(shí)2)選擇邊緣化的場(chǎng)景物件作為系統(tǒng)入口 因此在主題風(fēng)格化的同時(shí),UI設(shè)計(jì)還必須注意交互的易用性和易讀性,盡量不因?yàn)橄氚寻粹o融入場(chǎng)景而使其不容易發(fā)現(xiàn)或者點(diǎn)擊。 要點(diǎn)2:以“功能表達(dá)” 為先,再構(gòu)思場(chǎng)景呈現(xiàn) 既然是設(shè)計(jì)按鈕,圖標(biāo)無論是平面還是立體物件,應(yīng)當(dāng)注意保留按鈕形式與其意思的表達(dá)一致性,這點(diǎn)《AFK》的許多ICON設(shè)計(jì)是比較值得學(xué)習(xí)的,如下圖的“商店”和“馬車”都在立體場(chǎng)景中對(duì)平面ICON做了非常好的還原,使得部分按鈕即便沒有文字注解,玩家都可以基于自己的生活體驗(yàn)直接理解它的含義。相反,《Hero Wars-Fantasy World》中兩個(gè)不同玩法卻都使用了近似的傳送門形式,并沒有體現(xiàn)差異性,也較難直觀理解按鈕與玩法對(duì)應(yīng)的意義表達(dá)。 要點(diǎn)3:關(guān)注部分通用化的圖標(biāo)和表達(dá)方式,詞匯運(yùn)用需斟酌 對(duì)于ICON和詞匯本地化的應(yīng)用總結(jié)了以下三點(diǎn):
小結(jié)總結(jié)來說,出色的本地化UI設(shè)計(jì)不僅需要考慮當(dāng)?shù)氐挠脩袅?xí)慣和文化特征,還需要深度理解系統(tǒng)設(shè)計(jì)的目的和定位,前者需要站在用戶的角度,后者需要站在策劃的角度,而這些都是需要加深游戲理解和不斷聆聽各方聲音。 |
|