移動(dòng)應(yīng)用界面設(shè)計(jì)的尺寸規(guī)范

...wd......wd......wd...移動(dòng)應(yīng)用的界面設(shè)計(jì)畫(huà)布尺寸設(shè)計(jì)多大〔特別是Android〕、圖標(biāo)和字體大小怎么定、需要設(shè)計(jì)多套設(shè)計(jì)稿么、如何切圖以配合開(kāi)發(fā)的實(shí)現(xiàn)

本篇將結(jié)合iOS和android官方的設(shè)計(jì)標(biāo)準(zhǔn)、搜集的資料以及工作中的摸索，來(lái)分享移動(dòng)應(yīng)用界面設(shè)計(jì)中的尺寸標(biāo)準(zhǔn)等問(wèn)題，希望能給移動(dòng)端的新手設(shè)計(jì)師些許指引。假設(shè)有不當(dāng)之處，歡迎斧正。一、android篇1、android分辨率屏幕尺寸指實(shí)際的物理尺寸，為屏幕對(duì)角線(xiàn)的測(cè)量。

為了簡(jiǎn)單起見(jiàn)，Android把實(shí)際屏幕尺寸分為四個(gè)廣義的大?。盒?，正常，大，特大。像素〔PX〕代表屏幕上一個(gè)物理的像素點(diǎn)代表屏幕上一個(gè)物理的像素點(diǎn)。屏幕密度為解決Android設(shè)備碎片化，引入一個(gè)概念DP，也就是密度。指在一定尺寸的物理屏幕上顯示像素的數(shù)量，通常指分辨率。為了簡(jiǎn)單起見(jiàn)，Android把屏幕密度分為了四個(gè)廣義的大?。旱汀?20dpi〕、中〔160dpi〕、高〔240dpi〕和超高〔320dpi〕

像素=DP*〔DPI/160)

例如，在一個(gè)240dpi的屏幕里，1DP等于1.5PX。于設(shè)計(jì)來(lái)說(shuō)，選取一個(gè)適宜的尺寸作為正常大小和中等屏幕密度〔尺寸的選取依據(jù)打算適配的硬件，建議參考現(xiàn)主流硬件分辨率〕，然后向下和向上做小、大、特大和低、高、超高的尺寸與密度。典型的設(shè)計(jì)尺寸

?

320dp：一個(gè)普通的手機(jī)屏幕〔240X320，320×480，480X800〕

?

480dp：一個(gè)中間平板電腦像〔480×800〕

?

600dp：7寸平板電腦〔600×1024〕

?

720dp：10寸平板電腦〔720×1280，800×1280〕AndroidSDK模擬機(jī)的尺寸屏幕大小低密度〔120〕ldpx中等密度〔160〕mdpi高密度〔240〕hdpi超高密度〔320〕xhdpi小屏幕QVGA〔240×320〕

480×640

普通屏幕WQVGA400〔240X400〕WQVGA432〔240×432〕HVGA〔320×480〕WVGA800〔480×800〕WVGA854〔480×854〕600×1024640×960大屏幕WVGA800*〔480X800〕WVGA854*〔480X854〕WVGA800*〔480×800〕WVGA854*〔480×854〕600×1024

超大屏幕1024×6001024×7681280×768WXGA〔1280×800〕1536×11521920×11521920×12002048×15362560×1600

注意，ppi、dpi是密度單位，不是度量單位：

*ppi(pixelsperinch)：圖像分辨率〔在圖像中，每英寸所包含的像素?cái)?shù)目〕

*dpi(dotsperinch)：打印分辨率〔每英寸所能打印的點(diǎn)數(shù)，即打印精度〕dpi主要應(yīng)用于輸出，重點(diǎn)是打印設(shè)備上；ppi對(duì)于設(shè)計(jì)師應(yīng)該比較熟悉，photoshop畫(huà)布的分辨率常設(shè)置為72像素/英寸，這個(gè)單位其實(shí)就是ppi。盡管概念不同，但是對(duì)于移動(dòng)設(shè)備的顯示屏，可以看作ppi=dpi。ppi的運(yùn)算方式是：PPI=√〔長(zhǎng)度像素?cái)?shù)2+寬度像素?cái)?shù)2〕/屏幕對(duì)角線(xiàn)英寸數(shù)。即：長(zhǎng)、寬各自平方之和的開(kāi)方，再除以屏幕對(duì)角線(xiàn)的英寸數(shù)。以iphone5為例，其ppi=√〔1136px2+640px2〕/4in=326ppi〔視網(wǎng)膜Retina屏〕

