這是初級設計師經常弄混淆的幾個概念，下面我以“基本概念，易混淆的點，從問題入手，總結”四個方面來聊一聊 px，ppi；dot，dpi； sp，dp；pt 那些事兒。

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

1. px：像素

1像素實際上是一個顔色點，所以又稱像素點。大量不同顔色點組成一張圖像，因此圖像的基本單位是像素px（沒有比像素更精細的單位了）。

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

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

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

一個手機的顯示屏在出廠時就确定了PPI的值，PPI越大，顯示越高清。圖片的物理尺寸 = PPI * Px，通常一張圖像的px确定，ppi越大，則它的物理尺寸越小。所以為什麼我們在高PPI的手機上，人眼看到的圖像比低PPI的圖形小。在設計行業，我們會針對高PPI的手機，設計更大像素的圖像也是這個道理。

日常所說的分辨率有兩個概念，一個指顯示器的分辨率，另一個指圖像的分辨率。顯示器分辨率指顯示器所能顯示的像素多少（1920px*1080px），顯示器可顯示的像素越多，畫面就越精細，因為屏幕尺寸一定，分辨率越大，像素密度越大。顯示器分辨率都用（1920px*1080px）這種形式表示，清晰度還需要結合屏幕尺寸計算。圖像分辨率則是單位英寸中所包含的像素點數，比如photoshop 裡新建畫布時設置的圖像分辨率72ppi，其定義更趨近于分辨率本身的定義

注意：

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

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

• 對于設計師來說像素密度很重要，需要很據像素密度來切圖和适配，理解了像素密度的意義，就理解了幾倍圖之間的關系。

3. dot：墨點

印刷品的最小單位，表示一個印刷顔色點，類似px，隻有相對大小，用在印刷行業。

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

1英寸上打印的墨點數量，密度單位，隻用在印刷行業，值越大，印刷越精細。

注意：

• 與安卓的dp完全沒關系。

• 印刷行業相關的單位是dot，dpi。印刷尺寸（英寸）=打印墨點數（dot）/打印機密度（dpi）。

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

5. pt：點（印刷）

大小為1/72英寸=0.35mm，單位是英寸，是物理長度單位，大小固定，絕對單位。源于活字排版時代，photoshop裡的字體單位就隻這個。

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

當photoshop中新建畫布的分辨率為72ppi，由公式，則1pt=1px。當分辨率為144ppi時，1pt=2px。

注意：這裡指印刷行業的pt哦！

6. pt： 點（iOS）

iOS系統開發單位，是獨立像素的意思，長度固定，不随屏幕像素密度ppi變化而變化。

蘋果公司規定：普屏時1px=1px，而普屏的ppi=163像素/英寸，那麼pt=1/163英寸=0.16mm（固定值）。普屏1px=1px，高清屏1pt=2px。

用固定長度pt作為開發單位的好處是，這樣可以保證同一張圖片在不同設備上顯示大小一樣，因為pt值是固定的。高清屏上1pt等于更多的像素px，因為像素在高清屏上變小，所以pt還是固定的。

7. dp：長度（Android）

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

根據不同的屏幕分辨率，與px有不同的倍數關系。規定：1dp等于屏幕像素密度為160ppi時1px的長度，因此dp在整個系統大小是固定的。公式：1dp=（屏幕ppi/ 160）px。

1dp等于屏幕像素密度為160ppi時1px的長度，即，在mdpi時，1dp = 1px。 以mdpi為标準，這些屏幕的密度值比為： ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3。android中清屏1dp=1px，高清屏1dp=1.5px，超清屏1dp=2px。

做設計時以xhdpi為模闆， xhdpi條件下1dp=2px，标注長度的時候，将長度像素除以2即為dp值，這樣方便和開發溝通。

8. sp：大小（Android）

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

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

二、易混淆的點

px和dot

都是點的概念，px應用在電子顯示設備上，是顯示圖像的基本單位。dot應用在印刷行業，是打印圖片的基本單位。

ppi和dpi

ppi和dpi無關系，互不影響 。 ppi影響圖像的顯示尺寸，dpi影響圖像的打印尺寸。打印時可以讓數量上px=dot，則設計時在photoshop裡設置的ppi大小，可以認為是dpi大小。

很多技術人員經常把ppi和dpi畫等号， 其實他們的物理意義不一樣，但是因為混淆的人多了，所以在電子屏幕顯示中提到的ppi和dpi我們可以認為是一樣的。

pt和dp

iOS系統的pt和Android系統的dp概念是相似的。

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

1.設計印刷品時，為什麼說在ps裡設置的ppi沒有實際意義，但還是要設置呢？

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

2.photoshop裡，高ppi和低ppi畫布的顯示差别？

Photoshop裡的顯示大小隻和圖像的像素量和顯示器分辨率有關。顯示器是确定的，所以像素量越大，顯示尺寸越大。

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

因為拖入後，高ppi的文檔分辨變小，photoshop把圖像的像素按照ppi變小的比例變小。這樣裡體現了不同ppi的圖像在photoshop裡的轉換關系。

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

因為拖入後，低ppi的文檔分辨變大，photoshop把圖像的像素按照ppi變大的比例變大，這樣就超過了畫布尺寸，photoshop按照置入圖片的原理顯示，即按最大邊匹配。

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

軟件增加圖片像素，圖片會變模糊，因為增加的不是有效像素，所謂高清圖是指包含有效像素多的圖片。顯示清晰度由顯示器本身決定，圖片的ppi沒有意義。

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

像素是确定的，即不會影響顯示，也不會影響印刷。

四、總結

1.手機設計稿

因為手機屏幕的ppi和英寸确定，那麼像素可計算出來，即px确定，隻需設置ps的畫布像素px相同就可以了，ps裡設置的ppi對手機設計稿而言并沒有什麼意義，可以随便設置；手機隻關注圖片的像素夠不夠，因為是按照手機1：1的像素設計。所以，适配高ppi手機的設計稿，修改ps的ppi是沒有用的，而應該按照高ppi的像素修改設計稿。

2.打印設計稿

打印尺寸和打印分辨率300dpi确定， 但ps以px為單位，由公式dot=英寸*dpi，px=英寸*ppi，英寸相同， dpi=ppi=300，那麼數量上可以dot=px。ps的英寸和ppi确定， px也确定，但不能直接得出px數量，但是ps可直接設置厘米cm， 那就隻需要設置寬高的厘米和分辨率300ppi=118.11像素/厘米，就可以間接設置所需的像素量，這就能保證300dpi清晰度和打印尺寸。（設置300dpi時ps會自動轉化為118.11像素/厘米）

請私信我回複“666”，為U妹打Call~，還有更多驚喜哦~

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

UI妹兒—越努力，越幸運