不知道逻辑像素你还是一个合格的iOSUI设计师吗

取这个标题,不是为了拉仇恨。只是很多时候,我们做设计的都不必自己去研究这些一大堆的数值,直接去网站上找到别人给出的规范

就可以做设计。程序叫你给什么,你就做什么,给多大的图片给他。

我想问:那不是美工,是什么?

首先,做为一个美工,我曾经以为iphone4以前的那些手机,屏幕都是比iphone4要小一半的,所以是@1x; 同理推断往后i5也是1x,只不过更长了而已;i6则是稍微比i5大一点,所以,设计稿上也仅仅是用2x就好了(因为我一直说i6是一个bug的存在);而至于i6 plus,同理,是i5屏幕大小的1.5倍,或者近似于1.5倍,所以是3x。

我觉得自己并没有犯什么错,因为我没有一套的iphone手机,所以我不去深究。而且我看到那些375x667这些拗口的数字,还有一大堆zoom display,downscale这些鬼名词,真没兴趣去琢磨。但事实是,我一直这样去做,而且正在无意识地影响着一些新手设计师。他们有时候会问我要做多大的尺寸,我就会按照规范告诉他,但是往往他们问我原因,我就会把我理解的一套错误观念推出去。我决定纠正自己,着手去研究。

首先得先看下以下两张图:

以上是iphone官方给出的设计规范。相信很多设计师们都收藏有这个鬼东西吧?

1 首先解释下里面几个名词吧。

一个是逻辑像素,也叫做逻辑点,logic point,单位pt。我刚才说的那个375x667正式是iphone6的逻辑像素,而在iphone6之前的逻辑像素都是320宽。

这个逻辑像素才是真正表示显示内容多寡的一个单位。也就是说,我宽375,肯定要比你320要显示多内容,所以这个逻辑像素又叫逻辑点,你可以理解为内容点。

2 然后第二个要解释的就是物理像素了

物理像素也就是我们经常用到的pixel,单位px。就是用来衡量一个内容是由多少单位组成。就比如在iphone4之前的屏幕,同样是一个14pt的字符“a”,就相当于14px,就是1pt=1px,所以iphone4之前的设备屏幕,我们叫做1x。

到了iphone4~6,都是一个14pt的字符“a”,相当于28像素,也就是1pt=2px,所以这个字符的精细度就上去了,我们叫做2x

到了iphone6 plus,那么就更牛逼了,一个14pt的字符“a”,构成像素又增加到了42px,也就是1pt=3px,我们叫做3x。

所以说是多少x,不是因为给定了像素来判断多少x,而是本来iphone6plus,决定了显示屏的逻辑像素,又决定了做3x屏幕,才会有1242x2208这个像素值出来,然后设计师就按这个像素值去做图。这个像素也与屏幕的尺寸没有关系。因为iphone6 plus5.5寸也是已经根据逻辑点决定好了的。

3 现在说说iphone各个型号显示内容的多少,还有控件大小的决定数值。

前面说了,pt是内容的单位,也就是说,pt越大,能显示的内容就越多。所以i6(375x667pt)要比i5(320x568)略宽,i6 plus(414x736)要比i6又要宽那么一点。也就是说他们的内容都是增多了一点点,但是却没有翻倍,所以千万别误会了3x的6 plus会比1x的iphone3(320x480)显示内容翻了3倍。

控件的大小是怎么一回事呢?控件的大小就需要看回dpi了,也就是每英寸的逻辑像素是多少。看回上面的第一个图,所有版本的iphone都是163的dpi,也就是说,在每一英寸的范围能显示163pt,英寸是硬件单位,也就是可以用尺子来量度的,固定不变的。那么同样是163pt的应用内容,其他版本iphone都是用1英寸物理单位就能显示出来。而iphone6 plus却需要1.05英寸来显示,那么我们肉眼看来是不是大了?大了5.5%差不多。所以你现在可以去比较一下微信在几个不同iphone上看起来的样子就可以知道了。为什么i6 plus会看上去,间距还是文字都会稍微比其他的设备大一点点,但是又不是1.5倍。以上就是原因。

4现在说下iphone6出来之后的zoom display

以上是苹果官网给出来的说明,iphone6之前是没有这个概念的。也就是他们会根据你调节的模式,来调节逻辑像素控制显示内容的多少和控件的大小,方便用户能选择适合自己使用的iphone。

5 downsample是什么鬼

本来我以为我自己要写完了,却发现还有一个downsample是iphone6 plus的,因为按照理论,ihone6 plus显示内容是414x736pt,这个没错。但是他最后却不用纯正的3x屏幕,而是用了downsample(降低采样)技术将1242x2208降低到1080x1920。这个,不知道是技术限制还是什么问题,导致没办法是彻彻底底的3x屏幕。所以,iphone6 plus可以看做为一个技术过渡也不过分。我们设计师做图的时候也还是应该给出渲染像素1242x2208px的设计稿件,里面的空间和设计依然还是3倍。但是在真机上面看,降采样后理论上是会模糊,但是由于3x的像素精度高,所以,一点点的模糊看不出来。估计要对比设计稿才能看出来了。

6最后说一下我突然来的疑问,那样子,我用ps要做iphone6 plus 的设计图,要多少分辨率才对呢?

这里的分辨率是像素分辨率,也就是ppi,无论你多少分辨率,你最后出来的还是1242x2280就对了,分辨率调节只是调节了英寸的大小。与最后出来的图无关,因为6plus最后是需要1242x2208px的设计图,而不是多少英寸的图。

在这里需要感谢下知乎上面分享知识的各位高人,还有回答我问题的小小兵同学。

本文参考链接:

「像素」「渲染像素」以及「物理像素」是什么东西?它们有什么联系?

iPhone 6 Plus的逻辑分辨率为什么是414x736?

你可能感兴趣的:(不知道逻辑像素你还是一个合格的iOSUI设计师吗)