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(有時也要根據開發的習慣，有時也用十六進制)

內部設計

一、全部能點擊的圖片不得小於44px（Retina須要88px）
二、單獨存在的部件必須是雙數尺寸
三、兩倍圖以@2x做爲命名後綴
四、充分考慮每一個控制按鈕在4中狀態下的樣式，如圖

Paste_Image.png

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	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 ，是谷歌本身的字體，與微軟雅黑很像。
Android的字體大小調查結論是：

Paste_Image.png

顏色值

Android顏色值取值爲十六進制的值 好比一綠色的值， 給開發的值爲 #5bc43e

 

轉自：連接