本文从UI设计师的角度，以简单易懂的方式解释px（像素）和pt（磅）的区别。px是屏幕上的像素点，随屏幕变化而变化，而pt是印刷行业的固定单位。在iOS系统中，pt用于保证设计尺寸在不同设备上的适配，与印刷行业的pt概念相同。分辨率对设计的影响在于，设计师通常以最小分辨率设计，然后通过@2×、@3×等方式适配高密度屏幕。
一直以来关于pt和px之间的区别，虽然看了很多资料，硬说也能依葫芦画瓢说个八九不离十。但因为没有真正理解，仍然是眼会手残，不能很好地融会贯通。
鉴于网上各路大神都说的很专业了，我决定从“非专业”的角度尝试更简单地去理解这两者之间的含义与区别。也就是站在UI设计师的角度，不抬杠，不整虚头巴脑的，新手小白看了就能立马上手！
01
—
首先，我们需要知道的是：
px 即 pixel，像素，是屏幕上显示数据最基本的点，组成屏幕图像。
pt 即 point，磅，是印刷行业常用单位，1/72英寸。
翻译过来就是：
px 是像素点，跟随屏幕变化而变化。
pt 是固定数值，无论在哪都一样。
如上图所示，人眼在阅读书本或者其他纸张时，视线会保持一定的距离，差别不会很大，基本可以看做是恒定的，所以印刷行业为了统一印刷标准，以pt为固定值单位。
也就是说，无论在哪，1pt就是1pt。就像直尺上的1cm无论在全世界任何地方都是1cm长度的固定值；
而显示器的距离往往更远，人肉眼观看到的文字大小受距离的影响，为了使文字看起来大小相同，距离较远的文字需要变得更大。
肉眼在屏幕上看到的蝴蝶
实际屏幕上由像素点组成的蝴蝶
pixel(像素)这个单词实际由 Picture(图像) 和 Element(元素)组成的，也就是组成图像的元素，比如我们常说的1024*768的屏幕分辨率，就是这块屏幕在水平方向上有1024个像素点，垂直方向上有768个像素点的意思。
由于观看距离的不同，显示器屏幕上的图像会受屏幕本身的尺寸，以及分辨率的影响。同样是1px，在手机上看到的和在电视机上的1px，虽然都是一个像素点，但是由于大小的不同，两个名为“1px”像素点的大小也不尽相同。所以在不同像素密度的屏幕里面，像素本身大小是不一样的。
就像是橘生淮南则为橘，生于淮北则为枳。
屏幕是像素的土壤，像素点结出屏幕的果实。
02
—
有趣的是，在实际设计中，我们常说的pt和iOS系统中的pt不！是！同！一！个！
UI设计师主要会遇到iOS系统中的pt和PS中的pt。一般来说：iOS系统中的pt和PS中的pt只是同名同姓，功能相似，但不能彼此等价。
在iOS中的pt和在印刷中的单位pt，它们是同一个概念，都是逻辑单位，用以保证设计产出的物理尺寸能够更好地适配不同情况。用固定数值pt作为开发单位的好处是，这样可以保证同一张图片在不同设备上显示大小一样，因为pt值是固定的。高清屏上1pt等于更多的像素px，因为高清屏的分辨率高，相应的单位像素就会变小，但pt还是固定的。
我们在iOS 中常提到的pt是指iOS系统开发单位。一般来说普屏1px=1px，高清屏1pt=2px，不过现在的屏幕制作技术越来越高，分辨率也越来越高，这个等式不一定完全成立。
但我们可以粗暴理解：
pt是iOS设计开发单位
dp是安卓设计开发单位
px是屏幕像素
03
—
接下来我们聊聊分辨率对设计的影响。
分辨率：显示屏的单个像素数。
如上图所示，第一部iPhone的基本分辨率是320×480，苹果公司将其设为iOS平台1倍密度的基准，所以当iPhone4出来时，Retina屏幕的像素密度多了一倍，也就是640×960，但是实际设计时，还是以320×480为基准。
这是为什么呢？
由于实际设计工作中，会需要考虑到多屏适配的情况，也就是一个设计稿出来之后，要考虑这个设计稿的实用性。不同设备的分辨率和长宽比不尽相同，为了节约工作成本，以尽可能小的分辨率进行设计，成为了目前主流的解决办法。
而UI设计基本都是在矢量工具完成，不必担心实际分辨率的问题。所以，使用1倍基本分辨率，在低密度屏幕上可以使用，在高密度的屏幕上只需要导出@2×、@3×即可。
好啦，今天的小白摸鱼课堂就到这里吧。
下课~
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
