本文所講的關鍵字:像素密度PPI;邏輯像素;物理像素(實際分辨率);倍率;前端
像素密度Pixels per inch:每英寸長度上排列的像素點數量,1英寸是一個固定長度,等於2.54釐米,大約是食指最末端那根指節的長度。像素密度越高,表明屏幕顯示效果越精細。Retina屏比普通屏清晰不少,就是由於它的像素密度翻了一倍。像素密度爲120左右的屏幕爲1dpi,160左右爲mdpi,由於Android屏幕尺寸實在太多,分辨率高低跨度很是大,不像蘋果只有那麼幾款固定設備、固定尺寸。因此Android把各類設備的像素密度劃成了好幾個範圍區間,給不一樣範圍的設備定義了不一樣的倍率,來保證顯示效果相近。像素密度概念雖然重要,但用不着咱們本身算,iOS與Android都幫咱們算好了。ios
如圖所示,像素密度在120左右的屏幕歸爲ldpi,160左右的歸爲mdpi,以此類推。這樣,全部的Android屏幕都找到了本身的位置,並賦予了相應的倍率:瀏覽器
ldpi [0.75倍]app
mdpi [1倍]iphone
hdpi [1.5倍]ui
xhdpi [2倍]spa
xxhdpi [3倍]設計
xxxhdpi [4倍]3d
就目前市場情況而言,各類手機的分辨率能夠這樣粗略判斷。雖然不全面,但至少在1年內都還有必定的參考意義:blog
ldpi 現在已絕跡,不用考慮
mdpi [320x480](市場份額不足5%,新手機不會有這種倍率,屏幕一般都特別小)
hdpi [480x800、480x85四、540x960](早年的低端機,屏幕在3.5英寸檔位;現在的低端機,屏幕在4.7-5.0英寸檔位)
xhdpi [720x1280](早年的中端機,屏幕在4.7-5.0英寸檔位;現在的中低端機,屏幕在5.0-5.5英寸檔位)
xxhdpi [1080x1920](早年的高端機,現在的中高端機,屏幕一般都在5.0英寸以上)
xxxhdpi [1440x2560](極少數2K屏手機,好比Google Nexus 6)
天然地,以1倍的mdpi做爲基準。像素密度更高或者更低的設備,只需乘以相應的倍率,就能獲得與基準倍率近似的顯示效果。
不過須要注意的是,Android設備的邏輯像素尺寸並不統一。好比兩種常見的屏幕480×800和1080×1920,它們分別屬於hdpi和xxhdpi。除以各自倍率1.5倍和3倍,獲得邏輯像素爲320×533和360×640。很顯然,後者更寬更高,能顯示更多內容。因此,即便有倍率的存在,各類Android設備的顯示效果仍然沒法作到徹底一致。
不難發現,真正決定顯示效果的,是邏輯像素尺寸。爲此,iOS和Android平臺都定義了各自的邏輯像素單位。iOS的尺寸單位爲pt,Android的尺寸單位爲dp。說實話,二者實際上是一回事。
單位之間的換算關係隨倍率變化:
1倍:1pt=1dp=1px(mdpi、iPhone 3gs)
1.5倍:1pt=1dp=1.5px(hdpi)
2倍:1pt=1dp=2px(xhdpi、iPhone 4s/5/6)
3倍:1pt=1dp=3px(xxhdpi、iPhone 6)
4倍:1pt=1dp=4px(xxxhdpi)
單位決定了咱們的思考方式。在設計和開發過程當中,應該儘可能使用邏輯像素尺寸來思考界面。設計Android應用時,有的設計師喜歡把畫布設爲1080×1920,有的喜歡設成720×1280。給出的界面元素尺寸就不統一了。Android的最小點擊區域尺寸是48x48dp,這就意味着在xhdpi的設備上,按鈕尺寸至少是96x96px。而在xxhdpi設備上,則是144x144px。
不管畫布設成多大,咱們設計的是基準倍率的界面樣式,並且開發人員須要的單位都是邏輯像素。因此爲了保證準確高效的溝通,雙方都須要以邏輯像素尺寸來描述和理解界面,不管是在標註圖仍是在平常溝通中。不要再說「底部標籤欄的高度是96像素,我是按照xhdpi作的」這樣的話了。
Web怎麼辦
移動端頁面的絕對單位仍然是px,至少代碼裏這麼寫,但它的道理也和app同樣。因爲像素密度是設備自己的固有屬性,它會影響到設備中的全部應用,包括瀏覽器。前端技術能夠善加利用設備的像素密度,只需一行代碼,瀏覽器便會使用app的顯示方式來渲染頁面。根據像素密度,按相應倍率縮放。
以iPhone 5s爲例,屏幕的分辨率是640×1136,倍率是2。瀏覽器會認爲屏幕的分辨率是320×568,仍然是基準倍率的尺寸。因此在製做頁面時,只須要按照基準倍率來就好了。不管什麼樣的屏幕,倍率是多少,都按邏輯像素尺寸來設計和開發頁面。只不過在準備資源圖的時候,須要準備2倍大小的圖,經過代碼把它縮成1倍大小顯示,才能保證清晰。
物理分辨率與邏輯分辨率:這二者很容易混淆,下面舉例說明:
衆所周知,手機屏幕分辨率是手機的重要參數之一。
你們都知道移動端設備屏幕尺寸很是多,碎片化嚴重。尤爲是Android,你會聽到不少種分辨率:480×800, 480×854, 540×960, 720×1280, 1080×1920,並且還有傳說中的2K屏、4K、5k等。近年來iPhone的碎片化也加重了:640×960, 640×1136, 750×1334, 1242×2208。
解釋一:俗話說物理分辨率是硬件所支持的,邏輯分辨率是軟件能夠達到的。
咱們先來看看ios客戶端的尺寸分辨率表:
物理尺寸是指屏幕的實際大小。大的屏幕同時必需要配備高分辨率,也就是在這個尺寸下能夠顯示多少個像素,顯示的像素越多,能夠表現的餘地天然越大。
解釋二:如同上圖所對應的英文單詞同樣。
640*960、640*1136等這些都是物理尺寸或是物理分辨率。
而下面的320*480、320*568等這些都是邏輯分辨率或是邏輯尺寸。
解釋三:從另外的角度來講:分辨率就是屏幕上橫、縱的總象素點數。
若是咱們設計的時候用單位px,能夠說是物理分辨率尺寸。
若是咱們設計的時候用單位pt,能夠說是邏輯分辨率尺寸。
下面拿iphone 6 plus詳細分析:
一、iPhone 6 Plus 的邏輯point分辨率用 360×640,也不是不能夠,也即上面圖表中的 iPhone 6+ (b)方案,那麼 scale 用 @3x,最終像素分辨率 360×640@3x 正好是 1080×1920,完美1:1映射,無需縮放;但缺點就是:iPhone 6 Plus的邏輯pt分辨率 360×640 就會比 iPhone 6的 375×667 還低,這天理不容啊,一個Plus的大屏幕雖然很精細,可是可顯示的實際內容比 iPhone 6 還少。徹底不符合 Bigger than bigger 。
打個比方就是:相同字號的狀況下,iPhone 6若是一行顯示了25個字,而 iPhone 6 Plus 按這個邏輯pt方案,一行就會只能顯示24 個字了。
二、那若是邏輯point分辨率用 540×960 呢,也即圖表中的 iPhone 6+ (c) , scale 沿用老的 @2x ,最終像素分辨率 540×960@2x 不正好是 1080×1920 嗎,也是完美1:1映射,無需縮放,還不須要多餘作 @3x 素材; 並且這個方案的優勢也很明顯: pt 面積是 iPhone 6 的兩倍 (540×960 = 375x667x 2),這樣屏幕可顯示的內容一下就增多了 ; 但這個方案的缺點就更明顯了: 全部 iOS UI 元素尺寸在屏幕上的實際物理面積一會兒就變小了,好比標籤欄或導航欄按鈕的物理高度只有原來的 81.5% ,
點擊面積就只有iPhone 6的 0.815*0.815=66.4%,用戶點擊就困難了,總不至於蘋果考慮觸摸手指操做,爲 <= iPhone 6 作一套設計規範,爲 iPhone 6 Plus 再另外作一套設計規範。
倍率:物理分辨率除以邏輯分辨率的值
下面來看看3個平臺各自與ui圖紙的對接
IPhone
iPhone的屏幕尺寸各不相同,我說的是邏輯像素尺寸,這確實是讓人很頭疼的事情。若是想用一套設計涵蓋全部iPhone,就要選擇邏輯像素折中的機型。
從市場佔有率數據來看,目前最多的是iPhone5/5s的屏幕。倍率爲2,邏輯像素320×568。上升勢頭最猛,將來有望登上第一的是iPhone 6的屏幕。倍率爲2,邏輯像素375×667。
按照這兩種尺寸來設計,都是比較主流的作法。能夠兼顧短一些的iPhone 4s,大一點的6 plus也不會過於空曠。
不過在切圖的時候要注意,因爲iPhone 6 plus的3倍圖是由2倍圖放大而來,因此位圖要注意保證清晰。
Android
都說Android碎片化嚴重,但它如今反而比iOS好處理。由於現在的Android屏幕邏輯像素已經趨於統一了:360×640,就看你設成幾倍了。想以xhdpi爲準,就把DPI設成72×2=144。想以xxhdpi爲準,就把DPI設成72×3=216。
對於那些比較老的低端機,寬度是480px的那批,畫面確實會小一些,顯示內容會更少。稍微留意一下,重要內容儘可能保持在界面中上部分。
固然,這些機型不出一年就會被邊緣化,基本淘汰。如今能運轉的也是看成功能機在用,軟件多了必卡無疑,用戶體驗無從談起。不做考慮也是OK的。
Web
手機端網頁就沒有統一標準了,比較流行的作法是按照iPhone 5的尺寸來設計。倍率2,邏輯像素320×568。
這樣的作法比較實在,倍率2的屏幕不管在iOS仍是Android方面都是主流,並且又是2倍屏幕中邏輯像素最小的。因此圖片的尺寸能夠保持在較小的水平,頁面加載速度快。固然,缺點就是在倍率3的設備上看,圖片不是特別清晰。
若是追求圖片質量,願意犧牲加載速度,那麼能夠按照最大的屏幕來設計。也就是iPhone 6 plus的尺寸,倍率3,邏輯像素414×736。
總結
移動端的尺寸比PC端複雜,關鍵就在倍率。但也正由於倍率的存在,把大大小小的屏幕拉回到同一水平線,得以保證一套設計適應各類屏幕。站在這條水平線的角度看,會發現它很好理解。