iPhone X適配沒那么復(fù)雜奇瘦，但也不是看上去這么簡單
屏幕尺寸
我們熟知的iphone 系列開發(fā)尺寸概要如下：
圖1-1：iPhone各機(jī)型的開發(fā)尺寸
轉(zhuǎn)化成我們熟知的像素尺寸：
圖1-2：每個機(jī)型的多維度尺寸
倍圖其實(shí)就是像素尺寸和開發(fā)尺寸的倍率關(guān)系，但這只是外在的表現(xiàn)；
倍圖核心的影響因素在于PPI(DPI)胡嘿，了解屏幕密度與各尺寸的關(guān)系有助于我們深度理解倍率的概念：鏈接：《解讀：我們說的倍圖@2X @3X到底是什么匀谣？為什么？》
8在本次升級中科贬，屏幕尺寸和分辨率都遺傳了iPhone6以后的優(yōu)良傳統(tǒng)泳梆；
然而iPhone X 無論是在屏幕尺寸、分辨率榜掌、甚至是形狀上都發(fā)生了較大的改變优妙，下面以iPhone 8作為參照物，看看到底iPhone X的適配 我們要怎么考慮憎账。
我們看看iPhone X尺寸上的變化：
圖1-3：iPhone 8與X 開發(fā)尺寸比對
開發(fā)尺寸上可以發(fā)現(xiàn)X和8的寬度一致套硼，然而在垂直方向上多了145 pt，這就意味著首屏可以展示更多的內(nèi)容胞皱，多出20%的垂直空間邪意。對于京東淘寶而言這應(yīng)該就意味著更高的商品曝光率或者是更高的運(yùn)營位價值。
從整體設(shè)計尺寸看：iPhone 8的像素尺寸是750*1334 px(@2X)反砌，而iPhone X的像素尺寸是1125*2436 px(@3X)雾鬼，同樣的寬度 一個用@2X圖，一個用@3X圖宴树，表現(xiàn)出了更高的清晰度策菜。
圖1-4：不同倍圖在表現(xiàn)區(qū)域一致時的效果——來自HIG
iPhone X的屏幕密度為458ppi。
有一種說法：認(rèn)為肉眼可識別的最高密度為300ppi。而iPhone X的458ppi在手機(jī)屏幕歷史可能僅次于HTC one的468ppi(2013年)又憨， 所以完全可以認(rèn)為X 是今天市面上最清晰的手機(jī)^_^ 無論我這個凡人的肉眼能不能看得出區(qū)別來翠霍，都不能影響它的傲嬌。
經(jīng)@風(fēng)殤月小伙伴提醒 三星galaxy系列的PPI都到522了蠢莺，真是鄙人孤陋寡聞寒匙，看樣子iPhone X連最清晰的手機(jī) 也不能吹噓了。
布局
我們再來看看設(shè)計師和移動端開發(fā)工程師要考慮到的布局：
1-保證你的設(shè)計布局能夠填充整個屏幕浪秘；
2-注意你的核心內(nèi)容不要被設(shè)備的大圓角蒋情、傳感器(齊劉海)、以及底部訪問主屏幕的指示燈遮擋耸携；
圖2-1：iPhone X設(shè)計應(yīng)當(dāng)填充整個屏幕
圖2-2：注意X的大圓角和傳感器
設(shè)計布局要填充整個屏幕棵癣，這里有兩塊區(qū)域需要額外考慮：
①屏幕頂部，即StatusBar部分夺衍，這條狀態(tài)欄本來并沒有可發(fā)揮的空間狈谊，但是iphone的StatusBar與NavigationBar(以下簡稱NavBar)背景是可以通欄的，以達(dá)到一種完全沉浸式體驗(yàn)的設(shè)計沟沙。
大部分的APP應(yīng)該也是沒有影響的（主流NavBar都采用純色背景河劝，StatusBar背景沿用NavBar的背景），但是對于那些做了NavBar視覺效果的設(shè)計師就要考慮了矛紫，你的漸變色背景赎瞎、或者帶底紋的北背景、還包括電商平臺商品圖是通欄展示的商品圖颊咬，多少會對實(shí)際效果產(chǎn)生一些影響务甥。
比如，NavigationBar是漸變色背景的喳篇，由于X的Status+Nav高度增加敞临，我們1242*192(@3X)的背景圖會被等比例拉伸至這兩塊區(qū)域并且剪輯多余部分。如圖2-2
圖2-3：NavBar與StatusBar背景圖適配上的表現(xiàn)
②屏幕底部
圖2-4：訪問主屏幕的指示燈區(qū)域——來自WWDC
屏幕底部的虛擬區(qū)麸澜，替代了home鍵挺尿，高度為34pt。
指示燈區(qū)域是一個帶著系統(tǒng)功能的內(nèi)容顯示區(qū)域炊邦，這就意味著它可以展示你內(nèi)容编矾；同時如果你的底部是TabBar，那么指示燈區(qū)域背景會來自于TabBar背景的延伸铣耘；如果我們是一個feed流的頁面洽沟，底部則會展示次屏feed流的局部。
圖2-5：指示燈區(qū)域——來自WWDC
鑒于圓角蜗细、傳感器、指示燈區(qū)域的影響，iPhone X給出了設(shè)計布局的安全區(qū)意見：
圖2-6：以iPhone8作為參考的安全區(qū)
圖2-7：iPhone X全屏的安全區(qū)（375*734 pt）
再考慮必要的NavBar悲柱、TabBar凝危，主題內(nèi)容顯示的安全區(qū)需要根據(jù)設(shè)計需求進(jìn)行考慮俐载。根據(jù)實(shí)際需要，我們添加的所有控件都應(yīng)當(dāng)在安全區(qū)內(nèi)缎岗，如各類型的Button、Edit Menu白粉、Pickers传泊、Sliders等等。
圖2-8：所有的控件應(yīng)當(dāng)放置在安全區(qū)域內(nèi)
圖2-9：安全區(qū)域內(nèi)控件的示范
注意你的內(nèi)容不要被裁切：建議內(nèi)容為居中對稱已不被圓角或傳感器等遮擋鸭巴。也建議使用系統(tǒng)提供的的元素以及自動布局來構(gòu)建頁面獲得更好的適配效果眷细。
注意StatusBar的高度：X的狀態(tài)欄高度會更高，如果有開發(fā)伙伴對NavgationBar的位置是通過固定值進(jìn)行位置的定位的鹃祖，建議進(jìn)行APP升級溪椎。
如果你的APP是隱藏StatusBar的，建議重新考慮：X為用戶在垂直空間上提供了更多展示余地恬口，且狀態(tài)欄中也包含了用戶需要知道的信息校读，除非能通過隱藏狀態(tài)欄帶給用戶額外的價值，否則蘋果建議大家將狀態(tài)欄還給用戶祖能。
——任性地翻譯自《Human Interface Guiidelines》
如果看到新的知識點(diǎn)歉秫，不定期更新。
作者：風(fēng)口上的豬毛
鏈接：http://www.reibang.com/p/5602711ff7b1
來源：簡書
著作權(quán)歸作者所有养铸。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)雁芙，非商業(yè)轉(zhuǎn)載請注明出處。
