出海日本和美國市場的卡牌RPG，都是如何設計UI的？

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


1.1 研究背景

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

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


1.2 遊戲名單相關資訊

本次研究所選品類遊戲均來自美國和日本市場中，近3個月內（9~12月）暢銷榜排名在前50左右的卡牌RPG遊戲。美國市場共計14款，日本市場共計14款，以下為部分遊戲名稱。由於整體美國的卡牌角色扮演遊戲數量和暢銷榜表現不如日本，因此排名資料上略微靠後。




2.1 介面設計

特點1：主介面多使用人物居中式或左右分散式佈局

日本卡牌RPG遊戲中比較常見的兩種模式，人物居中和左右分散式。兩者的部分割槽域有一定的相似性，比如狀態資訊和工具欄，但人物主KV的位置和主要功能的佈局會有一定差異。

下圖中擷取的主要是橫屏遊戲佈局，以我們收集的遊戲來看，豎屏遊戲大多數會採用第一種。

人物居中式


優點：對玩家產生視覺上第一印象的吸引，更能體驗角色細節。而較大的人物佔比區域也便於增加其他互動功能，提升玩家與角色的聯結性。

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

左右分散式


優點： 在突出養成人物的同時，也突出了核心玩法的功能入口，便於玩家視覺快速定位。

缺點：相較人物居中式佈局，副功能欄的空間進一步被擠壓，因此對主介面功能按鈕數量和優先順序展現形式有一定要求。如果核心功能區入口較多，整個介面UI會出現較為擁擠的情況。

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

類似人物居中式的一種精簡壓縮版本，視覺上會對介面上的資訊做一個優先順序處理，具體的方式可能是對關鍵資訊用高飽和、放大等處理方式來突出。


豎屏遊戲中弱化了除人物立繪外其他互動表現，由於空間需同時滿足立繪表現和功能入口的分佈，更多在“7±2”法則上做資訊減法。相對於橫屏遊戲，豎屏遊戲對於功能內容的選擇和排布要求相對較高。

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

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

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

特點3：角色介面中立繪與人物資訊佈局1:1，數值和文字較多

無論橫屏或者豎屏，14款日本遊戲中，有8款遊戲的角色介面的立繪與人物資訊佈局1:1，數值和文字資訊的介面佔比有時甚至大於50%。


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

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

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


2.2 互動形式

特點1：養成介面多采用區域性分頁切換來詳細展示角色數值與人設

考慮到日本玩家的使用者屬性中往往帶有較多的二次元背景，這使得玩家會更為關注世界觀、劇情以及人物設定。因此遊戲中會準備很多塑造IP的內容，如故事鋪墊和人物小傳。在角色介面，為了解決資訊較多的問題，日本RPG遊戲多數採用區域性分頁的互動形式，將以戰力數字為主的數值資訊和以文字為主的人設資訊加以區分。這種對不同資訊的分類方式，既降低了閱讀成本，同時也滿足部分玩家對人物設定深入瞭解的需求。


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


特點2：特殊入口按鈕動態切換，“一鍵直達”跳轉層級少

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

這種入口以較少的跳轉層級來幫助玩家快速、有效的參與活動，提高活動轉化率。但需要注意的是，由於使用者在主介面停留的時間不會太久，以之前專案經驗來看，圖片數量在3-4個以內是比較有效的。



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

2.3 ICON設計

特點1：偏好對應遊戲世界觀定製化設計ICON樣式

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

優點：因IP而關注手遊的玩家較多，更容易產生沉浸感和認同感。

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

特點2：ICON語義區分細緻，部分型別詞彙使用存在共性

在不同的題材和IP中，遊戲中ICON和詞彙會有一定重合率，但也會結合世界觀和劇情做許多定製化的表達。

• “副本”：詞彙上更強調與玩法場景和劇情感，常見的如quest（クエスト）、story（ストーリー），一小部分會使用dungeon（ダンジョン），有時也會定製。quest詞義為探索、story詞義為故事，因為日語中用的是兩個英語的外來詞，所以我們也可以結合英文的意思來理解用詞的語境。前者可以解釋為探索，使用時它更多會用於強調連續刷關的副本形式，一般關卡中很少會有劇情和特效演出。而後者story則偏向帶有敘事的關卡，一般每一章節會有一個獨特的主題，以便作為故事去區分。
• “角色”：詞彙使用夥伴（なかま）、怪物（モンスター）、角色（キャラクタ）這三者出現較多。看動漫如果比較多的話，會發現一些熱血漫畫裡經常會說夥伴，但對於這種定製化的文字表達，如果遊戲中無法闡述清楚，或者給玩家傳達到這些角色是你的夥伴，就容易產生違和感。更何況角色在卡牌遊戲裡一般都會引入商業化，所以這一塊無論是用詞還是體驗都是日本卡牌RPG比較注重的。
• “體力”：表現則相對統一，stamina（スタミナ）、AP、和ACT使用的頻次較高，形式上實用性強，直接使用“進度條+數字”方式表現。
  

