iOS和Android的app介面設計規範

標籤：

記錄一下iOS和Andoird的介面設計規範，方便進行標準的產品設計，並與設計師順暢溝通

iOS篇介面尺寸

裝置	解析度	狀態列高度	導覽列高度	標籤欄高度
iPhone6 plus	1242×2208 px	60px	132px	147px
iPhone6	750×1334 px	40px	88px	98px
iPhone5/5s/5c	640×1136 px	40px	88px	98px
iPhone4/4s	640×960 px	40px	88px	98px
iPad3/4/Air/Air2/mini2	2048×1536 px	40px	88px	98px
iPad1/2	1024×768 px	20px	44px	49px
iPad mini	1024×768 px	20px	44px	49px

Paste_Image.png表徵圖尺寸

裝置	App Store	程式應用	主畫面	spotlight搜尋	標籤欄	工具列和導覽列
iPhone6 plus	1024*1024px	180*180px	144×144px	87×87 px	75*75px	66*66px
iPhone6	1024*1024px	120*120px	144×144px	58*58px	75*75px	44*44px
iPhone5/5s/5c	1024*1024px	120*120px	144×144px	58*58px	75*75px	44*44px
iPhone4/4s	1024*1024px	120*120px	144×144px	58*58px	75*75px	44*44px
iPad3/4/Air/Air2/mini2	1024*1024px	180*180px	144×144px	100*100px	50*50px	44*44px
iPad1/2	1024*1024px	90*90px	72*72px	50*50px	25*25px	22*22px
iPad mini	1024*1024px	90*90px	72*72px	50*50px	25*25px	22*22px

字型

iPhone 上的字型英文為： HelveticaNeue 至於中文，Mac下用的是黑體-簡，Win下則為華文黑體，所有字型要用雙數字型大小。

百度使用者體驗部做過一個小調查， 對於app字型大小的調查結論如下：

Paste_Image.png顏色值

IOS顏色值取 RGB各顏色的值比如某個色值，給予IOS開發的色值為 R:12 G:34 B:56 給出的值就是 12,34,56(有時也要根據開發的習慣，有時也用十六進位)

內部設計

1、所有能點擊的圖片不得小於44px（Retina需要88px）
2、單獨存在的組件必須是雙數尺寸
3、兩倍圖以@2x作為命名尾碼
4、充分考慮每個控制按鈕在4中狀態下的樣式，

Paste_Image.pngAndroid篇介面尺寸

android的尺寸眾多，建議使用解析度為720x1280 的尺寸設計。這個尺寸 720x1280中顯示完美，在 1080x1920 中看起來也比較清晰；切圖後的圖片檔案大小也適中，應用的記憶體消耗也不會過高。

狀態列高度：50 px
導覽列高度：96 px
標籤欄高度：96 px
Android最近出的手機都幾乎去掉了實體鍵，把功能鍵移到了螢幕中，當然高度也是和標籤欄一樣的：96 px
內容地區高度為：1038 px （1280-50-96-96=1038）

圖表尺寸

螢幕大小	啟動表徵圖	操作欄表徵圖	上下文表徵圖	系統通知表徵圖(白色)	最細筆畫
320×480 px	48×48 px	32×32 px	16×16 px	24×24 px	不小於2 px
480×800px /480×854px /540×960px	72×72 px	48×48 px	24×24 px	36×36 px	不小於3 px
720×1280 px	48×48 dp	32×32 dp	16×16 dp	24×24 dp	不小於2 dp
1080×1920 px	144×144 px	96×96 px	48×48 px	72×72 px	不小於6 px

ps: Android設計規範中， 使用的單位是dp， dp在安卓機上不同的密度轉換後的px 是不一樣的

字型

Android 上的字型為： Droid sans fallback ，是Google自己的字型，與微軟雅黑很像。
Android的字型大小調查結論是：

Paste_Image.png顏色值

Android顏色值取值為十六進位的值 比如一綠色的值， 給開發的值為 #5bc43e

iOS和Android的app介面設計規範