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

1、移動應(yīng)用的界面設(shè)計(jì)畫布尺寸設(shè)計(jì)多大（特別是Android）、圖標(biāo)和字體大小怎么定、需要設(shè)計(jì)多套設(shè)計(jì)稿么、如何切圖以配合開發(fā)的實(shí)現(xiàn)？本篇將結(jié)合iOS和android官方的設(shè)計(jì)規(guī)范、搜集的資料以及工作中的摸索，來分享移動應(yīng) 用界面設(shè)計(jì)中的尺寸規(guī)范等問題，希望能給移動端的新手設(shè)計(jì)師些許指引。若有不當(dāng)之處， 歡迎斧正。一、android 篇1、android分辨率屏幕尺寸指實(shí)際的物理尺寸，為屏幕對角線的測量。為了簡單起見，Android把實(shí)際屏幕尺寸分為四個(gè)廣義的大?。盒。?，大，特大。像素（PX）代表屏幕上一個(gè)物理的像素點(diǎn)代表屏幕上一個(gè)物理的像素點(diǎn)。屏幕密度為解決Android設(shè)備碎片化，引入一個(gè)

2、概念 DP,也就是密度。指在一定尺寸的物理屏幕上顯示像素的數(shù)量，通常指分辨率。為了簡單起見，Android把屏幕密度分為了四個(gè)廣義的顯示像素的數(shù)量，通常指分辨率。大?。旱停?20dpi）、中（160dpi）、高（240dpi）和超高（320dpi）像素=DP * （ DPI / 160 ）例如，在一個(gè)240dpi的屏幕里，1DP等于1.5PX。（尺寸的選取依據(jù)打算適配于設(shè)計(jì)來說，選取一個(gè)合適的尺寸作為正常大小和中等屏幕密度 的硬件，建議參考現(xiàn)主流硬件分辨率），然后向下和向上 做小、大、特大和低、高、超高的 尺寸與密度。（尺寸的選取依據(jù)打算適配典型的設(shè)計(jì)尺寸? 320dp： 一個(gè)普通的手機(jī)屏幕（

3、240X320 , 320 480, 480X800 ）? 480dp： 一個(gè)中間平板電腦像（480 800）? 600dp： 7 寸平板電腦（600 M024）? 720dp： 10 寸平板電腦（720X1280, 800 M280）Android SDK模擬機(jī)的尺寸屏幕大小低密度(120) ldpx中等密度（160） 屏幕大小低密度(120) ldpx中等密度（160） mdpi高密度（240） hdpi超高密度（320）xhdpi小屏QVGA (240小屏QVGA (240X320)480X640普通WQVGA400 (240X400)屏幕WQVGA432 (240 X432)HVGA

4、(320X480)WVGA800 (480 普通WQVGA400 (240X400)屏幕WQVGA432 (240 X432)HVGA (320X480)WVGA800 (480 X800)WVGA854 (480 X854) 600X1024640X960大屏WVGA800 * (480X800)WVGA800 * (480X800) WVGA854WVGA854 * (480X854)* WVGA854 * (480X854)* (480X854) 600X1024超大屏幕1024X6001024X 768 1280 X768WXGA1536X 1152 超大屏幕1024X6001024X

5、 768 1280 X768WXGA1536X 1152 1920X11522048X1536(1280X 800)1920X12002560X1600注意，ppi、dpi是密度單位，不是度量單位：* ppi （pixels per inch）:圖像分辨率（在圖像中，每英寸所包含的像素?cái)?shù)目）* dpi （dots per inch）:打印分辨率（每英寸所能打印的點(diǎn)數(shù)，即打印精度）dpi主要應(yīng)用于輸出，重點(diǎn)是打印設(shè)備上；ppi對于設(shè)計(jì)師應(yīng)該比較熟悉，photoshop畫布的分辨率常設(shè)置為72像素/英寸，這個(gè)單位其實(shí)就是ppi。盡管概念不同，但是對于移動設(shè)備的顯示屏，可以看作 ppi=dpi 。p

