今天我們來(lái)了解一些基礎(chǔ)概念（設(shè)計(jì)常識(shí)）蛮位。
顯示器如何成像较沪？
不管是電腦顯示器，還是手機(jī)屏幕失仁，其屏幕水平和垂直方向上均勻分布著發(fā)光的小點(diǎn)尸曼，我們?cè)谄聊簧峡吹降膬?nèi)容就是由這些發(fā)光點(diǎn)發(fā)出不同的顏色所構(gòu)成的圖像。比如下面這張放大的圖像萄焦，最小的正方形格子就是最小的像素點(diǎn)控轿，正是因?yàn)槊總€(gè)像素點(diǎn)所帶的顏色才構(gòu)成了這副圖像。
而顯示器上有多少發(fā)光的點(diǎn)拂封，則和屏幕分辨率有關(guān)茬射。
像素點(diǎn)是肉眼可見(jiàn)的嗎？
肉眼不可見(jiàn)冒签，若是肉眼可見(jiàn)的話在抛，我們看到的圖像都是像素風(fēng)格的了，單位長(zhǎng)度內(nèi)像素點(diǎn)也多萧恕，越多細(xì)節(jié)能夠被刻畫(huà)刚梭，看到的內(nèi)容也越清晰。
什么是px票唆？
px（pixel）望浩，即像素，畫(huà)面中最小的點(diǎn)惰说。顯示屏上可以理解成屏幕中發(fā)光的小點(diǎn)磨德，圖像本身的像素可以理解為在顯示屏上所占的發(fā)光點(diǎn)，圖像的1像素＝設(shè)備的1像素 吆视。
px（像素）和分辨率的關(guān)系
屏幕分辨率：
一臺(tái)分辨率(1920x1080)px的顯示屏典挑，表示水平方向分布著1920個(gè)像素點(diǎn)（發(fā)光點(diǎn)），垂直方向分布著1080個(gè)像素點(diǎn)（發(fā)光點(diǎn)）啦吧。
圖像分辨率：
一張分辨率(500x500)px的圖像您觉，其在顯示屏成像區(qū)域中，水平方向占500個(gè)像素點(diǎn)（發(fā)光點(diǎn)）授滓，垂直方向占500個(gè)像素點(diǎn)（發(fā)光點(diǎn)）琳水。
什么是dpi？
dpi（dot per inch）般堆，指每英寸多少點(diǎn)在孝，常用于打印設(shè)備。1dpi表示打印設(shè)備上每英寸分布著1個(gè)打印點(diǎn)淮摔。
什么是ppi私沮？
ppi（pixel per inch），指每英寸的像素?cái)?shù)和橙，常用于顯示器設(shè)備仔燕。它的計(jì)算公式如下：
ppi告訴我們顯示器每英寸顯示多少像素造垛。
常見(jiàn)的蘋(píng)果手機(jī)的尺寸、分辨率和ppi是多少晰搀？
px（像素）是否有固定的尺寸五辽？
通過(guò)上表，我們知道不同設(shè)備的ppi是不一樣的外恕。
比如iPhone6和iPhone6plus奔脐，它們的ppi分別是326和401，iPhone6每英寸顯示326個(gè)像素吁讨，即iPhone6每個(gè)像素的長(zhǎng)度＝1/326英寸髓迎；同理，iPhone6 plus每像素的長(zhǎng)度＝1/401英寸建丧。顯然排龄，iPhone6中1px的尺寸和iPhone6 plus中的1px的尺寸是不同的。
所以：
1翎朱、像素沒(méi)有固定的尺寸橄维，不同ppi顯示設(shè)備的1單位像素的大小是不同的
2、不同設(shè)備單位像素的大兴┣（現(xiàn)實(shí)世界中的長(zhǎng)寬尺寸）和設(shè)備本身的ppi有關(guān)
因此我們會(huì)說(shuō)争舞，iphone6中(16x16)px的圖標(biāo)和iphone6 plus中(16x16)px的圖標(biāo)，雖然圖像像素大小是一樣的澈灼，但你所看到的視覺(jué)大小是不同的（你眼里看到的大小并不一樣）竞川。
什么是pt、dp叁熔？是否有固定尺寸委乌？
蘋(píng)果自定義的單位，1pt＝(1/163）英寸荣回。（此處為個(gè)人猜測(cè)遭贸，為什么規(guī)定1pt是(1/163）英寸而不是五十分之一或一百分之一，因?yàn)楫?dāng)時(shí)使用的機(jī)型普遍是163ppi心软，當(dāng)1pt＝(1/163）英寸時(shí)壕吹，ppi為163的屏幕剛好是1pt=1px）。
而dp删铃，和 iOS的pt一樣耳贬，安卓為設(shè)計(jì)而創(chuàng)造的獨(dú)立單位，規(guī)定1dp＝(1/160)英寸泳姐。1英寸=2.54厘米效拭，所以pt、dp和px不一樣胖秒，它們是有固定尺寸的缎患。
pt、dp和px的關(guān)系阎肝？
假設(shè)設(shè)備的ppi為n挤渔，根據(jù)定義，該設(shè)備每英寸顯示n個(gè)像素风题，因?yàn)?pt＝(1/163)英寸判导，所以(1/163)英寸即1pt顯示(n/163)個(gè)像素，推出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è)計(jì)師為什么要切不同圖像分辨率的圖？
單位像素在不同ppi設(shè)備中的物理尺寸是不同的框舔，所以一張圖像蹦玫，若像素分辨率保持不變的話，其在不同ppi設(shè)備看到的大小肯定是不同的刘绣。
可以通過(guò)下圖理解一下：
假如相同圖片要在不同ppi設(shè)備顯示的一樣大（物理尺寸）钳垮，那么就要重新切圖，輸出不同圖像分辨率的圖片额港。
px2/px1=ppi2/ppi1?
假設(shè)有一張圖n：
在ppi=n1的IOS設(shè)備中饺窿，圖像分辨率是(a1xb1)px，因?yàn)?pt=(n1/163)px移斩，所以物理尺寸為「(163a1/n1)x(163b1/n1)」pt肚医；而在ppi=n2的IOS設(shè)備中，圖像分辨率是(a2xb2)px向瓷，同理肠套，物理尺寸為「(163a2/n2)x(163b2/n2)」pt；
若要保持圖片物理尺寸不變（在兩個(gè)設(shè)備中看到的大小是一樣的）猖任，那么(163a1/n1)要等于(163a2/n2)你稚，經(jīng)換算，a1/n1=a2/n2，等效于a1/a2=n1/n2刁赖，a指像素搁痛，n指ppi，綜上宇弛，px2/px1=ppi2/ppi1鸡典。
結(jié)合公式，上面音效圖標(biāo)在IPhone3GS中是(80x80)px枪芒，若要在iPhone4和iPhone6Plus中保持物理尺寸不變彻况，其在iPhone4中的圖像分辨率應(yīng)是(160x160)px，在iPhone6Plus中的圖像分辨率應(yīng)是(196.81x196.81)px（四舍五入的結(jié)果）舅踪。
為什么將圖片進(jìn)行放大后會(huì)越來(lái)越模糊纽甘？
根據(jù)圖像成像原理，在圖像100%預(yù)覽下抽碌，圖像1像素會(huì)占據(jù)屏幕的1像素悍赢，圖像每單位像素都有RGB值，RGB值告訴屏幕單位像素顯示什么顏色咬展，(100x100)px的圖像就會(huì)有1w個(gè)像素點(diǎn)泽裳，每個(gè)像素點(diǎn)都有相應(yīng)的顏色，從而構(gòu)成一幅圖像破婆。
若將(100x100)px的圖像長(zhǎng)寬各放大2倍涮总，那么該圖像要在屏幕上占據(jù)(200x200)像素，從原來(lái)的1w個(gè)像素點(diǎn)到放大后4w個(gè)像素點(diǎn)祷舀，憑空多出了3w個(gè)像素點(diǎn)瀑梗，這3w個(gè)像素點(diǎn)如何取色？取什么色裳扯？會(huì)通過(guò)算法自動(dòng)計(jì)算給到RGB值抛丽，雖然放大后的圖像看起來(lái)依然是“完整”的，但即使算法足夠智能饰豺，細(xì)節(jié)已經(jīng)損失很多亿鲜，所以看起來(lái)模糊。
比如下圖冤吨，放大后的圖片越來(lái)越模糊蒿柳。
你理解了嗎？
作者：辛小仲漩蟆，一名正在成長(zhǎng)的交互設(shè)計(jì)師垒探。微信公眾號(hào)：辛小仲。
本文由 @辛小仲 原創(chuàng)發(fā)布于簡(jiǎn)書(shū)怠李。未經(jīng)許可圾叼，禁止轉(zhuǎn)載蛤克。
