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】原创首发,转载请联系授权

你可能感兴趣的:(U L0VE I | 给Apple洗洗白——为何iPhone plus系列分辨率让设计师蛋疼?)