對(duì)于android手機(jī)，一個(gè)不確切的分法是，720x1280的手機(jī)很可能接近320dpi〔xhdpi模式〕，480x800的手機(jī)很可能接近240dpi〔hdpi模式〕，而320x480的手機(jī)那么很接近160dpi〔mdpi模式〕。2、單位換算方法android開(kāi)發(fā)中，文字大小的單位是sp，非文字的尺寸單位用dp，但是我們?cè)谠O(shè)計(jì)稿用的單位是px。這些單位如何換算，是設(shè)計(jì)師、開(kāi)發(fā)者需要了解的關(guān)鍵。

*dp：Density-independentpixels，以160PPI屏幕為標(biāo)準(zhǔn)，那么1dp=1px。dp和px的換算公式：dp*ppi/160=px。對(duì)于320ppi的屏幕，1dpx320ppi/160=2px。

*sp：Scale-independentpixels，它是安卓的字體單位，以160PPI屏幕為標(biāo)準(zhǔn)，當(dāng)字體大小為100%時(shí)，1sp=1px。sp與px的換算公式：sp*ppi/160=px。對(duì)于320ppi的屏幕，1spx320ppi/160=2px。

簡(jiǎn)單理解的話(huà)，px〔像素〕是我們UI設(shè)計(jì)師在PS里使用的，同時(shí)也是手機(jī)屏幕上所顯示的，dp是開(kāi)發(fā)寫(xiě)layout的時(shí)候使用的尺寸單位。為什么要把sp和dp代替px原因是他們不會(huì)因?yàn)閜pi的變化而變化，在一樣物理尺寸和不同ppi下，他們呈現(xiàn)的高度大小是一樣。也就是說(shuō)更接近物理呈現(xiàn)，而px那么不行。根據(jù)單位換算方法，可總結(jié)出：

當(dāng)運(yùn)行在mdpi下時(shí)，1dp=1px：也就是說(shuō)設(shè)計(jì)師在PS里定義一個(gè)item高48px，開(kāi)發(fā)就會(huì)定義該item高48dp；

當(dāng)運(yùn)行在hdpi模式下時(shí)，1dp=1.5px：也就是說(shuō)設(shè)計(jì)師在PS里定義一個(gè)item高72px，開(kāi)發(fā)就會(huì)定義該item高48dp；

當(dāng)運(yùn)行在xhdpi模式下時(shí)，1dp=2px：也就是說(shuō)設(shè)計(jì)師在PS里定義一個(gè)item高96px，開(kāi)發(fā)就會(huì)定義該item高48dp；3、設(shè)計(jì)稿基本元素的尺寸設(shè)置為了適應(yīng)多分辨率的手機(jī)，理想的方式是為每種分辨率做一套設(shè)計(jì)稿，包括所用到的icon、設(shè)計(jì)稿標(biāo)注等。但在實(shí)際開(kāi)發(fā)中，這種方法耗時(shí)耗力。所以通常會(huì)選擇折中的方法。方法一：在標(biāo)準(zhǔn)根基上〔比方xhdpi〕開(kāi)場(chǎng)，然后放大或縮小，以適應(yīng)到其他尺寸。缺乏之處是，對(duì)于更高分辨率的手機(jī)，圖標(biāo)被放大后會(huì)導(dǎo)致質(zhì)量不高。

方法二：以最高分辨率為基準(zhǔn)設(shè)計(jì)，然后縮小適應(yīng)到所需的小分辨率上。缺點(diǎn)是，圖標(biāo)等假設(shè)都最大尺寸，加載時(shí)速度慢且消耗流量較多，對(duì)于小分辨率的用戶(hù)也不夠好。結(jié)合友盟的分辨率占比數(shù)據(jù)、也為了方便換算到android開(kāi)發(fā)中的尺寸單位，推薦設(shè)計(jì)稿的畫(huà)布尺寸選用720X1280，分辨率仍舊為72ppi〔像素/英寸〕。在android標(biāo)準(zhǔn)中對(duì)于導(dǎo)航欄、工具欄等的尺寸沒(méi)有明確的規(guī)定。但根據(jù)48dp原那么，以及一些主流的android應(yīng)用的截圖分析，總結(jié)一下尺寸要求：

