1.2 适配显示

现在我们随时可以接触到各种电子设备，同时也产生了很多与设计相关的问题。计算机端、移动端、VR及大型设备，不同的设备对应不同的设计方式。例如，各种设备的适配方式、新设备如何保证运行流畅并尽量减轻设备的负担、移动端的各种屏幕（全面屏、曲面屏、普通屏）应该如何避免操作中出现问题等。对应这些问题，在设计之初就要对新机型进行体验和分析，能有效避免出现一些常规问题。例如，全面屏的圆角应该在UI中如何处理，安卓和iOS系统的电容按钮如何避免冲突，界面如何避免UI变形和像素视觉的问题等。

1.2.1 分辨率

手机屏幕的显示单元可以理解为像素（像素的英文是Pixel，简称px）。图像分辨率与像素有直接关系，像素越多显示的图像越清晰。同时，分辨率也与存储空间有直接关系，同样尺寸的图像，分辨率越高，图像所占用的存储空间越大。随着技术的发展，设计中使用的主流分辨率也在发生变化，具体数据如下。

在开始设置基础设计尺寸（创建画布）时，个人建议选择iOS系统的1334px×750px，考虑到安卓系统的设备分辨率多而杂，可以在设计后期与程序结合着进行界面适配。设计师必须在基础设计尺寸上考虑到还未完全被淘汰的低分辨率设备，同时保证当下主流分辨率的设备能正常显示。

1334px×750px基础设计尺寸可以起到承上启下的作用，避免了因尺寸过大而需要再次修改小尺寸布局的问题，也避免了尺寸过小，图像在高分辨率设备上显示不清晰的问题。

注意：

随着技术的发展、设备的升级，每年设备的分辨率都有所提升，而设计师需要时刻关注行业的最新动态，并且提前试用和分析新的设备，在制作新项目时提前规划，避免后期修改。

1.2.2 适配规范

适配是设计开发中必不可少的环节，而且，不成功的适配会导致整个游戏失败。对于UI设计师而言，怎样才能更好地适配不同设备的分辨率显得无比重要。

实际的程序适配会对不同控件的9个锚点进行界面控件的位置调整，并制定一套可行的适配方案，每个点从手机边缘到每个锚点的坐标也有所不同。

下面针对通用屏、拉伸屏、曲面屏、折叠屏（这里着重讲述前3种）进行相关规范的说明。

1.通用屏

通用屏是指在众多设备中一款能起到承上启下作用的通用尺寸屏幕，这里以1334px×750px的分辨率为准，屏幕比例为3∶4，例如，iPhone SE或类似设备。

在通用屏的设备适配中，可以进行等比适配。等比适配是指采用与基础分辨率（1334px×750px）相同比例的设备，如分辨率为1920px×1080px、1280px×720px、1136px×640px、854px×480px等的设备都可以在基础分辨率上进行等比例缩放，从而得到完美适配（等比适配会存在1～2px的误差）。

2.拉伸屏

拉伸屏是基于基础分辨率（1334px×750px）进行拉高或拉宽的屏幕，例如，iPhone X、OPPO Reno等设备。

从上图可以看出拉伸屏不规则的屏幕样式，但在适配上依然可以找到一些规律。

在刘海屏问世之初，设计行业为这样不规则的屏幕提出了多种适配方案。

采用刘海屏的设备上市后，业内必须第一时间制定对应的适配方案。为了快速反应，毫无疑问地选择了方案1，直接用纯色填补不规则的区域。而这种办法显然不是最好的结果，为了追求更好的人机体验效果，由此衍生了方案2，显然相比方案1也是大同小异，为此我曾在线下做过一些实景测试。

对应人群：青年

实验地点：朋友家

实验设备：iPhone X

实验内容：采用方案1处理的界面

实验经过：

实验开始，我拿出手机说：“这是我们公司新出的游戏，有没有兴趣玩一玩？”她很高兴地接过手机，同时对能用iPhone X进行游戏而兴奋不已，这一点从她的表情就可以看出。接着，她对新游戏进行了一段时间的试玩，我对此也进行了记录。当然我不会去拿纸笔去记，那样会让测试者感到紧张和不解。试玩结束后，她说了一句让我触动很大的话。

