1、相信很多人都在開發(fā)設(shè)計APP時會遇到很多界面上的問題，要以多大尺寸來設(shè)計？分辨率是多少？該怎么切圖給開發(fā)等等下面的文字就給出一點點技巧總結(jié)，但也要給合團(tuán)隊在開發(fā)時的習(xí)慣。每個工程師們所使用的控件，書寫布局習(xí)慣來實際移交的圖是不一樣的，但八九不離十，都是遵循一個原則，便捷開發(fā)、自適應(yīng)強(qiáng)的開發(fā)模式IOS篇一、尺寸及分辨率iPhone界面尺寸：320*480、640*960、640*1136iPhone6:4.7英寸(1334X750),iPhone6Plus:5.5英寸(1920X1080)設(shè)計圖單位：像素72dpi。在設(shè)計的時候并不是每個尺寸都要做一套，尺寸按自己的手機(jī)來設(shè)計，比較方便預(yù)覽效果，

2、一般用640*960或者640*1136的尺寸來設(shè)計，現(xiàn)在iphone6和plus出來后有很多人會使用6的設(shè)計效果。如果是我來做的話，我會使用640X1136,對plus做單獨(dú)的修改適配，因為plus的屏幕實在是大了，遵循屏大顯示更多內(nèi)容的原則這里本應(yīng)該是需要修的了。有更好辦法的話希望大家可以分享一下。Ps:作圖的時候確保都是用形狀工具(快捷鍵：U)畫的，這樣更方便后期的切圖或者尺寸變更。二、界面基本組成元素iPhone的app界面一般由四個元素組成，分別是：狀態(tài)欄(statusbar)、導(dǎo)航欄(navigation)、主菜單欄(submenu)、內(nèi)容區(qū)域(content)。這里取用640*9

3、60的尺寸設(shè)計，那我們就說說在這個尺寸下這些元素的尺寸狀態(tài)欄(statusbar)：就是我們經(jīng)常說的信號、運(yùn)營商、電量等顯示手機(jī)狀態(tài)的區(qū)域,其高度為：40px導(dǎo)航欄(navigation):顯示當(dāng)前界面的名稱，包含相應(yīng)的功能或者頁面間的跳轉(zhuǎn)按鈕,其高度為：88Px主菜單欄(submenu,tab):類似于頁面的主菜單， 提供整個應(yīng)用的分類內(nèi)容的快速跳轉(zhuǎn)， 其高度為：98px內(nèi)容區(qū)域(content):展示應(yīng)用提供的相應(yīng)內(nèi)容，整個應(yīng)用中布局變更最為頻繁，其高度為：734Px至于我們經(jīng)常說的iPhone5/5s的640*1136的尺寸，其實就是中間的內(nèi)容區(qū)域高度增加到910px。PS:在最新的iO

4、S7的風(fēng)格中，蘋果已經(jīng)開始慢慢弱化狀態(tài)欄的存在，將狀態(tài)欄和導(dǎo)航欄合在了一起，但是再怎么變，尺寸高度也還是沒有變的，只不過大家在設(shè)計iOS7風(fēng)格的界面的時候多多注意下三、字體大小iPhone上的字體英文為：HelveticaNeue。至于中文Mac下用的是黑體，Win下則為華文黑體（最新字體稱為黑體-簡）。F圖是百度用戶體驗做過的一個小調(diào)查，可以看出用戶可接受的文字大小可接受下境用戶可潴胃）（5。%以上用戶ULA偏?。┦孢mdIOS氏文本26pX30px32pX-J4pK位文本28px30px32px注釋24px24Px2Spx四，切圖切圖是APP設(shè)計中的一個重要過程，關(guān)系到APP的界面實現(xiàn)，及各