2.4 日本頭部卡牌RPG對中國市場出海手遊的啟示

UI設計應當從玩家特點和需求出發，由於日本卡牌RPG的題材多面向二次元使用者，而這批玩家也受日本長久的動漫作品影響，對遊戲的世界觀塑造、美術表現、人物設定等有比較高的要求。考慮到這樣的使用者特點，總結了以下日本市場卡牌RPG的注意點。

2.4.1 介面設計啟示

要點1：注重玩家與角色之間的聯結感

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


要點2：注意角色介面多種資訊分類和呈現形式

由於東亞地區（包括日本）對數字、數值強度比較敏感，玩家有能力處理資料變化和角色強度之間的關聯性，也關注此類數值資訊，因此養成數值在介面中佔比較大，對部分的數值也會以突出形式呈現。

而對於存在較多資訊需要展示的情況，可通過區域性切換分頁的方式來實現對內容的有效分類，儘量不要在同一介面中出現大量且多種型別的資訊內容（如大段文字和數字一起展示）。



2.3.2 ICON設計啟示

要點1：從圖示細節入口，全方位塑造IP

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

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


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

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


除了以上總結外，在對日本市場卡牌RPG遊戲榜單的整理中發現，豎屏遊戲的佔比是比較大的。即便是相同的玩法，如回合制，《死亡愛麗絲》、《ONE PIECE》和《ドラゴンエッグ》也都採用了豎屏形式，這可能與當地市場使用者體驗手遊的生活場景有關（如工薪族通勤時的碎片化時間）。但由於豎屏和橫屏形式的選擇會很大程度影響玩法、美術表現和題材，需要遊戲立項時就考慮，且在後期UI設計優化調整空間小，因此不在本文裡做衍生分析。


3.1 介面

特點1：主視覺區域功能入口多點狀分佈，功能區域劃分不明顯

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



優點：

• 這種視覺區較大的佈局形式較為適合塑造成一個完整的場景，這種形式能夠使得玩家有不錯的沉浸感，比如《星球大戰》中就沿用電影中飛船內部的元素設計了有IP特色的主介面。
• 功能入口間隙較大一方面限制過多資訊內容的展示，減少了玩家的閱讀負擔，另一方面也降低了誤觸可能，如《Disney Sorcerer‘s Arena》中間隔較開的入口玩法。
  

缺點：

• 點狀結構的資訊內容分佈往往難以控制玩家的視覺路徑，也難以快速形成區域性記憶，玩家可能會四處尋找目標入口而浪費一些時間。
• 功能按鈕分佈位置與其重要性有時不相關，視覺上的第一注意力資訊可能是非核心功能，如右下方《RAID》中畫面最中間的“鍛造”系統只是整個角色養成的一小部分，且非初期解鎖系統，但卻佔據了一個比較重要的視覺位置。
  

特點2：介面資訊內容精簡，以圖形呈現為主

通過運用大塊的圖形，並配合較少的文字，整個介面包含的資訊內容較少，如《漫威：未來之戰》中主要系統僅有6個按鈕，但這種極簡的主介面對整個遊戲系統數量有較高的要求。

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


而《漫威：神威戰隊》與《漫威：未來之戰》的主介面就嚴格控制了介面上的功能模組數量和視覺優先順序突出方式。在商城介面中，美國這類遊戲也大多運用了簡單的“商品大圖+價格”的展現形式，具體禮包內物品及數量更多以浮窗或彈窗的方式展示。



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

缺點：弱化了人物設定、技能等資訊介紹，也無法清楚定位到角色之間戰鬥屬性的差異，但也適用於一些角色差異化小的遊戲。

3.2 ICON設計

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

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


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

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

“副本”：圖示常用“兩把交叉的劍”或直接使用“campaign”或“battle”，這樣的用詞符合“Call To Action”設計，配以醒目的顏色促使玩家點選前往。
“角色”：與題材關聯性強，西方魔幻題材的遊戲多使用“角鬥士”的圖示，由於此類遊戲往往參考中世紀背景下的人文建築風格，角鬥士與歷史的關聯性也烘托了遊戲的年代感。

