97超精品视频在线观看_91人人在线_亚洲精品国产综合一线久久_日本最新免费二区

當前位置: 首頁 > 設計資訊 > 設計教程 > 正文

關于高效率適配新機型

2018-10-15 1645 0

新機型一發布,設計師們就要考慮適配問題。關于適配的文章看了幾篇了? 眼花繚亂否? 不如看一篇簡單直接的!


 

首先,我們來看下這三款機型的屏幕參數。

           

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 原型范例      


 


22
評論區(0)
正在加載評論...
相關推薦