【游戏交互】手游适配设计的细节拆解

以下文章来源于L的设计日常 ，作者Lwanna7

“ 手游在设计的过程中，由于屏幕比例与尺寸的差异，再加上游戏需要一屏显示的整体性与艺术性，因此和普通APP相比，有着更为复杂的规则 ”

本篇文章只针对横屏游戏，将从以下几个模块讲解：

• 设计比例与尺寸
• UI适配
• 背景图片适配
• 刘海与圆角适配
• Home Indicator适配

以上模块在本质上是互相关联的，但为了方便说明，因此拆分开说明。

一、设计比例与尺寸

1. 设计方案常规尺寸 16:9

一般来说，设计时需要采用16:9的尺寸，也就是iPhone 8的尺寸，常用的：【1280*720】【1334*750】【1920*1080】等。（下文所有UI按照1334*750为基础设计尺寸，按照不同项目，等比缩放即可）

常规手游且画质要求不高的游戏使用720P完全足够，例如复古风、像素风；750-850P则更为常见，基本可以适配各种场景，不管是iPad还是模拟器均可以一个不错的质量展示，包体大小也合适；1080p适合画质要求较高的游戏，或者需要PC端的游戏；

在游戏立项时，以上内容都需要美术与开发进行商量，并定下设计分辨率，以后的设计过程将一直沿用此规则。

2. 现在都是全面屏19.5:9了，为啥还要按照老款的手机设计呢？

我总结了以下几个原因：

1、设备比例，虽然全面屏的手机比较多，但是仍有不少的16:9的手机，模拟器一般也采用了16:9的尺寸；

2、正逆适配问题，从16:9调整至19.5:9的视觉体验要比19.5:9调整至16:9的好很多，例如在19.5:9的情况，横向铺满时，缩至16:9会导致UI重叠，具体原因下文会详细说明。

二、UI适配

1. UI在引擎中的原理

简单讲一下，所有ui都会有一个【锚点】，即图中的【*】，类别PS中ctrl+t时的中心点，控件的坐标位置即为【锚点】的位置。

文本框坐标为（0,0），但UI的位置并不在原点

锚定可以控制控件的相对位置，通过锚定一个控件，你可以控制它，无论屏幕大小如何，都将出现在相对于定位点的位置。

何为锚定？简单示意：生命图标为左上适配，锚定至屏幕左上角，无论屏幕为何种尺寸，均会固定至左上；同理绿宝石为右上适配，标题为中上适配（虽然塞尔达不需要适配）

2. 普通类UI适配

所有的UI均满足上述规则，按照设计，大致把UI分为两种，普通类与场景化界面类。

先说第一种，普通类，例如一个按钮、一个生命条、一个弹窗等一切没有特殊处理的控件；下面为不同场景中的适配方案

A）大于16:9（iPhone X）

若屏幕比例大于16:9，则短边为适配基准；

B）小于16:9（iPad）

若屏幕比例大于16:9，则长边为适配基准；

不论屏幕尺寸多少，UI比例不变，按照原尺寸与相对位置。为了方便理解，可以想象为一个iPhone 7，先上下或左右增加画布大小，然后等比缩放至对应的设备上，这种设计时并没有什么顾虑，按照16:9正常做即可。

3.场景化UI适配

此种在游戏设计中是很常见的元素，例如需要以一本书、一个卷轴、一个柜台当作UI的底，以哈利波特举例，在iPhone 7与iPhone X的差别如下，此弹窗的锚点设置在了屏幕中心，因此在横向拉伸时，会展现更多的内容。

在适配全面屏时，右侧的底明显多了一部分

若仍旧采用16:9尺寸，在适配全面屏手机时，会出现穿帮的问题，例如下图的桌子边缘会被截断，导致穿帮；

上下贯通的图和左右贯通的图分别会在两种缩放方式下出现问题，因此在设计时，需要针对采取应对，方式有以下几种：

A）给弹窗设计边界

还是以哈利波特距离，右侧书的边缘继续向外画至边缘即可，例如下图左侧的丝带与右侧的底。

B）无法设计边界的图片

在设计时需要根据不同的项目，首先搞清楚自己游戏的目标用户的主要机型，但就目前看来，16:9与19.5：9为最常见的机型比例；

例如：有个横向延伸的卷轴，只需要考虑的iPhone用户的体验，再特殊的分辨率不再考虑，因此场景化的界面设计尺寸为1624*750（左右图），以防止UI画了之后，95%的情况是看不到的，来节约成本。

因此，

若为左右延伸图，则1624*750

若为上下延伸图，则1334*1000

若为四向延伸图，则1624*1000

（其他分辨率的等比缩放即可）

红色区域为显示区域

底图的补色：若弹窗与游戏背景差异较大，可以再背后叠一层纯色图片，以防止穿帮，例如下图，假如游戏基调为红色，在索尼Xperia 1 III（比例21:9）弹出了黑色的弹窗，两边出现了红色的穿帮，因此，按照屏幕尺寸设计纯色遮罩，即可做到一定的效果优化。

红色区域为补色区域

三、背景图片适配

背景图片相对于UI，规则上要简单一些。

