這是初級(jí)設(shè)計(jì)師經(jīng)常弄混淆的幾個(gè)概念，下面我以“基本概念，易混淆的點(diǎn)，從問題入手，總結(jié)”四個(gè)方面來聊一聊 Px，ppi；dot，dpi； sp，dp；pt 那些事兒。

一、px，ppi；dot，dpi； sp，dp；pt 的基本概念

1. px：像素

1像素實(shí)際上是一個(gè)顏色點(diǎn)，所以又稱像素點(diǎn)。大量不同顏色點(diǎn)組成一張圖像，因此圖像的基本單位是像素px（沒有比像素更精細(xì)的單位了）。

像素主要用來表示圖像大小和顯示器分辨率（如1920*1080px）。像素本身的物理尺寸不固定，所以它的物理尺寸沒有意義，有意義的是它的數(shù)量。

為什么像素的物理尺寸不固定？

像素本身不是物理世界的單位，是一個(gè)相對(duì)單位，尺寸可大可小。在高密度的屏幕上像素會(huì)變小，顯示效果更清晰。因?yàn)椤跋袼亓縫x = 像素密度ppi x 屏幕尺寸in”，同樣是1英寸的屏幕，密度越大，像素越多，則單個(gè)像素的物理尺寸越小。

都是圖片相關(guān)信息，圖片體積和像素有什么關(guān)系？

通常所說的100KB的圖片指的就是圖片的體積，首先一張圖像在存儲(chǔ)時(shí)，會(huì)描述每個(gè)像素點(diǎn)的顏色信息、位置、數(shù)量，這些描述數(shù)據(jù)就是圖像的體積，如果像素越多自然圖像體積越大。假如一張圖片都是一個(gè)顏色，圖像在保存時(shí)就會(huì)壓縮，只存一個(gè)像素點(diǎn)的顏色信息，這樣的圖像體積會(huì)小很多。所以，像素點(diǎn)越多，顏色越復(fù)雜，圖像體積越大。

為什么我們要買高像素的相機(jī)？

日常我們所說的幾百萬像素的相機(jī)，這個(gè)幾百萬像素指的是拍攝最大像素量照片時(shí)，圖像寬高位置上像素量的乘積。如果像素量大，將來印刷或者在顯示器上查看，在1英寸上就有足夠多的像素顯示，像素密度增加，圖像也會(huì)更清晰。因此，我們更愿意買高像素的相機(jī)。

總結(jié)：像素px常用來描述圖像尺寸和顯示器分辨率。

2. ppi：像素密度（pixel per inch）

1英寸屏幕上顯示的像素量，密度單位。決定圖片的物理顯示尺寸，只有涉及到顯示才有意義。值越大，顯示越細(xì)膩。

計(jì)算公式：ppi=屏幕對(duì)角線上的像素量px/對(duì)角線長度inch = √（屏幕橫向像素^2 + 屏幕縱向像素^2）/對(duì)角線長度。

為什么說ppi決定圖片的物理尺寸？

一個(gè)手機(jī)的顯示屏在出廠時(shí)就確定了PPI的值，PPI越大，顯示越高清。圖片的物理尺寸 = PPI * Px，通常一張圖像的px確定，ppi越大，則它的物理尺寸越小。所以為什么我們?cè)诟逷PI的手機(jī)上，人眼看到的圖像比低PPI的圖形小。在設(shè)計(jì)行業(yè)，我們會(huì)針對(duì)高PPI的手機(jī)，設(shè)計(jì)更大像素的圖像也是這個(gè)道理。

日常所說的分辨率有兩個(gè)概念，一個(gè)指顯示器的分辨率，另一個(gè)指圖像的分辨率。顯示器分辨率指顯示器所能顯示的像素多少（1920px*1080px），顯示器可顯示的像素越多，畫面就越精細(xì)，因?yàn)槠聊怀叽缫欢?，分辨率越大，像素密度越大。顯示器分辨率都用（1920px*1080px）這種形式表示，清晰度還需要結(jié)合屏幕尺寸計(jì)算。圖像分辨率則是單位英寸中所包含的像素點(diǎn)數(shù)，比如photoshop 里新建畫布時(shí)設(shè)置的圖像分辨率72ppi，其定義更趨近于分辨率本身的定義

注意：

• 同一顯示屏上查看圖片，像素量越大，圖片尺寸越大。