6、pi的運(yùn)算方式是：PPI = 彳長度像素?cái)?shù)2 +寬度像素?cái)?shù)2） /屏幕對角線英寸數(shù)。即：長、 寬各自平方之和的開方，再除以屏幕對角線的英寸數(shù)。以 iphone5 為例，其 ppi= V（1136Px2 + 640Px2） /4 in=326ppi （視網(wǎng)膜 Retina 屏）對于android手機(jī)，一個(gè)不確切的分法是，720 x 1280的手機(jī)很可能接近 320 dpi （xhdpi模式），480 x 800的手機(jī)很可能接近240 dpi （ hdpi模式），而320 x 480的手機(jī)則很接近160 dpi （mdpi 模式）。2、單位換算方法android開發(fā)中，文字大小的單位是sp,非文字

7、的尺寸單位用dp,但是我們在設(shè)計(jì)稿用的單位是px。這些單位如何換算，是設(shè)計(jì)師、開發(fā)者需要了解的關(guān)鍵。dp : Density-independent pixels ,以 160PPI 屏幕為標(biāo)準(zhǔn)，貝U 1dp=1px。dp 和 px 的換算公式 ： dp*ppi/160 = px 。對于 320ppi 的屏幕，1dp x 320ppi/160 = 2px。sp： Scale-independent pixels,它是安卓的字體單位，以160PPI屏幕為標(biāo)準(zhǔn)，當(dāng)字體大小為 100% 時(shí)，1sp=1px。sp 與 px 的換算公式：sp*ppi/160 = px 。對于 320ppi 的屏幕，1s

8、p x320ppi/160 = 2px。簡單理解的話，px （像素）是我們 UI設(shè)計(jì)師在PS里使用的，同時(shí)也是手機(jī)屏幕上所顯示 的，dp是開發(fā)寫layout的時(shí)候使用的尺寸單位。為什么要把sp和dp代替px?原因是他們不會因?yàn)閜pi的變化而變化，在相同物理尺寸和不同ppi下，他們呈現(xiàn)的高度大小是相同。也就是說更接近物理呈現(xiàn)，而px則不行。根據(jù)單位換算方法，可總結(jié)出：當(dāng)運(yùn)行在mdpi下時(shí)，1dp=1px :也就是說設(shè)計(jì)師在 PS里定義一個(gè)item高48px,開發(fā)就會 定義該item高48dp ;當(dāng)運(yùn)行在hdpi模式下時(shí)，1dp=1.5px :也就是說設(shè)計(jì)師在PS里定義一個(gè)item高72px,開發(fā)

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

10、慢且耗費(fèi)流量較多，對于小分辨率的用戶也不夠好。結(jié)合友盟的分辨率占比數(shù)據(jù)、也為了方便換算到android開發(fā)中的尺寸單位，推薦設(shè)計(jì)稿的畫布尺寸選用 720X1280 ,分辨率仍舊為 72Ppi （像素/英寸）。在android規(guī)范中對于導(dǎo)航欄、工具欄等的尺寸沒有明確的規(guī)定。但根據(jù) 48dp原則，以及 一些主流的android應(yīng)用的截圖分析，總結(jié)一下尺寸要求：狀態(tài)欄高度：50 px導(dǎo)航欄、操作欄高度：96 px=48dp x 2主菜單欄高度：96 px內(nèi)容區(qū)域高度：1038 px （1280-50-96-96=1038 ）Android最近出的手機(jī)都幾乎去掉了實(shí)體鍵，把功能鍵移到了屏幕中，高度也和

