移動應用介面設計的尺寸設定及規範
轉自：http://jinjuan.me/appdesign-sizesetting/?utm_source=tuicool
本篇將結合iOS和android官方的設計規範、蒐集的資料以及工作中的摸索，來分享移動應用介面設計中的尺寸規範等問題，希望能給移動端的新手設計師些許指引。若有不當之處，歡迎斧正。
一、android篇
1、android解析度
Android的多解析度，一向是設計師和開發者非常頭疼的事兒。儘管如此，對於多分辨造成的複雜問題，也是大家要優先解決的。Android支援多種不同的dpi模式：ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi
注意，ppi、dpi 是密度單位，不是度量單位 ：
* ppi (pixels per inch)：影象解析度 （在影象中，每英寸所包含的畫素數目）
* dpi (dots per inch)： 列印解析度 （每英寸所能列印的點數，即列印精度）
dpi主要應用於輸出，重點是列印裝置上；ppi對於設計師應該比較熟悉，photoshop畫布的解析度常設定為72畫素/英寸，這個單位其實就是ppi 。儘管概念不同，但是對於移動裝置的顯示屏，可以看作ppi=dpi 。
ppi的運算方式是：PPI = √（長度畫素數² + 寬度畫素數²） / 螢幕對角線英寸數。即：長、寬各自平方之和的開方，再除以螢幕對角線的英寸數。
以iphone5為例，其ppi=√（1136px² + 640px²）/4 in=326ppi（視網膜Retina屏）
對於android手機，一個不確切的分法是，720 x 1280 的手機很可能接近 320 dpi （xhdpi模式），480 x 800 的手機很可能接近 240 dpi （hdpi模式），而320 x 480 的手機則很接近 160 dpi（mdpi模式）。
來自友盟指數2014年3月份的資料（戳這裡看最新資料）：
480 x 800的手機佔比最高為31.9%，720 x 1280的手機佔比為16.5%位居第二，而240 x 320的手機佔比最少為1.0% 。xxdhpi模式的高解析度1080 x 1920手機佔比也越來越高，目前為6.1% 。
2、單位換算方法
android開發中，文字大小的單位是sp，非文字的尺寸單位用dp，但是我們在設計稿用的單位是px。這些單位如何換算，是設計師、開發者需要了解的關鍵。
* dp：Density-independent pixels，以160PPI螢幕為標準，則1dp=1px。dp和px的換算公式 ：dp*ppi/160 = px。對於320ppi的螢幕，1dp x 320ppi/160 = 2px。
* sp：Scale-independent pixels，它是安卓的字型單位，以160PPI螢幕為標準，當字型大小為 100%時， 1sp=1px。sp 與 px 的換算公式：sp*ppi/160 = px。對於320ppi的螢幕，1sp x 320ppi/160 = 2px。
簡單理解的話，px（畫素）是我們UI設計師在PS裡使用的，同時也是手機螢幕上所顯示的，dp是開發寫layout的時候使用的尺寸單位。
為什麼要把sp和dp代替px？原因是他們不會因為ppi的變化而變化，在相同物理尺寸和不同ppi下，他們呈現的高度大小是相同。也就是說更接近物理呈現，而px則不行。
根據單位換算方法，可總結出：
當執行在mdpi下時，1dp=1px ：也就是說設計師在PS裡定義一個item高48px，開發就會定義該item高48dp ；
當執行在hdpi模式下時，1dp=1.5px ：也就是說設計師在PS裡定義一個item高72px，開發就會定義該item高48dp ；
當執行在xhdpi模式下時，1dp=2px ：也就是說設計師在PS裡定義一個item高96px，開發就會定義該item高48dp ；
當你的app需要適配多個dpi模式的時候，請參考圖1的比例進行換算 。
3、設計稿基本元素的尺寸設定
為了適應多解析度的手機，理想的方式是為每種解析度做一套設計稿，包括所用到的icon、設計稿標註等。但在實際開發中，這種方法耗時耗力。所以通常會選擇折中的方法。
方法一：在標準基礎上（比如xhdpi）開始，然後放大或縮小，以適應到其他尺寸。不足之處是，對於更高解析度的手機，圖示被放大後會導致質量不高。
方法二：以最高解析度為基準設計，然後縮小適應到所需的小解析度上。缺點是，圖示等若都最大尺寸，載入時速度慢且耗費流量較多，對於小解析度的使用者也不夠好。
結合友盟的解析度佔比資料、也為了方便換算到android開發中的尺寸單位，推薦設計稿的畫布尺寸選用 720X1280 ，解析度仍舊為72ppi（畫素/英寸）。
在android規範中對於導航欄、工具欄等的尺寸沒有明確的規定。但根據48dp原則，以及一些主流的android應用的截圖分析，總結一下尺寸要求：
狀態列高度：50 px
導航欄、操作欄高度：96 px=48dp x 2
主選單欄高度：96 px
內容區域高度：1038 px （1280-50-96-96=1038）
Android最近出的手機都幾乎去掉了實體鍵，把功能鍵移到了螢幕中，高度也和選單欄一樣為：96 px
4、圖示和字型大小（來自官方規範文件）
a、啟動圖示（home頁或app列表頁）
整體大小為48 x 48 dp
b、操作欄圖示，代表使用者在app中可以使用到的最重要的圖示
整體大小為32 x 32 dp ，圖形實際區域為 24 x 24 dp
c、小圖示/場景圖示，提供操作或特定專案的狀態。
比如gmail app的星型標記、一些內容展開收起用到的向下向上的圖示等。整體大小為16 x 16 dp ，圖形實際區域為 12 x 12 dp 。
d、通知圖示
如果app有通知，要提供一個有新通知時顯示在狀態列的通知圖示。整體大小為24 x 24 dp ，圖形實際區域為 22 x 22 dp 。
注：android規範提供的尺寸單位是dp，若設計稿尺寸設為720 x 1280 ，圖示大小需在規範要求的尺寸數字上乘以2。比如操作欄圖示32 x 32 dp ，則設計稿上應該是64 x 64 px 。
e、字型大小
Android規範中的要求如下：
前面提到Android開發中的字號單位是sp，而換算關係是 sp*ppi/160 = px 。所以720 x 1280尺寸的設計稿上，字型大小可選擇為 24px 、28px 、32px 、36px ，主要根據文字的重要程度來選擇，特殊情況下也可能選擇更大或更小的字型。
f、其他尺寸要求
通常把48dp作為可觸控的UI元件的標準。
為什麼要用48dp呢？一般來說，48dp轉化為一個物理尺寸約9毫米。通常建議目標大小為7-10毫米，以方便使用者手指能準確並且舒適觸控目標區域。
如果你設計的元素高和寬至少48dp，你就可以保證：
（1）觸控目標絕不會比建議的最低目標（7mm）小，無論在什麼螢幕上顯示。
（2）在整體資訊密度和觸控目標大小之間取得了一個很好的平衡。
另外，每個UI元素之間的空白通常是8dp 。
5、一點疑問供探討
在720 x 1280 px 的設計稿上，有兩個按鈕（比如登入、註冊）並排一行放置，尺寸均為320 x 80 px ，換算為android開發單位就是 160 x 40 dp 。
根據前面的計算方式，如果顯示在 480 x 800的手機上，反過來換算為px尺寸就是 240 x 60 px ，此時兩個按鈕排放在一行，剛好是480px=螢幕橫向尺寸，鋪滿了整行，顯然顯示效果並不合適。
如果遇到這種情況，如何做呢？諮詢android開發工程師，得到的答案是可能需要做自適應處理，不過目前他們都是寫固定的dp值。所以我想設計師是否也需要考慮——在基準解析度下設定的尺寸換算在其他解析度下，是否也能優雅顯示？
二、iOS篇
1、解析度
iPhone 介面尺寸：320×480、640×960、640×1136
iPad 介面尺寸：1024×768、2048×1536
（以上單位都是畫素，至於解析度一般網頁UI和移動UI基本上都只要 72 ppi）
2、單位換算px、pt
這裡需要先區分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之間的比例而已，這樣就能實現不改變程式，只上傳兩套圖片就相容兩個解析度。
在設計的時候並不是每個尺寸都要做一套，尺寸按自己的手機尺寸來設計，比較方便預覽效果，一般用 640×960 或者 640×1136 的尺寸設計。其中設計稿的畫布解析度設為預設的72ppi（此時1px=1pt ），所以設計師可以統一採用px為單位。
開發拿到設計稿時，將上面標註的以px為單位的字號大小、影象尺寸除以2，就是非retina屏上的pt值，這樣在retina屏上也可以根據此pt值換算對應的px大小，以確保不同的解析度下有合適的效果。
3、基本元素的尺寸設定
iPhone的APP介面一般由四個元素組成，分別是：狀態列、導航欄、主選單欄以及中間的內容區域。
這裡取用 640×960 的尺寸設計，那我們就說說在這個尺寸下這些元素的尺寸：
狀態列：就是我們經常說的訊號、運營商、電量等顯示手機狀態的區域，其高度為：40 px
導航欄：顯示當前介面的名稱，包含相應的功能或者頁面間跳轉的按鈕，其高度為：88 px
主選單欄：類似於頁面的主選單，提供整個應用的分類內容的快速跳轉，其高度為：98 px
內容區域：展示應用提供的相應內容，整個應用中佈局變更最為頻繁的，其高度為：734 px=960-40-88-98
以上尺寸適用於 iPhone 4、4S，iPhone5/5s 的 640×11136 的尺寸，其實就是中間的內容區域高度增加到：910 px，其他尺寸也同上。
4、常用影象、圖示大小（來自官方規範文件）
單位：畫素
5、字型大小
iOS互動設計規範文件上，對字型大小沒有做嚴格的數值規定，只提供了一些指導原則：
單位：點pt
– 即便使用者選擇了最小文字大小，文字也不應小於 22 點。作為對照，正文樣式在大字號下使用 34 點字型大小作為預設文字大小設定。
– 通常來說，每一檔文字大小設定的字型大小和行間距的差異是 2 點。例外情況是兩個標題樣式，在最小、小和中等設定時都使用相同字型大小、行間距和字間距。
– 在最小的三種文字大小中，字間距相對寬闊；在最大的三種文字大小中，字間距相對緊密。
– 標題和正文樣式使用一樣的字型大小。為了將其和正文樣式區分，標題樣式使用加粗效果。
– 導航控制器中的文字使用和大號的正文樣式文字大小（明確來說，是 34 點）。
– 文字通常使用常規體和中等大小，而不是用細體和粗體。
百度使用者體驗做過的一個小調查：
單位：畫素px
還有個方法就是找你覺得好的APP應用，手機截圖後放進PS自己對比調節字型大小。
三、如果android、iOS同時開發，設計稿尺寸設定多大呢？
可採用iPhone的尺寸 640 x 960 px設計，用於Android開發時，將其解析度看作320ppi（xhdpi模式），再採用上文的方法進行換算、設定尺寸。