• 顯示分辨率一定的情況下，顯示屏越小圖像越清晰（比如MacBook），反之，顯示屏大小固定時(shí)，顯示分辨率越高圖像越清晰。

• 對(duì)于設(shè)計(jì)師來說像素密度很重要，需要很據(jù)像素密度來切圖和適配，理解了像素密度的意義，就理解了幾倍圖之間的關(guān)系。

3. dot：墨點(diǎn)

印刷品的最小單位，表示一個(gè)印刷顏色點(diǎn)，類似px，只有相對(duì)大小，用在印刷行業(yè)。

4. dpi：打印分辨率 (dot per inch)

1英寸上打印的墨點(diǎn)數(shù)量，密度單位，只用在印刷行業(yè)，值越大，印刷越精細(xì)。

注意：

• 與安卓的dp完全沒關(guān)系。

• 印刷行業(yè)相關(guān)的單位是dot，dpi。印刷尺寸（英寸）=打印墨點(diǎn)數(shù)（dot）/打印機(jī)密度（dpi）。

• 照片的清晰度，是由打印機(jī)分辨率決定的。所以一張照片包含的像素越多（需要高像素照相機(jī)拍攝），高dpi打印機(jī)就可以打印出清晰的圖片。如果照片像素量px一定， 打印機(jī)的dpi越高， 則打印尺寸越小。（這里可設(shè)置為dot=px）

5. pt：點(diǎn)（印刷）

大小為1/72英寸=0.35mm，單位是英寸，是物理長度單位，大小固定，絕對(duì)單位。源于活字排版時(shí)代，photoshop里的字體單位就只這個(gè)。

公式：1pt= (PPI / 72) px。

當(dāng)photoshop中新建畫布的分辨率為72ppi，由公式，則1pt=1px。當(dāng)分辨率為144ppi時(shí)，1pt=2px。

注意：這里指印刷行業(yè)的pt哦！

6. pt： 點(diǎn)（iOS）

iOS系統(tǒng)開發(fā)單位，是獨(dú)立像素的意思，長度固定，不隨屏幕像素密度ppi變化而變化。

蘋果公司規(guī)定：普屏?xí)r1px=1px，而普屏的ppi=163像素/英寸，那么pt=1/163英寸=0.16mm（固定值）。普屏1px=1px，高清屏1pt=2px。

用固定長度pt作為開發(fā)單位的好處是，這樣可以保證同一張圖片在不同設(shè)備上顯示大小一樣，因?yàn)閜t值是固定的。高清屏上1pt等于更多的像素px，因?yàn)橄袼卦诟咔迤辽献冃。詐t還是固定的。

7. dp：長度（Android）

(Density-independent pixel) 是安卓開發(fā)用的長度單位。

根據(jù)不同的屏幕分辨率，與px有不同的倍數(shù)關(guān)系。規(guī)定：1dp等于屏幕像素密度為160ppi時(shí)1px的長度，因此dp在整個(gè)系統(tǒng)大小是固定的。公式：1dp=（屏幕ppi/ 160）px。

1dp等于屏幕像素密度為160ppi時(shí)1px的長度，即，在mdpi時(shí)，1dp = 1px。 以mdpi為標(biāo)準(zhǔn)，這些屏幕的密度值比為： ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3。android中清屏1dp=1px，高清屏1dp=1.5px，超清屏1dp=2px。

做設(shè)計(jì)時(shí)以xhdpi為模板， xhdpi條件下1dp=2px，標(biāo)注長度的時(shí)候，將長度像素除以2即為dp值，這樣方便和開發(fā)溝通。

8. sp：大?。ˋndroid）

(scale-independent pixel) 安卓開發(fā)用的字體大小單位。

注意：dp和sp都是安卓開發(fā)的單位，dp是長度單位，sp是字體單位。一般情況下可認(rèn)為sp=dp。

二、易混淆的點(diǎn)

px和dot

都是點(diǎn)的概念，px應(yīng)用在電子顯示設(shè)備上，是顯示圖像的基本單位。dot應(yīng)用在印刷行業(yè)，是打印圖片的基本單位。

ppi和dpi

ppi和dpi無關(guān)系，互不影響 。 ppi影響圖像的顯示尺寸，dpi影響圖像的打印尺寸。打印時(shí)可以讓數(shù)量上px=dot，則設(shè)計(jì)時(shí)在photoshop里設(shè)置的ppi大小，可以認(rèn)為是dpi大小。