11、菜單欄一樣為：96 px4、圖標(biāo)和字體大小（來自官方規(guī)范文檔） a、啟動圖標(biāo)（home頁或app列表頁） 整體大小為 48 x 48 dpb、b、操作欄圖標(biāo)，代表用戶在app中可以使用到的最重要的圖標(biāo)整體大小為32 x 32 dp ,圖形實(shí)際區(qū)域?yàn)?24 x 24 dp密度ldpimdpihdpixhdpi分辨率36*36px48*48px72*72px96*96px0 o 0toto密度ldpimdpihdpixhdpi實(shí)際區(qū)域分辨率24*24px36*36px48*48px整體大小分辨率32*32px48*48px64*64pxc、小圖標(biāo)/場景圖標(biāo)，提供操作或特定項(xiàng)目的狀態(tài)。比如gmail

12、 app的星型標(biāo)記、一些內(nèi)容展開收起用到的向下向上的圖標(biāo)等。dp ,圖形實(shí)際區(qū)域?yàn)?12 x 12 dp 。整體大小為16 整體大小為16 x 16密度ldpimdpihdpixhdpi實(shí)際區(qū)域分辨率12*12px18*18px24*24px整體大小分辨率16*16px24*24px32*32pxd、通知圖標(biāo)如果app有通知，要提供一個(gè)有新通知時(shí)顯示在狀態(tài)欄的通知圖標(biāo)。整體大小為24 x 24 dp ,圖形實(shí)際區(qū)域?yàn)?22 x 22 dp 。密度ldpimdpihdpixhdpi實(shí)際區(qū)域分辨率22*22px33*33px44*44px整體大小分辨率24*24px36*36px48*48px注：

13、android規(guī)范提供的尺寸單位是 dp,若設(shè)計(jì)稿尺寸設(shè)為 720 x 1280 ,圖標(biāo)大小需在規(guī)范 要求的尺寸數(shù)字上乘以 2。比如操作欄圖標(biāo) 32 x 32 dp ,則設(shè)計(jì)稿上應(yīng)該是 64 x 64 px 。 e、字體大小Android規(guī)范中的要求如下：12Text Size Micro12Text Size SmallText Size Medium16sText Size Medium16sText Size Large前面提到Android開發(fā)中的字號單位是 sp,而換算關(guān)系是 sp*ppi/160 = px。所以720 x 1280尺寸的設(shè)計(jì)稿上，字體大小可選擇為24px、28px、

14、32px、36px ,主要根據(jù)文字的重要程度來選擇，特殊情況下也可能選擇更大或更小的字體。f、其他尺寸要求通常把48dp作為可觸摸的 UI元件的標(biāo)準(zhǔn)。Single list item為什么要用7-10毫米，48dp呢？ 一般來說，48dp轉(zhuǎn)化為一個(gè)物理尺寸約 為什么要用7-10毫米，如果你設(shè)計(jì)的元素高和寬至少48dp,你就可以保證：（1）觸摸目標(biāo)絕不會比建議的最低目標(biāo)（ 7mm）小，無論在什么屏幕上顯示。（2）在整體信息密度和觸摸目標(biāo)大小之間取得了一個(gè)很好的平衡。另外，每個(gè)UI元素之間的空白通常是 8dp 。5、背景圖密度ldpimdpihdpixhdpi分辨率480*320px800*460

15、px1280*720px6、png圖在線工具在線自動生成.9png圖的Android設(shè)計(jì)切圖工具推薦 HYPERLINK http:/romannurik.github.io/AndroidAssetStudio/nine-patches.html http:/romannurik.github.io/AndroidAssetStudio/nine-patches.html二、iOS 篇1、分辨率iPhone 界面尺寸：320X80、640 960、640M136iPad 界面尺寸：1024 X768、2048 M536（以上單位都是像素，至于分辨率一般網(wǎng)頁UI和移動UI基本上都只要 72 p

