【繪圖】如何理解 px,dp,dpi, pt

 

圍繞着各種屏幕做設計和開發的我們或許時不時地會碰到下面幾個單位:in, pt, px, dpi,dip/dp, sp

下面先簡單回顧下前四個單位:

“in”

inches的縮寫,英寸。就是屏幕的物理長度單位。一英寸等於2.54cm。比如Android手機常見的尺寸有5寸、5.5寸、6寸等,這裏的長度都是指手機對角線的長度。

“pt”

“points” 的縮寫,點。一個點等於1/72英寸,所以“點”也是個長度單位而已。

“px”

“pixel” 的縮寫,像素。是畫面顯示的基本單位,真實的像素並不是點或者方塊(雖然有時這樣顯示),也沒有實際固定長度,只是一個抽象的取樣。設計中的像素和實際顯示屏上的像素相對應。看具體電視機類型或者機器類型

屏幕的分辨率一般就描述爲“寬向像素數X縱向像素數”。比如 Android手機常見的分辨率有:320 X 480, 480 X 800, 1080 X 1920等。

“dpi”

"dots per inch" 的縮寫,“每英寸的像素數”,即像素密度。下圖展示了600 dpi和1200 dpi的對比,明顯後者的像素更加密集。

安卓手機種類多樣,有各種屏幕像素密度。比如120dpi是低密度(ldpi)類型,160dpi 是中密度(mdpi),240dpi是高密度(hdpi),320dpi是超高密度(xhdpi),480dpi是超超高密度(xxhdpi)。

 

爲什麼要引入 dp 這個單位

像素(px)是設計師們熟知的單位,比如畫圖自定義尺寸的時候就來個寬xx像素乘以高xx像素,好像一直沒什麼問題。

不過,如果我們仔細觀察一下就會發現,在做UI設計時,設計工具給出的默認手機尺寸並不是按像素數來計算的。

以墨刀爲例,提供的三星的尺寸是360 x 640。

但這當然不是三星屏幕的像素數。

(否則三星要哭暈在廁所)

查了下三星Galaxy S5/S6/S7屏幕的實際像素數是這樣:

那360*640是什麼?

細心的同學可能發現了…

即使S5和S6/7的像素分辨率不一樣,但分辨率左邊一欄都寫着360 x 640 dp。

所以,什麼是 dp,爲什麼要有 dp?

答:是爲了設計圖能適配不同像素密度的屏幕。

舉個栗子吧,如果設計師用像素爲單位畫圖,畫了一個4px * 4px的 icon,這樣的 icon 放在160dpi和320dpi的兩種屏幕上展示,會變成大概這樣:

比例完全失調!

因此,乾脆就不以像素爲單位直接畫圖,而是引入一個新的單位 dp。dp 全稱是 “density- independent pixel”,即“密度無關像素”,所以也可以縮寫成 dip,不過 dp 更常用。

定義dp爲 160dpi 時的一個像素大小;那麼到 320 dpi 時,它就相當於兩個像素。

兩者的數值關係如下:

px= dp *(dpi/160)

這樣的話,假如做一個50*50dp的icon,放到160dpi的屏幕上就是50px*50px,放到320dpi的屏幕上就是100px*100px。各元素的佈局和比例便不會失調。

所以設計師在給開發切圖時,經常會需要切一倍圖、二倍圖和三倍圖,以滿足不同像素密度屏幕的需要。墨刀的切圖功能就能讓你一鍵切出一倍、二倍和三倍圖,沒有繁瑣操作。

這裏插一句 sp 這個單位,sp 跟 dp 類似,全稱是 scale-independent pixel (也會縮寫爲 sip), 即“獨立比例像素”。sp 主要用作字體的單位,開發用此單位設置文字大小,這樣在不同像素密度的屏幕上能進行同比例的擴大縮小。

OK,回到 dp。

既然知道了要用dp爲單位畫圖,那面對各種手機型號和分辨率,畫圖前需要把px換算成dp。不過,貼心的墨刀已經把這些換算給做好啦!

考慮到今年全屏手機雨後春筍般湧現出來,墨刀也及時在Android設備默認尺寸中添加了Google Pixel 2 和 Google Pixel 2XL的 dp 尺寸,讓你免去px和dp的換算,輕鬆進入畫圖流程。

當然,如果真的遇到了要爲某個小衆機型適配而沒有默認選項,那就選擇最下面的customize自定義好了。怎麼算? 非常容易。

查到某款機型的分辨率爲a*b px,該機型的像素密度dpi(也會寫作ppi)爲c。

那麼需要自定義的dp尺寸爲:

寬= a/(c/160) ,高=b/(c/160)

 

 

總結:px像素    dpi 像素密度,每英寸像素個數。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章