作为一名iOS开发者,以前对这些概念懵懵懂懂,最近看了很多资料记录下对这些概念的理解,主要以iOS和Android平台为切入
基本概念
-
px:pixel 像素
- 对于显示屏来说px是屏幕显示的最小单位,比如我们常说的1920*1080分辨路屏幕,只代表了屏幕拥有1920x1080个像素点
- 对于图片来说px为图片内容的最小单位。比如一张1920*1080像素的图片,代表着图片由2073600个像素点组成,所以只要图片的分辨率没有变化,那图片的承载内容是不变的
-
ppi :pixel per inch 单位英寸(大约2.54cm)内的像素数量,
- ppi计算方式: ppi= 屏幕对角线上的像素点数/对角线长度 = √ (屏幕横向像素点^2 + 屏幕纵向像素点^2)/对角线长度
- 对于显示屏来说,因为PPI是根据设备尺寸计算出来的,所以ppi的大小决定着屏幕的像素密度(ppi越高,屏幕越细腻,解析力越强),比如:物理大小一样的文字,在PPI更高的屏幕上显示出来肯定是更细腻的(因为同样的大小,有更多的像素来渲染);对于图片来说,如果是像素一样的图片,以屏幕的绝对解析力去显示,那PPI高的显示出来的物理大小一定会更小的
- 单纯的图片是不寸在PPI的说法的,因为没有实际大小,如果给图片一个固定的显示大小,那图片也可以有ppi这个概念 ,也可以理解为图片的PPI根据显示的大小而改变。在设计软件中,我们可以动态的设置设计稿的物理大小和ppi 。
-
pt:point 点 ,是个物理长度单位
pt这个概念在不同行业不同系统中的定义是不一样的,可以理解为- 行业或者系统为设计者提供的一个逻辑(设计)分辨率,逻辑分辨路和物理分辨率(实际px)没有直接的对应关系
- 形象的比喻就是pt就是我们看到的大小单位,和物理大小存在一种比例关系,但是不同系统会不一样,甚至同一系统都可以不一样,比如iOS系统的UI设计规范就有区别,后面会讲到。
- pt在印刷行业表示1/72英寸大小,具体的用途我还是没搞明白
- pt在iOS开发中就是逻辑分辨率<开发>的最小单位。至于1pt表示多大的物理大小和1pt代表着多少个像素都是根据系统的设计规则来的,后面会讲到。
- pd:dip,Density-independent pixel, 是安卓开发用的长度单位,也是个无长度单位。1dp表示在屏幕像素点密度为160ppi时1px长度。这个设计可以确定在android系统中,1pd在任何设备的大小都应该是一样的,但是代表几个像素却是不固定的。至于为什么在iOS和Android开发的时候会把pd和pt看作是一样的,之后会具体解释
- dpi:dots per inch,每英寸多少点,一种点密度 。
- 计算方式和ppi一样,但是这个点可以有很多理解,不同的点计算出来的dpi所代表的含义都是不一样的
- 这个点可以是px、pt、pd、印刷取样点、在鼠标等电子设备是上,点可以理解为最小操作阈值(即设备会把多远的两个点当作一个点来处理)等,不同的理解dpi代表的意思也是不同的。
- 用px去计算得到的dpi=ppi;
- 用pt去计算得到的是单位英寸内pt的密度,那对于iOS以pt为单位来设计的话,那这个dpi可以理解为单位pt的物理大小关系,dpi越高,单位pt的物理大小应该就越小,结果就是1pt的显示结果大小不一样
- 用pd去计算得到的是单位英寸内的pd密度,依据Android的设计规范,这个dpi应该是一样的。
- 在印刷行业如果以取样点去计算,得到的ppi就可以理解为设备的解析力
- 对于pt为1/72的行业刷行业来说,那dpi就是固定的72dpi了;
iOS对UI的布局
1.iOS的设备设计演变
在iphone3gs的时候,屏幕的分辨率为320x480px、ppi =164 ,这时苹果把iOS系统的逻辑分辨率也设计为320x480pt 、dpi = 164 ,并且后面一值遵循这个UI设计规范(1pt 的大小约等于ppi为164的情况下单个像素的大小)。在没有出现plus及iphonex系列的之前的设备的都是dpi≈164, 1pt 的物理大小是固定的,但对应的像素有可能不一样,后期出现的plus及iphonex系列的dpi都比164小一点点,所以1pt的大小也对应的有变大一点点,但是这变化是很小的,应该是苹果系统级别的大屏适配吧 。
2.iphone plus
苹果的设计规范一直是在保持dpi基本不变的情况下,设备分辨率和逻辑分辨率的是整数倍的缩放关系,但是在plus系列中,虽然开发的时候我们使用@3倍关系做设计开发,但是实际上他们之间是没有@3倍关系的,实际的缩放应该是@2.6倍,那为什么苹果不按照规范来呢,这个我也不知道,但是可以分析一下如果苹果严格按照@3倍来应该是怎样的。
- 以逻辑分辨率的基础上x3,即(414x736)x3 = 1242x2208 作为plus系列手机的物理分辨率,这么设计是ok的,符合UI设计规范,但是为什么最后使用分辨率更低的1080x1920的,得去问库克
- 以物理分辨率/3,即(1080x1920)/3 = 360x640作为逻辑分辨率,这时候的 dpi = 133 , 这时候的dpi远远小于164,违背了设计规范,plus只能显示很小的内容,因为文字图片啥的都被放大了 ,除非开发者对plus单独布局,这是不可能发正在iOS开发中的,哈哈!
- 还可以使用2倍缩放而不是用3倍缩放,即(414x736)x2 = 828x1472 作为plus系列手机的物理分辨率,这时候设备的 ppi = 307,这ppi连苹果提出的最低326都达不到,肯定不会使用了
- 最后在屏幕大小5.5寸和逻辑分辩率都确定的情况下,为什么选用1080x1920 , 那也不得而知,大概率是成本吧!
3.iOS的猜想
- iOS因为是闭源,所以它可以通过自己设定逻辑分辨率来控制设备的dpi让开发者在对UI布局的时候不用考虑不同大小设备的影响
- iOS通过缩放因子的控制来最简单的解决开发者对于不同大小设备的图片设计问题
- 通过控制不同设备的逻辑分辨率和dpi,苹果还能在系统级别上做一些显示调整,比如在plus和iphone x系列上的dpi会比iphone其它系列的小一点点,这样就能让大屏显示相同pt内容的时候内容会大一点点
- 苹果如果要保持现有的设计规范,那它的dpi应该不会有大的变化,然后通过尺寸和dpi可以确定逻辑分辨率,然后在有缩放倍数去确定屏幕的物理分辨率,哈哈哈 <纯属个人YY>
Android对UI的布局
1.对Android规范的理解
可能因为Android的开源属性和终端太乱太杂,让安卓不能像iOS那样对于不同的设备在系统级别设置逻辑分辨率来方便开发者开发,但是Android也有很好的解决方案就是使用pd作为逻辑分辨率,从pd定义可知(幕像素点密度为160ppi时1px长度),pd是个固定的物理大小单位。因此如果以pd计算dpi的话,那dpi在不同设备上应该是一样的160dpi,和iOS以dpi≈164基本差不多,所以在Android、iOS设计开发的时候才会把他们两等同。
android图