16、pi）2、單位換算px、pt這里需要先區(qū)分pt、px, pt（磅值）是物理長度單位，指的是 72分之一英寸。手機(jī)上看來同一 大小的字磅值是一樣的，但是換算成不同分辨率手機(jī)的字號px值不一樣。（px=pt*ppi/72 ）iPhone在出retina屏（也就是4S）之前的屏幕像素是 320 x480px ,屏幕密度是163ppi, 4s的屏 幕像素是640 x960px,屏幕密度是 326ppi,翻了一倍。iPhone5的ppi沒有變化，兼容性方 面要增加類似首屏畫面等程序上的判斷。在iPhone界面上元素的定位、尺寸是通過一個(gè)單位 point,而非px,屏幕上固定有 320 x480pt,re

17、tina屏兩倍的分辨率改變的只是pt和px之間的比例而已，這樣就能實(shí)現(xiàn)不改變程序，只上傳兩套圖片就兼容兩個(gè)分辨率。在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套，尺寸按自己的手機(jī)尺寸來設(shè)計(jì)，比較方便預(yù)覽效果，一般用 640X960或者640X1136的尺寸設(shè)計(jì)。其中設(shè)計(jì)稿的畫布分辨率設(shè)為默認(rèn)的 72Ppi （此時(shí)1px=1pt ）,所以設(shè)計(jì)師可以統(tǒng)一采用px為單位。開發(fā)拿到設(shè)計(jì)稿時(shí)，將上面標(biāo)注的以px為單位的字號大小、圖像尺寸除以 2,就是非retina屏上的pt值，這樣在retina屏上也可以根據(jù)此 pt值換算又應(yīng)的px大小，以確保不同的分辨 率下有合適的效果。3、基本元素的尺寸設(shè)置iPhone的AP

18、P界面一般由四個(gè)元素組成，分別是：狀態(tài)欄、導(dǎo)航欄、主菜單欄以及中間的內(nèi)容區(qū)域。這里取用640X960的尺寸設(shè)計(jì)，那我們就說說在這個(gè)尺寸下這些元素的尺寸： TOC o 1-5 h z 狀態(tài)欄：就是我們經(jīng)常說的信號、運(yùn)營商、電量等顯示手機(jī)狀態(tài)的區(qū)域，其高度為：40 px導(dǎo)航欄：顯示當(dāng)前界面的名稱，包含相應(yīng)的功能或者頁面間跳轉(zhuǎn)的按鈕，其高度為：88 px主菜單欄：類似于頁面的主菜單，提供整個(gè)應(yīng)用的分類內(nèi)容的快速跳轉(zhuǎn)，其高度為：98 px內(nèi)容區(qū)域：展示應(yīng)用提供的相應(yīng)內(nèi)容，整個(gè)應(yīng)用中布局變更最為頻繁的，其高度為：734px=960-40-88-98以上尺寸適用于 iPhone 4、4S, iPhone5

19、/5s的640X11136的尺寸，其實(shí)就是中間的內(nèi)容區(qū)域高度增加到：910 px,其他尺寸也同上。4、常用圖像、圖標(biāo)大?。▉碜怨俜揭?guī)范文檔）Ji朗率PPI弒總欄高度導(dǎo)航欄冷度標(biāo)釜欄后層iPbOnetpluE設(shè)it 版1342x2208 pw401Ppi60px132px147pK匹h澗曲plu激大版11252001 px401PPI54K132px147|Wi戶弼!現(xiàn)版10801920px401PPI54px132px146pxiPtione6750m13Mpx326PPi40pxSSpx98pxiPhoneS - 5C - 5S640 xim p 常326PFIB8px邨p舅b iPhone

20、4 - 45M0w 96G px32appI40pBSpxiPhCjrie & iPad TL史二陞二 Si三代320480 px1G3PFI2Opx44PM49PseiPhone & iPod Touch第一代、第二代、第三代iPhone4 - iPhone4SPhone5x 5C、5S-1080 px-Phone6 Puls 物理魴Phone6 Plus 設(shè)計(jì)版設(shè)備App Store程序由用主屏罄Spotlight 搜索標(biāo)簽欄工具欄和導(dǎo)航欄.iPhone6 Plus (O3x)1U24X1U24 px18Ux1$U px114x114 px87x87 px75x75 px66*60 px_

