U L0VE I | 给Apple洗洗白——为何iPhone plus系列分辨率让设计师蛋疼？

相信做过iOS端从iPhone6\7\8到plus系列适配的小伙伴们，心里都应该有过这个疑问：

为什么Apple这么操蛋，做个手机搞这么多分辨率，而且还不是倍数关系，完全不顾及设计开发的麻烦，这不是成心跟设计师和开发过不去吗？

难道分辨率不同也能提高iPhone的逼格吗？

小U君当初也是对Apple这样的设定“怀恨在心”，认为Apple没事找事，可能他们的设计师闲的蛋疼，所以让我们一起蛋疼。

但好奇的小U君放下了加班适配的愤怒，去了解了下背后的故事。才发现Apple也有苦衷，而且更让你不敢信的是，这样做的目的，竟是为了方便设计和开发！（我勒个去）

这里我们先来重温下iPhone分辨率，着重看下iPhone6/7/8及其plus系列的：

看到没，是不是一看就来气！明明iPhone6/7/8还是375pt，甚至连后面的iPhoneX也是好端端的375pt，只不过屏幕密度系数不同罢了，中间却挤着一群格格不入的414pt的plus系列。

明明适配乘以或除以1.5就完事儿了，现在还得另外改尺寸，不说了，天要亮了。

不过且听小U君来给你慢慢解释，说不定听完你会好受点，因为Apple已经很为我们设计师着想了。

要想弄清其中的原因，得先从上图中左边圈中的2个名词讲起。

Rendered Pixels直译过来是渲染像素。

Physical Pixels则是物理像素，不过像素换成分辨率可能更好理解啦。

仔细一看，只有plus系列的渲染分辨率和物理分辨率不同，而其他的iPhone渲染分辨率和物理分辨率都是一致的。

物理像素是事先定好的，和其他物理尺寸一样，比如iPhone6+是一块5.5英寸Retina HD高清显示屏，1920×1080px分辨率，401ppi，机身三围：158.1mm×77.8mm×7.1mm，重量：172g。

这些参数都是没得商量的。所以作为设计师的我们，其实要讨论的是可变的渲染分辨率。

我们不妨先来试试，若按照常规最方便开发的@2x或@3x密度来设计plus系列，会出现什么问题。

1.plus继续采用@2x密度分辨率

上图可看出，iPhone6/7/8和plus系列的ppi分别是326和401。ppi即pixels per inch，像素每英寸。假设同一张图，放在iPhone6和iPhone6+（此后均简写为iP6、iP6+）上。

由于是同一张图，所以像素尺寸一样，而iP6+的ppi大于ip6，所以图在iP6+上的实际长度尺寸要小于iP6！这就意味着，同样的图像或文字，在大屏的iP6+上反而缩小了，更看不清楚了，这怎么能行呢！

2.plus采用@3x密度分辨率

采用@3x密度屏的话，还是放同一张图（这里为了方便计算，设置这张图@2x下为44x44px）到iP6和iP6+里。当然@3x的话图在iP6+里就变成66x66px啦，这样一看确实图片得到了扩大，但是新的问题又来了。

我们来算下这张图占整个屏幕的比例：

iP6是44px/750px≈0.053

iP6+是66px/1080px≈0.056

也就是说，同样内容占iP6+屏幕的比例要大，也就是说，最终一个大屏手机所显示的内容反而没有小屏的多，那我要这大屏有何用！

3.Apple的最终解决方案

所以，传统的@2x和@3x密度都不适合plus系列屏幕，而真正合理的值在2和3之间，是@2.46x。但是这个值对于我们设计和开发来讲，太不友好了，一想到一大堆、一串串的小数就头皮发麻。

于是Apple想了一个神奇的解决方案。屏幕还是采用@3x的，也就是说我们用1倍密度设计后乘以3就行了（或2倍密度乘以1.5），但设计分辨率设为1242x2208px，而不是物理分辨率的1080x1920px，iOS在拿到我们设计的尺寸后，会自动缩放到1080x1920px的物理屏幕上显示。

其实看得出来，这样也并没有达到显示最佳的@2.46x，而是一个@2.62x密度值。屏幕所显示的图像也比我们设计原图要小约13%（若你实在想要以原始设计尺寸显示，设置里“放大显示”了解一下）。

但由于iP6+Retina屏的超高401ppi，这一点点改变往往可以被忽略。

所以说到底，Apple之所以另起一条分辨率路线，竟是为了方便我们设计师和开发。啊，Apple，我错怪你啦！

经小U君一顿讲解，小伙伴们是否也体会到了Apple的良苦用心呢？

这是小U君在U L0VE I的处女文，今后也将不断分享小U君的设计经历和一些设计思考。

小伙伴们有任何建议或问题，欢迎在下面留言，小U君会认真回复的！另外，别忘了把小U君分享给更多的朋友哦，谢谢~

本文由微信公众号【U L0VE I】原创首发，转载请联系授权