不知道小伙伴們是否觀看了半夜直播的蘋(píng)果新品發(fā)布會(huì),靜電實(shí)在熬不住了,所以只有第二天起床瀏覽鋪天蓋地的消息了. 這次蘋(píng)果發(fā)布了新款手機(jī)iphone6及iphone6 Plus,作為果粉,看著實(shí)在眼饞啊.不過(guò)摸摸自己那發(fā)酸的腰………額,還是養(yǎng)養(yǎng)再說(shuō)吧。

作為設(shè)計(jì)師，我們肯定想知道，新款的iphone對(duì)我們目前的設(shè)計(jì)開(kāi)發(fā)有多少影響。適配要多少工作量?工作量大的話,趕工期的小伙伴們會(huì)不會(huì)哭暈在廁所里？嗯嗯，那么先來(lái)看看這次蘋(píng)果發(fā)布的新機(jī)型的參數(shù)。

iPhone各機(jī)型分辨率解析

我們先來(lái)看看新款iphone的分辨率和ppi

使用何種尺寸來(lái)做設(shè)計(jì)稿?

由上邊的分析,我們知道, 如果要適配iPhone6 Plus的圖片資源,做到真正的高清,我們必須要將現(xiàn)有的@2x的圖片資源的寬高各放大1.5倍。
由于現(xiàn)在大部分設(shè)計(jì)師都采用photoshop等位圖軟件來(lái)設(shè)計(jì)，大家知道，對(duì)于位圖，從大尺寸到小尺寸的縮放沒(méi)問(wèn)題，但從小尺寸到大尺寸的放大，問(wèn)題可 就沒(méi)那么簡(jiǎn)單了，沒(méi)錯(cuò)，糊了！所以靜電建議大家，直接使用1080-1920的分辨率來(lái)設(shè)計(jì)，生成@3x尺寸的圖片資源，然后再批量縮小為@2x。其實(shí)說(shuō) 到這里，靜電也挺糾結(jié)的，因?yàn)楝F(xiàn)在大部分顯示器還是全高清的1080p顯示器，如果用這么大的尺寸來(lái)作圖，我們的顯示器尺寸就捉襟見(jiàn)肘了。所以，靜電只能 默默期待有一天，顯示器的分辨率能進(jìn)一步提高，高清顯示器的價(jià)格進(jìn)一步下降，否則，設(shè)計(jì)師估計(jì)要哭死了。

如何在這個(gè)階段來(lái)過(guò)渡呢？如果我們的設(shè)計(jì)稿已經(jīng)全部位圖化，那么很苦逼，你需要將所有圖標(biāo)重繪擴(kuò)大。 如果你有幸還保存著設(shè)計(jì)源文件，切源文件里大部分都是矢量化的圖片，那么還好還好，簡(jiǎn)單拉大再導(dǎo)出就好了。不過(guò)怎么說(shuō)都是一件費(fèi)時(shí)費(fèi)力的工作，靜電只能 說(shuō)，免不了，大家辛苦了。

制作矢量化的設(shè)計(jì)稿-高清重繪無(wú)障礙

sketch在之前靜電的設(shè)計(jì)教室已經(jīng)講過(guò)(小伙伴可以直接訪問(wèn)靜電的主頁(yè)查看sketch教 程)，相信小伙伴已經(jīng)漸漸的開(kāi)始用這款神器來(lái)做設(shè)計(jì)了。這個(gè)時(shí)候，用sketch做設(shè)計(jì)的好處慢慢的展現(xiàn)出來(lái)，全矢量的圖標(biāo)，想導(dǎo)出多大就導(dǎo)出多大，是不 是方便很多？（當(dāng)然，我們不能用位圖圖標(biāo)哦，否則也是會(huì)虛的。）全矢量化的設(shè)計(jì)，在以后相當(dāng)長(zhǎng)的一段時(shí)間，應(yīng)該會(huì)慢慢變成主流。

最后的總結(jié)

1.簡(jiǎn)單粗暴的適配iPhone6plus的原理，直接將現(xiàn)有圖標(biāo)的長(zhǎng)寬分別放大1.5倍即可，也就是從@2x到@3x。 強(qiáng)烈建議使用1080分辨率來(lái)設(shè)計(jì)，然后等比縮放（長(zhǎng)寬各縮放2/3）

2.鑒于iphone5/5s/6/plus的長(zhǎng)寬比均為9:16.所以比例問(wèn)題設(shè)計(jì)在這個(gè)階段可以不用考慮。 至于plus所說(shuō)的橫版顯示的適配，則需要重新設(shè)計(jì)應(yīng)用。

3.此方法經(jīng)靜電與cocoachina網(wǎng)友在xcode GM版本中驗(yàn)證，但由于手頭缺少真機(jī)（買(mǎi)不起，沒(méi)的買(mǎi)），因此你懂的。此后可能根據(jù)實(shí)際情況有些許變化，大家可以靜觀其變，也可以多多跟身邊工程師交流和探討，爭(zhēng)取盡快適配新的iphone機(jī)型。

4.使用基于矢量的sketch來(lái)做設(shè)計(jì)稿有助于減少重繪工作量，提高工作效率。

原文鏈接：