不知道小伙伴們是否觀看了半夜直播的蘋果新品發(fā)布會,靜電實在熬不住了,所以只有第二天起床瀏覽鋪天蓋地的消息了. 這次蘋果發(fā)布了新款手機iphone6及iphone6 Plus,作為果粉,看著實在眼饞啊.不過摸摸自己那發(fā)酸的腰………額,還是養(yǎng)養(yǎng)再說吧。
作為設(shè)計師,我們肯定想知道,新款的iphone對我們目前的設(shè)計開發(fā)有多少影響。適配要多少工作量?工作量大的話,趕工期的小伙伴們會不會哭暈在廁所里?嗯嗯,那么先來看看這次蘋果發(fā)布的新機型的參數(shù)。
iPhone各機型分辨率解析
我們先來看看新款iphone的分辨率和ppi
使用何種尺寸來做設(shè)計稿?
由上邊的分析,我們知道, 如果要適配iPhone6 Plus的圖片資源,做到真正的高清,我們必須要將現(xiàn)有的@2x的圖片資源的寬高各放大1.5倍。
由于現(xiàn)在大部分設(shè)計師都采用photoshop等位圖軟件來設(shè)計,大家知道,對于位圖,從大尺寸到小尺寸的縮放沒問題,但從小尺寸到大尺寸的放大,問題可就沒那么簡單了,沒錯,糊了!所以靜電建議大家,直接使用1080-1920的分辨率來設(shè)計,生成@3x尺寸的圖片資源,然后再批量縮小為@2x。其實說到這里,靜電也挺糾結(jié)的,因為現(xiàn)在大部分顯示器還是全高清的1080p顯示器,如果用這么大的尺寸來作圖,我們的顯示器尺寸就捉襟見肘了。所以,靜電只能默默期待有一天,顯示器的分辨率能進一步提高,高清顯示器的價格進一步下降,否則,設(shè)計師估計要哭死了。
如何在這個階段來過渡呢?如果我們的設(shè)計稿已經(jīng)全部位圖化,那么很苦逼,你需要將所有圖標重繪擴大。 如果你有幸還保存著設(shè)計源文件,切源文件里大部分都是矢量化的圖片,那么還好還好,簡單拉大再導(dǎo)出就好了。不過怎么說都是一件費時費力的工作,靜電只能說,免不了,大家辛苦了。
制作矢量化的設(shè)計稿-高清重繪無障礙
sketch在之前靜電的設(shè)計教室已經(jīng)講過(小伙伴可以直接訪問靜電的主頁查看sketch教程),相信小伙伴已經(jīng)漸漸的開始用這款神器來做設(shè)計了。這個時候,用sketch做設(shè)計的好處慢慢的展現(xiàn)出來,全矢量的圖標,想導(dǎo)出多大就導(dǎo)出多大,是不是方便很多?(當然,我們不能用位圖圖標哦,否則也是會虛的。)全矢量化的設(shè)計,在以后相當長的一段時間,應(yīng)該會慢慢變成主流。
最后的總結(jié)
1.簡單粗暴的適配iPhone6plus的原理,直接將現(xiàn)有圖標的長寬分別放大1.5倍即可,也就是從@2x到@3x。 強烈建議使用1080分辨率來設(shè)計,然后等比縮放(長寬各縮放2/3)
2.鑒于iphone5/5s/6/plus的長寬比均為9:16.所以比例問題設(shè)計在這個階段可以不用考慮。 至于plus所說的橫版顯示的適配,則需要重新設(shè)計應(yīng)用。
3.此方法經(jīng)靜電與cocoachina網(wǎng)友在xcode GM版本中驗證,但由于手頭缺少真機(買不起,沒的買),因此你懂的。此后可能根據(jù)實際情況有些許變化,大家可以靜觀其變,也可以多多跟身邊工程師交流和探討,爭取盡快適配新的iphone機型。
4.使用基于矢量的sketch來做設(shè)計稿有助于減少重繪工作量,提高工作效率。
作者:jingdesign ?公眾號: jingdesign91
這些文章是轉(zhuǎn)載的嗎?
首先,icon無論放大還是縮小,都是會糊的,只不過縮小會好一點。
其次,iphone6+有兩種顯示模式:普通模式和放大模式。放大模式基本等于3x模式,但普通模式僅僅是2x,為了iphone6+的放大模式,犧牲ip5\ip6的精確圖標顯示也不見得好得哪里去。
其實矢量才是王道,只不過蘋果至今沒有推薦用矢量圖標。
旺旺~