本文首發(fā)于騰訊游戲?qū)W院GWB。

作者：yulia

騰訊互動娛樂品質(zhì)管理部 游戲性測評分析團隊

在日本和美國市場，卡牌RPG的UI設(shè)計有什么特點？和國內(nèi)有什么不同之處？本文將設(shè)法找到一些專業(yè)的評價方式或者關(guān)注點，希望能為出海游戲的UI設(shè)計提供素材和建議。

研究背景及游戲介紹

1. 研究背景

在我們接觸的海外游戲的測試中，UI的布局和易用性也常是玩家比較關(guān)注的對象。但是玩家有時候比較難從專業(yè)視角回答為什么覺得布局不滿意，或者UI按鈕應該用什么更好。通過收集和分析卡牌RPG在日本和美國市場UI特點，我們設(shè)法找到一些專業(yè)的評價方式或者關(guān)注點，希望能為出海游戲的UI設(shè)計提供素材和建議。

本文不會涉及太多UI交互設(shè)計中一些比較通用的準則，比如尼爾森十大交互原則，而更偏向找到一些地區(qū)本地化特色的UI表現(xiàn)方式。通過對兩個市場該品類的榜單游戲從以下維度拆解后，后文將僅針對有明顯特點的模塊進行分析。

2. 游戲名單相關(guān)信息

本次研究所選品類游戲均來自美國和日本市場中，近3個月內(nèi)（9~12月）暢銷榜排名在前50左右的卡牌RPG游戲。美國市場共計14款，日本市場共計14款，以下為部分游戲名稱。由于整體美國的卡牌角色扮演游戲數(shù)量和暢銷榜表現(xiàn)不如日本，因此排名數(shù)據(jù)上略微靠后。

日本市場卡牌RPG的UI設(shè)計特點及啟示

1. 界面設(shè)計

特點1：主界面多使用人物居中式或左右分布式布局

日本卡牌RPG游戲中比較常見的兩種模式，人物居中和左右分布式。兩者的部分區(qū)域有一定的相似性，比如狀態(tài)信息和工具欄，但人物主KV的位置和主要功能的布局會有一定差異。

下圖中截取的主要是橫屏游戲布局，以我們收集的游戲來看，豎屏游戲大多數(shù)會采用第一種。

• 人物居中式

優(yōu)點：對玩家產(chǎn)生視覺上第一印象的吸引，更能體驗角色細節(jié)。而較大的人物占比區(qū)域也便于增加其他交互功能，提升玩家與角色的聯(lián)結(jié)性。

缺點：功能按鈕和部分副功能區(qū)域展示方式較為邊緣化，部分主要入口無法凸顯。

• 左右分布式

優(yōu)點： 在突出養(yǎng)成人物的同時，也突出了核心玩法的功能入口，便于玩家視覺快速定位。

缺點：相較人物居中式布局，副功能欄的空間進一步被擠壓，因此對主界面功能按鈕數(shù)量和優(yōu)先級展現(xiàn)形式有一定要求。如果核心功能區(qū)入口較多，整個界面UI會出現(xiàn)較為擁擠的情況。

特點2：豎屏兼顧人物展示與核心玩法，圍繞核心入口排布

類似人物居中式的一種精簡壓縮版本，視覺上會對界面上的信息做一個優(yōu)先級處理，具體的方式可能是對關(guān)鍵信息用高飽和、放大等處理方式來突出。

豎屏游戲中弱化了除人物立繪外其他交互表現(xiàn)，由于空間需同時滿足立繪表現(xiàn)和功能入口的分布，更多在“7±2”法則上做信息減法。相對于橫屏游戲，豎屏游戲?qū)τ诠δ軆?nèi)容的選擇和排布要求相對較高。

*“7±2”法則：指對不同字母、音節(jié)、字詞等，短時記憶的容量為7±2 ，即一般為7 ，并在5-9之間波動。

優(yōu)點：主界面上仍保留較大面積來凸顯人物，以滿足玩家對喜愛人物的展示需求，同時也突出了該游戲最主要的核心玩法，降低玩家對其他功能按鈕的認知負擔。

