UI界面设计 ·

解读iPhone 6Plus的设计尺寸为什么是1242*2208px

作为一名APP设计师,我们必须了解iPhone 6 Plus为什么会有三个尺寸。因为其他的iphone手机只有一个尺寸。而且,目前我们要以1242*2208px作为iPhone 6 Plus的设计尺寸呢?

我想各位设计小白们心中,很多种疑问,十万个为什么都有了。

 

完整的APP设计尺寸详情请点击:2016年APP设计尺寸大全

里面专门给大家整理了iPhone 6 Plus的三个尺寸。 如下图所示:

iPhone-6-Plus设计尺寸

 

不用担心,这节课25学堂的小编为大家揭秘一下iPhone 6 Plus的设计尺寸为什么是1242*2208px。

 

让我们先来回顾一下iPhone 6 Plus的参数指标:

iPhone 6 Plus 尺寸参数   

5.5英寸Retina HD高清显示屏,1920×1080像素分辨率,401 ppi

机身三围(长×宽×高):158.1毫米(6.22英寸) × 77.8毫米(3.06英寸) × 7.1毫米(0.28英寸)

重量:172克 (6.07盎司)

1920  *   1080px 是iPhone 6 Plus手机的物理尺寸,也就是物理分辨率。同时也是401ppi 的屏幕

 

扩展阅读,我希望大家好好看下这个信息图。iphone 6演变成iphone 6 plus的几种方案分辨率对比图。

iphone 6 plus 物流尺寸分辨率2

完整的 信息可以去看下:手机屏幕分辨率术语:逻辑分辨率和物理分辨率

 

然后,我们举例来说说iPhone 6 Plus的呈现图像的方式。

 

假设一:iPhone 6 Plus继续采用iphone的@2x 倍的分辨率来显示图像。

比如说,我们在iPhone 6 Plus屏幕上继续使用 @2x 系数的 Retina,换句话说还是跟iphone6 iphone5 一样,放大一倍的关系来呈现图像。

那么同样的一张照片应该显示如下:

iPhone系列的分辨率

此时,1080px 对应的逻辑像素是 540 pt @2x。如上图右边的iPhone 6 Plus手机标注的一样。

当我们将上述的理论变成现实的时候,其调整回真机物理尺寸的时候,会发现 iPhone 6 Plus 上的图反而变小了。非常的惊讶。如下图所示:

iPhone系列的分辨率2

看完上面这个对比图,是不是iPhone 6 Plus的采用@2x倍的分辨率显示的图像比iphone6 小。这样会导致一个非常尴尬的结果:用户拿着一个大屏手机,字却反而比小屏幕手机更小,更看不清楚。

因此,@2x 不合适iPhone 6 Plus。

 

假设二:我们 改用@3x倍率来显示图像如下:

iPhone系列的分辨率3

得出的结论那就是 照片肯定显示得要大多了,看的很清楚了。同时也带来了一个问题。

但逻辑像素则成了 360pt @3x,比 iPhone 6 的 375pt @2x 还要少。另一个尴尬的局面产生:用户拿着一个大屏的 iphone,看到的内容反而比iphone6和5少了。非常不好。

根据上述的结论,@2x 和 @3x 在iPhone 6 Plus  都不太行得通。苹果公司也是经过很长的心理纠结。最终定下采用@3x。

真正合理的倍率应该是多少呢?   如果真的要等比例,应该是 @2.46x,但这个数字太坑了,无论是APP设计师还是ios开发人员都会疯掉。非常不利于我们开发和设计。

因为换算太难了。呵呵呵

看到这里,大家心理有疑问。那这个2.46到底是怎么算出来的呢?  25学堂把这个公式给大家列出来了。

我们以宽为例来计算。

iphone  6             宽的    @2x     像素密度:326ppi

iphone  6 plus    宽的    ??     像素密度:401ppi

换算公式就是这样: @2x / 326ppi = ??/401ppi     得出 结果就是  @2.46倍率。

 

真正合适的倍率@2.46     处于 @2x和@3x 之间。

于是,苹果公司给出了一个实在奇葩的方案(虽然想想也合理):不是现有的屏幕物理分辨率明显超过了 @2x 但还达不到 @3x 的水平么?   那就采用 @3x 的屏幕总可以满足了。

最终结果,为了方便APP设计师和ios开发工程师的,最终决定采用1242*2208px来作为设计尺寸。

原因就是:使得设计和开发的过程大大简化,且最后的实际缩放系数 @2.62x 非常接近理想的 @2.46x,使得同样的素材在真机上看起来尺寸也非常合理。

在iphone的retina屏幕上,这些细微的细节,我们的肉眼已经无法判断了。401PPI已经超高。 所以我们无法感觉到图像已经缩小了。实际上在iPhone 6 Plus上展示出来的图像都是缩小的。比我们设计的原图要小13%左右。

iOS 拿到我们设计的 UI 绘制结果尺寸,实时地再缩小到实际的 1080 x 1920 分辨率。于是,用户在 iPhone 6 Plus 的屏幕上看到的永远是被缩小了的图像。如下图所示:

iPhone 6 Plus 尺寸参数2

iPhone 6 Plus的设计尺寸选择是1242*2208px,真正的原因还是为了方便ios开发者和APP设计师。 给我们提供了方便。这就是苹果公司的用户体验设计奥秘。

第二个理由:

iPhone 6+除外,其他所有iPhone的DPI是一致的,都是326,用@2x的素材。

但是6+的实际DPI是401,理论上苹果应该用401/326 * @2x=@2.46x的素材。但是这个奇葩的比例对开发者而言很难切图。所以苹果为方便开发者用的是@3x的素材,然后再缩放到@2.46x上,实际上是缩放到2.46/3=83%。实际上苹果选取了一个接近比例的87%。
这样算下来,物理分辨率和虚拟分比率的比例是87%,也就是1920/0.87=2208,1080/0.87=1242
好处就是开发者更方便,比如准备素材时,字号可以直接调成3x的。

 

另外一些好奇的小伙伴也已经给出了答案:

首先iPhone6没有设计版,只有iPhone6 plus有。说简单点, plus屏幕有1080个像素点,但截屏后发现图像是1242像素,明白了吗?   就是在一个物理有1080个像素点的屏幕里塞了个1242像素的内容,你按照1242 *2208px 做就好了。

 

 

至于iPhone 6 Plus的设计尺寸为什么有三个尺寸,是因为针对的对象不一样。

iphone6 plus UI物理版: 就是iphone6 plus实际的屏幕像素。

iphone6 plus UI设计版: 就是我们截屏iphone6 plus的界面在ps中去量,发现的尺寸。

iphone6 plus UI放大版:就是iphone 6 的尺寸等比放大1.5倍得出的分辨率。

参与评论