iPhone6出現(xiàn)后如何將一份設(shè)計(jì)稿支持多個(gè)尺寸

1、*iPhone6由現(xiàn)后，如何將一份設(shè)計(jì)稿支持多個(gè)尺寸？2014-11-04阿門龐門正道移動(dòng)app開(kāi)發(fā)中多種設(shè)備尺寸適配問(wèn)題，過(guò)去只屬于Android陣營(yíng)的頭疼事兒，只是很多設(shè)計(jì)師選擇性地忽視android適配問(wèn)題，只出一套iOS平臺(tái)設(shè)計(jì)稿。隨著蘋果發(fā)布兩種新尺寸的大屏iPhone 6, iOS平臺(tái)尺寸適配問(wèn)題終于還是來(lái)了，移動(dòng)設(shè)計(jì)全面進(jìn)入雜屏”時(shí)代?？纯聪旅嫒頸Phone尺寸和分辨率數(shù)據(jù)就知道屏幕有多雜了。iPhone 6 PlusiPhone 6iPhone 5 1080x1920 px47英寸750x1334 px640x1136 nx博索分辨率1242x2208 px750x1334

2、px640x1136 px倍率3x2x2x避輯分辨率414x736 pt375x667 pt320x568 pt物理尺寸6.22 x 3.06 英寸5.44x2.64 英寸4.87 X2.31 英寸屏幕密腐401 ppi326 ppi326 ppiDPI1541631631*加上Android生態(tài)中紛繁復(fù)雜的各種奇葩尺寸，現(xiàn)在APP設(shè)計(jì)開(kāi)發(fā)必須考慮適配大、中、小三種屏幕。所以如何做到交付一套設(shè)計(jì)稿解決適配大中小三屏的問(wèn)題？設(shè)計(jì)和開(kāi)發(fā)之間采用什么協(xié) 作模式？ 一個(gè)基本思路是：1、選擇一種尺寸作為設(shè)計(jì)和開(kāi)發(fā)基準(zhǔn)；2、定義一套適配規(guī)則，自動(dòng)適配剩下兩種尺寸；3、特殊適配效果給出設(shè)計(jì)效果。手機(jī)淘寶的i

3、Phone 6/iPhone 6 Plus適配版本即將提交App store審核。先曬一下我們采用的協(xié)作模式，再慢慢說(shuō)明原委。手機(jī)淘寶團(tuán)隊(duì)適配協(xié)作模式1 .設(shè)計(jì)2.輸出3.開(kāi)發(fā) 4.適配調(diào)試第一步，視覺(jué)設(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è)交付物給開(kāi)發(fā)工程師：一個(gè)是程序用到的 3x切圖資源，另一個(gè)是寬度750Px的設(shè)計(jì)標(biāo)注圖。第三步，開(kāi)發(fā)工程師拿到 750Px標(biāo)注圖和3x切圖資源，完成iP

4、hone 6 (375pt)的界面開(kāi)發(fā)。 此階段不能用固定寬度的方式開(kāi)發(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ì)和開(kāi)發(fā)的基準(zhǔn)尺寸。我們選擇中間尺寸的iPhone 6(750px/375pt )作為基準(zhǔn)，基于幾個(gè)原因：1

5、、從中間尺寸向上和向下適配的時(shí)候界面調(diào)整的幅度最小。375Pt下的設(shè)計(jì)效果適配到 414pt和320pt偏差不會(huì)太大。假設(shè)以 414pt為基準(zhǔn)做出很優(yōu)雅的設(shè)計(jì)，至ij 320pt可能元素之間比例就 不是那么回事了，比如圖片和文字之間視覺(jué)比例可能失調(diào)。2、iPhone 6 plus有兩種顯示模式，標(biāo)準(zhǔn)模式分辨率為1242x2208 ,放大模式分辨率為 1125x2001(即iPhone 6的1.5倍)。可見(jiàn)官方系統(tǒng)里iPhone 6和iPhone 6 plus分辨率之間就存在 1.5倍的倍率關(guān)系。很多情況下這兩種尺寸可以用1.5倍直接等比適配。3、1242x2208這個(gè)奇葩的數(shù)值是蘋果官方都不愿

6、意公開(kāi)宣傳的一個(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ò)一套適配規(guī)則自動(dòng)適配到另外兩種尺寸。這套適配規(guī)則總結(jié)起來(lái)就一句話：文字流式，控件彈性，圖片等比縮放?？丶椥灾傅氖?，navigation > cell、bar等適配過(guò)程中垂直方向上高度不變；水平方向?qū)挾茸兓?時(shí)，通過(guò)調(diào)整元素間距或元素右對(duì)齊的方式實(shí)現(xiàn)自適應(yīng)。

7、這樣屏幕越大， 在垂直方向上可以顯示更多內(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ì)稿。3*Pintere5t詳情頁(yè)適配效果9iPhone 6 plus標(biāo)準(zhǔn)模式1242X2203PXiPhone 6 plus放大模式1125X2OQ1 pxXSM t -a.圖片 等比繩放hnpiI的 M

8、由附 119 : Apfptfetfttidnt rrrtKCto 1 EMg du webdfifhgn一文字流式控件 彈性鼠蟲(chóng)M中aituHimisiPhone 6750x1334pxiPhone 5S 640x1136px* flsrzjfelM 出tw 119:fteXME fMM | Bhog 的 WfMtt-ffnApp store列表頁(yè)適配效果iPhone 6 plus標(biāo)準(zhǔn)模式 1242x2208px民中 上*力4Top Charts%處躺肥心放大模式migTap Chans3MH »«上，：e"f亙 EEiPhone 6750x1334pxIlE&

9、#171;I v l下旬的I ；FWE9gp-EAMiFlWFtF 禺 Ti 眄 >rn*« TMEi by EAgPGRnPhone 5S 640x1136pxMv+r rP*E ； - f i - W.J H Nym&m需J *2:必S * QrQlwklibta- -1m«WApp store首頁(yè)適配效果Ngw to tnGApp Store?iPhone 6 plus標(biāo)準(zhǔn)模式2KM啊iPhone 6 plu5放大模式 1 25x200 ipiJESUII * * *上 Ftv 煙d 口，ITtMBtundBes： 鳥(niǎo)叱3est Hew jRppsTMnM - tv ft*MIFles- New Ram臺(tái)FTA M UbmM %. Owdnr« QtnwtQjfnt|g|iFHEEFREEBest New &n«iPhone 67501334ps> * T J上串屯時(shí) *&App Store?Be» Hew