淺析iPhone X的適配

首先我們習慣用iPhone7的375*667pt爲設計稿向上適配iPhone7puls的屏幕。但是iPhone X的出現看似要打破這個局面,其實不然。

iPhone X的屏幕分辨率是1125*2436px換算成三倍圖則爲375*812pt(@3x)相比iPhone7的375*667pt只高了145pt。所以我們可以把iPhone X簡單看成iPhone7的“加長版”。


iPhone X算是一個“奇葩”屏設計了,去掉了原有的home鍵又增加了“齊劉海”的狀態欄設計。根據蘋果官方給出的設計規範。Navigation bar和Bottom bar將做出較大的改變來適配這個“奇葩”屏幕的設計。



官方給出的設計規範就是Navigation bar增加到44pt即給“齊劉海”增加了26pt,而Bottom bar以下則增加了34pt。剩下的85pt則是多餘出來的位置。

當然這塊1125*2436的“異形屏”並不是全部區域都是可用的,實際上根據官方給出的規範說明,除去全屏顯示體驗的情況下,存在着設計的“安全區”。



這樣是適配對iPhone X的影響並不會太大。可以正常的從375*667pt的@3x適配到iPhone X。但是部分全屏設計頁面還是得做細節的調整。包括全面顯示的頁面、啓動頁和引導頁等等

所以對於適配iPhone X,只需要正常用iPhone7適配7plus的方式做@3x圖適配就可以了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章