相信很多人都在開(kāi)發(fā)設(shè)計(jì)APP時(shí)會(huì)遇到很多界面上的問(wèn)題，要以多大尺寸來(lái)設(shè)計(jì)？分辨率是多少？該怎么切圖給開(kāi)發(fā)等等
下面的文字就給出一點(diǎn)點(diǎn)技巧總結(jié)，但也要給合團(tuán)隊(duì)在開(kāi)發(fā)時(shí)的習(xí)慣。每個(gè)工程師們所使用的控件，書(shū)寫(xiě)布局習(xí)慣來(lái)實(shí)際移交的圖是不一樣的，但八九不離十，都是遵循一個(gè)原則，便捷開(kāi)發(fā)、自適應(yīng)強(qiáng)的開(kāi)發(fā)模式
iPhone界面尺寸：320*480、640*960、640*1136
iPhone6：4.7英寸(1334×750)，iPhone6 Plus：5.5英寸(1920×1080)
設(shè)計(jì)圖單位：像素72dpi。在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套，尺寸按自己的手機(jī)來(lái)設(shè)計(jì)，比較方便預(yù)覽效果，一般用640*960或者640*1136的尺寸來(lái)設(shè)計(jì)，現(xiàn)在iphone6和plus出來(lái)后有很多人會(huì)使用6的設(shè)計(jì)效果。
如果是我來(lái)做的話，我會(huì)使用640×1136，對(duì)plus做單獨(dú)的修改適配，因?yàn)閜lus的屏幕實(shí)在是大了，遵循屏大顯示更多內(nèi)容的原則這里本應(yīng)該是需要修的了。有更好辦法的話希望大家可以分享一下。
Ps：作圖的時(shí)候確保都是用形狀工具(快捷鍵：U)畫(huà)的，這樣更方便后期的切圖或者尺寸變更。
iPhone的app界面一般由四個(gè)元素組成，分別是：狀態(tài)欄(status bar)、導(dǎo)航欄(navigation)、主菜單欄(submenu)、內(nèi)容區(qū)域(content)。
這里取用640*960的尺寸設(shè)計(jì)，那我們就說(shuō)說(shuō)在這個(gè)尺寸下這些元素的尺寸。
狀態(tài)欄(status bar)：就是我們經(jīng)常說(shuō)的信號(hào)、運(yùn)營(yíng)商、電量等顯示手機(jī)狀態(tài)的區(qū)域，其高度為：40px
導(dǎo)航欄(navigation)：顯示當(dāng)前界面的名稱(chēng)，包含相應(yīng)的功能或者頁(yè)面間的跳轉(zhuǎn)按鈕，其高度為：88px
主菜單欄(submenu，tab)：類(lèi)似于頁(yè)面的主菜單，提供整個(gè)應(yīng)用的分類(lèi)內(nèi)容的快速跳轉(zhuǎn)，其高度為：98px
內(nèi)容區(qū)域(content)：展示應(yīng)用提供的相應(yīng)內(nèi)容，整個(gè)應(yīng)用中布局變更最為頻繁，其高度為：734px
至于我們經(jīng)常說(shuō)的iPhone5/5s的640*1136的尺寸，其實(shí)就是中間的內(nèi)容區(qū)域高度增加到910px。
PS：在最新的iOS7的風(fēng)格中，蘋(píng)果已經(jīng)開(kāi)始慢慢弱化狀態(tài)欄的存在，將狀態(tài)欄和導(dǎo)航欄合在了一起，但是再怎么變，尺寸高度也還是沒(méi)有變的，只不過(guò)大家在設(shè)計(jì)iOS7風(fēng)格的界面的時(shí)候多多注意下~
iPhone上的字體英文為：HelveticaNeue 。至于中文Mac下用的是黑體，Win下則為華文黑體(最新字體稱(chēng)為黑體-簡(jiǎn))。
下圖是百度用戶體驗(yàn)做過(guò)的一個(gè)小調(diào)查，可以看出用戶可接受的文字大小。
切圖是APP設(shè)計(jì)中的一個(gè)重要過(guò)程，關(guān)系到APP的界面實(shí)現(xiàn)，及各種適配性還有各種性能
IOS在沒(méi)6plus前，我們只需要提供兩種圖，普通圖及視網(wǎng)膜屏幕圖。
以640×1136（640×960是一樣的）做的設(shè)計(jì)圖的話就會(huì)好辦一點(diǎn)。直接出設(shè)計(jì)圖上的原大小圖標(biāo)，比如我們命名一個(gè)圖片叫 img-line.png，我們給開(kāi)發(fā)的圖就要改變這個(gè)名字叫 img-line@2x.png 就是在后綴名前加上@2x表示視網(wǎng)膜屏的圖，iPhone4的還需要把這個(gè)圖尺寸按比例縮小50%，得到正真的img-line.png。然后把這兩個(gè)圖移交給開(kāi)發(fā)，iPhone6的圖在規(guī)范里是與5s使用的是一樣的，也是@2x圖。有些UI則需要做適當(dāng)?shù)倪m配，比如拉長(zhǎng)，拉高，這個(gè)開(kāi)發(fā)會(huì)去做。
對(duì)于IPhone6 plus的話范里給出的是@3x相信大家也知道是怎么回事，但如果要使用PS放大的話，大家做圖的時(shí)候就需要使用形狀工具來(lái)做，放大后還需要仔細(xì)微調(diào)，這里就不多做講解
溫馨提示： 在出可按的圖片切圖時(shí)需要注意圖片的可按區(qū)域大小，有時(shí)圖標(biāo)很小，實(shí)際切出來(lái)的放在上面，用手指是按不到的，我們就需要對(duì)圖片單獨(dú)處理，拓寬圖片的有效區(qū)域，這里是拓寬非放大，就是改變畫(huà)布大小使圖片尺寸面積擴(kuò)大，使圖片四周拓寬多余的透明區(qū)域 ，從而改變可按大小。
IOS顏色值取 RGB各顏色的值比如某個(gè)色值，給予IOS開(kāi)發(fā)的色值為 R:12 G:34 B:56 給出的值就是 12,34,56(有時(shí)也要根據(jù)開(kāi)發(fā)的習(xí)慣，有時(shí)也用十六進(jìn)制)；Android開(kāi)發(fā)的色值則使用十六進(jìn)制 #0c2238
Android界面尺寸：480*800、720*1280、1080*1920
Android比iPhone的寸尺多了很多套，建議取用720*1280這個(gè)尺寸，這個(gè)尺寸720*1280中顯示完美，在1080*1920中看起來(lái)比較清晰，切圖后的圖片文件大小也適中，應(yīng)用的內(nèi)存消耗也不會(huì)過(guò)高。
Android的app界面和iPhone的基本相同：狀態(tài)欄、導(dǎo)航欄、主菜單、內(nèi)容區(qū)域。
Android中我們?nèi)∮玫?20*1280的尺寸設(shè)計(jì)，那我們就說(shuō)說(shuō)在這個(gè)尺寸下這些元素的尺寸。
狀態(tài)欄高度為：50px
導(dǎo)航欄高度為：96px
主菜單欄高度為：96px
內(nèi)容區(qū)域高度為：1038px(1280-50-96-96=1038)
Android最近出的手機(jī)都幾乎去掉了實(shí)體鍵，把功能鍵移到了屏幕中，當(dāng)然高度也是和菜單欄一樣的：96px
Android為了在界面上區(qū)別于iOS，Android4.0開(kāi)始提出的一套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)問(wèn)題。
具體大小，還是那句話，找自己喜歡的app界面，手機(jī)截圖后放進(jìn)PS自己對(duì)比調(diào)節(jié)字體大小，切記，一定是高清截圖
Android設(shè)計(jì)規(guī)范中單位是dp，dp在安卓機(jī)上不同的密度轉(zhuǎn)換后的px 是不一樣的，所以按照設(shè)計(jì)圖的px轉(zhuǎn)換成dp也是不一樣的，這個(gè)可以使用轉(zhuǎn)換工具轉(zhuǎn)換，開(kāi)發(fā)一般會(huì)有，也有些開(kāi)發(fā)會(huì)使用px做單位，因?yàn)樽隽饲捌诘霓D(zhuǎn)換工作
Android顏色值取值為十六進(jìn)制的值 比如一綠色的值， 給開(kāi)發(fā)的值為 #5bc43e
做UI出圖的時(shí)候有時(shí)要常用標(biāo)注，這里給大家推薦一款 Mark Man 這款軟件是免費(fèi)的，但如果要支持重復(fù)編輯是要購(gòu)買(mǎi)注冊(cè)版，但我們一般都是一次性標(biāo)注完保存，如要再次編輯，就把保存的文件再放進(jìn)去編輯一次就可以了
↓↓↓ 支持我們 ↓↓↓
聯(lián)系客服
