關(guān)于高效率適配新機(jī)型

2018-10-15 1585 0

新機(jī)型一發(fā)布,設(shè)計(jì)師們就要考慮適配問(wèn)題。關(guān)于適配的文章看了幾篇了? 眼花繚亂否? 不如看一篇簡(jiǎn)單直接的!


 

首先,我們來(lái)看下這三款機(jī)型的屏幕參數(shù)。

           

iPhone XS 


 

1125 X 2436px 分辨率, 458 ppi


 

iPhone XS Max


 

1242 x 2688px 分辨率,458 ppi


 

iPhone XR


 

828 X 1792px 分辨率,326ppi


 


 

從ppi看,萬(wàn)幸,一切都是熟悉的,也就是說(shuō)切圖倍數(shù)沒(méi)有改變。iPhone XS, XS Max 和 iPhone X 一致,都是 458 ppi,因此還是3倍切圖@3x就好了! iPhone XR 和 iPhone 6/7/8 一致,都是 326ppi,因此采用2倍切圖@2x 。


 

切圖方面沒(méi)有什么麻煩,現(xiàn)在看下新尺寸對(duì)設(shè)計(jì)布局的影響。


 


 

首先我們看下新機(jī)型的邏輯像素(pt)尺寸(即密度無(wú)關(guān)像素尺寸)


 

iPhone XS:分辨率/3,即 375 x 812pt,因此跟iPhone X 的布局完全一致;


 

iPhone XS Max: 分辨率/3, 即 414 x 896pt;


 

iPhone XR:分辨率/2,即 414 x  896pt。


 

也就是說(shuō),相當(dāng)于只增加了一個(gè)尺寸 414 x 896pt,而且 XS Max 和 XR 都是全面屏需要留出安全區(qū)域。


 


 

因此如果你是以 iPhone 8 (375x667pt) 為基準(zhǔn)做 XS Max 和 XR 的設(shè)計(jì)稿,那么就是拉寬拉高尺寸到 414 x 896, 然后狀態(tài)欄由20pt變?yōu)?4pt,添加底部主頁(yè)指示器34pt。


 

      
 


 


 


 

如果你是以 iPhone X (375x812) 為基準(zhǔn)做 XS Max 和 XR 的設(shè)計(jì)稿,只需要拉寬拉高尺寸到 414 x 896,狀態(tài)欄和底部主頁(yè)指示器均不用更改。

      
 


 


 

而后續(xù)的圖片等元素的適配,就需要從視覺(jué)角度靈活調(diào)整了。


 

不過(guò),對(duì)于尺寸計(jì)算和安全區(qū)域,現(xiàn)在完全不需要你手動(dòng)操作,墨刀已經(jīng)率先火速為大家新出了 XS/ XS Max 和 XR的適配,一鍵創(chuàng)建 XS/ MAX/ XR項(xiàng)目就可以!狀態(tài)欄和底部主頁(yè)指示器已經(jīng)默默地躺在那里給你們用了!


 

      創(chuàng)建項(xiàng)目時(shí),直接選擇“iPhone XS Max 和 XR”的尺寸


 


 

不管是從Sketch導(dǎo)入基準(zhǔn)設(shè)計(jì)稿稍作調(diào)整,還是在墨刀完成新設(shè)計(jì),


 

點(diǎn)擊”預(yù)覽“,便能 show 出 XS/ XS Max 和 XR 的展示效果了! 


 

 墨刀的一個(gè)iPhone XS Max 原型范例      


 


22
評(píng)論區(qū)(0)
正在加載評(píng)論...