移動端APP~最新UI界面設計規範（尺寸大小篇）|UI|教程|Fiona雲和月

2016年即將過去，回顧過去的一年有喜有悲，有得有失。

設計這條路我堅定不移的走下來了，希望自己可以有更大的進步，2016年最後一天，發布這個作品。

回到正題。。。

相信在各個網站裡面關於界面設計規範的文章多如牛毛，這篇文章也算是一個小小的總結吧，也希望能夠幫到一部分人，讓一部分人先看到~~文筆有限，請酷友各種包涵。

廢話不多說，現在進入正題。。

智能手機如今已經完完全全的改變了我們的生活，身邊的很多人都變成了低頭族（沉默一族），缺少交流，生活都無趣了，不過後來仔細想想，有趣的人依然有趣，無趣的人玩著手機，好吧，我真的不是故意要扯的，不要轉移視線，現在真的要進入主題了。。。

俗話說，沒有規矩不成方圓，所以手機界面的規範真的是著實重要！

Android的界面尺寸規範

首先看一張圖。

看到這張圖之後，我的內心是拒絕的，難道全都要出一套圖？ No No No,答案當然是否定的

第一代安卓手機出的尺寸是240x320px大小，現在市場上已經沒有這麼小尺寸的手機了，因此這個尺寸我們可以不用考慮，總共的話安卓手機的大小尺寸我們歸為以下五類。

在這裡中屏幕的尺寸大小320x480px目前在市場也已經沒有，不予考慮，因而安卓我們要出三張圖（1.5倍圖、2倍圖和三倍圖），目前主流的我們都是用2倍圖的大小720x1280px尺寸來做界面設計，有需要然後再對另外兩個尺寸的進行適配。

需要注意一個問題，可能會有很多人不明白2倍圖或者3倍圖是怎麼得來的，這裡我們不是用尺寸大小320x80px這些數字來計算的，因為你再怎麼加減乘除，你發現你都無法從1倍圖（320x480px）變成兩倍圖（720x1280）的大小。這裡我們要看的是dpi的大小，也就是上圖中手機模型下面的第一行字，你會很容易發現160dpi就是320dpi的一半，於是它就是兩倍圖。可是160dpi是怎麼得來的呢，這裡我們需要引入一個概念。

像素密度

像素密度是每英寸屏幕上所擁有的點，單位是DPI（dots per inch）。很多人通常會把DPI與PPI(pixels per inch)搞混，甚至模糊使用，DPI表示的是點，PPI是解析度的單位表示的是像素， PS用PPI，1px=0.75dp，而且根據不同解析度，它們之間的換算比例是不一樣的，由上圖可以看出。在安卓版本的切圖中一般要求我們使用單位dp。DPI常使用在印刷行業，即為輸出、列印的解析度，它可以指噴墨列印的墨點，可以指掃描儀的採樣點。既然是由一個個點組成，那我們就有一個公式可以計算出像素密度的大小：像素密度={√（長度像素數^2+寬度像素數^2）}/ 屏幕尺寸。手機的解析度和英寸大小我們都知道，因而根據公式很容易算出像素密度。例如（√（720^2+1280^2））/6=245

好了，問題搞清楚了之後，那麼我們要開始APP的製作了。

圖標尺寸參考：

安卓手機基本尺寸大小

界面：720x1280px

尺寸高度

狀態欄：50px 狀態欄字體：24px

導航欄：96px 導航欄字體：34px 可以大於34px但不能小於34px

導航欄中搜索框：56~60px

主菜單欄：96px 菜單欄圖標下使用字體：22~24px

按鈕最小為44px（手指可觸控範圍），通欄按鈕至少60px

文本框大小為80~88px

彈框遮罩 深色遮罩20%~40%透明度

淺色遮罩40%~60%透明度

文本框之間的間距使用8的倍數，例如8px、40px等

字體使用谷歌開發的微軟雅黑字體，或者思源黑體，英文則用Roboto字體

正文字體大小20~22是最小使用字體，最大不能超過導航欄中的標題字大小，可以等於。根據層級關係，設定字體大小。

IOS的界面尺寸規範

蘋果機同樣也有很多尺寸，如下圖

蘋果的1倍圖是第一代蘋果手機320x480px的大小，現在已經基本不用了。2倍圖有三個尺寸，分別是：640x960px（iphone4/4s）、640x1136px（iphone5/5s）、750x1334px（iphone6/6s），儘管它們的尺寸不同，但計算出來的dpi是相同的，因此有三個2倍圖。3倍圖則是1080x1920px（iphone6plus物理版）、1242x2208px（iphone6plus設計版）。

現在iPhone手機主流的是用750x1334px做設計圖，然後適配到3倍圖的大小。6plus我們要用1242x2208px來做設計，蘋果公司用他們自己的方法再適配到1080x1920px尺寸的大小上，因此蘋果只需要出兩套圖。

圖標尺寸參考：

蘋果手機基本尺寸大小

界面：750x1334px

尺寸高度

狀態欄：40px 狀態欄字體：24px

導航欄：88px 導航欄字體：34px 中等 可以大於34px但不能小於34px

導航欄中搜索框：56~60px

主菜單欄：98px 菜單欄圖標下使用字體：20~24px 常規

按鈕最小為44px（手指可觸控範圍），通欄按鈕至少60px

文本框大小為80~88px

彈框遮罩 深色遮罩20%~40%透明度

淺色遮罩40%~60%透明度

文本框之間的間距使用8的倍數，例如8px、40px等。

蘋果手機的尺寸規範是要嚴格遵守的，而安卓手機由於品牌以及廠商等等的問題，儘管也有相應的尺寸規範，但相對自由很多，不同情況下可以設置不同的參數，正是因為此原因，谷歌新推出了Material Design設計語言，為安卓界面設計帶來了革命性的歷史變化，這裡大家可以看看另一位酷友寫的關於Material Design的文章，詳細又深入。