缺點：受空間限制，對游戲功能數(shù)量和排布視覺比重分配有很高的要求。

特點3：角色界面中立繪與人物信息布局1:1，數(shù)值和文字較多

無論橫屏或者豎屏，14款日本游戲中，有8款游戲的角色界面的立繪與人物信息布局1:1，數(shù)值和文字信息的界面占比有時甚至大于50%。

特點4：主要功能欄區(qū)域中按鈕位置固定，數(shù)量遵循“7±2”法則

① 功能欄區(qū)域位置也相對固定，均分散在界面底部，按鈕水平排布緊密。

② 同一水平面按鈕數(shù)量：橫屏游戲中按鈕數(shù)量約在7-8個；豎屏游戲中的數(shù)量約在5-6個。

2. 交互形式

特點1：養(yǎng)成界面多采用局部分頁切換來詳細展示角色數(shù)值與人設(shè)

考慮到日本玩家的用戶屬性中往往帶有較多的二次元背景，這使得玩家會更為關(guān)注世界觀、劇情以及人物設(shè)定。因此游戲中會準備很多塑造IP的內(nèi)容，如故事鋪墊和人物小傳。在角色界面，為了解決信息較多的問題，日本RPG游戲多數(shù)采用局部分頁的交互形式，將以戰(zhàn)力數(shù)字為主的數(shù)值信息和以文字為主的人設(shè)信息加以區(qū)分。這種對不同信息的分類方式，既降低了閱讀成本，同時也滿足部分玩家對人物設(shè)定深入了解的需求。

分欄形式：主要有嵌入式分頁欄和頁簽式

特點2：特殊入口按鈕動態(tài)切換，“一鍵直達”跳轉(zhuǎn)層級少

此類限時入口可靈活配置，會自動以幻燈片的模式切換。在無人為操作下，一般1-2秒自動播放下一張圖片。限時入口按鈕較重點入口要小，而素材常以“人物+活動名稱”形式展示。

這種入口以較少的跳轉(zhuǎn)層級來幫助玩家快速、有效的參與活動，提高活動轉(zhuǎn)化率。但需要注意的是，由于用戶在主界面停留的時間不會太久，以之前項目經(jīng)驗來看，圖片數(shù)量在3-4個以內(nèi)是比較有效的。

此外，我們在收集產(chǎn)品的時候還會發(fā)現(xiàn)，一些豎屏游戲考慮單手操作的使用場景，主功能的頁面是能夠通過滑動切換的，這種形式會比較適合玩法和系統(tǒng)較為簡潔的游戲，而且比較強調(diào)場景連貫性。因為數(shù)量比較少，就沒有作為特點說明。

3. ICON設(shè)計

特點1：偏好對應游戲世界觀定制化設(shè)計ICON樣式

日本RPG游戲中許多ICON設(shè)計都是圍繞著游戲內(nèi)的元素進行設(shè)計的，比如下圖中，同樣表達“角色養(yǎng)成”功能， 《怪物彈珠》中使用“小恐龍”，而《公主連結(jié)》則直接使用游戲中角色的Q版頭像；“副本”在《智龍迷城》中則使用石頭門，而《偶像大師》中則用演唱會表示。

優(yōu)點：因IP而關(guān)注手游的玩家較多，更容易產(chǎn)生沉浸感和認同感。

缺點：提高了玩家對信息識別的下限，初次進入時需要額外學習。

特點2：ICON語義區(qū)分細致，部分類型詞匯使用存在共性

在不同的題材和IP中，游戲中ICON和詞匯會有一定重合率，但也會結(jié)合世界觀和劇情做許多定制化的表達。