狀態(tài)欄高度：50px

導(dǎo)航欄、操作欄高度：96px=48dpx2

主菜單欄高度：96px

內(nèi)容區(qū)域高度：1038px〔1280-50-96-96=1038〕

Android最近出的手機(jī)都幾乎去掉了實(shí)體鍵，把功能鍵移到了屏幕中，高度也和菜單欄一樣為：96px4、圖標(biāo)和字體大小〔來(lái)自官方標(biāo)準(zhǔn)文檔〕a、啟動(dòng)圖標(biāo)〔home頁(yè)或app列表頁(yè)〕

整體大小為48x48dp

密度ldpimdpihdpixhdpi分辨率36*36px48*48px72*72px96*96pxb、操作欄圖標(biāo)，代表用戶(hù)在app中可以使用到的最重要的圖標(biāo)

整體大小為32x32dp，圖形實(shí)際區(qū)域?yàn)?4x24dp

密度ldpimdpihdpixhdpi實(shí)際區(qū)域分辨率24*24px36*36px48*48px整體大小分辨率32*32px48*48px64*64pxc、小圖標(biāo)/場(chǎng)景圖標(biāo)，提供操作或特定工程的狀態(tài)。

比方gmailapp的星型標(biāo)記、一些內(nèi)容展開(kāi)收起用到的向下向上的圖標(biāo)等。整體大小為16x16dp，圖形實(shí)際區(qū)域?yàn)?2x12dp。

密度ldpimdpihdpixhdpi實(shí)際區(qū)域分辨率12*12px18*18px24*24px整體大小分辨率16*16px24*24px32*32pxd、通知圖標(biāo)

如果app有通知，要提供一個(gè)有新通知時(shí)顯示在狀態(tài)欄的通知圖標(biāo)。整體大小為24x24dp，圖形實(shí)際區(qū)域?yàn)?2x22dp。

密度ldpimdpihdpixhdpi實(shí)際區(qū)域分辨率22*22px33*33px44*44px整體大小分辨率24*24px36*36px48*48px注：android標(biāo)準(zhǔn)提供的尺寸單位是dp，假設(shè)設(shè)計(jì)稿尺寸設(shè)為720x1280，圖標(biāo)大小需在標(biāo)準(zhǔn)要求的尺寸數(shù)字上乘以2。比方操作欄圖標(biāo)32x32dp，那么設(shè)計(jì)稿上應(yīng)該是64x64px。e、字體大小

Android標(biāo)準(zhǔn)中的要求如下：

前面提到Android開(kāi)發(fā)中的字號(hào)單位是sp，而換算關(guān)系是sp*ppi/160=px。所以720x1280尺寸的設(shè)計(jì)稿上，字體大小可選擇為24px、28px、32px、36px，主要根據(jù)文字的重要程度來(lái)選擇，特殊情況下也可能選擇更大或更小的字體。f、其他尺寸要求

通常把48dp作為可觸摸的UI元件的標(biāo)準(zhǔn)。

為什么要用48dp呢一般來(lái)說(shuō)，48dp轉(zhuǎn)化為一個(gè)物理尺寸約9毫米。通常建議目標(biāo)大小為7-10毫米，以方便用戶(hù)手指能準(zhǔn)確并且舒適觸摸目標(biāo)區(qū)域。

如果你設(shè)計(jì)的元素高和寬至少48dp，你就可以保證：

〔1〕觸摸目標(biāo)絕不會(huì)比建議的最低目標(biāo)〔7mm〕小，無(wú)論在什么屏幕上顯示。

〔2〕在整體信息密度和觸摸目標(biāo)大小之間取得了一個(gè)很好的平衡。

另外，每個(gè)UI元素之間的空白通常是8dp。5、背景圖密度ldpimdpihdpixhdpi分辨率480*320px800*460px1280*720px6、png圖在線(xiàn)工具在線(xiàn)自動(dòng)生成.9png圖的Android設(shè)計(jì)切圖工具推薦\o"在線(xiàn)自動(dòng)生成.9png圖"://romannurik.github.io/AndroidAssetStudio/nine-patches.html二、iOS篇1、分辨率iPhone界面尺寸：320×480、640×960、640×1136