21、 Phone6 (2x)1024xl024px120 x120 px114x114 px58x58 px75x75 px44x44 px_ iPhone5 - 5C - 5S (2x)1024x1024 px120 x120 px114x114 pxS8xS8px75x75 px44x44 pxiPhone4 - 4S (2x)1024x1024 px120 x120 px114x114 px58xS8px75x75 px44x44 pxiPhone & iPod Touchj|-K. e笠二代, 龕三代1024x1024 px120 x120 px57x57 px29x29 px38x38

22、px30 x 30 pxIPad1、ipad設(shè)計(jì)尺寸30 px32 px-34Px30px32 Px注釋24Px24 Px28Px-lC24px15、字體大小iOS交互設(shè)計(jì)規(guī)范文檔上，對字體大小沒有做嚴(yán)格的數(shù)值規(guī)定，只提供了一些指導(dǎo)原則：單位：點(diǎn) pt-即便用戶選擇了最小文字大小，文字也不應(yīng)小于 22點(diǎn)。作為對照，正文樣式在大字號下使用34點(diǎn)字體大小作為默認(rèn)文字大小設(shè)置。-通常來說，每一檔文字大小設(shè)置的字體大小和行間距的差異是2點(diǎn)。例外情況是兩個(gè)標(biāo)題樣式，在最小、小和中等設(shè)置時(shí)都使用相同字體大小、行間距和字間距。-在最小的三種文字大小中，字間距相對寬闊；在最大的三種文字大小中， 字間距相對緊密

23、。-標(biāo)題和正文樣式使用一樣的字體大小。為了將其和正文樣式區(qū)分，標(biāo)題樣式使用加粗效果。-導(dǎo)航控制器中的文字使用和大號的正文樣式文字大?。鞔_來說，是34點(diǎn)）。-文本通常使用常規(guī)體和中等大小，而不是用細(xì)體和粗體。百度用戶體驗(yàn)做過的一個(gè)小調(diào)查：單位：像素IPad1、ipad設(shè)計(jì)尺寸30 px32 px-34Px30px32 Px注釋24Px24 Px28Px-lC24px15、字體大小iOS交互設(shè)計(jì)規(guī)范文檔上，對字體大小沒有做嚴(yán)格的數(shù)值規(guī)定，只提供了一些指導(dǎo)原則：單位：點(diǎn) pt-即便用戶選擇了最小文字大小，文字也不應(yīng)小于 22點(diǎn)。作為對照，正文樣式在大字號下使用34點(diǎn)字體大小作為默認(rèn)文字大小設(shè)置。-

24、通常來說，每一檔文字大小設(shè)置的字體大小和行間距的差異是2點(diǎn)。例外情況是兩個(gè)標(biāo)題樣式，在最小、小和中等設(shè)置時(shí)都使用相同字體大小、行間距和字間距。-在最小的三種文字大小中，字間距相對寬闊；在最大的三種文字大小中， 字間距相對緊密。-標(biāo)題和正文樣式使用一樣的字體大小。為了將其和正文樣式區(qū)分，標(biāo)題樣式使用加粗效果。-導(dǎo)航控制器中的文字使用和大號的正文樣式文字大?。鞔_來說，是34點(diǎn)）。-文本通常使用常規(guī)體和中等大小，而不是用細(xì)體和粗體。百度用戶體驗(yàn)做過的一個(gè)小調(diào)查：單位：像素px還有個(gè)方法就是找你覺得好的APP應(yīng)用，手機(jī)截圖后放進(jìn)PS自己對比調(diào)節(jié)字體大小。長文本26Px短文本28pxApp Store(Retina)44 P*iPhcnef