一些对UI设计尺寸相关基础知识的理解

前段时间看了一本关于移动应用UI设计的书,但看完以后对设计时用到的那些比较抽象的单位间的关系和概念仍是一脸懵逼,于是又查了许多相关资料和大神的经验贴才逐渐理清楚了一点,在此根据自己的理解对这些知识做了详细的说明,希望能够与初学的童鞋相互学习交流,也欢迎经验丰富的老司机的指正,潜心学习中。

英寸(Inch):手机屏幕的大小一般以英寸作为计量单位,1英寸=2.54厘米。以屏幕斜对角线的长度为准,则可根据屏幕的宽高利用勾股定理计算出屏幕的大小,比如屏幕宽为a厘米,高为b厘米,那么当前屏幕的尺寸=√a²+b²,再除以2.54就可以换算成英寸,如图。

像素(Pixel):简称px,我们在电脑或手机等电子设备中显示屏幕中看到的图像就是由像素作为基本单位组成的,换句话说你在屏幕中看到的图像都是由一个个小点组成的,但这些小点并没有物理意义上固定的大小,而是作为一种表示组成图像的基本单位的抽象概念。为了便于理解我们通常把这种抽象单位看作是小点或是小方块。


                                                              (像素构成了屏幕中的图像)

分辨率:相信大家经常会听到说某某手机的分辨率是750x1334、1080x1920等等。这里说的分辨率实际上是指屏幕宽度像素数乘以屏幕高度像素数,单位为px(像素)。我们也常常听到分辨率越高屏幕显示的图像越清晰的说法,但事实上这种说法是建立在固定的屏幕尺寸上的。这里以下图为例。

(iPhone 3GS与iPhone 4s的屏幕尺寸相同,分辨率分别为320x480、640x960,屏宽与屏高像素数都为2倍关系。在如上图为例的相同物理大小的屏幕中,iPhone 3GS填充了1个像素,iPhone 4s填充了2x2个像素,也就是说原本用一个像素表现的细节现在用2x2个像素表现,因此显示的图像会更加细腻。)

像素密度:即每英寸屏幕由多少像素点组成,此英寸与手机屏幕的尺寸一样,也是对角线的长度,因此像素密度可以理解为是在一个对角线长度为一英寸的矩形内所包含的像素数。对于手机来说,清晰度是由分辨率和尺寸共同决定的,但能准确衡量屏幕清晰度的是像素密度(根据下面的像素密度计算公式能够看出这一点)。因为手机屏幕的尺寸是固定的,那么像素密度越高意味着每英寸物理屏幕中填充的像素点数也越多,画面看起来也就越细腻。据此我们也就明白了为什么说像素没有固定的大小,只是抽象的概念。

iOS的单位一般为PPI(Pixel Per Inch,即每英寸像素点数)。利用物理分辨率和屏幕尺寸可以计算屏幕像素密度。公式:ppi=√屏幕横向像素点数²+屏幕纵向像素点数²/屏幕尺寸。

Android一般以DPI(Dot Per Inch,即每英寸点数)为单位。实际在传统意义上(纸质媒介中)DPI是用来表示打印精度的,例如设置打印分辨率为96DPI,则表示打印出来的东西每英寸会有96个点,每英寸点数越多,图片看起来会越细腻。后来DPI的概念被用在手机屏幕上时,则表示手机屏幕上每英寸显示的像素点数。从这个意义上来说PPI与DPI表示同一概念,只是在设计开发时被分别用在iOS和Android。

常见iOS与Android手机屏幕像素密度:

iOS:相较于Android来说,iOS的屏幕规格较少,因此逻辑分辨率也是固定的。而Android因为屏幕分辨率种类过多,理论上有很多种逻辑分辨率。

Android:Android的屏幕碎片化严重,尺寸实在是多,因此划分了几个像素密度区间,MDPI、HDPI、XHDPI、XXHDPI、XXXHDPI,也就是说在某一像素密度区间下,可能有多种屏幕分辨率和像素密度。并给不同范围分辨率的设备定义了不同的像素倍率,以保证后续开发出的产品在不同分辨率上的显示效果相近。

