A. 像素px、解析度、ppi、dpi、dp(dip)
屏幕尺寸(Screen Size): 屏幕對角線的長度。iPhone5屏幕尺寸為4英寸、iPhone6屏幕尺寸為4.7英寸,指的是顯示屏對角線的長度。 1 inch = 2.54cm = 25.4mm
解析度:屏幕上的像素總數。常用的表現形式如:1280x720, 1920x1080等。
px,pixel,像素,電子屏幕上組成一幅圖畫或image的基本單元。
pt, point,點,印刷行業常用單位,等於1/72英寸。
ppi,pixel per inch,每英寸像素數,值越高,屏幕越細膩。
dpi, dot per inch,每英寸多少點,該值越高,則圖片越細膩。
dp,dip, Density-independent pixel,安卓開發用的長度單位。以160ppi為標准,和iPhone的scale差不多的意思。安卓用dp適配,系統會自動將dp轉換為px。當屏幕像素點密度為160ppi時,1dp=1px。
當圖片的解析度是72ppi(dpi)時,1pt = 1px;
當圖片的解析度是72*2ppi(dpi)時,1pt = 2px;
dpi最初用於衡量列印物上每英寸的點數密度,DPI值越大圖片越精細。當DPI的概念用在計算機屏幕上時,就應稱之為ppi。同理: PPI就是計算機屏幕上每英寸可以顯示的像素點的數量。在電子屏幕顯示中ppi和dpi是一樣的。
假設屏幕解析度為W H(px),物理尺寸為a b(inch),
則我們常說的屏幕尺寸c(如5.0英寸)其實是對角線的長度,因此
則像素密度(PPI),指的是屏幕單位長度的像素數
由此我們推理出:
因此我們可以得出PPI( DPI)計算公式:
dp,獨立像素,虛擬單位,又稱設備無關像素。1dp的長度相當於一個160dpi的屏幕上一個物理像素的長度。而160dpi的屏幕則是被android定義為基準的屏幕(mdpi)。在app運行的時候,android會將dp轉為實際像素進行布局。轉換的公式為:
px = dp * (dpi / 160)。
dp為安卓開發時的基本長度單位,根據不同的屏幕解析度,與px有不同的對應關系。根據其像素密度,我們將安卓端屏幕分為以下幾種規格:
1dp即為當屏幕密度值為160ppi時,1pt=1px。則,在上表中,當密度為mdpi時,1dp = 1px。 以mdpi為標准,上表中屏幕的密度值比分別為:
即,在xhdpi的密度下,1dp=2px;在hdpi情況下,1dp=1.5px。其他類推。
B. 這一次要幫你徹底搞明白px、ppi、dot、dpi、sp、dp、pt
這一次要幫你徹底搞明白px、ppi、dot、dpi、sp、dp、pt
這是初級設計師經常弄混淆的幾個概念,下面我以「基本概念,易混淆的點,從問題入手,總結」四個方面來聊一聊 Px,ppi;dot,dpi; sp,dp;pt 那些事兒。
一、px,ppi;dot,dpi; sp,dp;pt 的基本概念
1. px:像素
1像素實際上是一個顏色點,所以又稱像素點。大量不同顏色點組成一張圖像,因此圖像的基本單位是像素px(沒有比像素更精細的單位了)。
像素主要用來表示圖像大小和顯示器解析度(如1920*1080px)。像素本身的物理尺寸不固定,所以它的物理尺寸沒有意義,有意義的是它的數量。
為什麼像素的物理尺寸不固定?
像素本身不是物理世界的單位,是一個相對單位,尺寸可大可小。在高密度的屏幕上像素會變小,顯示效果更清晰。因為「像素量px = 像素密度ppi x 屏幕尺寸in」,同樣是1英寸的屏幕,密度越大,像素越多,則單個像素的物理尺寸越小。
都是圖片相關信息,圖片體積和像素有什麼關系?
通常所說的100KB的圖片指的就是圖片的體積,首先一張圖像在存儲時,會描述每個像素點的顏色信息、位置、數量,這些描述數據就是圖像的體積,如果像素越多自然圖像體積越大。假如一張圖片都是一個顏色,圖像在保存時就會壓縮,只存一個像素點的顏色信息,這樣的圖像體積會小很多。所以,像素點越多,顏色越復雜,圖像體積越大。
為什麼我們要買高像素的相機?
日常我們所說的幾百萬像素的相機,這個幾百萬像素指的是拍攝最大像素量照片時,圖像寬高位置上像素量的乘積。如果像素量大,將來印刷或者在顯示器上查看,在1英寸上就有足夠多的像素顯示,像素密度增加,圖像也會更清晰。因此,我們更願意買高像素的相機。
總結: 像素px常用來描述圖像尺寸和顯示器解析度。
2. ppi:像素密度(pixel per inch)
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像素/厘米)
C. px什麼意思
px:
即像素,1px代表屏幕上一個物理的像素點;
要看解析度是多少,如果解析度是72 像素/cm ,500PX相當於7.64厘米。如果解析度是35.5 ,那麼500PX就是14厘米 ;如果解析度是32 ,就相當於15.62厘米。
px單位不被建議使用,因為同樣100px的圖片,在不同手機上顯示的實際大小可能不同dp:
這個是最常用但也最難理解的尺寸單位。它與「像素密度」密切相關,所以首先我們解釋一下什麼是像素密度。假設有一部手機,屏幕的物理尺寸為1.5英寸x2英寸,屏幕解析度為240x320,則我們可以計算出在這部手機的屏幕上,每英寸包含的像素點的數量為240/1.5=160dpi(橫向)或320/2=160dpi(縱向),160dpi就是這部手機的像素密度,像素密度的單位dpi是Dots Per Inch的縮寫,即每英寸像素數量。橫向和縱向的這個值都是相同的,原因是大部分手機屏幕使用正方形的像素點。
不同的手機/平板可能具有不同的像素密度,例如同為4寸手機,有480x320解析度的也有800x480解析度的,前者的像素密度就比較低。Android系統定義了四種像素密度:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi),它們對應的dp到px的系數分別為0.75、1、1.5和2,這個系數乘以dp長度就是像素數。例如界面上有一個長度為「80dp」的圖片,那麼它在240dpi的手機上實際顯示為80x1.5=120px,在320dpi的手機上實際顯示為80x2=160px。如果你拿這兩部手機放在一起對比,會發現這個圖片的物理尺寸「差不多」,這就是使用dp作為單位的效果。
D. px,dp和sp,這些單位有什麼區別
px、dp和sp,這三個單位的區別在於,它們的定義各不相同:
px:指像素,是指基本原色素及其灰度的基本編碼。
2.dp:安卓開發時的長度單位。
3.sp:與縮放無關的抽象像素,是字體單位。