UI培訓(xùn)之APP項(xiàng)目中的切圖和標(biāo)注規(guī)范（二）

在現(xiàn)實(shí)中，這兩者效果卻是一樣的。這是因?yàn)镽etina屏幕把2×2個(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屏上。
理解幾個(gè)基本概念：

1. 物理尺寸(inch):

對(duì)角線(xiàn)長(zhǎng)度，不考慮長(zhǎng)寬比。
例如：iphone 4s 3.5寸   iphone 6plus 5.5寸

2. 像素尺寸(PX):

橫縱坐標(biāo)像素點(diǎn)多少，與物理尺寸無(wú)關(guān)；
例如：iphone 3gs  320*480px
           iphone 4s    640*960px
 

3. 網(wǎng)點(diǎn)密度(dpi)

   屏幕物理面積內(nèi)所含的像素點(diǎn)。
 計(jì)算公式：
   所謂retina （ 視網(wǎng)膜屏）就是指分辨率達(dá)到300dpi的時(shí)候距離眼睛10-15CM距離的時(shí)候人的視覺(jué)看不出來(lái)像素點(diǎn)。
注意：DPI越高，畫(huà)質(zhì)越精細(xì)；但是，手機(jī)UI設(shè)計(jì)時(shí)，DPI要對(duì)應(yīng)相關(guān)手機(jī)匹配，因?yàn)榈头直媛实氖謾C(jī)無(wú)法滿(mǎn)足高DPI圖片對(duì)手機(jī)硬件的要求，反而顯示效果越差。
Iphone
  


Android（Mdpi   Hdpi   Xhdpi   XXHdpi ）

本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：http://m.fskzgqt.cn/ui