距离iPhone 12系列发售已经有段时间。
之所以没第一时间撰文，是因为 iPhone 12 mini 和 iPhone 12 Pro Max 要在11月13日才正式发售。
而在此之前，即便是ApB u Q K j E f Bple线下店也没有样机。
保险起见，我等接触到 Min+ r W B Yi 和 Max 真机后，开始着手撰文。
一周前完成了文字部分，本周终于完成了几十张配图，这才和大家见面。
为了方便新同学更好的了解本文内容，我会简单k 6 Q ; m P ,提及一些关于适配的必要信息。
并附上往期内容的链K K H z 6接，方便延展翻阅。
本文约3200字，分以下六个部分：
在网络上搜索手机界面适s $ f ? ( V } Z配? L 7 . p ! ]的相关内容。常会看到文中提及以下几个参数：比如屏幕分辨率（物理分辨率）、? x Q C屏幕尺寸、PPI数值…
其实，在处理常见手机界F O ] N H u (面适配时，R q , t q :设计师只要关注以下3个基本参数：渲染像素（Pixel）、逻辑像素（Point）、 倍率（Scale）
渲染像素（Pixel）可以理解为是手机截屏时所得到的图片尺寸，单位是px；
逻辑像素（Point）可以理解q o o / w 0 J F –为是程序员在用代码绘制页面时所用的尺寸，也被叫做“$ ) q w G ! { ~ A1倍图尺寸”。[ L l % : =比如Sketch中对应的机型尺寸
对应的就是手机的逻辑像素尺寸。
倍率（Scale. 9 , ` K）因为逻辑像素和渲染像素存在着一定的比例关系，这种比例通常被称为倍率，比如切图后缀的@2x、@3x对应的就是倍率的数值。
值得一提的是，倍率不一定是整数，比如三星GALAXY J2（540960），倍率是@1.5x；
华为M3 Life 8& h K x D.0”（192012r r G W h m G ,00）的倍率则是@2.25x
适配方式主要有两种：
1. 倍率适配
主要应用在逻辑% k | T像素相同，但倍率不同的设备。
比如iPhone 11适配到 iPhone 11 Pro MaU x g 9 m z `x
两个适配的逻辑像素都是 414 x 896pt，但倍率不同，前者是@2x、后者是@3x。
2. 逻辑像素适j U I ) h ^配
这种适配方式应用在两个倍率相同V n Z 3 4 1，但逻辑像素不同的设备，
比如iPhone 11 到iPhone 8：V [ S s r ! * /
两个设备的倍率都n w N 是@2x，逻辑像素则分别是：414 x 896pt 和 375 x 667pt。
如} N 1 v – ^ M果两个设备的倍率和逻辑像素都不相同，比如iPhone 8 到 iPhone 1! M , 31 PrE k 1 Z v =o Max
那通常会! ~ R先进行n L i 5 { m ! 7 t逻辑像素适配，再进行倍率适 ( W i T i配。
由于倍率适配相对简单，C x # H R只需要考虑分割线和切图这两个因素。
因此，设计O A { [ : 7师通常说的手机适O _ W L j n H 5 k配、尺寸适配常指逻辑像素适配。
所以搞清楚iPhone有哪几种r N { X 0逻辑像素，就成了iPhone适配和验收的关键。
在今年10月份发布的iPhone 12系列共有四部z ] E z 7 A I机型。
在谈新设备前，我们先简单回顾截止iPhone 11系列时，iPhone的几款主流机型及其对应的参数：
通过图表可知，在iPhone 12发布前p E f，市面上的iPhone共有6种不同的分辨p M ( U ,率需要完成适配。
那么iPhone 12又带来哪些变化呢？
从官方e u A h | x给出的屏幕数据可知，四款设备的物理像素如下：
由图可知，今年iPhone共新增了3种全新的屏幕尺寸。（其中iPhone 12和iPhone 12 Pro的物理分辨率相同，故合并看待）
但在设计层面，iPhone 12系列四款手机，只为设计师增s a h 9 D f X加了11702532、12842778 两种新的设计尺寸。
画重点：目前有一些文章，错把iPhone 12 mini的屏幕参数10802340当做最终的绘图尺寸，认为12 miniu ` q h _ ^ ] Q的逻辑像素为360x780pt 。
事实上iPhone 12 mini采用了iPhone X一样的渲染像素，即1125 x 24n u 8 C 636px，对应的逻辑像素0 d C (是375×8+ B M M ! { – 312pt。
为了解释这个问题，得从大家比较熟悉的iPhone Plus系列手机说起。
在前文提到，手机界面适配时，设计7 3 Q x D !师只要关注：渲( * A 7染像素（Pixel）、逻辑像素（Point） 以及倍率（Scale）这三个基本参数。
而其中的渲= o S b染像素通常会和屏幕的物理像素保持一致，比如常见iPhone 8、iPhone XS、p 3 biPhone 11 Pro都是如此。
这也导致大家很容易把物理像素和渲染像素混为一谈。a N L o j D ?
但既然说了是“通常会保持一致”，就总会有例外。
比如iP5 P Y Khone Plus系( : ` ) D H Z列，官方给出的屏幕参数（物理像素）是10801920，但渲染像素却是12422208。
所以设计师在针对Plus系列做图的时候，就得按照{ b J F1242@ 4 1 c B ^2208进行输出。
而新款iPho y K b Q d e Ine 12 mini的情况和PlY c V i Tus系列一样：
官方给出的物理像素尺寸是10802340 ，但拿到设备真机后，通过# O h f : U测量可知12 mini采用的渲染像素是112524c C }36，这和iPhY E % done X的渲染像素保持一致。
在明确这一点后，我们再看下iPhone 12系列: |设备的参数：
如果我们只看逻辑像素，加上@ * p W ; t ^iPhonp j a + } Z @ le 12系列，目前iPhone 共有7种尺寸。
这些尺寸都需要设计师留心，并完成相关机型的验收走查。q M w T L
不过，到这里还没完。考虑到iPhone存在“标准”和“放) A . 9 f Q大”两种模式的视图。
还需要将放大模V f 2 t . I r 7 m式的尺寸考虑在内。
目前各个设备的放大模式对应的适配三要素分别如下：
其中320x693pt是全新的尺寸，出现在1u W /2 mini、12、12 Pro这三款设备中。
由此，在把放大模式纳入适配考量范围后，iPhone的逻辑像素共统计出8种尺寸。
如果将j f F 1 1 C其中最小尺寸和最大尺寸比较宽高的话，宽度相差了108pt、高度相差了358pt
对于那些横滑需要外` . 8 Q W露一部分的页面，需要重新设计尺寸或调整局部的适配方案。
这对于一些单屏显示的页面而言，也是件麻烦事。
先思考一个问题，在下面几个尺寸的iPhone中，你觉得哪一种尺寸的iPh5 N Oone在$ g b d & Y 9市面上占比最高？
在 iPhone 12发布之前，在iPh: w hone这几种屏幕尺寸中，你觉得哪一种iPhone的市场占有率最大？
我相信绝大多. O @数设计师，都会下意识觉得75d ^ q j01334这个尺寸的机型占比最多。毕竟在过去很多年里，大家都是用这个尺寸在做图。
那实际情况究竟如何呢W E U ? q F q ？
我们先看下阿里友盟今年05月01日的数据：
PS：数据公司按设备的物理分辨率进行统计，而非渲染像素。所以这里的1920108o 9 |0对应的是Plus系列手机。
今年五月，国内iPu 6 / thone占比最高的机7 m h型是Plus系列。而设计师钟爱的7501334 和 11252436分别排在第二q Q 0 % R和第三。] r % T D 8 5
其中排在第三的11252436（对应@2x的设计尺寸是7501624）和前两者的占比仍有较大的差距。
那是不是随着时间的推移，11252436的机型占比会逐渐增大，并逐渐占据第一呢？
如果你也有同样的想法，恐怕又得失望了。
翻看5月份的iPh g ] v W $ ( hone增量数据，会发现一个有意思的情况：
在增p ` % ) H r A }量中，8281792（对应iPhone 11）增速以51.9%遥遥领先第二名的11252436。
下面，看c @ : &下最新的11月统计的iPhone存量数据：
8281792已经从占比第四名上a { n T c 9 %升到了第三名，
再看11月份的增量数据：
82* D ( 0 l S 9 v T81792的增速. l l S不减反增，从5月份的51.9%增加到了最近的63.8%
如果不考虑最新的iPhone 12系列，828[ o Z 2 $ n w % ;1792有望接替Plus{ ; L i系列，成为市场占比最大的iPhone尺寸。
在8281792的设备G B | d n Y飞速增长的x : u / q . +同时，11252436这D ( a Q _ b q 3 /个尺寸的设备增速却在不断下降。已经从5月份的27.8%降到了现在的10.2%
过去设计师常用的设计师尺寸是7501334，但随着iPhone进入全面屏时代，如果再把7501334作为设计的基准尺寸显然已经不合时宜。
而目前常用的7b 0 3 a , G501624尺寸对应的机型（对应11+ 1 x 4 J Q ( [ `252436在@2x下的尺寸）无论在存量市场中的占比，还是r p G E . C & J a增量市场中的占比都少的可怜。
而新发K 6 ! q u X T售的iPh_ D 5 N ) a 4one 12系列中，也只有12 mini采用了11252436作为渲染像素的尺寸。而其余三款，采用全新的渲染像素和逻辑像素。
很难想象11252436这个尺寸的设备，还能和过去的7501334尺寸一样，成为iPhone主流的分辨率尺寸……u f T
设计基准尺寸的选择，除了要看设备的占有率，还要兼顾适配的成本。比如，4 L e N * 1 ]当有大中小三种尺寸的设备需要设计时，优选中间尺寸作为基准尺寸。
以中间尺寸为基准，无论是适配到小尺寸、还是适配到大尺寸，界面的调整幅度都是最小的，偏差不会太大。
反之，如果选择小或大作为 . V基准，或许页面适配到中间尺寸时感觉还行，但适配到C O G _ x x / e W另一侧相对极端的尺寸时，则容易出问题。
界面设计师所用的绘图基准尺寸并非一成不变。回看过去：
设计师用的基准尺寸已经从最初的640960、变成6401136、再到7501334，以及现在的7501624，已经变化了4次。设计师几乎每隔两年就r m T ^ h = ?会随着新iPhon1 l v s t Z Re的发布* Q ] ! M (调整一次设计尺寸。如今随着iPhone 12的发布，加上I a – d7501624对应机型在市场中占比的低迷，我们可以重新思考在iPhone众多尺寸中，哪一款更适合作为设计的基准尺寸。
这里先不考虑设计师对尺寸的惯性依赖，只思考适配兼容性和市场占有率* u K [ } d这两方面。适配兼容性，按照“大中小”优选 0 G e @ + 2 ) }中间尺寸这一原则。我f / ! U %们可以很容易的F ` K 9 A l ? ^在目前8种iPhone的尺寸（指逻辑像素）中选出位于中间的尺寸：
分别是 375x812pt 以及390x844ptx 8 F I p @，前者对应1125x2436px ，后者则对应1170x2532pxz ( / D E a N w W，如果进一步将其转换成大家熟悉的@2x尺寸，则分别对应：7501624和7801| n o | S : c I /688
在市场占有率层面，随着Apple逐渐停售之前的z } A设备，新款iPhone的分辨率占领市场只是时间问题。而在新设备中，只有iPhone 12 mini这一款设备采用大家熟悉的1125x2436px（375x812pt，对应@2x下尺寸750x1624px）。如果按照此前的经验推算，iPhone 12（11702532）接替iPhone 11（8281792）成为最热卖且占比最高的设备只是时间问题。
截止iPhone 12发布为止，显然 390x844pt （对应@2x下尺寸780×1T D M V 8 ,68F t j x g w ]8px）更适合作为今后的设计基准尺寸。
UI 入门基6 S .础！像素、分辨率和适配的知识全面总结
王M争：不管是UIE C ? @ F X R还是交互都是属于从国外传进来的「舶来品」，在翻译q U Y ^ M y F成中文的时候可能会出现一些词不达意的错误。
在传播过程6 A ` T % j * U @中，这些错误可能会被进一步的放大。
阅读文章 >4 D } :&} 3 _ Lgt;
欢迎关注作者的微信公众号：「海边来的设X $ S计师」
