iPhone 历届分辨率详解 02 篇

最新就业数据，新像素郑州校区包豪斯班次就业统计已收尾。该班次6月底结课，统计时长为2个月，剩余3名未就业学员会继续跟踪。其中1名学员正在面试辅导中，1名学员出国读书，1名学员9月份开始找工作。

先看视频，再看笔记。 前面讲了从iPhone 4开始苹果推出了Retina视网膜高清屏，对UI设计师的影响就是推出了逻辑分辨率，也就是我们常说的一倍图设计稿，然后还有像素密度，ppi和屏幕尺寸。 再往后，也就是2011年，苹果推出了iPhone 4S，从屏幕上看和iPhone 4是没有任何区别的，就是硬件做了一些升级，还有就是iPhone 4S多了一个标志性的功能——Siri，这个Siri我们其实用到现在也没觉得有什么太大的变化，但是苹果对于这个功能一直是不离不弃的，所以就很期待今年或者是明年看看苹果怎么能让人工智能跟Siri好好的结合一下。

然后就是2012年的iPhone 5，屏幕高度由原来的480变成了568，所以对应的屏幕的物理尺寸由之前的3.5英寸到了4英寸，而ppi没有变化，说明清晰度是一样的。 也是从第5代开始出现了尺寸上的变化，因为之前的机型顶多是两倍关系，但屏幕比例都是一样的，但是第5代变高了，所以就面临一个问题——要不要4S的机型做一个设计稿。iPhone 5的机型也做一个设计稿？仅仅是因为它的高度不一样，实际上没有必要。 因为如果我们做一个APP的界面，一屏的内容可能有很多，这个时候通常采用上下滑动的交互方式浏览内容，所以对于内容本身来说，它的高度是可以无限变化的，只是说不同的机型我们看到的首屏高度范围是不一样的，但是他们的宽度都是一样的，所以统一用一个尺寸，也就是宽度为320的设计稿就可以了。

再往后就是2013年同时发布了iPhone 5S和iPhone 5C两款机型，也就是从这一年开始，拟物化消失了，取而代之的是扁平化。

我们今天回看一下两个风格的图标对比图，虽然说拟物的图标单独拎出来放大是非常精美精细的，但我还是觉得右边的更好看一些。其实到这也是一个时间节点，对于当时的UI设计师来说，门槛相对变低了，因为不用再像以前这样去抠图标的细节了，所以我觉得扁平化也是走出来的一条正确的路。

讲到这儿，眼尖的同学可能会发现了，iPhone第5代和5S还有一个区别，那就是5S这里home键上线了指纹解锁，之前一直是输入密码的，而iPhone 5S可以把你的指头放在home键上去用指纹解锁。

再然后就是iPhone 6了，2014年iPhone手机第一次出现了大小个，一个小的普通机型和一个大的Plus机型。大家一定要记得它的档位，不管后面发布什么型号的手机，只需要记住苹果手机有小的、大的，甚至有一个更小的中低高三个档位，这样不管它后面发布什么型号的手机，尺寸都不会乱。 iPhone 6和iPhone 6 Plus是iPhone史上的一个大改版，因为这个时候其他的安卓手机外观啥样的都有，如果苹果还是像之前只有一个尺寸的手机，很明显是不够打的，所以可能是基于这个原因才推出了Plus版本的机型。

这里有一个小细节可以让我们过渡的去讲屏幕，通过图片可以发现，iPhone 5C的标签栏图标要比iPhone 6的看着拥挤，iPhone 6的留白更多一点，这就是分辨率以及像素密度带来尺寸上的变化。

之前是320的宽度，现在是375，横向直接增加了55的逻辑分辨率尺寸。我们可以先看一下这三个的宽度对比，320真的是最小的，375我们应该是最熟悉不过了，因为直到iPhone 11 Pro依然采用的是375的逻辑分辨率，只是高度加了很多，所以说375我们真的用了很长时间。

那现在就要讲到第*个问题了，iPhone 6出来之后直接带来了两个全新的尺寸，对于我们逻辑分辨率也就是一倍稿来说，之前主流是320，现在突然冒出来375和414，那设计的时候同样的界面，我们要不要出三个设计稿呢？ 很明显没必要，这样太不高效了，而且我在前面也说过，苹果对于不同机型一直有一个自动的适配，所以理论上我们不用操心。 但就算苹果有一个自动适配，那我们还是要在这三个尺寸里面选一个，该选择哪个做基准设计稿呢？ 首先选iPhone 4最小的行不行，它肯定不会出大错，因为不会出现错位的问题。但是会有一个问题，iPhone 4放的刚刚好的话，放到Plus的机型上一定会非常的稀松，因为它们两个的宽度跨度太大了；相反，如果以Plus作为基准也是不行的，这样适配到了320尺寸上就没法看了。所以基于这个问题，我们才选择了中间值375的尺寸作为基准设计稿，这个尺寸往Plus上适配也还行，往小一点的机型适配也没问题，但是我们在做的时候依然要考虑320和414宽度下的一些极端情况，这样才更不容易出错。

现在我们再来看一下参数，iPhone 6的像素密度还是326，而Plus是401，并且，它的屏幕尺寸是5.5英寸，也就是说物理尺寸变大了，所以也是从这里开始第一次出现了三倍图。

现在就要补充一个重要的小知识了，正常情况下，iPhone 6截图放到电脑上分辨率是750*1334，也就是逻辑分辨率的两倍，但是Plus的截图分辨率是1242*2208，可苹果参数上写的物理分辨率是1080*1920，这就说明我们实际截图的分辨率是大于物理分辨率的，这是什么原因呢？

这个实际上是苹果做了一个东西——叫Downsampling降低采样率，翻译过来就是缩小，但是为什么会有这个东西呢？ 因为1080除以3是360，那正常来说360就是iPhone 6 Plus的逻辑分辨率，但是iPhone 6是750除以2，也就是说iPhone 6的逻辑分辨率是375，这样就导致一个问题，iPhone 6 Plus的逻辑分辨率宽度能放下的东西居然还没有比它小的iPhone 6的多，所以，最终就基于ppi、屏幕的物理尺寸、还有当时的工业技术这些限制的情况下选择了实际上大一些的1242*2208作为渲染分辨率，也就是我们截图截出来的真实分辨率，然后再把它做一个1.15倍的缩放，正好是1080*1920，所以Plus 414的宽度就是拿1242除以3得来的。