移動應用界面設計的尺寸規(guī)范

...wd......wd......wd...移動應用的界面設計畫布尺寸設計多大〔特別是Android〕、圖標和字體大小怎么定、需要設計多套設計稿么、如何切圖以配合開發(fā)的實現(xiàn)

本篇將結(jié)合iOS和android官方的設計標準、搜集的資料以及工作中的摸索，來分享移動應用界面設計中的尺寸標準等問題，希望能給移動端的新手設計師些許指引。假設有不當之處，歡迎斧正。一、android篇1、android分辨率屏幕尺寸指實際的物理尺寸，為屏幕對角線的測量。

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

像素=DP*〔DPI/160)

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

?

320dp：一個普通的手機屏幕〔240X320，320×480，480X800〕

?

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

?

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

?

720dp：10寸平板電腦〔720×1280，800×1280〕AndroidSDK模擬機的尺寸屏幕大小低密度〔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)：圖像分辨率〔在圖像中，每英寸所包含的像素數(shù)目〕

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

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

*dp：Density-independentpixels，以160PPI屏幕為標準，那么1dp=1px。dp和px的換算公式：dp*ppi/160=px。對于320ppi的屏幕，1dpx320ppi/160=2px。

*sp：Scale-independentpixels，它是安卓的字體單位，以160PPI屏幕為標準，當字體大小為100%時，1sp=1px。sp與px的換算公式：sp*ppi/160=px。對于320ppi的屏幕，1spx320ppi/160=2px。

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

當運行在mdpi下時，1dp=1px：也就是說設計師在PS里定義一個item高48px，開發(fā)就會定義該item高48dp；

當運行在hdpi模式下時，1dp=1.5px：也就是說設計師在PS里定義一個item高72px，開發(fā)就會定義該item高48dp；

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

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

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

導航欄、操作欄高度：96px=48dpx2

主菜單欄高度：96px

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

Android最近出的手機都幾乎去掉了實體鍵，把功能鍵移到了屏幕中，高度也和菜單欄一樣為：96px4、圖標和字體大小〔來自官方標準文檔〕a、啟動圖標〔home頁或app列表頁〕

整體大小為48x48dp

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

整體大小為32x32dp，圖形實際區(qū)域為24x24dp

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

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

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

如果app有通知，要提供一個有新通知時顯示在狀態(tài)欄的通知圖標。整體大小為24x24dp，圖形實際區(qū)域為22x22dp。

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

Android標準中的要求如下：

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

通常把48dp作為可觸摸的UI元件的標準。

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

如果你設計的元素高和寬至少48dp，你就可以保證：

〔1〕觸摸目標絕不會比建議的最低目標〔7mm〕小，無論在什么屏幕上顯示。

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

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

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

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

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

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

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

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

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

單位：點pt

–即便用戶選擇了最小文字大小，文字也不應小于22點。作為對照，正文樣式在大字號下使用34點字體大小作為默認文字大小設置。

–通常來說，每一檔文字大小設置的字體大小和行間距的差異