来了，iPhone 12设计适配指南

也许是上个月的首场秋季发布会缺席了新品iPhone，让很多人对这次的科技界春晚更加充满了期待。看完发布会你还在纠结新iPhone如何设计适配么？且听像素妹给大家娓娓道来。

作为本次发布会备受关注的主角，iPhone 12一共有四款机型。

分别是5.4英寸的iPhone 12 mini，6.1英寸的iPhone 12和iPhone 12 Pro，以及迄今为止苹果手机最大的尺寸6.7英寸的iPhone 12 Pro Max。

有意思的是，iPhone 12 mini在体积上甚至比第二代SE更小，但因为采用了全面屏设计，屏幕可视面积反而更大。mini价位是四款新品中最便宜的，对于预算不多，喜欢小机身和单手持握感的用户来说，是个不错的选择。

这四款手机均采用了OLED全面屏，并且是苹果历史上首个支持5G网络标准的智能手机系列产品，速度超快。在线看高品质大片，玩游戏将会特别流畅。（相信不少lol玩家在看到发布会上展示英雄联盟手游的时候，都小小的激动了一把～）

跟前几代iPhone相比，12系列在外观上有个很大的不同，就是将圆弧形边框换成了直角边框，回归iPhone 4的经典工业设计美学，这样在宣传上多了个致敬经典的噱头。在外观颜色的选择上，iPhone 12 mini和iPhone 12提供了白色、黑色、蓝色、绿色、红色可选，iPhone 12 Pro和iPhone 12 Pro Max则提供了海蓝色、银色、金色、石墨色。四款手机均使用了超瓷晶面板，取代了玻璃面板，抗跌落能力得到了大幅度提高。

摄像头方面，iPhone 12 mini和iPhone 12采用了双摄（广角+超广角），iPhone 12 Pro和iPhone 12 Pro Max则采用了三摄（广角+超广角+长焦），全新的图像信号处理器支持杜比视界视频拍摄，细节表现的更丰富。

硬件方面，全系搭载了A14仿生芯片，这是iPhone首款5纳米制程芯片，是一个重大升级，加快了人工智能和芯片处理的速度，另外也确保了电池的续航。

价格方面，iPhone 12 mini RMB 5499起，iPhone 12 RMB 6299起，iPhone 12 Pro RMB 8499起，iPhone 12 Pro Max RMB 9299起。

目前我们在设计UI界面时，一般是基于iPhone8来进行设计（分辨率750*1334px，在Sketch中作图尺寸为375*667pt），也有以iPhone 11 Pro为设计基准的做法（分辨率1125*2436px，在Sketch中作图尺寸为375*812pt），然后提供切图给到开发人员。

首先我们要明确一点：手机适配采用几倍图与PPI有关系，这就是为什么iPhone4、5、6之间分辨率和屏幕尺寸不一样，但是同样采用@2x二倍图的原因，因为它们有同样的PPI（326ppi）。

新发布的iPhone 12 mini屏幕尺寸为5.4英寸，分辨率为1080*2340px，iPhone 12和iPhone 12 Pro屏幕尺寸均为6.1英寸，分辨率为1170*2532px，iPhone 12 Pro Max屏幕尺寸为6.7英寸，分辨率为1284*2778px。

很多新手设计师在看到这些分辨率时可能要懵了，这与之前所接触的iPhone手机分辨率完全不一样，该怎么进行适配？会不会还有4倍图？

不要慌！像素妹儿接下来给大家分析一下，这些其实很简单！(认真脸)

我们先看iPhone 12和iPhone 12 Pro（1170*2532px），PPI是460ppi，与iPhone 11 Pro（三倍图）的458ppi基本一致，并且这三款手机均采用了超视网膜 XDR 显示屏，我们可以推论出它们使用的都是三倍图@3x。

从页面宽高比例来看：

iPhone 12 Pro的逻辑像素宽度是1170/3=390pt，高度是2532/3=844pt。

iPhone 11 Pro的逻辑像素宽度是1125/3=375pt，高度是2436/3=812pt。其实就是iPhone 12 Pro宽度比iPhone 11 Pro多15pt，垂直方向上的显示内容多了32pt，有些类似于iPhone 5和iPhone 6的适配方式。

同理，iPhone 12 mini的PPI是476ppi，与iPhone 11 Pro（三倍图）的458ppi相差不大，同样都采用了超视网膜 XDR 显示屏，我们可以推论出它们使用的也都是三倍图@3x。

要注意：虽然iPhone 12 mini官方给的物理尺寸是1080*2340px，但是设计尺寸却是1125*2436px（屏幕截图分辨率），这一点与Plus系列类似。

也就是说iPhone 12 mini与iPhone 11 Pro设计尺寸一致，逻辑像素均是375*812pt。

最后是6.7英寸的iPhone 12 Pro Max（1284*2778px）的PPI是458ppi，与iPhone 11 Pro（三倍图）的458ppi相同，都采用了超视网膜 XDR 显示屏，我们可以推论出它们使用的都是三倍图@3x。（也可以用iPhone 11 Pro Max与之对比）

从页面宽高比例来看：

iPhone 12 Pro Max的逻辑像素宽度是1284/3=428pt，高度是2778/3=926pt。

iPhone 11 Pro的逻辑像素宽度是1125/3=375pt，高度是2436/3=812pt。iPhone 12 Pro Max宽度比iPhone 11 Pro多53pt，垂直方向上的显示内容多了114pt。

我们来做一个小结：

iPhone 12 mini、iPhone 12、iPhone 12 Pro、iPhone 12 Pro Max使用的均是三倍图@3x；

适配方法与早期的iPhone 5适配iPhone 6类似，并且由于都是全面屏，理解起来应该是比较简单的。

举个适配iPhone 12的例子：

假设我们在设计的时候以iPhone 11 Pro（375*812pt）为基准做设计稿，由于都是@3x，将画板宽度拉宽为390pt，高度拉高为844pt，状态栏、导航栏、标签栏、主页指示器的高度均不用更改，剩下的就是微调页面布局了，很简单～。适配到别的机型的方式同理，当然，还有其它的适配的方式，在这里就不一一赘述了。

最后像素妹给大家整理了目前iOS适配所用到的切图及对应机型，便于大家记忆：

这次新发布的iPhone 12系列大家是不是有些蠢蠢欲动想要剁手呢？甭管别人说12香还是王守义说13香，能满足你的使用需求就是值得入手的～

欢迎各位在评论区留言哦！我们下期再见咯～