• “副本”：詞匯上更強調(diào)與玩法場景和劇情感，常見的如quest（クエスト）、story（ストーリー），一小部分會使用dungeon（ダンジョン），有時也會定制。quest詞義為探索、story詞義為故事，因為日語中用的是兩個英語的外來詞，所以我們也可以結(jié)合英文的意思來理解用詞的語境。前者可以解釋為探索，使用時它更多會用于強調(diào)連續(xù)刷關(guān)的副本形式，一般關(guān)卡中很少會有劇情和特效演出。而后者story則偏向帶有敘事的關(guān)卡，一般每一章節(jié)會有一個獨特的主題，以便作為故事去區(qū)分。

• “角色”：詞匯使用伙伴（なかま）、怪物（モンスター）、角色（キャラクタ）這三者出現(xiàn)較多?？磩勇绻容^多的話，會發(fā)現(xiàn)一些熱血漫畫里經(jīng)常會說伙伴，但對于這種定制化的文本表達，如果游戲中無法闡述清楚，或者給玩家傳達到這些角色是你的伙伴，就容易產(chǎn)生違和感。更何況角色在卡牌游戲里一般都會引入商業(yè)化，所以這一塊無論是用詞還是體驗都是日本卡牌RPG比較注重的。

• “體力”：表現(xiàn)則相對統(tǒng)一，stamina（スタミナ）、AP、和ACT使用的頻次較高，形式上實用性強，直接使用“進度條+數(shù)字”方式表現(xiàn)。

4. 日本頭部卡牌RPG對中國市場出海手游的啟示

UI設(shè)計應當從玩家特點和需求出發(fā)，由于日本卡牌RPG的題材多面向二次元用戶，而這批玩家也受日本長久的動漫作品影響，對游戲的世界觀塑造、美術(shù)表現(xiàn)、人物設(shè)定等有比較高的要求?？紤]到這樣的用戶特點，總結(jié)了以下日本市場卡牌RPG的注意點。

4.1 界面設(shè)計啟示

要點1：注重玩家與角色之間的聯(lián)結(jié)感

主界面除了預留較大區(qū)域展示角色，也要注重角色的呈現(xiàn)形式（如動/靜態(tài)、2D/3D、是否是主界面獨有立繪等）。除了立繪展示，主界面還會承載一些角色培養(yǎng)的周邊功能（如互動、拍照等）。

要點2：注意角色界面多種信息分類和呈現(xiàn)形式

由于東亞地區(qū)（包括日本）對數(shù)字、數(shù)值強度比較敏感，玩家有能力處理數(shù)據(jù)變化和角色強度之間的關(guān)聯(lián)性，也關(guān)注此類數(shù)值信息，因此養(yǎng)成數(shù)值在界面中占比較大，對部分的數(shù)值也會以突出形式呈現(xiàn)。

而對于存在較多信息需要展示的情況，可通過局部切換分頁的方式來實現(xiàn)對內(nèi)容的有效分類，盡量不要在同一界面中出現(xiàn)大量且多種類型的信息內(nèi)容（如大段文字和數(shù)字一起展示）。 

4.2 ICON設(shè)計啟示

要點1：從圖標細節(jié)入口，全方位塑造IP

通過選用游戲中特色的角色或象征性元素，在細節(jié)處呼應游戲獨有的設(shè)定從而提升玩家對于IP題材的認同度和沉浸感體驗。目前，中國市場手游也有相同的趨勢，但需要注意的是由于定制化的圖標會增加新手玩家的認知成本，在游戲初期需要介入引導強化認知。

受玩家特點影響，日本RPG游戲整體比較重視世界觀的塑造或IP的還原。ICON作為UI展示的重要部分，都會做一定程度的定制化設(shè)計。

要點2：可使用部分通用詞匯，定制化時要注意世界觀鋪墊

盡管ICON圖標上有較多定制，但部分文字說明仍會存在一定共性，如表達“體力”時甚至直接使用文字“スタミナ”或“AP”，這種外來語的表述可能由于早期日本游戲受到了較多歐美游戲設(shè)定的影響，而在中國市場部分圖標文字的運用更加多元和抽象化，因此在游戲出海時，需要注意本地化。