很多技術(shù)人員經(jīng)常把ppi和dpi畫等號(hào)， 其實(shí)他們的物理意義不一樣，但是因?yàn)榛煜娜硕嗔?，所以在電子屏幕顯示中提到的ppi和dpi我們可以認(rèn)為是一樣的。

pt和dp

iOS系統(tǒng)的pt和Android系統(tǒng)的dp概念是相似的。

三、從問題入手深入理解概念

1.設(shè)計(jì)印刷品時(shí)，為什么說在ps里設(shè)置的ppi沒有實(shí)際意義，但還是要設(shè)置呢？

首先我們要明白，打印的分辨率dpi是由實(shí)際的打印機(jī)決定的，所以在ps里設(shè)置分辨率根本沒有意義。但是我們可以預(yù)期打印效果，比如多大的分辨率和尺寸，有了這兩個(gè)值就能確定像素量px，即，只要像素量滿足要求，就能打印出預(yù)期的效果。所以ps里設(shè)置分辨率ppi是為了讓ps計(jì)算出像素量大小。

2.photoshop里，高ppi和低ppi畫布的顯示差別？

Photoshop里的顯示大小只和圖像的像素量和顯示器分辨率有關(guān)。顯示器是確定的，所以像素量越大，顯示尺寸越大。

3.photoshop里， 相同像素的圖像，高ppi圖像拖入到低ppi圖像里，高ppi的圖像變小， 為什么？

因?yàn)橥先牒螅遬pi的文檔分辨變小，photoshop把圖像的像素按照ppi變小的比例變小。這樣里體現(xiàn)了不同ppi的圖像在photoshop里的轉(zhuǎn)換關(guān)系。

4.photoshop里，相同像素的圖像，低ppi圖像拖入高ppi圖像里，低ppi的圖像無變化，為什么？

因?yàn)橥先牒?，低ppi的文檔分辨變大，photoshop把圖像的像素按照ppi變大的比例變大，這樣就超過了畫布尺寸，photoshop按照置入圖片的原理顯示，即按最大邊匹配。

5.使用軟件的方式，增加圖像的像素px，或者提高圖像的像素密度ppi，對(duì)圖像有什么影響？

軟件增加圖片像素，圖片會(huì)變模糊，因?yàn)樵黾拥牟皇怯行袼?，所謂高清圖是指包含有效像素多的圖片。顯示清晰度由顯示器本身決定，圖片的ppi沒有意義。

6.100*100px的圖片，ps改變它的ppi，會(huì)怎樣？

像素是確定的，即不會(huì)影響顯示，也不會(huì)影響印刷。

四、總結(jié)

1.手機(jī)設(shè)計(jì)稿

因?yàn)槭謾C(jī)屏幕的ppi和英寸確定，那么像素可計(jì)算出來，即px確定，只需設(shè)置ps的畫布像素px相同就可以了，ps里設(shè)置的ppi對(duì)手機(jī)設(shè)計(jì)稿而言并沒有什么意義，可以隨便設(shè)置；手機(jī)只關(guān)注圖片的像素夠不夠，因?yàn)槭前凑帐謾C(jī)1：1的像素設(shè)計(jì)。所以，適配高ppi手機(jī)的設(shè)計(jì)稿，修改ps的ppi是沒有用的，而應(yīng)該按照高ppi的像素修改設(shè)計(jì)稿。

2.打印設(shè)計(jì)稿

打印尺寸和打印分辨率300dpi確定， 但ps以px為單位，由公式dot=英寸*dpi，px=英寸*ppi，英寸相同， dpi=ppi=300，那么數(shù)量上可以dot=px。ps的英寸和ppi確定， px也確定，但不能直接得出px數(shù)量，但是ps可直接設(shè)置厘米cm， 那就只需要設(shè)置寬高的厘米和分辨率300ppi=118.11像素/厘米，就可以間接設(shè)置所需的像素量，這就能保證300dpi清晰度和打印尺寸。（設(shè)置300dpi時(shí)ps會(huì)自動(dòng)轉(zhuǎn)化為118.11像素/厘米）

請(qǐng)私信我回復(fù)“666”，為U妹打Call~，還有更多驚喜哦~

.............................................................

UI妹兒—越努力，越幸運(yùn)