為了避免在首頁UI設(shè)計(jì)時(shí)出現(xiàn)不必要的麻煩，如設(shè)計(jì)尺寸錯(cuò)誤而導(dǎo)致顯示不正常的情況發(fā)生，設(shè)備尺寸的標(biāo)準(zhǔn)（如單位，分辨率，密度等）都是我們必須了解清楚的。

     

      首先讓我們來看圖1所示。如果沒有接觸過手機(jī)界面設(shè)計(jì)，對(duì)下圖中的各種數(shù)值很可能會(huì)一頭霧水，Inch是什么？320X480代表什么？DPI又是什么單位？HDPI和MDPI又分別代表什么呢？下面我們來一 一介紹這些設(shè)備尺寸相關(guān)的內(nèi)容。

       英寸其實(shí)就是我們常說的長度單位，14寸筆記本電腦，30寸純平彩電，指的就是屏幕對(duì)角的長度，如圖2所示，手機(jī)屏幕也沿用這個(gè)概念。

圖2圖解英寸概念

       分辨率是屏幕物理像素的綜合，一般用屏寬像素?cái)?shù)以屏高像素?cái)?shù)來表示，比如480px*800px，320px*480px等，像素是顯示屏規(guī)范中的最小單位。

   

圖3分辨率示意圖

圖4像素示意圖

       圖3所示是一張分辨率為420px*320px的圖片，把它放大后，所見圖片就變成圖4所示這種全是正方形格子，而每個(gè)正方形格子就代表一個(gè)像素。這些格子數(shù)是有規(guī)律的，如果您有興趣去數(shù)一下，屏寬的格子數(shù)為420個(gè)，屏高的格子數(shù)為320個(gè)，也就是分辨率的寬與高。

         屏幕物理面積內(nèi)所含的像素?cái)?shù)，通過DPI（每英寸點(diǎn)數(shù)）來計(jì)算，圖1所示的252DPI和180DPI就是指每英寸點(diǎn)數(shù)為252和180。

         DPI越高，顯示的畫面質(zhì)量就越精細(xì)，在一般屏幕設(shè)計(jì)師上追求高DPI顯示畫面質(zhì)感，但在手機(jī)UI設(shè)計(jì)時(shí)，DPI要與相應(yīng)手機(jī)相匹配，因?yàn)榈头直媛实氖謾C(jī)無法滿足高DPI圖片對(duì)手機(jī)硬件的要求，顯示的效果反而會(huì)變得糟糕，所以就涉及了一個(gè)新的名詞-屏幕密度

       屏幕密度分為DPI（低），MDPI（中等），HDPI（高），XHDPI(特高)四種。

     

      圖5屏幕密度一覽表

       圖5中分成了屏幕密度和屏幕大小兩個(gè)維度。與屏幕密度對(duì)應(yīng)的，屏幕大小也分為四種：小屏（small screen）、普屏（normal screen）、大屏（Large screen）、超大屏(Extra Large screen)。

       拿出手機(jī)，根據(jù)分辨率看它屬于哪種屏幕大小從而推導(dǎo)出應(yīng)該采用的屏幕密度，假設(shè)我的手機(jī)分辨率為320X480，可以看到對(duì)應(yīng)320X480（即HVGA）分辨率屏幕大小的只有普屏，通過圖表反查可知，適用于Mdpi屏幕密度，如果我要做適合我的手機(jī)應(yīng)用，就要選擇MDPI屏幕密度來進(jìn)行設(shè)計(jì)。

       我們都知道一些設(shè)備已經(jīng)有高像密度屏幕，而且我們將看到越來越多的DPI移動(dòng)設(shè)備，我們也將很可能看到高DPI的桌面和筆記本計(jì)算機(jī)-windows，mac和web將一起跟上移動(dòng)設(shè)備的潮流。我們正在變革中，舊的，低的PPI屏幕還會(huì)存在一段時(shí)間，所以不管低DPI和高DPI屏幕都需要兼容。

      對(duì)于IOS設(shè)備來講，蘋果已經(jīng)為原生IOS開發(fā)設(shè)置了兩個(gè)屏幕密度，就是兩套的UI尺度，新屏幕的像素密度比上一代設(shè)備增加了整一倍，對(duì)于IPHONE,早期只有163DPI，而IPHONE4及后續(xù)機(jī)型的Retina屏幕則擁有326DPI，

      而android和IOS類似，它有四個(gè)像素密度，android提供120DPI（低密度）,160DPI（中密度）,240DPI（高密度）和320DPI（超高密度），所有用戶界面都是基于四個(gè)密度之一的尺寸來設(shè)計(jì)的。要支持所有4個(gè)密度，是很悲劇的。如果一開始是以160DPI來設(shè)計(jì)，那么你就需要擴(kuò)展這些密度到100%、150%和200%。

各密度版本效果及參數(shù)展示

       我們可以在圖上發(fā)現(xiàn)括號(hào)中的屏幕密度數(shù)值，其實(shí)這些數(shù)值就是在photoshop設(shè)計(jì)中需要用到的，我們新建一個(gè)photoshop文檔時(shí)，在分辨率一欄，選擇像素/英寸模式，再在前面輸入框中輸入相應(yīng)的屏幕密度數(shù)即可。

        不過這樣就出現(xiàn)了一個(gè)麻煩的問題，假如一個(gè)app有50張圖要設(shè)計(jì)，每張圖要生成4種不同版本，也就是50x4等于200張，意味著工作量巨大，新建200次分辨率文檔，而且還得將圖片內(nèi)容不停地縮放大小，對(duì)于設(shè)計(jì)師來講完全就是一種折磨。

        這個(gè)問題應(yīng)該怎么解決呢？建議從最基準(zhǔn)的分辨率-160DPI開始設(shè)計(jì)，設(shè)計(jì)完成后，按75%、150%、200%的縮放比例將圖片縮小或擴(kuò)大。

縮放比例的調(diào)整

        與android相比，iphone對(duì)密度版本的數(shù)量要求就沒那么恐怖了，目前iphone僅兩種設(shè)計(jì)尺寸，480px*320px和960px*480px，而Mdpi密度就可以滿足要求了。

總結(jié)：手機(jī)在進(jìn)行UI設(shè)計(jì)時(shí)，對(duì)設(shè)計(jì)參數(shù)的要求較一般WEB設(shè)計(jì)更嚴(yán)格。正如WEB會(huì)因各種瀏覽器版本不同，而要講求兼容性一樣，手機(jī)UI要根據(jù)手機(jī)型號(hào)，屏幕大小等各方面因素來進(jìn)行綜合考慮，但是web上的一個(gè)像素的誤差，非專業(yè)人士很難發(fā)現(xiàn)，而手機(jī)則不同，一個(gè)dpi設(shè)置的誤差，在手機(jī)平臺(tái)上會(huì)被成倍的放大，為了避免笑話，還得認(rèn)真努力研究它！