显示器如何成像？
不管是电脑显示器，还是手机屏幕，其屏幕水平和垂直方向上均匀分布着发光的小点，我们在屏幕上看到的内容就是由这些发光点发出不同的颜色所构成的图像。比如下面这张放大的图像，最小的正方形格子就是最小的像素点，正是因为每个像素点所带的颜色才构成了这副图像。
像素点是肉眼可见的吗？
肉眼不可见，若是肉眼可见的话，我们看到的图像都是像素风格的了，单位长度内像素点也多，越多细节能够被刻画，看到的内容也越清晰。
什么是px？
显示屏上可以理解成屏幕中发光的小点，图像本身的像素可以理解为在显示屏上所占的发光点，图像的1像素＝设备的1像素 。
px（像素）和分辨率的关系
一台分辨率1920px*1080px的显示屏，表示水平方向分布着1920个像素点（发光点），垂直方向分布着1080个像素点（发光点）。一张分辨率500px＊500px的图像，其在显示屏成像区域中，水平方向占500个像素点（发光点），垂直方向占500个像素点（发光点）。
什么是dpi？
dpi（dot per inch），指每英寸多少点，常用于打印设备。1dpi表示打印设备上每英寸分布着1个打印点。
什么是ppi？
ppi（pixel per inch），指每英寸的像素数，常用于显示器设备。它的计算公式如下：
常见的苹果手机的尺寸、分辨率和ppi是多少？
px（像素）是否有固定的尺寸？
比如iPhone6和iPhone6plus，它们的ppi分别是326和401，iPhone6每英寸显示326个像素，即iPhone6每个像素的长度＝1/326英寸；同理，iPhone6 plus每像素的长度＝1/401英寸。显然，iPhone6中1px的尺寸和iPhone6 plus中的1px的尺寸是不同的。
1、像素没有固定的尺寸，不同ppi显示设备的1单位像素的大小是不同的2、不同设备单位像素的大小（现实世界中的长宽尺寸）和设备本身的ppi有关
因此我们会说，iphone6中16px＊16px的图标和iphone6 plus中16px＊16px的图标，虽然图像像素大小是一样的，但你所看到的视觉大小是不同的（你眼里看到的大小并不一样）。
什么是pt、dp？是否有固定尺寸？
（此处为个人猜测，为什么规定1pt是(1/163）英寸而不是五十分之一或一百分之一，因为当时使用的机型普遍是163ppi，当1pt＝(1/163）英寸时，ppi为163的屏幕刚好是1pt=1px）
而dp，和 iOS的pt一样，安卓为设计而创造的独立单位，规定1dp＝(1/160)英寸。1英寸=2.54厘米，所以pt、dp和px不一样，它们是有固定尺寸的。
pt、dp和px的关系？
假设设备的ppi为n，根据定义，该设备每英寸显示n个像素，因为1pt＝(1/163)英寸，所以(1/163)英寸即1pt显示(n/163)个像素，推出1pt＝(设备的ppi/163)px。
根据公式，ppi为163的iOS设备，1pt＝1px；在ppi＝326的iOS设备上，1pt＝2px……
同理，1dp＝(设备的ppi/160)px，因此，在ppi为160的安卓设备上，1dp＝1px；在ppi＝320的安卓设备上，1dp＝2px……
设计师为什么要切不同图像分辨率的图？
单位像素在不同ppi设备中的物理尺寸是不同的，所以一张图像，若像素分辨率保持不变的话，其在不同ppi设备看到的大小肯定是不同的。
假如相同图片要在不同ppi设备显示的一样大（物理尺寸），那么就要重新切图，输出不同图像分辨率的图片。
px2/px1=ppi2/ppi1?
在ppi=n1的IOS设备中，图像分辨率是(a1*b1)px，因为1pt=(n1/163)px，所以物理尺寸为「(163a1/n1)*(163b1/n1)」pt；而在ppi=n2的IOS设备中，图像分辨率是(a2*b2)px，同理，物理尺寸为「(163a2/n2)*(163b2/n2)」pt；若要保持图片物理尺寸不变（在两个设备中看到的大小是一样的），那么(163a1/n1)要等于(163a2/n2)，经换算，a1/n1=a2/n2，等效于a1/a2=n1/n2，a指像素，n指ppi，综上，px2/px1=ppi2/ppi1。
结合公式，上面音效图标在IPhone3GS中是80*80px，若要在iPhone4和iPhone6Plus中保持物理尺寸不变，其在iPhone4中的图像分辨率应是160*160px，在iPhone6Plus中的图像分辨率应是196.81*196.81px（四舍五入的结果）。
为什么将图片进行放大后会越来越模糊？
根据图像成像原理，在图像100%预览下，图像1像素会占据屏幕的1像素，图像每单位像素都有RGB值，RGB值告诉屏幕单位像素显示什么颜色，100*100px的图像就会有1w个像素点，每个像素点都有相应的颜色，从而构成一幅图像。
若将100*100px的图像长宽各放大2倍，那么该图像要在屏幕上占据200*200像素，从原来的1w个像素点到放大后4w个像素点，凭空多出了3w个像素点，这3w个像素点如何取色？取什么色？会通过算法自动计算给到RGB值，虽然放大后的图像看起来依然是“完整”的，但即使算法足够智能，细节已经损失很多，所以看起来模糊。
----------
作者：辛小仲，一名正在成长的交互设计师。微信公众号：辛小仲。
本文由 @辛小仲 原创发布于UI中国。未经许可，禁止转载。
Powered by Froala Editor
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册