除了以上總結(jié)外，在對日本市場卡牌RPG游戲榜單的整理中發(fā)現(xiàn)，豎屏游戲的占比是比較大的。即便是相同的玩法，如回合制，《死亡愛麗絲》、《ONE PIECE》和《ドラゴンエッグ》也都采用了豎屏形式，這可能與當?shù)厥袌鲇脩趔w驗手游的生活場景有關(guān)（如工薪族通勤時的碎片化時間）。但由于豎屏和橫屏形式的選擇會很大程度影響玩法、美術(shù)表現(xiàn)和題材，需要游戲立項時就考慮，且在后期UI設(shè)計優(yōu)化調(diào)整空間小，因此不在本文里做衍生分析。

美國市場卡牌RPG的UI設(shè)計特點及啟示

1. 界面

特點1：主視覺區(qū)域功能入口多點狀分布，功能區(qū)域劃分不明顯

美國市場選取的RPG榜單游戲中，在主界面結(jié)構(gòu)和按鈕分布上有比較明顯的共性，如場景界面的整體主題塑造、間隔較開的入口位置、右下角高亮突出的“Call To Action”按鈕設(shè)計。在收集的14款美國RPG榜單游戲中，有9款游戲運用了相似的主界面結(jié)構(gòu)。

優(yōu)點：

1. 這種視覺區(qū)較大的布局形式較為適合塑造成一個完整的場景，這種形式能夠使得玩家有不錯的沉浸感，比如《星球大戰(zhàn)》中就沿用電影中飛船內(nèi)部的元素設(shè)計了有IP特色的主界面。

2. 功能入口間隙較大一方面限制過多信息內(nèi)容的展示，減少了玩家的閱讀負擔，另一方面也降低了誤觸可能，如《Disney Sorcerer's Arena》中間隔較開的入口玩法。

缺點：

1. 點狀結(jié)構(gòu)的信息內(nèi)容分布往往難以控制玩家的視覺路徑，也難以快速形成區(qū)域性記憶，玩家可能會四處尋找目標入口而浪費一些時間。

2. 功能按鈕分布位置與其重要性有時不相關(guān)，視覺上的第一注意力信息可能是非核心功能，如右下方《RAID》中畫面最中間的“鍛造”系統(tǒng)只是整個角色養(yǎng)成的一小部分，且非初期解鎖系統(tǒng)，但卻占據(jù)了一個比較重要的視覺位置。

特點2：界面信息內(nèi)容精簡，以圖形呈現(xiàn)為主

通過運用大塊的圖形，并配合較少的文字，整個界面包含的信息內(nèi)容較少，如《漫威：未來之戰(zhàn)》中主要系統(tǒng)僅有6個按鈕，但這種極簡的主界面對整個游戲系統(tǒng)數(shù)量有較高的要求。

注意：圖形化≠精簡，文字內(nèi)容、圖形數(shù)量（較多入口都用圖形呈現(xiàn)）和呈現(xiàn)形式（圖形重疊、排布無規(guī)律和圖形形狀多樣）都會影響界面精簡度和可閱讀性，如下方《Idle Heroes》主界面中多種飽和度高的顏色與形狀各異的圖形、ICON都容易增加玩家尋找功能的時間。

而《漫威：神威戰(zhàn)隊》與《漫威：未來之戰(zhàn)》的主界面就嚴格控制了界面上的功能模塊數(shù)量和視覺優(yōu)先級突出方式。在商城界面中，美國這類游戲也大多運用了簡單的“商品大圖+價格”的展現(xiàn)形式，具體禮包內(nèi)物品及數(shù)量更多以浮窗或彈窗的方式展示。

優(yōu)點：直觀圖形化的展示方式極大降低了玩家的認知和閱讀成本。

缺點：弱化了人物設(shè)定、技能等信息介紹，也無法清楚定位到角色之間戰(zhàn)斗屬性的差異，但也適用于一些角色差異化小的游戲。

2. ICON設(shè)計

特點1：注重通用化的表達，常直接以詞匯作為按鈕主體

即便是不同的題材和IP，美國卡牌RPG游戲中ICON重合率也較高，并且固定題材下也存在一些通用的圖標或固定的詞匯表示。

