之前,，我老是想著320pt和640px，因?yàn)檫@樣可以1x2x完美適配,， 

現(xiàn)在發(fā)現(xiàn)想法有些過時(shí)了,，

iphone 4 iphone 4S iphone 5 iphone 5C iphone 5S都是以320pt來(lái)設(shè)計(jì)的，現(xiàn)在357pt,414pt來(lái)了,，大家都是拿著P6和P6+才有面子,。

而且Android一般是按著IOS的設(shè)計(jì)圖進(jìn)行適當(dāng)調(diào)整開發(fā)，640與720差80px(40dp),750與720才差30px(15dp)，誤差變小了,，設(shè)計(jì)布局和構(gòu)圖上還原度更高

320pt的時(shí)代已經(jīng)過去了,！為啥我TMD還老想著640呢？

是時(shí)候改變思路了,，為大屏而設(shè)計(jì),！

移動(dòng)app開發(fā)中多種設(shè)備尺寸適配問題，過去只屬于Android陣營(yíng)的頭疼事兒,，只是很多設(shè)計(jì)師選擇性地忽視android適配問題,，只出一套iOS平臺(tái)設(shè)計(jì)稿。隨著蘋果發(fā)布兩種新尺寸的大屏iPhone 6,，iOS平臺(tái)尺寸適配問題終于還是來(lái)了,，移動(dòng)設(shè)計(jì)全面進(jìn)入“雜屏”時(shí)代?？纯聪旅嫒頸Phone尺寸和分辨率數(shù)據(jù)就知道屏幕有多雜了,。

加上Android生態(tài)中紛繁復(fù)雜的各種奇葩尺寸，現(xiàn)在APP設(shè)計(jì)開發(fā)必須考慮適配大,、中,、小三種屏幕。所以如何做到交付一套設(shè)計(jì)稿解決適配大中小三屏的問題,？設(shè)計(jì)和開發(fā)之間采用什么協(xié)作模式,？一個(gè)基本思路是：

1、選擇一種尺寸作為設(shè)計(jì)和開發(fā)基準(zhǔn),；

2,、定義一套適配規(guī)則，自動(dòng)適配剩下兩種尺寸,；

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

手機(jī)淘寶的iPhone 6/iPhone 6 Plus適配版本即將提交App store審核,。先曬一下我們采用的協(xié)作模式，再慢慢說(shuō)明原委,。

第一步,，視覺設(shè)計(jì)階段，設(shè)計(jì)師按寬度750px（iPhone 6）做設(shè)計(jì)稿,，除圖片外所有設(shè)計(jì)元素用矢量路徑來(lái)做,。設(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）的界面效果。由此完成大中小三屏適配,。

為什么選擇iPhone 6作為基準(zhǔn)尺寸,？

當(dāng)面對(duì)大中小三種屏幕需要適配的時(shí)候，很容易想到先做好一種屏幕,，再去適配剩下兩種屏幕,。第一個(gè)決定是到底以哪種屏幕作為設(shè)計(jì)和開發(fā)的基準(zhǔn)尺寸。我們選擇中間尺寸的iPhone 6（750px/375pt）作為基準(zhǔn),，基于幾個(gè)原因：

1,、從中間尺寸向上和向下適配的時(shí)候界面調(diào)整的幅度最小。375pt下的設(shè)計(jì)效果適配到414pt和320pt偏差不會(huì)太大,。假設(shè)以414pt為基準(zhǔn)做出很優(yōu)雅的設(shè)計(jì),，到320pt可能元素之間比例就不是那么回事了，比如圖片和文字之間視覺比例可能失調(diào),。

2,、iPhone 6 plus有兩種顯示模式，標(biāo)準(zhǔn)模式分辨率為1242x2208,，放大模式分辨率為1125x2001（即iPhone 6的1.5倍）,。可見官方系統(tǒng)里iPhone 6和iPhone 6 plus分辨率之間就存在1.5倍的倍率關(guān)系,。很多情況下這兩種尺寸可以用1.5倍直接等比適配,。

3、1242x2208這個(gè)奇葩的數(shù)值是蘋果官方都不愿意公開宣傳的一個(gè)分辨率,，不便于記憶和計(jì)算柵格,。640x1136雖然是廣泛應(yīng)用的一個(gè)分辨率，但是大屏?xí)r代依然以小尺寸為設(shè)計(jì)基準(zhǔn)顯然不合時(shí)宜,，設(shè)計(jì)師會(huì)停留在小屏的視角做設(shè)計(jì),。

所以,，iPhone6的750x1334是最適合基準(zhǔn)尺寸。

只交付一套設(shè)計(jì)稿,，默認(rèn)用什么規(guī)則來(lái)適配,？

前文提到適配策略是先選擇iPhone 6作為基準(zhǔn)設(shè)計(jì)尺寸，然后通過一套適配規(guī)則自動(dòng)適配到另外兩種尺寸,。這套適配規(guī)則總結(jié)起來(lái)就一句話：文字流式,，控件彈性，圖片等比縮放,。

控件彈性指的是,，navigation、cell,、bar等適配過程中垂直方向上高度不變,；水平方向?qū)挾茸兓瘯r(shí)，通過調(diào)整元素間距或元素右對(duì)齊的方式實(shí)現(xiàn)自適應(yīng),。這樣屏幕越大,，在垂直方向上可以顯示更多內(nèi)容，發(fā)揮大屏幕的優(yōu)勢(shì),。

按照上述默認(rèn)適配規(guī)則,，大中小三種屏幕顯示效果均相同。有時(shí)候想在大屏幕顯示更多內(nèi)容,，需要設(shè)計(jì)出特殊適配效果,。比如App store首頁(yè)焦點(diǎn)圖，從iPhone 6適配到iPhone 6 plus時(shí)焦點(diǎn)圖尺寸和排版做了特殊處理,。底下應(yīng)用列表也從一排3+個(gè)變成一排4+個(gè),，真正實(shí)現(xiàn)了大屏幕顯示更多內(nèi)容的理念。這些就需要設(shè)計(jì)師給出相應(yīng)設(shè)計(jì)稿,。