何为背景图片？例如无场景纹理的图片，在控件背后的虚空、当做背景的远景；此类型背景一般是缩放、裁切不影响表现的图片；以天谕举例，此截图背后的商店图片即为背景。

背景图片相较于UI图片，可以没有太复杂的细节，绘制也会更加简单，可以根据项目风格与周期选择不同的方案，在面对目标用户机型复杂，需要pc端的不同尺寸缩放时，采用此种方案是一种省力且不会穿帮的好办法。

背景图片相对于UI适配规则会简单一些，UI在适配时，会根据不同场景缩放、移动、裁切；背景图片只用一个办法，裁。

因此，背景以1334*750（16:9）尺寸制作。

适配时简单分为以下两种情况：

A）大于16:9（iPhone X）

长边适应屏幕，裁掉背景图片上下部分；

B）小于16:9（iPad）

短边适应屏幕，裁掉背景图片左右部分；

四、刘海与圆角适配

游戏设计尺寸为16:9，市面上常规全面屏会有圆角、刘海等干扰因素，因此UI会在以上机型中偏移部分位置。游戏UI的原点即为下图的红点位置。

引用ios官方设计文档的一段话：

“为了防止内容被裁剪。通常，内容应居中并对称插入，以便在任何方向上看起来都很棒，不会被圆角盖住，不会被刘海隐藏，并且不会被Home Indicator遮挡。为获得最佳效果，请使用标准的、系统提供的界面元素和自动布局来构建界面并遵守系统定义的布局指南和安全区域。”

在做设计的过程中，贴边的UI元素需要补全屏幕外侧的元素，若采用一刀切的设计，在iPhone X上会穿帮，下图以哈利波特的几种实拍图举例：

iphone7 一切正常

iPhone X，左上角返回按钮偏移，返回按钮底向左侧延伸

错误示范：iPhone X使用云游戏模拟器运行，模拟未进行偏移时的错误状态，可以看到返回与金钱的位置均发生了遮挡

因此在设计贴边元素的时候，要么补全边缘元素，要么继续画出延伸的部分至左右（例如以iPhone X为最大值的话，极限尺寸为1624*1000）

五、Home Indicator适配

iPhone X有一个在游戏里也无法隐藏的home条，而这个条又会挡住部分的UI，因此需要避开此控件的遮挡，根据ios官方设计文档：

“避免在屏幕的最底部和角落防止交互式控件。人们使用显示屏底部边缘的滑动手势来返回主屏幕和应用程序切换等功能，这些手势可能会取消您在该区域实施的自定义手势。屏幕的远角可能是人们难以舒适到达的区域。

当设备处于横向时，对于某些应用程序（例如游戏）来说，将可点击的控件放置在屏幕的下部（延伸到安全区域下方）可能是合适的，以便为内容留出更多空间。在屏幕的顶部和底部放置控件时使用匹配的插图，并在 Home 指示器周围留出足够的空间，这样人们在尝试与控件交互时就不会意外地瞄准它。

在极少数情况下，像游戏这样的沉浸式应用程序可能需要自定义屏幕边缘手势，这些手势优先于系统手势。第一次轻扫调用应用程序特定的手势，第二次轻扫则调用系统手势。”

1.交互设计时应注意什么

先分析一下Home Indicator的交互：

①从下至上滑动，返回主页

②横向滑动，快速切换应用

若使用了同样的交互操作，手机会优先调用系统级别的反馈，因此在设计过程中，尽量避免在游戏底部采用此种交互。

炉石为早期游戏，使用卡牌需要从屏幕下端向上滑动，与手机手势冲突，因此针对移动端，做了放大热区的操作，但仍会遮挡与误操

哈利波特的交互与炉石相似，但此处把卡牌上移，并使用了遮罩底以优化交互与视觉体验，防止误操与遮挡

2.UI设计时应注意什么

UI的主要注意点即为防止被遮住，以底部菜单设计举例，设计其他元素时，依然可以采取同理操作。底部菜单样式大致分为两种，一种为非贴边菜单，一种为贴边菜单。

A）非贴边菜单

此场景在适配时底部UI按钮会向上偏移部分，此处UI不需要特殊处理，引擎会有针对的设置。

19.5:9状态下底部中心菜单向上偏移部分

B）贴边菜单

由于贴边，若直接向上偏移，会出现UI的切割，为了防止穿帮，有以下几个解决方案:

①在16:9设计时，留出Home Indicator的位置，不开启UI偏移

②底部设计时，把下方的结束位置补全，如下图，底部菜单以红色为底，19.5:9时，会以红色为下边缘结束；（设计时，菜单的底长度不够，导致无法盖住右侧红色的底，导致穿帮，扣设计师鸡腿）

③底部设计时，画出更多的底，内容上移，16:9时画面外的底展示出现，以防止穿帮

结语

目前设备的更迭已经到了一个稳定的阶段，用户比例在逐渐的从16:9转向19.5:9，可能在不久的未来，16:9的尺寸会被手游抛弃，只需要制作一个尺寸；也或许移动设备迎来了大变革，现在的适配完全无法使用，了解清楚适配的原理后，即使有了新的变化，也可以及时作出应对。

感谢阅读与分享

欢迎交流

一位杭州UE设计师的微信