• “體力”：其英文可以表述stamina，譯為體力、耐力，在上文日本的ICON設(shè)計分析中也出現(xiàn)了其作為外來語應用的案例。但在研究的14款歐美游戲中，9款都使用了“閃電”來表示體力。為了探索這種一致性背后的原因，我們也做了一些研究。

在生活中相比stamina，使用energy的場景更為廣泛。除了能量，它還能表示活力、精力和能源等。那閃電的英文lightning與energy又是如何關(guān)聯(lián)的呢？大家都知道電能electric energy，而電能的發(fā)現(xiàn)其實與閃電是有關(guān)的，科學家富蘭克林著名的風箏實驗證明了閃電也是一種放電現(xiàn)象。目前電器產(chǎn)品對電量的標識也會使用閃電形狀，而游戲作為生活的衍生，也會運用類似的圖標來表達“活力/體力”。此處的推測和發(fā)現(xiàn)也許并不完全準確，但也提醒了我們在設(shè)計出海游戲的ICON時，是需要關(guān)注一些語意和詞匯在當?shù)剡\用時背后場景或者歷史。

• “副本”：圖標常用“兩把交叉的劍”或直接使用“campaign”或“battle”，這樣的用詞符合“Call To Action”設(shè)計，配以醒目的顏色促使玩家點擊前往。

• “角色”：與題材關(guān)聯(lián)性強，西方魔幻題材的游戲多使用“角斗士”的圖標，由于此類游戲往往參考中世紀背景下的人文建筑風格，角斗士與歷史的關(guān)聯(lián)性也烘托了游戲的年代感。 

特點2：玩法入口融合場景定制化設(shè)計，常規(guī)入口標準化處理

《RAID》和《Disney Sorcerer's Arena》主界面上的玩法系統(tǒng)入口均復用了場景物件，使得功能按鈕的大小和樣式差異性大。此類占據(jù)主視覺區(qū)域的系統(tǒng)按鈕一般較為重要，如《RAID》中的酒館（養(yǎng)成）和《Disney Sorcerer's Arena》的工會地下城（核心玩法）。相比之下，常規(guī)系統(tǒng)入口如任務、收集、成就等則采用統(tǒng)一標準大小和顏色。

優(yōu)點：強調(diào)場景與功能入口的結(jié)合增強了世界觀的塑造（如中世紀的房屋、未來科技的全息影像）。

缺點：大部分情況下實際功能意義與建筑本身沒有關(guān)系，無法完成圖形對詞意的表達，往往忽略了ICON信息傳遞的有效性（如“酒館”本身很難關(guān)聯(lián)到角色養(yǎng)成）。同時一些邊緣的場景化入口（如上圖《RAID》的“大殿”如不配合文字標注非常容易忽略）。

3. 美國頭部卡牌RPG對中國市場出海手游的啟示

3.1 界面設(shè)計

要點1. 場景化主界面要避免“形式主義”，應結(jié)合游戲體驗與用戶視覺習慣安排主次

雖然這種布局的主界面有不錯的氛圍塑造能力，但很多游戲產(chǎn)品在主界面設(shè)計時并沒有考慮游戲中用戶實際體驗感受，進而忽略了功能布局的實用性。

下面以《RAID》作為案例說明，實際14款美國市場游戲中，《Idle Heroes》和《Hero Wars-Fantasy World》也有出現(xiàn)。

主次分布的結(jié)構(gòu)中，主視圖中的內(nèi)容安排非常重要，應按照系統(tǒng)優(yōu)先級設(shè)置。一般RPG游戲中，角色、抽卡、商店、副本、任務等是比較重要的系統(tǒng)。而《RAID》中，非重要和非高頻使用的系統(tǒng)占據(jù)了主視覺區(qū)（如大殿、鍛造、訓練場、圖鑒），而比較重要的英雄（角色）系統(tǒng)則被分配在次級位置。

要點2：適當取舍，區(qū)域化界面功能，做輕量化設(shè)計

