前言iPhone12系列发布已经有一段时间了。之所以没有马上写文章，是因为iPhone12mini和iPhone12ProMax要到11月13日才会正式发布，在此之前连苹果的线下商店都没有样机。为了保险起见，我是在接触到Mini和Max真机后才开始写这篇文章的。一周前完成了文字部分，这周终于完成了几十张图片，到时候和大家见面。为了方便新同学更好的理解本文的内容，我简单提一下适配的一些必要信息。本文约3200字，分为以下六个部分：基本参数在网上搜索手机界面适配相关内容。经常看到文中提到以下参数：比如屏幕分辨率（物理分辨率）、屏幕尺寸、PPI值……其实在处理常见的手机界面适配时，设计师只需要关注以下三个基本参数：渲染像素（Pixel）、逻辑像素（Point）和Scale绘制页面时使用的尺寸也称为“1ximagesize”。比如Sketch中对应的模型尺寸对应手机的逻辑像素尺寸。scale：因为逻辑像素和渲染像素之间存在一定的比例关系，所以这个比例通常被称为比例。比如切图的@2x和@3x后缀对应的是scale的值。值得一提的是，放大倍数不一定是整数。比如三星GALAXYJ2（540×960）的放大倍率为@1.5x；华为M3Life8.0”（1920×1200）的放大倍率为@2.25x。匹配的方式主要有两种：1.倍率适配主要应用于逻辑像素相同但倍率不同的设备。比如iPhone11适配iPhone11ProMax时，两者适配的逻辑像素都是414x896pt，只是放大倍数不同，前者是@2x，后者是@3x。2、逻辑像素适配这种适配方法适用于放大倍数相同但逻辑像素不同的两个设备，比如iPhone11到iPhone8：两个设备的放大倍数都是@2x，逻辑像素为：414x896pt和375x667pt。如果两台设备的倍率和逻辑像素不一样，比如iPhone8到iPhone11ProMax，通常会先进行逻辑像素适配，然后再进行倍率适配。由于放大适配比较简单，只需要考虑两个因素：分割线和切割图像。因此，设计师通常所说的手机适配和尺寸适配，往往指的是逻辑像素适配。因此，搞清楚iPhone拥有什么样的逻辑像素，就成了iPhone适配和接受的关键。iPhone12对设计的影响今年10月发布的iPhone12系列共有四款机型。在说新机之前，我们先简单回顾一下截至iPhone11系列末期的几款主流iPhone机型及其对应的参数：从图表中我们可以看到，在iPhone12发布之前，市面上共有6款不同的iPhone具有不同的分辨率需要适应。那么iPhone12带来了哪些变化呢？从官方公布的屏幕数据来看，四款设备的物理像素如下：从图中可以看出，今年的iPhone新增了三种屏幕尺寸。（iPhone12和iPhone12Pro的物理分辨率相同，所以一并考虑。）但在设计层面，四款iPhone12系列手机只为设计师新增了1170×2532和1284×2778两种设计尺寸.绘图要点：目前有文章错误地将iPhone12mini的屏幕参数1080×2340作为最终绘图尺寸，认为12mini的逻辑像素为360x780pt。事实上，iPhone12mini使用了与iPhoneX相同的渲染像素，即1125x2436px，对应的逻辑像素为375x812pt。为了解释这个问题，我们还得从大家比较熟悉的iPhonePlus系列手机说起。如上所述，在适配手机界面时，设计师只需要关注三个基本参数：渲染像素（Pixel）、逻辑像素（Point）和放大倍数（Scale）。渲染像素通常与屏幕的物理像素一致，比如常见的iPhone8、iPhoneXS、iPhone11Pro。这也让大家很容易混淆物理像素和渲染像素。但既然说是“通常一致”，那总会有例外的。比如iPhonePlus系列，官方的屏幕参数（物理像素）为1080×1920，但渲染像素为1242×2208。所以设计师在为Plus系列做图的时候，不得不按照1242×2208来输出。新iPhone12mini的情况与Plus系列相同：官方公布的物理像素尺寸为1080×2340，但拿到真机后实测显示12mini使用的渲染像素为1125×2436，与iPhoneX相同，渲染像素保持一致。明确了这一点，我们再来看看iPhone12系列设备的参数：如果只看逻辑像素，加上iPhone12系列，目前iPhone共有7种尺寸。设计师需要关注这些尺寸，完成相关车型的验收。然而，这还没有结束。考虑到iPhone有两种视图模式，“标准”和“放大”。还需要考虑放大模式的大小。目前各设备放大模式对应的三种适配元素如下：其中，320x693pt为全新尺寸，出现在12mini、12、12Pro三款设备中。因此，将放大模式纳入适配考虑范围后，iPhone的逻辑像素一共统计了8个尺寸。如果比较最小尺寸和最大尺寸的宽高，宽度相差108pt，高度相差358pt。对于那些侧滑时需要暴露的页面，需要重新设计尺寸或者调整局部适配方案。这对于一些单屏显示的页面来说也是一件麻烦的事情。iPhone市场份额的变化我们先来思考一个问题。在以下尺寸的iPhone中，您认为哪种尺寸的iPhone的市场占有率最高？在iPhone12发布之前，在iPhone的屏幕尺寸中，你认为哪款iPhone的市场份额最大？相信大部分设计师都会下意识地认为750×1334机型的市场占有率最大。毕竟在过去的很多年里，大家都是用这个尺寸来拍照的。那么实际情况如何呢？先来看今年5月1日阿里友盟的数据：PS：数据公司是按照设备物理分辨率统计的，不是渲染像素。所以这里的1920×1080对应的是Plus系列手机。今年5月，iPhone在国内占比最高的机型是Plus系列。设计师最喜欢的750×1334和1125×2436分别排在第二和第三位。其中，排名第三的1125×2436（对应@2x的设计尺寸为750×1624）与前两位仍有较大差距。那是否意味着随着时间的推移，1125×2436机型的占比会逐渐增加，逐渐占据首位呢？如果你有同样的想法，恐怕你又要失望了。看看5月份的iPhone增量数据，你会发现一个有趣的情况：在增量中，828×1792（对应iPhone11）的增速为51.9%，遥遥领先于排名第二的1125×2436。接下来我们来看看最新的11月iPhone存量数据：828×1792从第四位上升到第三位，再看看11月的增量数据：828×1792的增速不降反升，从5月份的51.9%上升到最近的63.8%。如果不考虑最新的iPhone12系列，828×1792有望接替Plus系列，成为市场上最大的iPhone尺寸。在828×1792设备快速增长的同时，1125×2436设备的增长速度却在下降。它已从5月份的27.8%下降到现在的10.2%。iPhone设计尺寸演变过去设计师常用的设计尺寸是750×1334，但随着iPhone进入全面屏时代，如果以750×1334作为基准尺寸进行设计显然已经落伍了。但是，目前常用的对应750×1624大小（@2x下对应1125×2436大小）的模型，无论是在存量市场还是在增量市场，都少得可怜。在新发布的iPhone12系列中，只有12mini采用了1125×2436作为渲染像素的大小。其余三个模型使用新的渲染像素和逻辑像素。很难想象1125×2436尺寸的设备还能像之前的750×1334尺寸一样成为iPhone的主流分辨率尺寸……设计参考尺寸的选择不仅仅取决于设备的占用率，还要考虑适配的成本。例如，当要设计三种尺寸的设备时，最好选择中间的尺寸作为参考尺寸。以中号为基准，无论是适配小号还是大号，接口的调整幅度都是最小的，偏差不会太大。反之，如果你选择小或大作为基准，可能页面适合中间尺寸时感觉还好，但适应相反的极端尺寸时就容易出问题。新的设计基础界面设计师使用的绘图基准尺寸并不是一成不变的。回顾过去：设计师使用的基准尺寸从最初的640×960，到640×1136，再到750×1334，再到现在的750×1624，变化了4次。设计师几乎每两年都会随着新iPhone的发布调整设计尺寸。现在随着iPhone12的发布，750×1624机型的市场份额低迷，我们可以重新思考iPhone的众多尺寸中，究竟以哪种尺寸更适合作为设计的基准尺寸。这里我们不考虑设计师对尺寸的惯性依赖，只考虑兼容性和市场占有率两个方面。适配兼容性，按照“大、中、小”的原则优化中间尺寸。我们可以很容易地在目前8种iPhone尺寸（指逻辑像素）中选择中间的尺寸：分别为375x812pt和390x844pt，前者对应1125x2436px，后者对应1170x2532px。@2x尺寸分别对应：750×1624和780×1688。在市场份额方面，随着苹果逐渐停止销售之前的设备，新iPhone的分辨率占据市场只是时间问题。在新机中，只有iPhone12mini采用了大家熟悉的1125x2436px（375x812pt，对应@2x下的尺寸为750x1624px）。按照以往的经验，iPhone12（1170×2532）接替iPhone11（828×1792）成为占比最高的最受欢迎机型只是时间问题。截至iPhone12发布，390x844pt（对应@2xlowersize780x1688px）显然更适合作为未来的设计参考尺寸。
