出海日本和美国市场的卡牌RPG，都是如何设计UI的？

编者按 在日本和美国市场，卡牌RPG的UI设计有什么特点？和国内有什么不同之处？本文将设法找到一些专业的评价方式或者关注点，希望能为出海游戏的UI设计提供素材和建议。欢迎在文章下方留言，小编将于2月3日前抽取5位，送出鹅厂周边礼品。

作者：yulia

腾讯互动娱乐品质管理部 游戏性测评分析团队

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款游戏运用了相似的主界面结构。

优点：

1. 这种视觉区较大的布局形式较为适合塑造成一个完整的场景，这种形式能够使得玩家有不错的沉浸感，比如《星球大战》中就沿用电影中飞船内部的元素设计了有IP特色的主界面。

2. 功能入口间隙较大一方面限制过多信息内容的展示，减少了玩家的阅读负担，另一方面也降低了误触可能，如《Disney Sorcerer‘s Arena》中间隔较开的入口玩法。

缺点：

1. 点状结构的信息内容分布往往难以控制玩家的视觉路径，也难以快速形成区域性记忆，玩家可能会四处寻找目标入口而浪费一些时间。

2. 功能按钮分布位置与其重要性有时不相关，视觉上的第一注意力信息可能是非核心功能，如右下方《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和词汇本地化的应用总结了以下三点：

1. 当地其实存在一些比较通用的图标和用词，如前文提到的“交叉双剑”或“battle”代表副本玩法。

2. 出海手游ICON也需要考虑图形所关联词汇的本意和常规使用场景，如前文提及闪电图形与体力的关系。

3. 此外，部分图形与词汇关联性是受特定的美国文化影响（如影视、社媒热词、历史文化等），应注意词汇所产生的联想与其文化表达的关联性，如角斗士与魔幻题材联系。

总结来说，出色的本地化UI设计不仅需要考虑当地的用户习惯和文化特征，还需要深度理解系统设计的目的和定位，前者需要站在用户的角度，后者需要站在策划的角度，而这些都是需要加深游戏理解和不断聆听各方声音。