iOS app介面設計規範

原文地址:

http://www.jianshu.com/p/67ab63723e54

記錄一下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

表徵圖尺寸

裝置	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字型大小的調查結論如下：

顏色值

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

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

Android篇 介面尺寸

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