iPhone 历届分辨率详解 01 篇

先看视频，再看文章↓↓↓ 有很多新手设计师在学习草帽老师网课包括下载一些设计资源的时候，发现 iPhone 状态栏的高度有高有低，有 20pt 的，也有 48pt 的，甚至还有灵动岛的，所以就导致自己在做设计的时候不知道要选择哪个尺寸。 要讲清楚这个问题，就得把 iPhone 的分辨率给整明白，那么多尺寸指定是能分成好几个类别的，分门别类之后其实也就没那么乱了。 所以我今天就带大家从 iPhone 的第*代到现在最新的 iPhone 14 都复盘一遍，重点讲的就是这些分辨率的变化对于我们 UI 设计的影响以及现在做设计该使用哪个尺寸。

首先 iPhone 的第*代是 2007 年 6 月份发布的，那个时候的我对于苹果这个公司包括它的产品是一无所知的，完全不知道。 我的印象只停留在带有物理按键的机型，到这儿就得说一下物理按键的好处了，虽然说现在已经完全被触控屏替代了，但是物理按键的反馈手感是触控屏永远取代不了的。 其实我在 09 年的时候就模模糊糊的听说过有 iPhone 手机这么个事儿，但是根本没见过，也没有去细查，不过就算当时 iPhone 手机发布到第三代，手机市场依然是被各种物理按键的手机给主导着。 所以说 iPhone 前三代虽然已经是触控屏了，但依然没有爆火，这个可能受限于价格，还有用户的使用习惯，导致那个时候大家对于触控屏手机没有太大的兴趣。

直到2010年iPhone 4出现之后才发生了翻天覆地的变化，可以说iPhone 4对于我们整个的影响都是革命性的。因为iPhone 4爆火之前可能有UI设计师，但是肯定没那么成熟，人也没那么多，但是iPhone 4火了之后，用的人越来越多，App Store各种应用也越来越多，所以就直接或者间接的影响了互联网的发展，如果没有iPhone，估计新像素也不会存在。

关于iPhone 4其他的影响，我就不多说了，咱们还是围绕分辨率来讲一下。你想一下，之前都是物理按键屏幕，包括iPhone的前三代，对应的都是一倍图，屏幕并不清晰，甚至能看到像素点。直到iPhone 4发布会上乔布斯提出了视网膜屏幕Retina，屏幕才开始变得高清，直接看不到像素点了。

我们人眼之所以看不到像素点，是因为它的像素密度太高了，也就是163这个值，不过iPhone 4是326，直接是163的两倍。像素密度越高，我们的人眼就越看不出来像素点，但是它有一个档位，到了那个档位之后，我们就已经看不出来了，再高意义也不大，而这个值乔布斯在发布会上也说了，那就是326。

讲到这儿就慢慢到我们要说的重点了，那就是像素密度。因为iPhone 4的出现，才有了我们后来的切图，倍图的概念就是从这里出来的。 所以我们第*个要知道的就是像素密度，英文缩写是 ppi ，翻译过来就是每英寸有多少个像素，像素我们都知道，那么英寸是什么呢？ 首先英寸是我们物理世界的长度单位，把英寸换算成厘米的话，一英寸等于 2.54 厘米。 所以说，英寸就是一维的一条直线，像素密度就是这条直线上有多少个像素，其实我们只需要记住，像素密度的值越大，屏幕就越清晰就可以了。

我来举个例子让大家更直观的了解一下，比如我们常见的显示屏，有24寸的和27寸的，那么这两个显示器都是1080的，1080是什么意思？就是它的分辨率1920*1080个像素，那这两个显示器的像素都是一样的，但是他们的物理尺寸不一样，所以他们哪个会更清晰呢？ 很明显是24寸的，因为像素是不变的，把它塞到更小的空间里面，它一定是更密集的，所以它的清晰度也就越高。那如果把这个像素塞到一个小手机里面，它是不是会更清晰呢？答案也是肯定的。

iPhone 4的像素密度是前一代的两倍，但实际上这个屏幕的像素量却提升了四倍，因为分辨率的计算是宽*高，所以这里就有一张非常经典的图，这是iPhone 3GS和iPhone 4两个手机电量的对比图，大家可以看看差别有多大。

然后我们再来说一下缩放因子，它就是我们常说的几倍图，1缩放因子就是1倍图，说到缩放因子就不得不提逻辑分辨率和物理分辨率。 如果我们在iPhone 3GS上截个图，这个图片如果不缩放，默认就是320*480，也就是我们常规意义上理解的分辨率的大小尺寸，然后把这个照片放到同样是3.5英寸，但是分辨率是640*960的iPhone 4手机上面，在不考虑适配的情况下，这个图片会同比例缩小四倍，因为iPhone 4的像素量是iPhone 3GS的四倍。 很明显这样是不行的，所以苹果就想了一个解决方案，就是逻辑分辨率，有了这个逻辑分辨率之后，它就能让这些元素在不同像素密度的机型上统一它们的大小，有了逻辑分辨率就相当于制定了一个统一的标准。 那什么叫统一的标准呢？ 现在只是一倍图，到iPhone 4是两倍图，后面还有三倍图，但是因为苹果有了逻辑分辨率，就可以让我们UI设计师在设计的时候去无视这些倍图和像素密度，因为苹果系统会自动的根据逻辑分辨率去转换它，这些甚至连开发都不需要操心，他只需要我们给出正确的切图就行了。

讲到这儿，大家应该都明白了，我们常说的设计稿的倍数指的就是这个逻辑分辨率。所以大家常说的在什么尺寸下做设计，那肯定是在逻辑分辨率，也就是一倍稿下做设计。之前用750是因为ps不是一个矢量软件，如果用逻辑分辨率320*480去做UI设计，那就太模糊了，所以才被迫的在两倍稿下做设计。 但是现在大家的设备都跟上来了，包括UI设计软件，像Figma、Adobe XD这种设计软件都是全平台通用的，Windows和苹果电脑都可以使用。细心的同学也可以发现，我们在UI设计软件建设计稿的时候，后面是没有单位的，这是因为在逻辑分辨率下，也就是在一倍稿下，它们的单位是相等的，所以这个时候单位就没用了，这也说明大家都在变相的去提倡用一倍稿去做设计。