什么是像素比

當(dāng)你的設(shè)計(jì)需要在不同PPI下轉(zhuǎn)換時(shí)姻几，像素比就是你的救星宜狐。當(dāng)你知道像素比后，就不需要再考慮設(shè)備的詳細(xì)規(guī)格了蛇捌。

以iPhone 3G和4為例抚恒，相同物理大小上iPhone4的像素點(diǎn)是3G兩倍，因此像素比就是2络拌，這表示只需要用你的資源乘以2俭驮，就可以兼容4G的分辨率了。

一個(gè)是標(biāo)準(zhǔn)PPI（iPhone 3）的Jim.png版本春贸，一個(gè)是200%PPI（iPhone 4）的Jim@2x.png版本混萝。

什么是DP遗遵、PT、SP

DP(Dip)表示獨(dú)立于設(shè)備的像素點(diǎn)譬圣，PT表示點(diǎn)瓮恭。

DP用在Android上雄坪，PT用在Apple上厘熟，但是他們本質(zhì)上是相同的。

SP表示與比例無(wú)關(guān)的像素维哈，通常用來(lái)定義字體大小绳姨。

從技術(shù)上給Jim添加20px的padding，在Retina上padding是40px阔挠。

但是飘庄，當(dāng)你基于非Retina屏幕設(shè)計(jì)時(shí)計(jì)算Retina的像素值并沒(méi)什么意義。

因此我們需要做的就是以標(biāo)準(zhǔn)的100%非Retina比例作為一切設(shè)計(jì)的基礎(chǔ)购撼。

Android和iOS會(huì)調(diào)整自身大小適應(yīng)屏幕并且使用正確的像素比來(lái)進(jìn)行換算跪削。

這就是為什么我發(fā)現(xiàn)使用屏幕的原始的PPI設(shè)計(jì)會(huì)更簡(jiǎn)單。

什么是視網(wǎng)膜顯示屏

“Retina（視網(wǎng)膜）顯示屏”是Apple公司在發(fā)布iPhone 4時(shí)引入的迂求。之所以叫做Retina是因?yàn)樵O(shè)備的PPI非常高以至于人的視網(wǎng)膜也不能在屏幕上分辨出像素點(diǎn)來(lái)碾盐。

這個(gè)說(shuō)法在現(xiàn)在的設(shè)備的屏幕范圍內(nèi)是正確的，但是隨著屏幕越來(lái)越好揩局，我們的眼睛也會(huì)被訓(xùn)練得足夠感知像素點(diǎn)毫玖，特別是圓形的UI元素。

從技術(shù)的角度來(lái)講凌盯，他們做的就是在完全相同的物理大小上展示比原來(lái)高和寬多一倍的像素點(diǎn)付枫。

“如果我在設(shè)計(jì)工具里改變PPI配置，會(huì)發(fā)生什么呢驰怎？”

任何非打印的設(shè)計(jì)使用像素大小不用考慮原始PPI配置阐滩。

你的畫布和圖像總是會(huì)被被軟件按照對(duì)應(yīng)的像素比換算成像素點(diǎn)。

這就是我們使用像素比而不直接用PPI值的原因县忌。

在PS里更改PPI 后掂榔，圖形大小不變，文本大小改變

原因就是Photoshop按照PPI值放大了pt值芹枷，結(jié)果在PPI值變?yōu)閮杀兜那闆r下文本大小增加為原來(lái)兩倍衅疙。

而用像素定義的藍(lán)色正方形，保持了原來(lái)大小鸳慈。

像素就是一個(gè)像素點(diǎn)饱溢，不管PPI怎么配置它會(huì)一直保持一個(gè)像素。

造成圖形（像素定義）大小變化的是用來(lái)顯示它的屏幕的PPI值走芋。

PPI配置對(duì)輸出到web上的設(shè)計(jì)毫無(wú)影響绩郎。

PPI配置只對(duì)基于PPI獨(dú)立計(jì)量（比如PT）產(chǎn)生的圖案有影響潘鲫。

像素是任何數(shù)字化設(shè)計(jì)的度量單位

保持像素比以及設(shè)計(jì)的目標(biāo)，而不是PPI

在進(jìn)行數(shù)字化設(shè)計(jì)時(shí)使用實(shí)際的PPI配置肋杖，你會(huì)感受到它在目標(biāo)設(shè)備上的樣子

在你的文件中自始至終保持相同的PPI配置

如圖所示溉仑，每次請(qǐng)求資源需要傳送兩張圖片。

【iOS規(guī)則集】

@2x的資源必須始終是1x資源的兩倍状植。

Retina資源加上@2x.

始終創(chuàng)建100%和200%比例的圖片浊竟。

1x和2x的資源始終要保持名字相同。

在100%比例下開始設(shè)計(jì)津畸，然后做乘法振定。

傳遞.png格式的圖片。

使用pt創(chuàng)建規(guī)范而不是px肉拓。

Android設(shè)備按照不同DPI分為：ldpi后频、mdpi、 tvdpi暖途、 hdpi卑惜、 xhdpi、 xxhdpi和xxxhdpi

每次請(qǐng)求資源都需要傳遞一組4張圖片:MDPI, HDPI, XHDPI和XXHDPI

【Android規(guī)則集】

Android有7種不同的DPI驻售，你需要關(guān)注其中的4個(gè)：mdpi,hdpi,xhdpi,xxhdpi露久，如果希望你的app面向未來(lái)，可以關(guān)注XXXHDPI芋浮。

MDPI是基礎(chǔ)的DPI或者1x像素比

Android使用dp代替pt當(dāng)作參數(shù)規(guī)格抱环，但是他們是一樣的。

用你最好的判斷來(lái)處理小數(shù)像素比纸巷。

傳遞.png格式圖片镇草。

確保檢驗(yàn)命名約定，與執(zhí)行負(fù)責(zé)人共同完成輸出進(jìn)程瘤旨。

在像素世界英寸或者厘米并不是一個(gè)好的計(jì)量方法梯啤，即使是像素也不是真正好的計(jì)量方法。

Photoshop是主要的位圖編輯工具（十分依賴DPI）存哲，也是UI設(shè)計(jì)中使用最廣泛的軟件.數(shù)十年的積累使得它成為學(xué)習(xí)和使用比較困難的軟件因宇。作為軟件中的瑞士軍刀，你可以用來(lái)做任何事祟偷，但是并不總是最有效的察滑。

Adobe Illustrator也很適合平面設(shè)計(jì)，也是一款很強(qiáng)大的工具修肠，需要付出努力去學(xué)習(xí)贺辰。和Photoshop不同的是，它是獨(dú)立于DPI的，因?yàn)樗蕾囀噶繄D饲化。與點(diǎn)陣圖或者光柵圖相反莽鸭，圖像生成采用矢量圖，依靠數(shù)學(xué)公式計(jì)算吃靠，以編程方式重新調(diào)節(jié)大小并且不會(huì)損失圖片質(zhì)量硫眨。

Sketch是小團(tuán)隊(duì)開發(fā)的，而且出來(lái)得比較晚巢块。從一開始礁阁，Sketch的目標(biāo)就是供界面和UX設(shè)計(jì)師使用，沒(méi)有Photoshop和Illustrator的歷史積累夕冲，Sketch把自己定位成針對(duì)小眾用戶——界面設(shè)計(jì)師的一款完美的調(diào)整工具氮兵。

附加：并沒(méi)有完美的工具但是有最適合你的裂逐。如果你有足夠的時(shí)間和錢歹鱼，我建議你都試試，然后再?zèng)Q定卜高。