移動裝置的介面設計尺寸

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

iphone 介面尺寸：320×480、640×960、640×1136

ipad 介面尺寸：1024×768、2048×1536

（以上單位都是畫素哦，至於解析度一般網頁ui和移動ui基本上都只要 72 ppi）

當然，在設計的時候並不是每個尺寸都要做一套，尺寸按自己的手機尺寸來設計，比較方便預覽效果，一般用 640×960 或者 640×1136 的尺寸設計。

p.s. 作圖的時候確保都是用形狀工具（快捷鍵：u）畫的，這樣更方便後期的切圖或尺寸變更~

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

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

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

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

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

（等等，為了說明我不是瞎掰的：960-40-88-98=734）

iphone/ipod touch 第一代、第二代、第三代

iphone4/iphone4s

iphone5/iphone5c/iphone5s

至於我們經常說的 iphone5/5s 的 640×11136 的尺寸，其實就是中間的內容區域高度增加到：910 px

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

iphone 上的字型英文為： helveticaneue 至於中文，mac下用的是黑體-簡，win下則為華文黑體。

p.s. 多留心下一些大公司的資料研究，你會發現很多你根本沒考慮到的問題哦~

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

android 介面尺寸：480×800、720×1280、1080×1920… （單位：畫素）

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

android 中我們取用 720×1280 的尺寸設計，那我們就說說在這個尺寸下這些元素的尺寸：

狀態列高度為：50 px

導航欄高度為：96 px

主選單欄高度為：96 px

內容區域高度為：1038 px （1280-50-96-96=1038）

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

p.s. 寫之前我翻了好多關於 android 的介面尺寸教程，都沒找到像ios一樣具體的規範，或許因為在安卓中這些控制項的高度都能用程式自定義~都沒有提到具體的尺寸數值，所以就自己找了 android 的設計規範，尺寸都是自己在ps中量的~~

這一風格最明顯的變化就是將下方的主選單移動到了導航欄下面，這樣的方式解決了現在很多手機去除實體按鍵後在螢幕中顯示而出現的雙底欄的尷尬情景。

android 上的字型為： droid sans fallback ，是谷歌自己的字型，與微軟雅黑很像。