“为什么要把屏幕两边变黑？这让我觉得很奇怪，同时也降低了我使用iPhone X的兴趣，因为我无法让其他人看到我正在使用最新（当时是最新的）的iPhone X玩游戏。”

她的回答说明了对新机型的适配设计需要更科学、合理的适配方案，以此来满足玩家的需要。同时从情感方面分析这句话，你会发现玩家会为无法满足虚荣心和更好的体验而感到沮丧。

实验结果：

方案1。对应新机型的快速上市，不考虑更多元素，直接在不规则区域填充纯色，第一时间满足玩家在新机型上玩游戏的需求。缺点是无法让玩家得到更好的沉浸体验。

方案2。对应新机型的显示分辨率及设备硬性条件，没有得出更好的设计布局，而采用了一种折中的处理方式，让界面看起来与新机型得到一定程度的匹配，但实际上还是减弱了玩家的既视感。

对前两种方案进行分析后选定方案3，针对新机型进行深入适配设计，既要考虑到普通屏幕，又要考虑到新机型。让界面帮助玩家得到深入的既视感和沉浸感，并且充分满足其虚荣心。

刘海屏的适配设计方案如下图所示。

在实际操作中，我们会接触到很多扩展UI显示的操作，例如，常见的侧边拉伸模块。

不能说前者是不对的，但从视觉反馈的角度看，这样的做法降低了玩家的视觉体验感，有点像半成品。我们确实需要反复斟酌对细节的处理方式，将最好的效果呈现给玩家。

处理好刘海屏的适配问题后，对于OPPO Reno这样虽然没“刘海”，但特别长的屏幕应该怎么处理呢？可以在刘海屏的基础上继续进行UI整体延伸扩展，如下图所示。

此处依然以侧边拉伸模块为例，适配设计方案如下图所示。

3.曲面屏

在进行曲面屏适配和UI设计时，注意不要将UI元素放置在曲面区域内。如下页曲面屏剪影图所示，红色区域为屏幕的转折面。

记得我第一次接触曲面屏手机是在2016年，当时对我确实有不小的冲击，感觉非常新奇，从曲面的侧面看像极了看水族箱玻璃转角处的感觉。当进行操作时，就像进入一个死胡同，在靠近曲面的地方点击对应的按钮，控件总是点空或滑落，存在一定的操作障碍。

现在市场上已经出现了大量的曲面屏手机，对其进行适配也不是什么问题，只要将界面中的控件元素缩进曲面之内即可。

在实际案例中，针对曲面屏应该保留足够的安全边距。

此时大家会发现，为了得到友好的操作界面，针对不同的设备需要进行单独的处理。在此，不妨根据以上机型的适配操作，推演出不同类型的折叠屏手机的适配方法。

4.折叠屏

目前市场上在售的折叠屏手机主要有华为、小米和三星的产品，大致分为以下3种折叠方式。

折叠方式1

折叠方式2

折叠方式3

从示意图可以看出，无论是哪款折叠屏手机，在折叠后都会对界面内容进行重新适配。而屏幕折叠的次数越多，我们对界面适配的考虑就要越周全。例如，折叠方式3中出现的折叠情况就有4种（A、BC、BAC、BA或AC），在进行屏幕适配时，我们就需要考虑到拉伸适配、旋转适配、曲面适配等多种操作方式。

5.系统控件适配

系统控件是指全面屏设备上的系统按钮，例如iPhone X、小米9等类似设备。

在游戏设计和适配时要避免游戏的控件与系统控件的位置重叠，针对这个问题，设计师应该将游戏控件移位或者对系统控件进行处理。

实际设计时需要注意

-1-不同的设备适配都要避免控件裁切，否则会导致操作困难。

-2-所有控件都应等比例缩放，避免造成界面UI错乱或变形。

-3-等比例适配对应分辨率会出现1～2px的偏差。

-4-UI设计和适配都应避免与系统控件的位置重叠，导致操作困难。