5、種適配性還有各種性能IOS在沒6plus前，我們只需要提供兩種圖，普通圖及視網(wǎng)膜屏幕圖。以640X1136（640X960是一樣的）做的設(shè)計圖的話就會好辦一點。直接出設(shè)計圖上的原大小圖標(biāo)，比如我們命名一個圖片叫img-line.png,我們給開發(fā)的圖就要改變這個名字叫img-line2x.png就是在后綴名前加上2x表示視網(wǎng)膜屏的圖，iPhone4的還需要把這個圖尺寸按比例縮小50%,得到正真的img-line.png。然后把這兩個圖移交給開發(fā)，iPhone6的圖在規(guī)范里是與5s使用的是一樣的，也是2x圖。有些UI則需要做適當(dāng)?shù)倪m配，比如拉長，拉高，這個開發(fā)會去做。對于IPhone6plus的

6、話范里給出的是3x相信大家也知道是怎么回事，但如果要使用PS放大的話，大家做圖的時候就需要使用形狀工具來做，放大后還需要仔細(xì)微調(diào)，這里就不多做講解溫馨提示：在出可按的圖片切圖時需要注意圖片的可按區(qū)域大小，有時圖標(biāo)很小，實際切出來的放在上面，用手指是按不到的，我們就需要對圖片單獨(dú)處理，拓寬圖片的有效區(qū)域，這里是拓寬非放大，就是改變畫布大小使圖片尺寸面積擴(kuò)大，使圖片四周拓寬多余的透明區(qū)域，從而改變可按大小。五，顏色值問題IOS顏色值取RGB各顏色的值比如某個色值，給予IOS開發(fā)的色值為R:12G:34B:56給出的值就是12,34,56（有時也要根據(jù)開發(fā)的習(xí)慣，有時也用十六進(jìn)制）；Android開

7、發(fā)的色值則使用十六進(jìn)制#0c2238ANDROID篇、尺寸及分辨率Android界面尺寸：480*800、720*1280、1080*1920Android比iPhone的寸尺多了很多套，建議取用720*1280這個尺寸，這個尺寸720*1280中顯示完美，在1080*1920中看起來比較清晰，切圖后的圖片文件大小也適中，應(yīng)用的內(nèi)存消耗也不會過高。二、界面基本組成元素Android的app界面和iPhone的基本相同：狀態(tài)欄、導(dǎo)航欄、主菜單、內(nèi)容區(qū)域。FRIENDSrmfirstsAndroid中我們?nèi)∮玫?20*1280的尺寸設(shè)計，那我們就說說在這個尺寸下這些元素的尺寸。狀態(tài)欄高度為：50p

8、x導(dǎo)航欄高度為：96px主菜單欄高度為：96px內(nèi)容區(qū)域高度為：1038Px(1280-50-96-96=1038)Android最近出的手機(jī)都幾乎去掉了實體鍵，把功能鍵移到了屏幕中，當(dāng)然高度也是和菜單欄一樣的：96pxAndroid為了在界面上區(qū)別于iOS,Android4.0開始提出的一套HOLO的UI風(fēng)格一些app的最新版本都采用了這一風(fēng)格，這一風(fēng)格最明顯的變化就是將下方的主菜單移到了導(dǎo)航欄下面，這樣的方式解決了現(xiàn)在很多手機(jī)去除實體鍵后再屏幕中顯示而出現(xiàn)的雙底欄的尷尬情景。三、字體大小同樣，百度用戶體驗的調(diào)查中，可以看出用戶可接受的文字相應(yīng)問題可接受下施貝小值（5。%以1用戶認(rèn)為偏小）好

9、話值（用戶口為黑料詔）Android(4BOKSOO)2卬x24px27pxNLpx24px27px汪鞋18pxL3px21pXAnd9fd低分矯整(320*480)氏文本14Px16PxL&p) )f-2Qpx短文本14px14px18px鄴12PxL2px14px*16px具體大小，還是那句話，找自己喜歡的體大小，切記，一定是高清截圖U4oo：3i%nil口+口京卿 E 尸W手0天期祖通訊茁?赭歲it%符一歸口日一總弗用由用人/9淺通靠“離廟原本的風(fēng)格HOLO風(fēng)格Android上的字體為：Droidsansfallback,是谷歌自己的字體，與微軟雅黑很像。app界面，手機(jī)截圖后放進(jìn)PS自己對比調(diào)節(jié)字四，切圖Android設(shè)計規(guī)范中單