iPad界面尺寸：1024×768、2048×1536

〔以上單位都是像素，至于分辨率一般網(wǎng)頁(yè)UI和移動(dòng)UI基本上都只要72ppi〕2、單位換算px、pt這里需要先區(qū)分pt、px，pt(磅值)是物理長(zhǎng)度單位，指的是72分之一英寸。手機(jī)上看來(lái)同一大小的字磅值是一樣的，但是換算成不同分辨率手機(jī)的字號(hào)px值不一樣?！瞤x=pt*ppi/72〕iPhone在出retina屏(也就是4S)之前的屏幕像素是320x480px，屏幕密度是163ppi，4S的屏幕像素是640x960px，屏幕密度是326ppi，翻了一倍。iPhone5的ppi沒(méi)有變化，兼容性方面要增加類(lèi)似首屏畫(huà)面等程序上的判斷。在iPhone界面上元素的定位、尺寸是通過(guò)一個(gè)單位point，而非px，屏幕上固定有320x480pt，retina屏兩倍的分辨率改變的只是pt和px之間的比例而已，這樣就能實(shí)現(xiàn)不改變程序，只上傳兩套圖片就兼容兩個(gè)分辨率。在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套，尺寸按自己的手機(jī)尺寸來(lái)設(shè)計(jì)，比較方便預(yù)覽效果，一般用640×960或者640×1136的尺寸設(shè)計(jì)。其中設(shè)計(jì)稿的畫(huà)布分辨率設(shè)為默認(rèn)的72ppi〔此時(shí)1px=1pt〕，所以設(shè)計(jì)師可以統(tǒng)一采用px為單位。開(kāi)發(fā)拿到設(shè)計(jì)稿時(shí)，將上面標(biāo)注的以px為單位的字號(hào)大小、圖像尺寸除以2，就是非retina屏上的pt值，這樣在retina屏上也可以根據(jù)此pt值換算對(duì)應(yīng)的px大小，以確保不同的分辨率下有適宜的效果。3、基本元素的尺寸設(shè)置iPhone的APP界面一般由四個(gè)元素組成，分別是：狀態(tài)欄、導(dǎo)航欄、主菜單欄以及中間的內(nèi)容區(qū)域。這里取用640×960的尺寸設(shè)計(jì)，那我們就說(shuō)說(shuō)在這個(gè)尺寸下這些元素的尺寸：

狀態(tài)欄：就是我們經(jīng)常說(shuō)的信號(hào)、運(yùn)營(yíng)商、電量等顯示手機(jī)狀態(tài)的區(qū)域，其高度為：40px

導(dǎo)航欄：顯示當(dāng)前界面的名稱(chēng)，包含相應(yīng)的功能或者頁(yè)面間跳轉(zhuǎn)的按鈕，其高度為：88px

主菜單欄：類(lèi)似于頁(yè)面的主菜單，提供整個(gè)應(yīng)用的分類(lèi)內(nèi)容的快速跳轉(zhuǎn)，其高度為：98px

內(nèi)容區(qū)域：展示應(yīng)用提供的相應(yīng)內(nèi)容，整個(gè)應(yīng)用中布局變更最為頻繁的，其高度為：734px=960-40-88-98

以上尺寸適用于iPhone4、4S，iPhone5/5s的640×11136的尺寸，其實(shí)就是中間的內(nèi)容區(qū)域高度增加到：910px，其他尺寸也同上。4、常用圖像、圖標(biāo)大小〔來(lái)自官方標(biāo)準(zhǔn)文檔〕5、字體大小iOS交互設(shè)計(jì)標(biāo)準(zhǔn)文檔上，對(duì)字體大小沒(méi)有做嚴(yán)格的數(shù)值規(guī)定，只提供了一些指導(dǎo)原那么：

單位：點(diǎn)pt

–即便用戶(hù)選擇了最小文字大小，文字也不應(yīng)小于22點(diǎn)。作為對(duì)照，正文樣式在大字號(hào)下使用34點(diǎn)字體大小作為默認(rèn)文字大小設(shè)置。

–通常來(lái)說(shuō)，每一檔文字大小設(shè)置的字體大小和行間距的差異