移動(dòng)端界面設(shè)計(jì)之尺寸應(yīng)該怎樣設(shè)計(jì)?我們都知道移動(dòng)端界面設(shè)計(jì)的尺寸與電腦端的尺寸設(shè)計(jì)是不一樣的,有的企業(yè)因?yàn)橘M(fèi)用會(huì)考慮只設(shè)計(jì)適用電腦端的界面,這里就為大家總結(jié)一下移動(dòng)端界面設(shè)計(jì)之尺寸應(yīng)該怎樣設(shè)計(jì)。
移動(dòng)端界面設(shè)計(jì)之尺寸應(yīng)該怎樣設(shè)計(jì)?我們都知道移動(dòng)端界面設(shè)計(jì)的尺寸與電腦端的尺寸設(shè)計(jì)是不一樣的,有的企業(yè)因?yàn)橘M(fèi)用會(huì)考慮只設(shè)計(jì)適用電腦端的界面,這里就為大家總結(jié)一下移動(dòng)端界面設(shè)計(jì)之尺寸應(yīng)該怎樣設(shè)計(jì)。
像素密度
我們要引入最重要的一個(gè)概念:像素密度,也就是PPI(pixels per inch)。這項(xiàng)指標(biāo)是連接數(shù)字世界與物理世界的橋梁。
Pixels per inch,準(zhǔn)確的說(shuō)是每英寸的長(zhǎng)度上排列的像素點(diǎn)數(shù)量。1英寸是一個(gè)固定長(zhǎng)度,等于2.54厘米,大約是食指最末端那根指節(jié)的長(zhǎng)度。像素密度越高,代表屏幕顯示效果越精細(xì)。Retina屏比普通屏清晰很多,就是因?yàn)樗南袼孛芏确艘槐丁?br />
倍率與邏輯像素
再用iPhone 3gs和4s來(lái)舉例。假設(shè)有個(gè)郵件列表界面,我們不妨按照PC端網(wǎng)頁(yè)設(shè)計(jì)的思維來(lái)想象。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è)像素的高度來(lái)顯示。導(dǎo)致界面元素都變成2倍大小,反而和3gs效果一樣了。畫(huà)質(zhì)卻更清晰。
在以前,iOS應(yīng)用的資源圖片中,同一張圖通常有兩個(gè)尺寸。你會(huì)看到文件名有的帶@2x字樣,有的不帶。其中不帶@2x的用在普通屏上,帶@2x的用在Retina屏上。只要圖片準(zhǔn)備好,iOS會(huì)自己判斷用哪張,Android道理也一樣。
移動(dòng)端界面設(shè)計(jì)之尺寸應(yīng)該怎樣設(shè)計(jì)?看過(guò)了以上文章內(nèi)容,你對(duì)于移動(dòng)端界面設(shè)計(jì)之尺寸應(yīng)該怎樣設(shè)計(jì)這個(gè)問(wèn)題現(xiàn)在知道答案了嗎?
免責(zé)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶(hù)自發(fā)貢獻(xiàn)自行上傳,本網(wǎng)站不擁有所有權(quán),也不承認(rèn)相關(guān)法律責(zé)任。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容,請(qǐng)發(fā)送郵件至:operations@xinnet.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),本站將立刻刪除涉嫌侵權(quán)內(nèi)容。