今天我們來了解一些基礎(chǔ)概念（設(shè)計常識）。
顯示器如何成像？
不管是電腦顯示器，還是手機屏幕，其屏幕水平和垂直方向上均勻分布著發(fā)光的小點，我們在屏幕上看到的內(nèi)容就是由這些發(fā)光點發(fā)出不同的顏色所構(gòu)成的圖像。比如下面這張放大的圖像，最小的正方形格子就是最小的像素點，正是因為每個像素點所帶的顏色才構(gòu)成了這副圖像。
而顯示器上有多少發(fā)光的點，則和屏幕分辨率有關(guān)。
像素點是肉眼可見的嗎？
肉眼不可見，若是肉眼可見的話，我們看到的圖像都是像素風(fēng)格的了，單位長度內(nèi)像素點也多，越多細節(jié)能夠被刻畫，看到的內(nèi)容也越清晰。
什么是px？
px（pixel），即像素，畫面中最小的點。顯示屏上可以理解成屏幕中發(fā)光的小點，圖像本身的像素可以理解為在顯示屏上所占的發(fā)光點，圖像的1像素＝設(shè)備的1像素 。
px（像素）和分辨率的關(guān)系
屏幕分辨率：
一臺分辨率(1920x1080)px的顯示屏，表示水平方向分布著1920個像素點（發(fā)光點），垂直方向分布著1080個像素點（發(fā)光點）。
圖像分辨率：
一張分辨率(500x500)px的圖像，其在顯示屏成像區(qū)域中，水平方向占500個像素點（發(fā)光點），垂直方向占500個像素點（發(fā)光點）。
什么是dpi？
dpi（dot per inch），指每英寸多少點，常用于打印設(shè)備。1dpi表示打印設(shè)備上每英寸分布著1個打印點。
什么是ppi？
ppi（pixel per inch），指每英寸的像素數(shù)，常用于顯示器設(shè)備。它的計算公式如下：
ppi告訴我們顯示器每英寸顯示多少像素。
常見的蘋果手機的尺寸、分辨率和ppi是多少？
px（像素）是否有固定的尺寸？
通過上表，我們知道不同設(shè)備的ppi是不一樣的。
比如iPhone6和iPhone6plus，它們的ppi分別是326和401，iPhone6每英寸顯示326個像素，即iPhone6每個像素的長度＝1/326英寸；同理，iPhone6 plus每像素的長度＝1/401英寸。顯然，iPhone6中1px的尺寸和iPhone6 plus中的1px的尺寸是不同的。
所以：
1、像素沒有固定的尺寸，不同ppi顯示設(shè)備的1單位像素的大小是不同的
2、不同設(shè)備單位像素的大?。ìF(xiàn)實世界中的長寬尺寸）和設(shè)備本身的ppi有關(guān)
因此我們會說，iphone6中(16x16)px的圖標和iphone6 plus中(16x16)px的圖標，雖然圖像像素大小是一樣的，但你所看到的視覺大小是不同的（你眼里看到的大小并不一樣）。
什么是pt、dp？是否有固定尺寸？
蘋果自定義的單位，1pt＝(1/163）英寸。（此處為個人猜測，為什么規(guī)定1pt是(1/163）英寸而不是五十分之一或一百分之一，因為當(dāng)時使用的機型普遍是163ppi，當(dāng)1pt＝(1/163）英寸時，ppi為163的屏幕剛好是1pt=1px）。
而dp，和 iOS的pt一樣，安卓為設(shè)計而創(chuàng)造的獨立單位，規(guī)定1dp＝(1/160)英寸。1英寸=2.54厘米，所以pt、dp和px不一樣，它們是有固定尺寸的。
pt、dp和px的關(guān)系？
假設(shè)設(shè)備的ppi為n，根據(jù)定義，該設(shè)備每英寸顯示n個像素，因為1pt＝(1/163)英寸，所以(1/163)英寸即1pt顯示(n/163)個像素，推出1pt＝(設(shè)備的ppi/163)px。
根據(jù)公式，ppi為163的iOS設(shè)備，1pt＝1px；在ppi＝326的iOS設(shè)備上，1pt＝2px……
同理，1dp＝(設(shè)備的ppi/160)px，因此，在ppi為160的安卓設(shè)備上，1dp＝1px；在ppi＝320的安卓設(shè)備上，1dp＝2px……
設(shè)計師為什么要切不同圖像分辨率的圖？
單位像素在不同ppi設(shè)備中的物理尺寸是不同的，所以一張圖像，若像素分辨率保持不變的話，其在不同ppi設(shè)備看到的大小肯定是不同的。
可以通過下圖理解一下：
假如相同圖片要在不同ppi設(shè)備顯示的一樣大（物理尺寸），那么就要重新切圖，輸出不同圖像分辨率的圖片。
px2/px1=ppi2/ppi1?
假設(shè)有一張圖n：
在ppi=n1的IOS設(shè)備中，圖像分辨率是(a1xb1)px，因為1pt=(n1/163)px，所以物理尺寸為「(163a1/n1)x(163b1/n1)」pt；而在ppi=n2的IOS設(shè)備中，圖像分辨率是(a2xb2)px，同理，物理尺寸為「(163a2/n2)x(163b2/n2)」pt；
若要保持圖片物理尺寸不變（在兩個設(shè)備中看到的大小是一樣的），那么(163a1/n1)要等于(163a2/n2)，經(jīng)換算，a1/n1=a2/n2，等效于a1/a2=n1/n2，a指像素，n指ppi，綜上，px2/px1=ppi2/ppi1。
結(jié)合公式，上面音效圖標在IPhone3GS中是(80x80)px，若要在iPhone4和iPhone6Plus中保持物理尺寸不變，其在iPhone4中的圖像分辨率應(yīng)是(160x160)px，在iPhone6Plus中的圖像分辨率應(yīng)是(196.81x196.81)px（四舍五入的結(jié)果）。
為什么將圖片進行放大后會越來越模糊？
根據(jù)圖像成像原理，在圖像100%預(yù)覽下，圖像1像素會占據(jù)屏幕的1像素，圖像每單位像素都有RGB值，RGB值告訴屏幕單位像素顯示什么顏色，(100x100)px的圖像就會有1w個像素點，每個像素點都有相應(yīng)的顏色，從而構(gòu)成一幅圖像。
若將(100x100)px的圖像長寬各放大2倍，那么該圖像要在屏幕上占據(jù)(200x200)像素，從原來的1w個像素點到放大后4w個像素點，憑空多出了3w個像素點，這3w個像素點如何取色？取什么色？會通過算法自動計算給到RGB值，雖然放大后的圖像看起來依然是“完整”的，但即使算法足夠智能，細節(jié)已經(jīng)損失很多，所以看起來模糊。
比如下圖，放大后的圖片越來越模糊。
你理解了嗎？
作者：辛小仲，一名正在成長的交互設(shè)計師。微信公眾號：辛小仲。
本文由 @辛小仲 原創(chuàng)發(fā)布于簡書。未經(jīng)許可，禁止轉(zhuǎn)載。
