APP界面設計之尺寸介紹

1.尺寸以及分辨率

　　iPhone的界面尺寸不用多說，640*960是基本OK的，也能夠是適應5S的640*1136，立刻iPhone 6也快來了（隨便吐槽一下網上曝的真機諜照，真是醜到離譜...），只要寬度不變都好說。至於像素問題，網頁和移動的UI用72px就能夠了，沒必要糾結。

2.界面基本組成元素

　　iPhone的APP界面通常由狀態欄、導航欄、主菜單欄和中間的內容區域組成。由於寬度是固定的，因此設計開發起來很方便。下面咱們說說這些「欄」的尺寸吧：

　　狀態欄：顯示運營商、信號和電量的區域，高度 40px

　　導航欄：顯示當前頁面名稱，包含頁面「返回」等功能按鈕，高度 88px

　　主菜單欄：顯示在頁面下方的區域，通常做爲分類內容的快遞導航，高度 98px

3.字體大小

　　iPhone上的英文字體爲：HelveticaNeue，至於中文，通常是冬青黑體或是黑體-簡。有關文字的大小根據不一樣類型的APP都有不一樣的定義，可是百度用戶體驗部提供了這樣一份統計資料：閱讀最溫馨的長文本大小在32~34px之間，短文本爲32px，註釋等提示文本爲28px。無論是否贊成，至少人家有數聽說話，你也能夠把以爲好的應用截圖放進PS裏對比看，從而調試本身設計的文字大小。

 

 

 

　　總之，方法不少，我的的審美也不同，有人故意把字作大以突出個性，本身實踐，把數據做爲參考，多作幾款應用心中也就有數了，比看再說教程或者說明有用！

 

 

Android篇

1.尺寸以及分辨率

　　提到Android的尺寸，讓多少設計和開發抓耳撓腮，數不清的機型和尺寸，重複的適配。這裏咱們就說些主流的設計尺寸吧，好比480*800、720*128。很長一段時間內，咱們都在用480*800，可是安卓手機分辨率的發展衆所周知的愈來愈大，因此我建議使用720*1280這個尺寸來設計，切圖上能夠點9切圖作到全部手機的適配。

2.界面基本組成元素

　　與ios的同樣，仍是有狀態欄、導航欄和主菜單欄，以720*1280的尺寸來設計，那麼狀態欄的高度應爲50px，導航欄的高度96px，主菜單欄的高度96px。由於是開源的系統，不少廠家都把安卓系統「玩壞」了，這裏的數值也只能做爲參考，好比魅族flyme狀態欄是正常的兩倍高，還有不少廠商也在界面上相近辦法。

　　Android爲了區別於IOS，從4.0開始提出了一套HOLO的UI風格設計風格，鼓勵將底部的主菜單欄放到導航欄下面，從而避免點擊下方材料誤點虛擬按鍵，不少APP的新版中也採用了這一風格，好比微信。就前不久的I/O大會上，最新的Android L正式揭開面紗，宣佈了安卓全面進入扁平化時代。

 

3.文字大小

　　Android的字體爲：Droid sans fallback，這是谷歌本身的字體，與微軟雅黑很像。一樣百度也提供了一份統計數據，可是我的以爲已過時，如今沒有太大意義，由於他們是以480*800的分辨率做爲測試，測試結果是閱讀最溫馨的長文本爲27px，短文本也是27px，註釋備註文本21px。具體仍是要你們將作好的界面放到同分辨率的手機上看爲準！