移動app開發中多種裝置尺寸适配問題，過去隻屬于Android陣營的頭疼事兒，隻是很多設計師選擇性地忽視android适配問題，隻出一套iOS平台設計稿。随着蘋果釋出兩種新尺寸的大屏iPhone 6，iOS平台尺寸适配問題終于還是來了，移動設計全面進入“雜屏”時代。看看下面三款iPhone尺寸和分辨率資料就知道螢幕有多雜了。
加上Android生态中紛繁複雜的各種奇葩尺寸，現在APP設計開發必須考慮适配大、中、小三種螢幕。是以如何做到傳遞一套設計稿解決适配大中小三屏的問題？設計和開發之間采用什麼協作模式？一個基本思路是：
1、選擇一種尺寸作為設計和開發基準；
2、定義一套适配規則，自動适配剩下兩種尺寸；
3、特殊适配效果給出設計效果。
手機淘寶的iPhone 6/iPhone 6 Plus适配版本即将送出App store稽核。先曬一下我們采用的協作模式，再慢慢說明原委。
第一步，視覺設計階段，設計師按寬度750px（iPhone 6）做設計稿，除圖檔外所有設計元素用矢量路徑來做。設計定稿後在750px的設計稿上做标注，輸出标注圖。同時等比放大1.5倍生成寬度1125px的設計稿，在1125px的稿子裡切圖。
第二步，輸出兩個傳遞物給開發工程師：一個是程式用到的@3x切圖資源，另一個是寬度750px的設計标注圖。
第三步，開發工程師拿到750px标注圖和@3x切圖資源，完成iPhone 6（375pt）的界面開發。此階段不能用固定寬度的方式開發界面，得用自動布局（auto layout），友善後續适配到其它尺寸。
第四步，适配調試階段，基于iPhone 6的界面效果，分别向上向下調試iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。
為什麼選擇iPhone 6作為基準尺寸？
當面對大中小三種螢幕需要适配的時候，很容易想到先做好一種螢幕，再去适配剩下兩種螢幕。第一個決定是到底以哪種螢幕作為設計和開發的基準尺寸。我們選擇中間尺寸的iPhone 6（750px/375pt）作為基準，基于幾個原因：
1、從中間尺寸向上和向下适配的時候界面調整的幅度最小。375pt下的設計效果适配到414pt和320pt偏差不會太大。假設以414pt為基準做出很優雅的設計，到320pt可能元素之間比例就不是那麼回事了，比如圖檔和文字之間視覺比例可能失調。
2、iPhone 6 plus有兩種顯示模式，标準模式分辨率為1242x2208，放大模式分辨率為1125x2001（即iPhone 6的1.5倍）。可見官方系統裡iPhone 6和iPhone 6 plus分辨率之間就存在1.5倍的倍率關系。很多情況下這兩種尺寸可以用1.5倍直接等比适配。
3、1242x2208這個奇葩的數值是蘋果官方都不願意公開宣傳的一個分辨率，不便于記憶和計算栅格。640x1136雖然是廣泛應用的一個分辨率，但是大屏時代依然以小尺寸為設計基準顯然不合時宜，設計師會停留在小屏的視角做設計。
是以，iPhone6的750x1334是最适合基準尺寸。
隻傳遞一套設計稿，預設用什麼規則來适配？
前文提到适配政策是先選擇iPhone 6作為基準設計尺寸，然後通過一套适配規則自動适配到另外兩種尺寸。這套适配規則總結起來就一句話：文字流式，控件彈性，圖檔等比縮放。
控件彈性指的是，navigation、cell、bar等适配過程中垂直方向上高度不變；水準方向寬度變化時，通過調整元素間距或元素右對齊的方式實作自适應。這樣螢幕越大，在垂直方向上可以顯示更多内容，發揮大螢幕的優勢。
按照上述預設适配規則，大中小三種螢幕顯示效果均相同。有時候想在大螢幕顯示更多内容，需要設計出特殊适配效果。比如App store首頁焦點圖，從iPhone 6适配到iPhone 6 plus時焦點圖尺寸和排版做了特殊處理。底下應用清單也從一排3+個變成一排4+個，真正實作了大螢幕顯示更多内容的理念。這些就需要設計師給出相應設計稿。
原文發表于http://daily.zhihu.com/story/4252195?utm_campaign=in_app_share&utm_medium=iOS&utm_source=sina