iOS、Android等开发中px、ppi、pt、pd、dpi的个人理解

作为一名iOS开发者,以前对这些概念懵懵懂懂,最近看了很多资料记录下对这些概念的理解,主要以iOS和Android平台为切入

基本概念

  • px:pixel 像素

    1. 对于显示屏来说px是屏幕显示的最小单位,比如我们常说的1920*1080分辨路屏幕,只代表了屏幕拥有1920x1080个像素点
    2. 对于图片来说px为图片内容的最小单位。比如一张1920*1080像素的图片,代表着图片由2073600个像素点组成,所以只要图片的分辨率没有变化,那图片的承载内容是不变的
  • ppi :pixel per inch 单位英寸(大约2.54cm)内的像素数量,

    1. ppi计算方式: ppi= 屏幕对角线上的像素点数/对角线长度 = √ (屏幕横向像素点^2 + 屏幕纵向像素点^2)/对角线长度
    2. 对于显示屏来说,因为PPI是根据设备尺寸计算出来的,所以ppi的大小决定着屏幕的像素密度(ppi越高,屏幕越细腻,解析力越强),比如:物理大小一样的文字,在PPI更高的屏幕上显示出来肯定是更细腻的(因为同样的大小,有更多的像素来渲染);对于图片来说,如果是像素一样的图片,以屏幕的绝对解析力去显示,那PPI高的显示出来的物理大小一定会更小的
    3. 单纯的图片是不寸在PPI的说法的,因为没有实际大小,如果给图片一个固定的显示大小,那图片也可以有ppi这个概念 ,也可以理解为图片的PPI根据显示的大小而改变。在设计软件中,我们可以动态的设置设计稿的物理大小和ppi 。
  • pt:point 点 ,是个物理长度单位
    pt这个概念在不同行业不同系统中的定义是不一样的,可以理解为

    1. 行业或者系统为设计者提供的一个逻辑(设计)分辨率,逻辑分辨路和物理分辨率(实际px)没有直接的对应关系
    2. 形象的比喻就是pt就是我们看到的大小单位,和物理大小存在一种比例关系,但是不同系统会不一样,甚至同一系统都可以不一样,比如iOS系统的UI设计规范就有区别,后面会讲到。
    3. pt在印刷行业表示1/72英寸大小,具体的用途我还是没搞明白
    4. pt在iOS开发中就是逻辑分辨率<开发>的最小单位。至于1pt表示多大的物理大小和1pt代表着多少个像素都是根据系统的设计规则来的,后面会讲到。
  • pd:dip,Density-independent pixel, 是安卓开发用的长度单位,也是个无长度单位。1dp表示在屏幕像素点密度为160ppi时1px长度。这个设计可以确定在android系统中,1pd在任何设备的大小都应该是一样的,但是代表几个像素却是不固定的。至于为什么在iOS和Android开发的时候会把pd和pt看作是一样的,之后会具体解释
  • dpi:dots per inch,每英寸多少点,一种点密度 。
    1. 计算方式和ppi一样,但是这个点可以有很多理解,不同的点计算出来的dpi所代表的含义都是不一样的
    2. 这个点可以是px、pt、pd、印刷取样点、在鼠标等电子设备是上,点可以理解为最小操作阈值(即设备会把多远的两个点当作一个点来处理)等,不同的理解dpi代表的意思也是不同的。
    3. 用px去计算得到的dpi=ppi;
    4. 用pt去计算得到的是单位英寸内pt的密度,那对于iOS以pt为单位来设计的话,那这个dpi可以理解为单位pt的物理大小关系,dpi越高,单位pt的物理大小应该就越小,结果就是1pt的显示结果大小不一样
    5. 用pd去计算得到的是单位英寸内的pd密度,依据Android的设计规范,这个dpi应该是一样的。
    6. 在印刷行业如果以取样点去计算,得到的ppi就可以理解为设备的解析力
    7. 对于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的大小也对应的有变大一点点,但是这变化是很小的,应该是苹果系统级别的大屏适配吧 。


1560592797505.jpg

2.iphone plus

苹果的设计规范一直是在保持dpi基本不变的情况下,设备分辨率和逻辑分辨率的是整数倍的缩放关系,但是在plus系列中,虽然开发的时候我们使用@3倍关系做设计开发,但是实际上他们之间是没有@3倍关系的,实际的缩放应该是@2.6倍,那为什么苹果不按照规范来呢,这个我也不知道,但是可以分析一下如果苹果严格按照@3倍来应该是怎样的。

  1. 以逻辑分辨率的基础上x3,即(414x736)x3 = 1242x2208 作为plus系列手机的物理分辨率,这么设计是ok的,符合UI设计规范,但是为什么最后使用分辨率更低的1080x1920的,得去问库克
  2. 以物理分辨率/3,即(1080x1920)/3 = 360x640作为逻辑分辨率,这时候的 dpi = 133 , 这时候的dpi远远小于164,违背了设计规范,plus只能显示很小的内容,因为文字图片啥的都被放大了 ,除非开发者对plus单独布局,这是不可能发正在iOS开发中的,哈哈!
  3. 还可以使用2倍缩放而不是用3倍缩放,即(414x736)x2 = 828x1472 作为plus系列手机的物理分辨率,这时候设备的 ppi = 307,这ppi连苹果提出的最低326都达不到,肯定不会使用了
  4. 最后在屏幕大小5.5寸和逻辑分辩率都确定的情况下,为什么选用1080x1920 , 那也不得而知,大概率是成本吧!

3.iOS的猜想

  1. iOS因为是闭源,所以它可以通过自己设定逻辑分辨率来控制设备的dpi让开发者在对UI布局的时候不用考虑不同大小设备的影响
  2. iOS通过缩放因子的控制来最简单的解决开发者对于不同大小设备的图片设计问题
  3. 通过控制不同设备的逻辑分辨率和dpi,苹果还能在系统级别上做一些显示调整,比如在plus和iphone x系列上的dpi会比iphone其它系列的小一点点,这样就能让大屏显示相同pt内容的时候内容会大一点点
  4. 苹果如果要保持现有的设计规范,那它的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图

2.对

iOS和Android的比较

图片和印刷

* 图片的px、ppi、dpi
* 设备的ppi、dpi
* 图片的栅格处理
* 实际应用
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容