移動app開發(fā)中多種設(shè)備尺寸適配問題杨赤，過去只屬于Android陣營的頭疼事兒敞斋，只是很多設(shè)計師選擇性地忽視android適配問題，只出一套iOS平臺設(shè)計稿疾牲。隨著蘋果發(fā)布兩種新尺寸的大屏iPhone 6植捎，iOS平臺尺寸適配問題終于還是來了，移動設(shè)計全面進入“雜屏”時代阳柔⊙媸啵看看下面三款iPhone尺寸和分辨率數(shù)據(jù)就知道屏幕有多雜了。
加上Android生態(tài)中紛繁復(fù)雜的各種奇葩尺寸舌剂，現(xiàn)在APP設(shè)計開發(fā)必須考慮適配大济锄、中、小三種屏幕霍转。所以如何做到交付一套設(shè)計稿解決適配大中小三屏的問題拟淮？設(shè)計和開發(fā)之間采用什么協(xié)作模式？一個基本思路是：
1谴忧、選擇一種尺寸作為設(shè)計和開發(fā)基準很泊；
2、定義一套適配規(guī)則沾谓，自動適配剩下兩種尺寸委造；
3、特殊適配效果給出設(shè)計效果均驶。
手機淘寶的iPhone 6/iPhone 6 Plus適配版本即將提交App store審核昏兆。先曬一下我們采用的協(xié)作模式，再慢慢說明原委妇穴。
第一步爬虱，視覺設(shè)計階段，設(shè)計師按寬度750px（iPhone 6）做設(shè)計稿腾它，除圖片外所有設(shè)計元素用矢量路徑來做跑筝。設(shè)計定稿后在750px的設(shè)計稿上做標注，輸出標注圖瞒滴。同時等比放大1.5倍生成寬度1125px的設(shè)計稿曲梗，在1125px的稿子里切圖赞警。
第二步，輸出兩個交付物給開發(fā)工程師：一個是程序用到的@3x切圖資源虏两，另一個是寬度750px的設(shè)計標注圖愧旦。
第三步，開發(fā)工程師拿到750px標注圖和@3x切圖資源定罢，完成iPhone 6（375pt）的界面開發(fā)笤虫。此階段不能用固定寬度的方式開發(fā)界面，得用自動布局（auto layout）祖凫，方便后續(xù)適配到其它尺寸耕皮。
第四步，適配調(diào)試階段蝙场，基于iPhone 6的界面效果凌停，分別向上向下調(diào)試iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏適配售滤。
為什么選擇iPhone 6作為基準尺寸罚拟？
當(dāng)面對大中小三種屏幕需要適配的時候，很容易想到先做好一種屏幕完箩，再去適配剩下兩種屏幕赐俗。第一個決定是到底以哪種屏幕作為設(shè)計和開發(fā)的基準尺寸。我們選擇中間尺寸的iPhone 6（750px/375pt）作為基準弊知，基于幾個原因：
1阻逮、從中間尺寸向上和向下適配的時候界面調(diào)整的幅度最小。375pt下的設(shè)計效果適配到414pt和320pt偏差不會太大秩彤。假設(shè)以414pt為基準做出很優(yōu)雅的設(shè)計叔扼，到320pt可能元素之間比例就不是那么回事了，比如圖片和文字之間視覺比例可能失調(diào)漫雷。
2瓜富、iPhone 6 plus有兩種顯示模式，標準模式分辨率為1242x2208降盹，放大模式分辨率為1125x2001（即iPhone 6的1.5倍）与柑。可見官方系統(tǒng)里iPhone 6和iPhone 6 plus分辨率之間就存在1.5倍的倍率關(guān)系蓄坏。很多情況下這兩種尺寸可以用1.5倍直接等比適配价捧。
3、1242x2208這個奇葩的數(shù)值是蘋果官方都不愿意公開宣傳的一個分辨率涡戳，不便于記憶和計算柵格结蟋。640x1136雖然是廣泛應(yīng)用的一個分辨率，但是大屏?xí)r代依然以小尺寸為設(shè)計基準顯然不合時宜妹蔽，設(shè)計師會停留在小屏的視角做設(shè)計椎眯。
所以，iPhone6的750x1334是最適合基準尺寸胳岂。
只交付一套設(shè)計稿编整，默認用什么規(guī)則來適配？
前文提到適配策略是先選擇iPhone 6作為基準設(shè)計尺寸乳丰，然后通過一套適配規(guī)則自動適配到另外兩種尺寸掌测。這套適配規(guī)則總結(jié)起來就一句話：文字流式，控件彈性产园，圖片等比縮放汞斧。
控件彈性指的是，navigation什燕、cell粘勒、bar等適配過程中垂直方向上高度不變；水平方向?qū)挾茸兓瘯r屎即，通過調(diào)整元素間距或元素右對齊的方式實現(xiàn)自適應(yīng)庙睡。這樣屏幕越大，在垂直方向上可以顯示更多內(nèi)容技俐，發(fā)揮大屏幕的優(yōu)勢乘陪。
按照上述默認適配規(guī)則，大中小三種屏幕顯示效果均相同雕擂。有時候想在大屏幕顯示更多內(nèi)容啡邑，需要設(shè)計出特殊適配效果。比如App store首頁焦點圖井赌，從iPhone 6適配到iPhone 6 plus時焦點圖尺寸和排版做了特殊處理谤逼。底下應(yīng)用列表也從一排3+個變成一排4+個，真正實現(xiàn)了大屏幕顯示更多內(nèi)容的理念仇穗。這些就需要設(shè)計師給出相應(yīng)設(shè)計稿森缠。、
原文地址：https://blog.csdn.net/zx_android/article/details/51150156
