淺談IOS和Android介面設計尺寸規範

標籤：

剛開始接觸UI的時候，碰到的最多的就是尺寸問題，什麼畫布要建多大，文字該用多大才合適，我要做幾套介面才可以?什麼七七八八的也著實讓人有些頭疼。

廢話不多說，希望大家耐心看完後，不要再糾結於尺寸相關的東西了。

一、尺寸及解析度

iPhone介面尺寸：320*480、640*960、640*1136

iPad介面尺寸：1024*768、2048*1536

單位：像素72dpi，在設計的時候並不是每個尺寸都要做一套，尺寸按自己的手機來設計，比較方便預覽效果，一般用640*960或者640*1136的尺寸來設計。

Ps：作圖的時候確保都是用圖形工具(快速鍵：U)畫的，這樣更方便後期的切圖或者尺寸變更。

二、介面基本組成元素

iPhone的app介面一般由四個元素組成，分別是：狀態列、導覽列、主功能表列、內容地區。

這裡取用640*960的尺寸設計，那我們就說說在這個尺寸下這些元素的尺寸。

狀態列：就是我們經常說的訊號、電訊廠商、電量等顯示手機狀態的地區，其高度為：40px

導覽列：顯示當前介面的名稱，包含相應的功能或者頁面間的跳轉按鈕，其高度為：88px

主功能表列：類似於頁面的主菜單，提供整個應用的分類內容的快速跳轉，其高度為：98px

內容地區：展示應用提供的相應內容，整個應用中布局變更最為頻繁，其高度為：734px

[為了說明我不是瞎掰的：960-40-88-98=734]

至於我們經常說的iPhone5/5s的640*1136的尺寸，其實就是中間的內容地區高度增加到910px。

PS：在最新的iOS7的風格中，蘋果已經開始慢慢弱化狀態列的存在，將狀態列和導覽列合在了一起，但是再怎麼變，尺寸高度也還是沒有變的，只不過大家在設計iOS7風格的介面的時候多多注意下~

三、字型大小

Phone上的字型英文為：HelveticaNeue 。至於中文Mac下用的是黑體，Win下則為華文黑體。

是百度使用者體驗做過的一個小調查，可以看出使用者可接受的文字大小。

其實還有個更簡單的方法就是找你覺得好的app應用，手機後放進PS自己比對調節字型大小咯。

我的音樂——34px

我的、淘歌、發現——30px

Muxx——34px

本地音樂——30px

泡沫、鄧紫棋——24px

總之，方法是自己找到的，想辦法解決問題，自己實踐，比別人告訴你印象更深刻不是麼?

一、尺寸及解析度

Android介面尺寸：480*800、720*1280、1080*1920。[單位：像素]

Android比iPhone的寸尺多了很多套，建議取用720*1280這個尺寸，這個尺寸720*1280中顯示完美，在1080*1920中看起來比較清晰，切圖後的圖片檔案大小也適中，應用的記憶體消耗也不會過高。

二、介面基本組成元素

Android的app介面和iPhone的基本相同：狀態列、導覽列、主菜單、內容地區。

Android中我們取用的720*1280的尺寸設計，那我們就說說在這個尺寸下這些元素的尺寸。

狀態列高度為：50px

導覽列高度為：96px

主功能表列高度為：96px

內容地區高度為：1038px(1280-50-96-96=1038)

Android最近出的手機都幾乎去掉了實體鍵，把功能鍵移到了螢幕中，當然高度也是和功能表列一樣的：96px

Ps：寫之前我翻了好多關於Android的介面尺寸教程，都沒找到像iOS一樣具體的規範，或許因為在安卓中這些控制項的高度都能用程式自訂，都沒有提到具體的尺寸數值，所以就自己找了Android的設計規範，尺寸都是自己在PS中量的。

Android為了在介面上區別於iOS，Android4.0開始提出的一套HOLO的UI風格一些app的最新版本都採用了這一風格，這一風格最明顯的變化就是將下方的主菜單移到了導覽列下面，這樣的方式解決了現在很多手機去除實體鍵後再螢幕中顯示而出現的雙底欄的尷尬情景。

三、字型大小

Android 上的字型為：Droid sans fallback，是Google自己的字型，與微軟雅黑很像。

同樣，百度使用者體驗的調查中，可以看出使用者可接受的文字相應問題。

具體大小，還是那句話，找自己喜歡的app介面，手機後放進PS自己比對調節字型大小，切記，一定是高清

淺談IOS和Android介面設計尺寸規範