iPhone X適配沒(méi)那么復(fù)雜，但也不是看上去這么簡(jiǎn)單

iPhone X 搭載了超大，高清晰度，大圓角，無(wú)邊框的表現(xiàn)屏，又一次刷新了我們對(duì)內(nèi)容優(yōu)先的沉浸式體驗(yàn)的熟悉?！g自《Human Interface Guiidelines》

屏幕尺寸

我們熟知的iPhone系列開(kāi)發(fā)尺寸概要如下：

△ iPhone各機(jī)型的開(kāi)發(fā)尺寸

轉(zhuǎn)化成我們熟知的像素尺寸：

△ 每個(gè)機(jī)型的多維度尺寸

倍圖其實(shí)就是像素尺寸和開(kāi)發(fā)尺寸的倍率關(guān)系，但這只是外在的體現(xiàn)。倍圖核心的影響因素在于PPI（DPI），了解屏幕密度與各尺寸的關(guān)系有助于我們深度理解倍率的概念：《基礎(chǔ)知識(shí)學(xué)起來(lái)！為設(shè)計(jì)師量身打造的DPI指南》

iPhone8在本次升級(jí)中，屏幕尺寸和分辨率都遺傳了iPhone6以后的精良傳統(tǒng)；

然而iPhone X 無(wú)論是在屏幕尺寸、分辨率、甚至是外形上都發(fā)生了較大的改變，下面以iPhone 8作為參照物，看看到底iPhone X的適配我們要怎么考慮。

我們看看iPhone X尺寸上的轉(zhuǎn)變：

△ iPhone 8與X 開(kāi)發(fā)尺寸比對(duì)

開(kāi)發(fā)尺寸上可以發(fā)現(xiàn)X和8的寬度同等，然而在垂直方向上多了145 pt，這就意味著首屏可以展示更多的內(nèi)容，多出20%的垂直空間。對(duì)于京東淘寶而言這應(yīng)該就意味著更高的商品曝光率或者是更高的運(yùn)營(yíng)位價(jià)值。

從團(tuán)體設(shè)計(jì)尺寸看：iPhone 8的像素尺寸是750*1334 px(@2X)，而iPhone X的像素尺寸是1125*2436 px(@3X)，同樣的寬度 一個(gè)用@2X圖，一個(gè)用@3X圖，體現(xiàn)出了更高的清晰度。

△ 不同倍圖在體現(xiàn)區(qū)域同等時(shí)的結(jié)果

iPhone X的屏幕密度為458ppi。

有一種說(shuō)法：認(rèn)為肉眼可識(shí)別的最高密度為300ppi。而iPhone X的458ppi在手機(jī)屏幕歷史可能僅次于HTC one的468ppi(2013年)，不過(guò)三星Galaxy系列的PPI都到522了，看樣子iPhone X連最清晰的手機(jī)也不能揄?yè)P(yáng)了。

布局

我們?cè)賮?lái)看看設(shè)計(jì)師和移動(dòng)端開(kāi)發(fā)工程師要考慮到的布局：

• 保證你的設(shè)計(jì)布局能夠添補(bǔ)整個(gè)屏幕。
• 細(xì)致你的核心內(nèi)容不要被設(shè)備的大圓角、傳感器(齊劉海)、以及底部訪問(wèn)主屏幕的指示燈遮擋。

△ iPhone X設(shè)計(jì)應(yīng)當(dāng)添補(bǔ)整個(gè)屏幕

△ 細(xì)致X的大圓角和傳感器

設(shè)計(jì)布局要添補(bǔ)整個(gè)屏幕，這里有兩塊區(qū)域必要額外考慮：

屏幕頂部，即StatusBar部分

這條狀況欄原本并沒(méi)有可發(fā)揮的空間，但是iPhone的StatusBar與NavigationBar(以下簡(jiǎn)稱(chēng)NavBar)背景是可以通欄的，以達(dá)到一種完全沉浸式體驗(yàn)的設(shè)計(jì)。

大部分的APP應(yīng)該也是沒(méi)有影響的（主流NavBar都采用純色背景，StatusBar背景相沿NavBar的背景），但是對(duì)于那些做了NavBar視覺(jué)結(jié)果的設(shè)計(jì)師就要考慮了，你的漸變色背景、或者帶底紋的背景、還包括電商平臺(tái)商品圖是通欄展示的商品圖，多少會(huì)對(duì)現(xiàn)實(shí)結(jié)果產(chǎn)生一些影響。

比如，NavigationBar是漸變色背景的，因?yàn)閕PhoneX的Status+Nav高度增長(zhǎng)，我們1242*192(@3X)的背景圖會(huì)被等比例拉伸至這兩塊區(qū)域并且剪輯多余部分。

△ NavBar與StatusBar背景圖適配上的體現(xiàn)

屏幕底部

△ 訪問(wèn)主屏幕的指示燈區(qū)域——來(lái)自WWDC

屏幕底部的假造區(qū)，替換了Home鍵，高度為34pt。

指示燈區(qū)域是一個(gè)帶著體系功能的內(nèi)容表現(xiàn)區(qū)域，這就意味著它可以展示內(nèi)容；同時(shí)假如你的底部是TabBar，那么指示燈區(qū)域背景會(huì)來(lái)自于TabBar背景的延長(zhǎng)；假如我們是一個(gè)feed流的網(wǎng)頁(yè)，底部則會(huì)展示次屏feed流的局部。

△ 指示燈區(qū)域

鑒于圓角、傳感器、指示燈區(qū)域的影響，iPhone X給出了設(shè)計(jì)布局的安全區(qū)意見(jiàn)：

△ 以iPhone8作為參考的安全區(qū)

△ iPhoneX全屏的安全區(qū)（375*734 pt）

再考慮需要的NavBar、TabBar，主題內(nèi)容表現(xiàn)的安全區(qū)必要根據(jù)設(shè)計(jì)需求進(jìn)行考慮。根據(jù)現(xiàn)實(shí)必要，我們添加的所有控件都應(yīng)當(dāng)在安全區(qū)內(nèi)，如各類(lèi)型的Button、Edit Menu、Pickers、Sliders等等。

△ 所有的控件應(yīng)當(dāng)放置在安全區(qū)域內(nèi)

△ 安全區(qū)域內(nèi)控件的示范

總結(jié)

• 細(xì)致你的內(nèi)容不要被裁切：建議內(nèi)容為居中對(duì)稱(chēng)以不被圓角或傳感器等遮擋。使用體系提供的的元素以及主動(dòng)布局來(lái)構(gòu)建網(wǎng)頁(yè)獲得更好的適配結(jié)果。
• 細(xì)致StatusBar的高度：iPhoneX的狀況欄高度會(huì)更高，假如有開(kāi)發(fā)伙伴對(duì)NavgationBar的位置是通過(guò)固定值進(jìn)行位置的定位的，建議進(jìn)行APP升級(jí)。
• 假如你的APP是隱蔽StatusBar的，建議重新考慮：iPhoneX為用戶在垂直空間上提供了更多展示余地，且狀況欄中也包含了用戶必要知道的信息，除非能通過(guò)隱蔽狀況欄帶給用戶額外的價(jià)值，否則蘋(píng)果建議大家將狀況欄還給用戶。

原文地址：jianshu