新機型一發布,設計師們就要考慮適配問題。關于適配的文章看了幾篇了? 眼花繚亂否? 不如看一篇簡單直接的!
首先,我們來看下這三款機型的屏幕參數。
iPhone XS
1125 X 2436px 分辨率, 458 ppi
iPhone XS Max
1242 x 2688px 分辨率,458 ppi
iPhone XR
828 X 1792px 分辨率,326ppi
從ppi看,萬幸,一切都是熟悉的,也就是說切圖倍數沒有改變。iPhone XS, XS Max 和 iPhone X 一致,都是 458 ppi,因此還是3倍切圖@3x就好了! iPhone XR 和 iPhone 6/7/8 一致,都是 326ppi,因此采用2倍切圖@2x 。
切圖方面沒有什么麻煩,現在看下新尺寸對設計布局的影響。
首先我們看下新機型的邏輯像素(pt)尺寸(即密度無關像素尺寸)
iPhone XS:分辨率/3,即 375 x 812pt,因此跟iPhone X 的布局完全一致;
iPhone XS Max: 分辨率/3, 即 414 x 896pt;
iPhone XR:分辨率/2,即 414 x 896pt。
也就是說,相當于只增加了一個尺寸 414 x 896pt,而且 XS Max 和 XR 都是全面屏需要留出安全區域。
因此如果你是以 iPhone 8 (375x667pt) 為基準做 XS Max 和 XR 的設計稿,那么就是拉寬拉高尺寸到 414 x 896, 然后狀態欄由20pt變為44pt,添加底部主頁指示器34pt。
如果你是以 iPhone X (375x812) 為基準做 XS Max 和 XR 的設計稿,只需要拉寬拉高尺寸到 414 x 896,狀態欄和底部主頁指示器均不用更改。
而后續的圖片等元素的適配,就需要從視覺角度靈活調整了。
不過,對于尺寸計算和安全區域,現在完全不需要你手動操作,墨刀已經率先火速為大家新出了 XS/ XS Max 和 XR的適配,一鍵創建 XS/ MAX/ XR項目就可以!狀態欄和底部主頁指示器已經默默地躺在那里給你們用了!
創建項目時,直接選擇“iPhone XS Max 和 XR”的尺寸
不管是從Sketch導入基準設計稿稍作調整,還是在墨刀完成新設計,
點擊”預覽“,便能 show 出 XS/ XS Max 和 XR 的展示效果了!
墨刀的一個iPhone XS Max 原型范例