自從iPhone 6/6+出現(xiàn)后，iOS版上的APP界面設(shè)計(jì)尺寸又發(fā)生了翻天覆地的變化。讓ios一下子跟安卓看齊了。進(jìn)入了移動(dòng)“雜屏”時(shí)代。

之前我們知道的，在移動(dòng)app開發(fā)設(shè)計(jì)中，需要解決多種設(shè)備尺寸適配問題，過去只屬于Android陣營(yíng)的頭疼事兒，只是很多設(shè)計(jì)師選擇性地忽視android適配問題，只出一套iOS平臺(tái)設(shè)計(jì)稿。

如今隨著蘋果發(fā)布兩種新尺寸的大屏iPhone 6，iOS平臺(tái)尺寸適配問題終于還是來了，移動(dòng)設(shè)計(jì)全面進(jìn)入“雜屏”時(shí)代。如下圖：

25學(xué)堂的建議就是，APP設(shè)計(jì)師必須考慮移動(dòng)APP應(yīng)用盡量適配大、中、小三種屏幕。

必須以選擇中間尺寸的iPhone 6（750px/375pt）作為基準(zhǔn)設(shè)計(jì)或切圖。

更詳細(xì)的ios8界面設(shè)計(jì)的規(guī)范可以移步這里：

iPhone 6/6Plus APPui界面設(shè)計(jì)規(guī)范以及界面適配

以后我們做ios版的ui界面設(shè)計(jì)的時(shí)候，可以采用手機(jī)淘寶介紹的這樣的一個(gè)思路進(jìn)行。

基本思路是：

1、選擇一種尺寸作為設(shè)計(jì)和開發(fā)基準(zhǔn)（選擇中間尺寸的iPhone 6（750px/375pt）作為基準(zhǔn)）

2、定義一套適配規(guī)則，自動(dòng)適配剩下兩種尺寸；（規(guī)則包括：文字流式，控件彈性，圖片等比縮放）

3、特殊適配效果給出設(shè)計(jì)效果。

具體的解決方案如下：

第一步 ?APPUI視覺設(shè)計(jì)階段，設(shè)計(jì)師按寬度750px（iPhone 6）做設(shè)計(jì)稿，除圖片外所有設(shè)計(jì)元素用矢量路徑來做。設(shè)計(jì)定稿后在750px的設(shè)計(jì)稿上做標(biāo)注，輸出標(biāo)注圖。同時(shí)等比放大1.5倍生成寬度1125px的設(shè)計(jì)稿，在1125px的稿子里切圖。

第二步，輸出兩個(gè)交付物給開發(fā)工程師：一個(gè)是程序用到的@3x切圖資源，另一個(gè)是寬度750px的設(shè)計(jì)標(biāo)注圖。

第三步，開發(fā)工程師拿到750px標(biāo)注圖和@3x切圖資源，完成iPhone 6（375pt）的界面開發(fā)。此階段不能用固定寬度的方式開發(fā)界面，得用自動(dòng)布局（auto layout），方便后續(xù)適配到其它尺寸。

第四步，適配調(diào)試階段，基于iPhone 6的界面效果，分別向上向下調(diào)試iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏適配。