剛開始接觸UI的時(shí)候，碰到的最多的就是尺寸問題，什么畫布要建多大，文字該用多大才合適，我要做幾套界面才可以？什么七七八八的也著實(shí)讓人有些頭疼。
廢話不多說，希望大家耐心看完后，不要再糾結(jié)于尺寸相關(guān)的東西了！
一、尺寸及分辨率
iPhone界面尺寸：320*480、640*960、640*1136
iPad界面尺寸：1024*768、2048*1536
單位：像素72dpi，在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套，尺寸按自己的手機(jī)來設(shè)計(jì)，比較方便預(yù)覽效果，一般用640*960或者640*1136的尺寸來設(shè)計(jì)。
Ps：作圖的時(shí)候確保都是用形狀工具（快捷鍵：U）畫的，這樣更方便后期的切圖或者尺寸變更。
二、界面基本組成元素
iPhone的app界面一般由四個(gè)元素組成，分別是：狀態(tài)欄、導(dǎo)航欄、主菜單欄、內(nèi)容區(qū)域。
這里取用640*960的尺寸設(shè)計(jì)，那我們就說說在這個(gè)尺寸下這些元素的尺寸。
- 狀態(tài)欄：就是我們經(jīng)常說的信號、運(yùn)營商、電量等顯示手機(jī)狀態(tài)的區(qū)域，其高度為：40px
- 導(dǎo)航欄：顯示當(dāng)前界面的名稱，包含相應(yīng)的功能或者頁面間的跳轉(zhuǎn)按鈕，其高度為：88px
- 主菜單欄：類似于頁面的主菜單，提供整個(gè)應(yīng)用的分類內(nèi)容的快速跳轉(zhuǎn)，其高度為：98px
- 內(nèi)容區(qū)域：展示應(yīng)用提供的相應(yīng)內(nèi)容，整個(gè)應(yīng)用中布局變更最為頻繁，其高度為：734px
至于我們經(jīng)常說的iPhone5/5s的640*1136的尺寸，其實(shí)就是中間的內(nèi)容區(qū)域高度增加到910px。
PS：在最新的iOS7的風(fēng)格中，蘋果已經(jīng)開始慢慢弱化狀態(tài)欄的存在，將狀態(tài)欄和導(dǎo)航欄合在了一起，但是再怎么變，尺寸高度也還是沒有變的，只不過大家在設(shè)計(jì)iOS7風(fēng)格的界面的時(shí)候多多注意下~
三、字體大小
Phone上的字體英文為：HelveticaNeue 。至于中文Mac下用的是黑體，Win下則為華文黑體。
下圖是百度用戶體驗(yàn)做過的一個(gè)小調(diào)查，可以看出用戶可接受的文字大小。
其實(shí)還有個(gè)更簡單的方法就是找你覺得好的app應(yīng)用，手機(jī)截圖后放進(jìn)PS自己比對調(diào)節(jié)字體大小咯。
我的音樂——34px
我的、淘歌、發(fā)現(xiàn)——30px
Muxx——34px
本地音樂——30px
泡沫、鄧紫棋——24px
總之，方法是自己找到的，想辦法解決問題，自己實(shí)踐，比別人告訴你印象更深刻不是么？
一、尺寸及分辨率
Android界面尺寸：480*800、720*1280、1080*1920。[單位：像素]
Android比iPhone的寸尺多了很多套，建議取用720*1280這個(gè)尺寸，這個(gè)尺寸720*1280中顯示完美，在1080*1920中看起來比較清晰，切圖后的圖片文件大小也適中，應(yīng)用的內(nèi)存消耗也不會過高。
二、界面基本組成元素
Android的app界面和iPhone的基本相同：狀態(tài)欄、導(dǎo)航欄、主菜單、內(nèi)容區(qū)域。
Android中我們?nèi)∮玫?20*1280的尺寸設(shè)計(jì)，那我們就說說在這個(gè)尺寸下這些元素的尺寸。
狀態(tài)欄高度為：50px
導(dǎo)航欄高度為：96px
主菜單欄高度為：96px
內(nèi)容區(qū)域高度為：1038px（1280-50-96-96=1038）
Android最近出的手機(jī)都幾乎去掉了實(shí)體鍵，把功能鍵移到了屏幕中，當(dāng)然高度也是和菜單欄一樣的：96px
Ps：寫之前我翻了好多關(guān)于Android的界面尺寸教程，都沒找到像iOS一樣具體的規(guī)范，或許因?yàn)樵诎沧恐羞@些控件的高度都能用程序自定義，都沒有提到具體的尺寸數(shù)值，所以就自己找了Android的設(shè)計(jì)規(guī)范，尺寸都是自己在PS中量的。
Android為了在界面上區(qū)別于iOS，Android4.0開始提出的一套HOLO的UI風(fēng)格一些app的最新版本都采用了這一風(fēng)格，這一風(fēng)格最明顯的變化就是將下方的主菜單移到了導(dǎo)航欄下面，這樣的方式解決了現(xiàn)在很多手機(jī)去除實(shí)體鍵后再屏幕中顯示而出現(xiàn)的雙底欄的尷尬情景。
三、字體大小
Android 上的字體為：Droid sans fallback，是谷歌自己的字體，與微軟雅黑很像。
同樣，百度用戶體驗(yàn)的調(diào)查中，可以看出用戶可接受的文字相應(yīng)問題。
具體大小，還是那句話，找自己喜歡的app界面，手機(jī)截圖后放進(jìn)PS自己比對調(diào)節(jié)字體大小[切記，一定是高清截圖哦]
附件 ：包含一些尺寸方面的干貨，以及一些UI規(guī)范的源文件。