輕量化設(shè)計，無論是圖形化還是區(qū)域化，都是為了降低信息理解成本，提升理解效率。對于同一系統(tǒng)多層功能的情況，一方面可以區(qū)域化歸類入口，另一方面也可以采取部分收納、懸浮展示子功能的形式，減少界面上的信息內(nèi)容。

仍以《RAID》為例，其主界面中去除上方功能欄共計17個按鈕，數(shù)量偏多，在保留部分重要入口展示區(qū)域后，功能布局上還有調(diào)整空間。比如右下角三個按鈕Mission, target, challenge（綠色模塊）實際對應的系統(tǒng)功能是比較重復的，當三個功能同時展現(xiàn)在主界面時，用戶其實較難理解三者間的主次和功能區(qū)別，這種問題可能是因為系統(tǒng)策劃與UI設(shè)計者理解上的偏差導致的。

要點3：角色界面弱化數(shù)值、背景說明，注重養(yǎng)成功能實用性

可以發(fā)現(xiàn)，下面的角色界面不同于日本市場游戲RPG手游會詳細介紹人物背景故事，美國市場的此類游戲更多聚焦于“人物養(yǎng)成”這一界面的實用性和視覺表現(xiàn)上。界面一般以占比過半的人物立繪或者模型為中心，圍繞搭載便捷的裝備穿搭，而關(guān)于人物的信息和技能表述則都以簡略的方式體現(xiàn)。

概括來說，就是需要減少復雜信息的出現(xiàn)，增設(shè)更加明確突出的形式來建立目標，同時要增加視覺表現(xiàn)。

3.2 ICON設(shè)計

要點1：差異化場景化界面的功能入口

受場景主題化影響，主界面功能入口往往容易出現(xiàn)以下兩種問題：1）按鈕完全融入整張場景圖，變得難以辨識2）選擇邊緣化的場景物件作為系統(tǒng)入口

因此在主題風格化的同時，UI設(shè)計還必須注意交互的易用性和易讀性，盡量不因為想把按鈕融入場景而使其不容易發(fā)現(xiàn)或者點擊。

要點2：以“功能表達” 為先，再構(gòu)思場景呈現(xiàn)

既然是設(shè)計按鈕，圖標無論是平面還是立體物件，應當注意保留按鈕形式與其意思的表達一致性，這點《AFK》的許多ICON設(shè)計是比較值得學習的，如下圖的“商店”和“馬車”都在立體場景中對平面ICON做了非常好的還原，使得部分按鈕即便沒有文字注解，玩家都可以基于自己的生活體驗直接理解它的含義。相反，《Hero Wars-Fantasy World》中兩個不同玩法卻都使用了近似的傳送門形式，并沒有體現(xiàn)差異性，也較難直觀理解按鈕與玩法對應的意義表達。

要點3：關(guān)注部分通用化的圖標和表達方式，詞匯運用需斟酌

對于ICON和詞匯本地化的應用總結(jié)了以下三點：

1. 當?shù)仄鋵嵈嬖谝恍┍容^通用的圖標和用詞，如前文提到的“交叉雙劍”或“battle”代表副本玩法。

2. 出海手游ICON也需要考慮圖形所關(guān)聯(lián)詞匯的本意和常規(guī)使用場景，如前文提及閃電圖形與體力的關(guān)系。

3. 此外，部分圖形與詞匯關(guān)聯(lián)性是受特定的美國文化影響（如影視、社媒熱詞、歷史文化等），應注意詞匯所產(chǎn)生的聯(lián)想與其文化表達的關(guān)聯(lián)性，如角斗士與魔幻題材聯(lián)系。

小結(jié)

總結(jié)來說，出色的本地化UI設(shè)計不僅需要考慮當?shù)氐挠脩袅晳T和文化特征，還需要深度理解系統(tǒng)設(shè)計的目的和定位，前者需要站在用戶的角度，后者需要站在策劃的角度，而這些都是需要加深游戲理解和不斷聆聽各方聲音。