认识达内从这里开始

对于ui设计师来说，每当有一个符合我们产品推广的渠道产生的时候，我们就需要将自己的产品进行一个适配调整来符合渠道的需求。今天，我们就一起来聊聊不同的app软件在iPhone X手机上是如何进行适配操作的，下面就开始今天的主要内容吧。

这里用iPhone6举例子是因为大部分设计师都用iPhone6来做设计稿，方便大家理解，其实iPhone8也是这个分辨率。

iPhone6：750×1334px(375×667px@2x)

iPhoneX：1125×2436px(375×812px@3x)

在逻辑像素上iPhoneX的宽度和iPhone6保持一致，只是高度高了145px(812-667)，如果是用@1x做设计稿，那么在适配iPhoneX的时候会方便很多，因为只需要增加高度就能得到iPhoneX的大小，所有的Symbol基本不变，只是复制几个苹果爸爸的Symbol到你的Symbol里面，用来做iPhoneX的设计稿。但是如果用@2x来做设计稿会稍微麻烦些，毕竟SketchUIKit都是基于@1x来做设计稿的，所以只能把symbol重新解散，然后做成@2x大小的尺寸。

虽然它们的逻辑像素宽度一致，但是他们的像素分辨率是不一样的，iPhone6采用@2x切图，iPhoneX采用@3x切图。有人会用@2x做设计稿，那怎么适配iPhoneX设计稿，难道要缩放?iPhone6(750×1334px)尺寸到iPhoneX(1125×2436px)，虽然两者的宽度关系是1.5倍，但是通过缩放做iPhoneX也是相当麻烦，因为你的Sketch设计稿里面可能存在Symbol，所以这样的做法是行不通的。但如果你的团队都是用@2x来做设计稿的话，也没什么问题，接下来就提供一个更简单的方法解决iPhoneX的适配问题。

iPhoneX适配

我列出了iPhoneX的三种分辨率的尺寸：375×812px(@1x)，750×1624px(@2x)，1125×2436px(@3x)

如果你的团队使用的是750×1334px(@2x)的设计稿，你在适配iPhoneX的时候可以采用iPhoneX@2x的图来适配，这样就省去了缩放这一步骤，而且开发使用的是逻辑像素即375pt×812px来做iPhoneX的设计还原的，所以这样设计iPhoneX是不会影响开发的，因为750×1624px(@2x)还原到@1x还是375×812px，相信你已经明白了。

1.iPhoneX安全区域问题

如果你用@1x来做设计稿：iPhoneX安全区域是375×734px。

如果你用@2x来做设计稿：iPhoneX安全区域是750×1468px。

2.如何计算iPhoneX安全区域

@1x的iPhoneX安全区域：

安全区域=812px—StatusBar(44px)+HomeIndicator(34px)

@2x的iPhoneX安全区域：

安全区域=1624px—StatusBar(88px)+HomeIndicator(68px)

iPhoneX实际案例适配

在开始之前，我们先看一下其他App怎么适配之前的iOS设备的，我们可以知道头部区域采用了等比例的方法来适配，因为只有这样才能保证640×1136px上面能够放得下相应的内容。其他的只需要放置相应的切图即可。

一开始以为头部适配很简单，我们也采用了等比例适配，后来发现没有必要，因为640×1136px基本可以显示完全。然后我们就开始适配iPhoneX了，后来开发通过Xcode模拟出iPhoneX的适配结果，我发现问题出现了。和我们的用药助手iOS开发讨论了以后，发现原来导航栏的高度不是简单的200px解决的，这里我们采用的是固定高度的做法而不是采用等比例的做法。一般这块区域可以有2种做法：等比例和固定高度，观察你的页面构成，如果页面内容较少可以采用固定高度的做法。不然的话可能在小屏幕手机有些内容放不下。

在没有iPhoneX之前，固定高度做法：整体蓝色区域高度给200px解决问题，不用考虑导航栏问题。

但是iPhoneX出来了，这样的做法就会行不通，因为iPhoneX的导航栏高度是44px+44px=88px，比iPhone6的导航栏(64px)高了24px，所以正确适配iPhoneX的做法应该是导航栏区域高度(88px)+(200px-64px)=224px，其实就是StatusBar高度多了24px，所以224px比200px大了24px。

【免责声明】：本内容转载于网络，转载目的在于传递最新信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。