現(xiàn)象

    首先說現(xiàn)象，大家都知道移動(dòng)端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重。尤其是Android，你會(huì)聽到很多種分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了：640x960, 640x1136, 750x1334, 1242x2208。

    不要被這些尺寸嚇倒。實(shí)際上大部分的app和移動(dòng)端網(wǎng)頁，在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法，而且有規(guī)律可循。

像素密度

　　要知道，屏幕是由很多像素點(diǎn)組成的。之前提到那么多種分辨率，都是手機(jī)屏幕的實(shí)際像素尺寸。比如480x800的屏幕，就是由800行、480列的像素點(diǎn)組成的。每個(gè)點(diǎn)發(fā)出不同顏色的光，構(gòu)成我們所看到的畫面。而手機(jī)屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。剛好兩倍，然而兩款手機(jī)都是3.5英寸的。

    所以，我們要引入最重要的一個(gè)概念：像素密度，也就是PPI(pixels per inch)。這項(xiàng)指標(biāo)是連接數(shù)字世界與物理世界的橋梁。

　　Pixels per inch，準(zhǔn)確的說是每英寸的長度上排列的像素點(diǎn)數(shù)量。1英寸是一個(gè)固定長度，等于2.54厘米，大約是食指最末端那根指節(jié)的長度。像素密度越高，代表屏幕顯示效果越精細(xì)。Retina屏比普通屏清晰很多，就是因?yàn)樗南袼孛芏确艘槐丁?/p>

    再用iPhone 3gs和4s來舉例。假設(shè)有個(gè)郵件列表界面，我們不妨按照PC端網(wǎng)頁設(shè)計(jì)的思維來想象。3gs上大概只能顯示4-5行，4s就能顯示9-10行，而且每行會(huì)變得特別寬。但兩款手機(jī)其實(shí)是一樣大的。如果照這種方式顯示，3gs上剛剛好的效果，在4s上就會(huì)小到根本看不清字。

    在現(xiàn)實(shí)中，這兩者效果卻是一樣的。這是因?yàn)镽etina屏幕把2x2個(gè)像素當(dāng)1個(gè)像素使用。比如原本44像素高的頂部導(dǎo)航欄，在Retina屏上用了88個(gè)像素的高度來顯示。導(dǎo)致界面元素都變成2倍大小，反而和3gs效果一樣了。畫質(zhì)卻更清晰。

    iPhone的屏幕尺寸各不相同，我說的是邏輯像素尺寸，這確實(shí)是讓人很頭疼的事情。如果想用一套設(shè)計(jì)涵蓋所有iPhone，就要選擇邏輯像素折中的機(jī)型。

    從市場占有率數(shù)據(jù)來看，目前最多的是iPhone5/5s的屏幕。倍率為2，邏輯像素320x568。上升勢頭最猛，未來有望登上第一的是iPhone 6的屏幕。倍率為2，邏輯像素375x667。

    按照這兩種尺寸來設(shè)計(jì)，都是比較主流的做法。可以兼顧短一些的iPhone 4s，大一點(diǎn)的6 plus也不會(huì)過于空曠。

    不過在切圖的時(shí)候要注意，由于iPhone 6 plus的3倍圖是由2倍圖放大而來，所以位圖要注意保證清晰。

    Android

    都說Android碎片化嚴(yán)重，但它現(xiàn)在反而比iOS好處理。因?yàn)槿缃竦腁ndroid屏幕邏輯像素已經(jīng)趨于統(tǒng)一了：360x640，就看你設(shè)成幾倍了。想以xhdpi為準(zhǔn)，就把DPI設(shè)成72x2=144。想以xxhdpi為準(zhǔn)，就把DPI設(shè)成72x3=216。

    對(duì)于那些比較老的低端機(jī)，寬度是480px的那批，畫面確實(shí)會(huì)小一些，顯示內(nèi)容會(huì)更少。稍微留意一下，重要內(nèi)容盡量保持在界面中上部分。

    當(dāng)然，這些機(jī)型不出一年就會(huì)被邊緣化，基本淘汰。現(xiàn)在能運(yùn)轉(zhuǎn)的也是當(dāng)作功能機(jī)在用，軟件多了必卡無疑，用戶體驗(yàn)無從談起。不作考慮也是OK的。

    Web手機(jī)端網(wǎng)頁就沒有統(tǒng)一標(biāo)準(zhǔn)了，比較流行的做法是按照iPhone 5的尺寸來設(shè)計(jì)。倍率2，邏輯像素320x568。

    這樣的做法比較實(shí)在，倍率2的屏幕無論在iOS還是Android方面都是主流，而且又是2倍屏幕中邏輯像素最小的。所以圖片的尺寸可以保持在較小的水平，頁面加載速度快。當(dāng)然，缺點(diǎn)就是在倍率3的設(shè)備上看，圖片不是特別清晰。

    如果追求圖片質(zhì)量，愿意犧牲加載速度，那么可以按照最大的屏幕來設(shè)計(jì)。也就是iPhone 6 plus的尺寸，倍率3，邏輯像素414x736。

    總結(jié)

    移動(dòng)端的尺寸比PC端復(fù)雜，關(guān)鍵就在倍率。但也正因?yàn)楸堵实拇嬖冢汛蟠笮⌒〉钠聊焕氐酵凰骄€，得以保證一套設(shè)計(jì)適應(yīng)各種屏幕。站在這條水平線的角度看，會(huì)發(fā)現(xiàn)它很好理解。

贛州網(wǎng)站建設(shè)|贛州網(wǎng)絡(luò)公司|贛州做網(wǎng)站|贛州網(wǎng)站建設(shè)價(jià)格|贛州網(wǎng)頁制作|贛州建網(wǎng)站公司|贛州微信二維碼平臺(tái)|贛州微信公眾號(hào)|贛州百度公|贛州百度推廣|贛州百度優(yōu)化|贛州朝揚(yáng)網(wǎng)絡(luò)|朝揚(yáng)網(wǎng)絡(luò)