觸屏版
全國(guó)服務(wù)熱線:0571-87205688
登錄
注冊(cè)
客戶中心
關(guān)注云客
移動(dòng)端如何快速適配 iPhone X?作者總結(jié)了以下幾個(gè)要點(diǎn),希望對(duì)你有所幫助。
iPhone X上市一周時(shí)間,蘋果App Store終于出新版本,更新日志顯示:全面優(yōu)化并適配iPhone X,大部分的APP已經(jīng)適配了iPhone X,但是畢竟是臨時(shí)工版,后續(xù)如何深度適配iPhone X?歡迎大家一起來(lái)探討~
先拿王者農(nóng)藥舉例,11月8日不停服更新,雖然沒(méi)有了大黑邊,用黑色漸變色沖淡“劉?!钡耐回8?,還加入了iPhone X高幀率模式,但是上一個(gè)版本home條的退出邏輯需要滑動(dòng)兩次確認(rèn)操作,現(xiàn)在變成了現(xiàn)在滑動(dòng)就立刻退出,這交互設(shè)計(jì)不知道坑了多少玩家啊,而且一部分顯示內(nèi)容還是被“劉?!睋踝×藒
吐槽完畢開始進(jìn)入正式話題,移動(dòng)端如何快速適配 iPhone X?個(gè)人總結(jié)可以從以下幾點(diǎn)快速入手,減少招黑指數(shù)。
1、比例和像素變化
iPhone X 的顯示寬度 4.7 寸,與 iPhone相一致,不過(guò) iPhone X 高度比iPhone7多出145pt,內(nèi)容增加了大約 20% 的垂直顯示空間,iPhone X 內(nèi)容體驗(yàn)更加狹長(zhǎng)了,所以內(nèi)容和按鈕要根據(jù)iPhone X 的 比例重新優(yōu)化嘍。
iPhone X像素分辨率達(dá)到了1125 x 2436px ,458 ppi,官方稱之為 Super Retina 屏。要使用三倍圖是重點(diǎn),官方建議盡可能多使用 PDF 矢量圖形,這將會(huì)獲得更好的展示,同時(shí)還可以減小 App 所占容量。
這張配置對(duì)比圖大家就可以直觀了解X的變化了
2、全面屏設(shè)計(jì)
iPhone X 狀態(tài)欄由以前的20pt變成了44pt,為了安置前置鏡頭以及紅外等更多的傳感器,所以出現(xiàn)了招黑的劉海,如果項(xiàng)目里隱藏了導(dǎo)航欄加了自定義按鈕之類,這里需要注意適配一下,最重要的是, 如果用戶撥打電話或使用導(dǎo)航時(shí),這個(gè)高度不會(huì)改變, 這一點(diǎn)在其他的 iPhone上也是一樣。
但是畢竟?fàn)顟B(tài)欄在非安全區(qū)域,除非可以通過(guò)隱藏狀態(tài)欄給用戶帶來(lái)額外的價(jià)值,否則最好把狀態(tài)欄還給用戶。
為了讓屏幕能盡可能大,屏幕四個(gè)角全變成了圓角,展示出來(lái)的設(shè)計(jì)布局要求填滿整個(gè)屏幕,填滿的同時(shí)要注意控件不要被大圓角和劉海部分所遮擋,也不要放置黑色的狀態(tài)欄。
對(duì)于一些老項(xiàng)目, APP在iPhone X上運(yùn)行發(fā)現(xiàn)沒(méi)有充滿屏幕,上下有黑色區(qū)域,可能沒(méi)有采用xib或者SB進(jìn)行適配的,這樣導(dǎo)致整個(gè)項(xiàng)目運(yùn)行就會(huì)不能完全貼合,解決辦法啟動(dòng)圖的尺寸為1125×2436,在項(xiàng)目設(shè)置里面直接用LaunchScreen.xib或者LaunchScreen.storyboard進(jìn)行配置啟動(dòng)圖,這樣項(xiàng)目就會(huì)完整顯示了。
3、Facel ID
iPhone以前采用Touch ID來(lái)解鎖設(shè)備或執(zhí)行密碼鎖定的操作,iPhone X通過(guò)頂部傳感器實(shí)現(xiàn)Facel ID,應(yīng)用中會(huì)有一些新的用戶界面,確保用戶激活時(shí)不在引用Touch ID,要將其替換為Facel ID。
4、home指示條
iPhone X為了達(dá)到全面屏效果,移除了實(shí)體 Home 鍵,取而代之的是一條 134 x 5 pt 的虛擬 Home 指示條。底端上劃成為了全局性的系統(tǒng)操作,用以返回桌面、切換程序,考慮到手勢(shì)沖突,這部分也要避免可交互的控件,以免造成王者農(nóng)藥的尷尬。
在設(shè)計(jì)自定義鍵盤時(shí), 不需要在鍵盤上添加表情或聽寫按鈕。因?yàn)樗鼤?huì)自動(dòng)添加到鍵盤下方的 Home鍵區(qū)域。
5、安全區(qū)布局
對(duì)于 iPhone 8 和以往的 iPhone,由于屏幕規(guī)規(guī)整整的矩形,安全區(qū)就是整塊屏幕。但 iPhone X全面屏留海、圓角、Home 指示條都讓屏幕交互非常棘手,所以要將屏幕矩形劃分,把重要內(nèi)容放置在屏幕安全區(qū), 以確保內(nèi)容始終不被遮擋。
劃分安全區(qū):手機(jī)縱向時(shí),安全區(qū)上沿是從屏幕最頂端往下 44 pt,所以安全區(qū)并不是和劉海完全齊平,而是要再往下一點(diǎn)點(diǎn)。
iPhoneX由于底部安全區(qū)的原因UITabBar高度由49pt變成了83pt,為了給 Home 指示條足夠的空間,從下往上推 34 pt 開始才被視為安全區(qū)。
把屏幕橫向時(shí),安全區(qū)又產(chǎn)生了變化,Home 指示條挪到了屏幕下方,而劉海和Home 指示條的安全范圍保持不變,但是橫向的安全區(qū)被“壓縮”得更狹長(zhǎng)了。
確保重要內(nèi)容在安全區(qū)并使用對(duì)稱插入, 這樣不會(huì)被劉?;驁A角所截?cái)唷H绻闶怯米詣?dòng)布局,你的內(nèi)容將自動(dòng)適配到安全區(qū)域,所以你的設(shè)計(jì)不會(huì)被遮擋在劉?;蛘逪ome鍵之后。
評(píng)論(0人參與,0條評(píng)論)
發(fā)布評(píng)論
最新評(píng)論