7.10日(rì)音(yīn)訊，再述♥★δ☆手機(jī)APPUI設計(jì)尺寸基礎知(zhī)識，首←♣≤先說(shuō)現(xiàn)象，大(dà)家(jiā)∏> ∑都(dōu)知(zhī)道(dào)移動端設≥ 備屏幕尺寸非常多(duō)，碎片化(huà)$>↔±嚴重。尤其是(shì)Android，你(nǐ)會(huì)聽(tīng"÷)到(dào)很(hěn)多(duō)種分(fēn)辨率：480x80≠∑£0,480x854,540x960,720x1280,1080x1920≤♠，而且還(hái)有(yǒu)傳說(shu♣€€ō)中的(de)2K屏。近(jìn)年(nián)來(lái)iP₹∑hone的(de)碎片化(huà)也(yě)加劇(jù)了(le♦σ∞✔)：640x960,640x1136,750x1334,1242x2208。✘Ω±
不(bù)要(yào)被這(zhè)些(xiē)尺寸吓倒。實際上★"(shàng)大(dà)部分(fēn)的(de)app和(hé)移®÷動端網頁，在各種尺寸的(de)屏幕上(shàng)都(dōu)能(néng→®&¥)正常顯示。說(shuō)明(míng)尺寸的♦♦α(de)問(wèn)題一(yī)定有(y÷↔ǒu)解決方法，而且有(yǒu)規律可(kě)循。
像素密度
要(yào)知(zhī)道(dào)，屏幕是(shì)由很(hě☆α₽n)多(duō)像素點組成的(de)。之前提到(dào₽'•)那(nà)麽多(duō)種分(fēn)★↓<∑辨率，都(dōu)是(shì)手機(jī)屏幕的(de)實際像素尺寸。比如σ♦σ(rú)480x800的(de)屏幕，就(jiù)是(shì)由800行(xí₩¥♠ng)、480列的(de)像素點組成的(de)。每個(gèΩ€)點發出不(bù)同顔色的(de)光(guāng)×≤☆，構成我們所看(kàn)到(dào)的(de)畫(huà)面。而手ε÷機(jī)屏幕的(de)物(wù)理(lǐ)尺寸，和(↕♠hé)像素尺寸是(shì)不(bù)成比例的(σ©de)。最典型的(de)例子(zǐ)，iPhone3× ♥Ωgs的(de)屏幕像素是(shì)320x480，iPhoε§≥¥ne4s的(de)屏幕像素是(shì)640x960。剛好₩∞δ✘(hǎo)兩倍，然而兩款手機(jī)都(dōu)是(shì)3.₹γ5英寸的(de)。
所以，我們要(yào)引入最重要(yào)的(d>×e)一(yī)個(gè)概念：像素密度，也(yě)就(jiù)是(shì)PP>$I(pixelsperinch)。這(zhè)項指Ω™≤标是(shì)連接數(shù)字世界與物(wù)理(lǐ$≥)世界的(de)橋梁。
Pixelsperinch，準确的(de)說(shuō)是(shì≥↓)每英寸的(de)長(cháng)度上(shàng)排列±→™•的(de)像素點數(shù)量。1英寸是(shì)∏β∏一(yī)個(gè)固定長(cháng)度，等于2.¶☆54厘米，大(dà)約是(shì)食指最末端那(nà)根∏γσ指節的(de)長(cháng)度。像素密度越高(g→π✘§āo)，代表屏幕顯示效果越精細。Retina屏比普通(tōng)屏® ∏清晰很(hěn)多(duō)，就(jiù)是(shì)因為(wèγ↓>&i)它的(de)像素密度翻了(le)一(yī)倍。
倍率與邏輯像素
再用(yòng)iPhone3gs和(hé)4s來(lái)舉例。假ε☆設有(yǒu)個(gè)郵件(jiàn)列表•¥☆界面，我們不(bù)妨按照(zhào)PC端網頁設計(≈ jì)的(de)思維來(lái)想象。3gs上(shàn₹∏₹↑g)大(dà)概隻能(néng)顯示4-5行(xíng)，4s就(j≤α₩¥iù)能(néng)顯示9-10行(xíng≥€≈✘)，而且每行(xíng)會(huì)變得(de)特别寬∏✔。但(dàn)兩款手機(jī)其實是(shì)一(yī)樣大(dà)的★≠(de)。如(rú)果照(zhào)這(zhè)種方式顯示，3gs上δ•♥γ(shàng)剛剛好(hǎo)的(de)效果，在4s上©¥(shàng)就(jiù)會(huì)小(₹→&xiǎo)到(dào)根本看(kàn)不(bù)清字₹∏&。
在現(xiàn)實中，這(zhè)兩者效果卻是(shì)一₽≈(yī)樣的(de)。這(zhè)是(shì)因為(wèi)Reti→≥☆na屏幕把2x2個(gè)像素當1個(gè)像素使用(yòng)。比如(r★£& ú)原本44像素高(gāo)的(de)頂部導航欄，在Retina屏上(₽←εshàng)用(yòng)了(le)88個(gè)像素的(de)高(g♦± āo)度來(lái)顯示。導緻界面元素都∏≤±(dōu)變成2倍大(dà)小(xiǎo)，≠↕反而和(hé)3gs效果一(yī)樣了(l€↔ £e)。畫(huà)質卻更清晰。
在以前，iOS應用(yòng)的(de)資源圖片中，同一(y÷₹ī)張圖通(tōng)常有(yǒu)兩個(gè)尺寸。你(nǐ)會(h→σuì)看(kàn)到(dào)文(wén)件(jiàn)名有(♣♥ λyǒu)的(de)帶@2x字樣，有(yǒu)的♥(de)不(bù)帶。其中不(bù)帶@2x的(de)用(yòng)>&≠δ在普通(tōng)屏上(shàng)，帶@2x的(de↕☆₩)用(yòng)在Retina屏上(shàng)。隻要(¶ &®yào)圖片準備好(hǎo)，iOS會(huì)自"÷♦(zì)己判斷用(yòng)哪張，Android道(dào)理(lǐ)也(♠→¶¥yě)一(yī)樣。
由此可(kě)以看(kàn)出，蘋果以普通(tōng)屏為(wèi)δ£₽≥基準，給Retina屏定義了(le)一(yī)個(gè)2倍↓↔α&的(de)倍率(iPhone6plus除外(wài)↕₽，它達到(dào)了(le)3倍)。實際像素λγ ↔除以倍率，就(jiù)得(de)到(dào)邏輯像素尺寸。隻要(yào)兩☆πβ個(gè)屏幕邏輯像素相(xiàng)同，它們的(de)顯示效果就(jiù)是"✔(shì)相(xiàng)同的(de)。