逻辑分辨率与像素倍率:我们上面谈到的分辨率是指物理分辨率,即硬件支持的分辨率,也就是说屏幕本身固定的分辨率,物理分辨率除以固定的像素倍率可以得到逻辑分辨率。逻辑分辨率是指软件可以达到的分辨率,也就是说你原本设计的产品UI界面的尺寸要跟随逻辑分辨率的大小,大于手机的逻辑分辨率会导致显示不全,小于逻辑分辨率太多也会造成显示效果的比例不好和对屏幕的浪费。至于逻辑像素存在的意义在之后的说明中大家自然能够体会到。

DIP:称为设备独立像素(可译为设备独立像素device independent pixels、密度独立像素density independent pixels,简称dp,注意区别于DPI),一般是用于Android系统开发的一种抽象像素尺寸标注单位(iOS开发以pt为单位),也被称为逻辑像素,也就是程序员在开发中用到的尺寸标注单位。逻辑像素是一个相对值,在不同屏幕密度的手机上,一个逻辑像素会由不同个数的物理像素表示。

dp与px的关系:

公式:px=dp*(dpi/160)。若以dp为尺寸标注单位,Android系统中规定以160DPI(像素密度)为基准,即为在屏幕密度为160DPI时,1dp=1px;屏幕密度为240DPI时,1dp=1.5px;屏幕密度为320DPI时,1dp=2px,以此类推。

也可以用屏幕的倍率计算物理像素px,px=dp*倍率。例如在倍率为@1x的屏幕下,1dp=1px;在倍率为@1.5的屏幕下,1dp=1.5px,以此类推。

至于为什么要以逻辑像素为设计或是开发中的单位是为了更好的适配不同密度的屏幕,保证用户界面元素的物理尺寸(显示比例合理),不至于出现在低密度屏幕上看起来较大,高密度屏幕上看起来较小的问题。

例:若以px为像素单位,如画一条320px的横线,在320x480的手机屏幕上则占满了全屏宽度,在480x800的手机屏幕上只能显示为2/3的屏幕宽度。若以dp表示为单位,在320x480的屏幕上,160dp=160px,一个逻辑像素的宽由一个物理像素的宽表示;在480x800的屏幕上,160dp=240px,一个逻辑像素的宽由1.5个物理像素的宽表示,160dp的横线在上述两种屏幕中都占屏宽的1/2,这就意味着相同尺寸不同像素密度的屏幕显示的图像效果看上去会相对一致,因此也可说真正决定显示效果的是逻辑像素。

pt:point,简称pt,原本是用在印刷中的,1pt=1/72英寸。iOS开发以pt为单位,在开发中表示的是独立像素,是绝对长度,不随屏幕密度的变化而变化。同样表示逻辑像素,与dp是一回事。只不过分别用在Android与iOS的开发中。

pt与px的关系:

若以pt为标注单位,在iOS系统中,规定在iPhone 3gs(163ppi)为基准,1pt=1px;在326ppi的屏幕上,1pt=2px;在401ppi的屏幕下,1pt=3px。也可以看屏幕的倍率计算物理像素px。

  对于上述基础知识的理解是参与设计和适配的必要不充分条件。以上是我在查阅各种资料后的比较详细(啰嗦)的理解说明。当然还有很多需要我们去深入学习的相关知识,就像成甲在《好好学习》这本书里谈到的临界知识,对于接近底层原理的知识的掌握程度会直接影响到我们在具体情况下的实操,因此绝不可以忽视这些最基础的内容。

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

推荐阅读更多精彩内容

  • 曾经的体坛飞人-刘翔成立个人工作室了,小编震惊了。难道他要靠他的颜值在娱乐圈中分得一杯羹?下面跟着小编一起来看看到...
    如花重名阅读 274评论 0 0
  • 小年,一般应该是二十三吧,北方一般都是二十三,但是今天在中华万年历上看到,二十三是北方的小年,而二十四才是南方的小...
    豆豆在成长阅读 284评论 0 0
  • 四年前的5月30日,去医院做例行产检,结果被医生“扣”下。孩子还在肚子里恣意生长,医生说别大下去了,生吧。 让我没...
    暴拿铁阅读 412评论 0 1
  • 侧着身,白煜静静地面对着寥无人际的小巷.淡青的静脉像蛇一样流淌着渐冷的血盘在他的皮肤上,衬着他的白,愈发地白. 天...
    贝龙阅读 3,328评论 23 5
  • 3月22日从深圳罗湖火车站出发、经过了18个小时的颠簸,在次日到达了帝都,从深圳出发的我穿着一条短裙,一路向北...
    洛日余晖阅读 306评论 0 0