特點2：玩法入口融合場景定製化設計，常規入口標準化處理

《RAID》和《Disney Sorcerer‘s Arena》主介面上的玩法系統入口均複用了場景物件，使得功能按鈕的大小和樣式差異性大。此類佔據主視覺區域的系統按鈕一般較為重要，如《RAID》中的酒館（養成）和《Disney Sorcerer‘s Arena》的工會地下城（核心玩法）。相比之下，常規系統入口如任務、收集、成就等則採用統一標準大小和顏色。



優點：強調場景與功能入口的結合增強了世界觀的塑造（如中世紀的房屋、未來科技的全息影像）。

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

3.3 美國頭部卡牌RPG對中國市場出海手遊的啟示

3.3.1 介面設計

要點1. 場景化主介面要避免“形式主義”，應結合遊戲體驗與使用者視覺習慣安排主次

雖然這種佈局的主介面有不錯的氛圍塑造能力，但很多遊戲產品在主介面設計時並沒有考慮遊戲中使用者實際體驗感受，進而忽略了功能佈局的實用性。

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



主次分佈的結構中，主檢視中的內容安排非常重要，應按照系統優先順序設定。一般RPG遊戲中，角色、抽卡、商店、副本、任務等是比較重要的系統。而《RAID》中，非重要和非高頻使用的系統佔據了主視覺區（如大殿、鍛造、訓練場、圖鑑），而比較重要的英雄（角色）系統則被分配在次級位置。

要點2：適當取捨，區域化介面功能，做輕量化設計

輕量化設計，無論是圖形化還是區域化，都是為了降低資訊理解成本，提升理解效率。對於同一系統多層功能的情況，一方面可以區域化歸類入口，另一方面也可以採取部分收納、懸浮展示子功能的形式，減少介面上的資訊內容。


仍以《RAID》為例，其主介面中去除上方功能欄共計17個按鈕，數量偏多，在保留部分重要入口展示區域後，功能佈局上還有調整空間。比如右下角三個按鈕Mission, target, challenge（綠色模組）實際對應的系統功能是比較重複的，當三個功能同時展現在主介面時，使用者其實較難理解三者間的主次和功能區別，這種問題可能是因為系統策劃與UI設計者理解上的偏差導致的。

要點3：角色介面弱化數值、背景說明，注重養成功能實用性

可以發現，下面的角色介面不同於日本市場遊戲RPG手遊會詳細介紹人物背景故事，美國市場的此類遊戲更多聚焦於“人物養成”這一介面的實用性和視覺表現上。介面一般以佔比過半的人物立繪或者模型為中心，圍繞搭載便捷的裝備穿搭，而關於人物的資訊和技能表述則都以簡略的方式體現。概括來說，就是需要減少複雜資訊的出現，增設更加明確突出的形式來建立目標，同時要增加視覺表現。


3.3.2 ICON設計

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

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



因此在主題風格化的同時，UI設計還必須注意互動的易用性和易讀性，儘量不因為想把按鈕融入場景而使其不容易發現或者點選。

要點2：以“功能表達” 為先，再構思場景呈現

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


要點3：關注部分通用化的圖示和表達方式，詞彙運用需斟酌

對於ICON和詞彙本地化的應用總結了以下三點：

• 當地其實存在一些比較通用的圖示和用詞，如前文提到的“交叉雙劍”或“battle”代表副本玩法。
• 出海手遊ICON也需要考慮圖形所關聯詞彙的本意和常規使用場景，如前文提及閃電圖形與體力的關係。
• 此外，部分圖形與詞彙關聯性是受特定的美國文化影響（如影視、社媒熱詞、歷史文化等），應注意詞彙所產生的聯想與其文化表達的關聯性，如角鬥士與魔幻題材聯絡。
  

總結來說，出色的本地化UI設計不僅需要考慮當地的使用者習慣和文化特徵，還需要深度理解系統設計的目的和定位，前者需要站在使用者的角度，後者需要站在策劃的角度，而這些都是需要加深遊戲理解和不斷聆聽各方聲音。


作者：yulia，騰訊互動娛樂品質管理部 遊戲性測評分析團隊
來源：騰訊GWB遊戲無界
地址：https://mp.weixin.qq.com/s/t3hp0FVi99Z1xj2STec-3g