首先要了解到容劳,iPhone6與iPhone6plus的加入辉词,ios適配的難度變大必孤,很多人都不明白具體用多少分辨率去設(shè)計,如何最快捷的適配全部尺寸瑞躺。
下面我來講解一下我的理解敷搪,可能會和各位的想法有沖突,不喜勿噴幢哨。先給大家看一組IOS尺寸規(guī)范购啄。
先說說我的理解,IOS界面設(shè)計嘱么,不應(yīng)該一味的去考慮iPhone的分辨率(這就是蘋果的聰明之處)狮含,而是控件的大小和清晰度,因為控件尺寸規(guī)范官方給定了曼振,也是整個app里面一成不變的東西几迄!舉個例子,iPhone5s和iPhone6分辨率分別是:640x1136冰评、750x1334映胁,但是控件規(guī)范尺寸卻都是一樣的!抓住一點:我們做UI甲雅,是要保持控件的清晰度解孙!非控件大部分都是數(shù)據(jù)內(nèi)容,內(nèi)容的話抛人,我們只要標注“距屏幕邊緣xx像素弛姜,距頂部xx像素,字號多少”就可以了妖枚,然后交給程序猿就不干我們毛事了廷臼,autolayout會自動拉伸布局。
iPhone5s和iPhone6,分辨率不一樣但是控件大小是一樣的荠商,那多余的部分去哪里了寂恬?看藍色標注,沒錯莱没!多余的像素空出來了3跞狻!不要被640饰躲、750這樣的數(shù)值所誤解牙咏,分辨率再怎么變控件尺寸規(guī)范是固定的!iPhone6的屏幕尺寸比iPhone5s大属铁,顯示的內(nèi)容自然就多了眠寿,但是僅僅是多了躬翁,尺寸規(guī)范還是iPhone5s的規(guī)范焦蘑!那設(shè)計的時候用640還是750的?這個都不重要盒发,只要遵循官方的尺寸規(guī)范就行例嘱。當然了我個人還是比較喜歡640,習(xí)慣宁舰。
看完iPhone5s和iPhone6的拼卵,下面看iPhone6 Plus的,在xcode中iPhone6 Plus的分辨率是1242x2208蛮艰,所以需要適配iPhone Plus要用1242x2208下的尺寸規(guī)范才會有物理尺寸和老人版腋腮,還是按照上面的理解,咱們不看分辨率壤蚜,咱們只看控件尺寸規(guī)范即寡!拿導(dǎo)航欄高度來說(這也是為什么規(guī)范里不會出現(xiàn)寬度,因為寬度隨著拉伸填充空白袜刷,而非寬高等比縮放)iPhone5s聪富、6的是88px(@2x),iPhone6 Plus的是132px(@3x)著蟹,iPhone6 plus尺寸規(guī)范其實就是iPhone5s墩蔓、6設(shè)備的1.5倍(@2x和@3x命名也很直接)!那么假設(shè)我用640分辨率的萧豆,設(shè)計完了奸披,直接圖像大小調(diào)到640x1.5=960,然后分別導(dǎo)出切圖涮雷。有人會說源内,小到大像素會糊掉。天,你們做UI的時候真的不用多邊形矢量工具和智能圖層嗎膜钓?勾選“對齊邊緣”和使用“像素貼合”插件(下面提供下載)嗽交,要是這樣邊緣都糊掉了你來罵我!
放大后颂斜,雖然多邊形的框偏移了夫壁,但是在“對齊邊緣”和“像素貼合”插件作用下沒有出現(xiàn)毛邊!其實只要保證官方給出的尺寸規(guī)范正確就行了沃疮,管他分辨率多少盒让,不是嗎?因為這個是ios司蔬,安卓請無視邑茄。。即使最后分辨率是960俊啼,但是這個不重要肺缕,重要的是切圖的素材尺寸對了就行。因為尺寸規(guī)范高是固定的授帕,要是像變成1224的同木,拉一拉留點空、填充點內(nèi)容不就可以了跛十?控件大小不影響的彤路。
總結(jié): 只要按照官方給出的尺寸規(guī)范,不要去管設(shè)備的分辨率芥映,即使你用500x500這樣奇葩的分辨率洲尊,只要把狀態(tài)欄設(shè)定成40導(dǎo)航欄設(shè)定成88然后切圖,同樣是可以適配的奈偏,因為APP適配要的是零散的切圖素材坞嘀,正確的分辨率單純的只是為了視覺美觀。
講到這里霎苗,你還在糾結(jié)到底用多少分辨率的設(shè)計圖嗎姆吭?還在糾結(jié)怎么去適配ios?其實蘋果設(shè)計團隊都已經(jīng)考慮好了唁盏。規(guī)范既然有内狸,遵循規(guī)范必定事半功倍,而不是分辨率厘擂。