行動裝置的介面尺寸

標籤：android   http   io   os   sp   strong   檔案   資料   on   

 

時不時就會有人問起移動設別介面設計的時候尺寸應該做多大，小編不是大神，所以每每有人問的時候都選擇了沉默，並且嬸嬸的因為不能協助到讀er而感到萬分內疚。一直到昨天小編看到了這篇教程，內心的激動瞬間化為滾滾熱淚奪眶噴出，於是馬上聯絡作者Musen_xiong，希望把這篇教程轉載到早讀課，Musen_xiong大神非常非常非常非常nice，很快就回覆，大氣的批准了小編的苛求。無以為謝，小編已經安排站長（當然，站長不是我）今晚面朝南方狠狠地跪磕三個響頭。

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

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

IOS篇

1、尺寸及解析度

iPhone 介面尺寸：320x480、640x960、640x1136

iPad 介面尺寸：1024x768、2048x1536

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

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

P.S. 作圖的時候確保都是用圖形工具（快速鍵：U）畫的，這樣更方便後期的切圖或尺寸變更~

2、介面基本組成元素

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

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

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

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

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

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

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

iPhone/iPod Touch

第一代、第二代、第三代

iPhone4/iPhone4s

iPhone5/iPhone5C/iPhone5s

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

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

3、字型大小

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

是百度使用者體驗做過的一個小調查，可以看出使用者可接受的文字大小，像素為單位，也就是大家在PS裡的文字像素大小。

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

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

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

Android篇

1、尺寸及解析度

Android 介面尺寸：480x800、720x1280、1080x1920... （單位：像素）

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

2、介面基本組成元素

Android 的 APP 介面和 iPhone 的基本相同：狀態列，導覽列、導覽列、主功能表列以及中間的內容地區。

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

狀態列高度為：50 px

導覽列高度為：96 px

主功能表列高度為：96 px

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

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

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

Android 為了在介面上區別於 iOS ，Android 4.0 開始提出一套 HOLO 的 UI 風格，一些APP的最新版都採用了這一風格。

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

3、字型大小

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

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

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

行動裝置的介面尺寸