淺析iPhone X的適配
廣州/UI設(shè)計(jì)師/8年前/571瀏覽
版權(quán)
淺析iPhone X的適配
淺析iPhone X的適配

首先我們習(xí)慣用iPhone7的375*667pt為設(shè)計(jì)稿向上適配iPhone7puls的屏幕。但是iPhone X的出現(xiàn)看似要打破這個(gè)局面,其實(shí)不然。
iPhone X的屏幕分辨率是1125*2436px換算成三倍圖則為375*812pt(@3x)相比iPhone7的375*667pt只高了145pt。所以我們可以把iPhone X簡單看成iPhone7的“加長版”。

iPhone X算是一個(gè)“奇葩”屏設(shè)計(jì)了,去掉了原有的home鍵又增加了“齊劉海”的狀態(tài)欄設(shè)計(jì)。根據(jù)蘋果官方給出的設(shè)計(jì)規(guī)范。Navigation bar和Bottom bar將做出較大的改變來適配這個(gè)“奇葩”屏幕的設(shè)計(jì)。

官方給出的設(shè)計(jì)規(guī)范就是Navigation bar增加到44pt即給“齊劉海”增加了26pt,而Bottom bar以下則增加了34pt。剩下的85pt則是多余出來的位置。
當(dāng)然這塊1125*2436的“異形屏”并不是全部區(qū)域都是可用的,實(shí)際上根據(jù)官方給出的規(guī)范說明,除去全屏顯示體驗(yàn)的情況下,存在著設(shè)計(jì)的“安全區(qū)”。


這樣是適配對(duì)iPhone X的影響并不會(huì)太大??梢哉5膹?75*667pt的@3x適配到iPhone X。但是部分全屏設(shè)計(jì)頁面還是得做細(xì)節(jié)的調(diào)整。包括全面顯示的頁面、啟動(dòng)頁和引導(dǎo)頁等等

所以對(duì)于適配iPhone X,只需要正常用iPhone7適配7plus的方式做@3x圖適配就可以了。
3
舉報(bào)
聲明
7
分享
評(píng)論你的想法~
表情
喜歡TA的作品嗎?喜歡就快來夸夸TA吧!
你可能喜歡
登錄注冊(cè)
3登錄即可同步推薦記錄哦
7登錄即可加入我的收藏
評(píng)論登錄即可評(píng)論想法
分享分享





































