UI設(shè)計(jì)如何適配 iPhone X

熟悉 iPhone X

這里用 iPhone 6 舉例子是因?yàn)榇蟛糠衷O(shè)計(jì)師都用 iPhone 6 來(lái)做設(shè)計(jì)稿，方便大家理解，其實(shí) iPhone 8也是這個(gè)分辨率。

iPhone 6 ：750×1334px（375×667px @2x）

iPhone X ：1125×2436px (375×812px @3x)

在邏輯像素上 iPhone X 的寬度和 iPhone 6 保持一致，只是高度高了145px（812-667），如果是用@1x做設(shè)計(jì)稿，那么在適配 iPhone X 的時(shí)候會(huì)方便很多，因?yàn)橹恍枰黾痈叨染湍艿玫?iPhone X 的大小，所有的 Symbol 基本不變，只是復(fù)制幾個(gè)蘋(píng)果爸爸的Symbol 到你的Symbol 里面，用來(lái)做 iPhone X 的設(shè)計(jì)稿。但是如果用@2x 來(lái)做設(shè)計(jì)稿會(huì)稍微麻煩些，畢竟Sketch UI Kit 都是基于@1x 來(lái)做設(shè)計(jì)稿的，所以只能把 symbol 重新解散，然后做成@2x大小的尺寸。

雖然它們的邏輯像素寬度一致，但是他們的像素分辨率是不一樣的，iPhone 6 采用@2x切圖，iPhone X 采用@3x 切圖。有人會(huì)用@2x 做設(shè)計(jì)稿，那怎么適配 iPhone X 設(shè)計(jì)稿，難道要縮放？ iPhone 6 （750×1334px）尺寸到 iPhone X（1125×2436px），雖然兩者的寬度關(guān)系是1.5倍，但是通過(guò)縮放做 iPhone X 也是相當(dāng)麻煩，因?yàn)槟愕?Sketch 設(shè)計(jì)稿里面可能存在 Symbol，所以這樣的做法是行不通的。但如果你的團(tuán)隊(duì)都是用@2x 來(lái)做設(shè)計(jì)稿的話，也沒(méi)什么問(wèn)題，接下來(lái)就提供一個(gè)更簡(jiǎn)單的方法解決 iPhone X 的適配問(wèn)題。

iPhone X 適配

我列出了 iPhone X 的三種分辨率的尺寸：375×812px（@1x），750×1624px（@2x），1125×2436px（@3x）

如果你的團(tuán)隊(duì)使用的是750×1334px（@2x）的設(shè)計(jì)稿，你在適配 iPhone X 的時(shí)候可以采用 iPhone X @2x的圖來(lái)適配，這樣就省去了縮放這一步驟，而且開(kāi)發(fā)使用的是邏輯像素即375pt×812px來(lái)做 iPhone X 的設(shè)計(jì)還原的，所以這樣設(shè)計(jì) iPhone X 是不會(huì)影響開(kāi)發(fā)的，因?yàn)?50×1624px（@2x）還原到@1x 還是375×812px，相信你已經(jīng)明白了。

1.iPhone X安全區(qū)域問(wèn)題

如果你用@1x 來(lái)做設(shè)計(jì)稿：iPhone X 安全區(qū)域是375×734px。

如果你用@2x 來(lái)做設(shè)計(jì)稿：iPhone X 安全區(qū)域是750×1468px。

2.如何計(jì)算 iPhone X 安全區(qū)域

@1x 的 iPhone X 安全區(qū)域：

安全區(qū)域=812px—Status Bar (44px) +Home Indicator（34px）

@2x 的 iPhone X 安全區(qū)域：

安全區(qū)域=1624px—Status Bar (88px) +Home Indicator（68px）

 

iPhone X 實(shí)際案例適配

在開(kāi)始之前，我們先看一下其他App怎么適配之前的 iOS 設(shè)備的，我們可以知道頭部區(qū)域采用了等比例的方法來(lái)適配，因?yàn)橹挥羞@樣才能保證640×1136px上面能夠放得下相應(yīng)的內(nèi)容。其他的只需要放置相應(yīng)的切圖即可。

一開(kāi)始以為頭部適配很簡(jiǎn)單，我們也采用了等比例適配，后來(lái)發(fā)現(xiàn)沒(méi)有必要，因?yàn)?640×1136px基本可以顯示完全。然后我們就開(kāi)始適配 iPhone X 了，后來(lái)開(kāi)發(fā)通過(guò) Xcode 模擬出 iPhone X 的適配結(jié)果，我發(fā)現(xiàn)問(wèn)題出現(xiàn)了。和我們的用藥助手 iOS 開(kāi)發(fā)討論了以后，發(fā)現(xiàn)原來(lái)導(dǎo)航欄的高度不是簡(jiǎn)單的200px 解決的，這里我們采用的是固定高度的做法而不是采用等比例的做法。一般這塊區(qū)域可以有2種做法：等比例和固定高度，觀察你的頁(yè)面構(gòu)成，如果頁(yè)面內(nèi)容較少可以采用固定高度的做法。不然的話可能在小屏幕手機(jī)有些內(nèi)容放不下。

在沒(méi)有 iPhone X 之前，固定高度做法：整體藍(lán)色區(qū)域高度給200px 解決問(wèn)題，不用考慮導(dǎo)航欄問(wèn)題。

但是 iPhone X 出來(lái)了，這樣的做法就會(huì)行不通，因?yàn)?iPhone X 的導(dǎo)航欄高度是44px+44px=88px，比 iPhone 6的導(dǎo)航欄（64px）高了24px，所以正確適配 iPhone X 的做法應(yīng)該是導(dǎo)航欄區(qū)域高度（88px）+（200px-64px）=224px，其實(shí)就是 Status Bar 高度多了24px，所以224px 比200px 大了24px。

最后總結(jié)

• 這里只是講解了iPhone X 一小部分和 iOS 適配問(wèn)題，還有其他適配的經(jīng)驗(yàn)希望大家在工作中去積累總結(jié)，我這里就不一一講解了。
• 由于 iPhone X的屏幕比例發(fā)生變化，對(duì)于長(zhǎng)期靠「等比縮放」完成適配的H5活動(dòng)頁(yè)而言也有不小的影響，需要對(duì)頁(yè)面結(jié)構(gòu)進(jìn)行適當(dāng)微調(diào)。（注意縮放的時(shí)候不要把主體裁切了，注意頁(yè)面的布局在 iPhone X 上面的變化）
• 如果你的App有全屏尺寸的活動(dòng)圖，沒(méi)有導(dǎo)航欄，這個(gè)時(shí)候應(yīng)該給開(kāi)發(fā) @2x（750×1334px） 和 @3x(1125×2001) 圖，然后 iPhone X 上的圖會(huì)使用@3x的圖按照高度鋪滿(mǎn)，然后裁切兩邊。（注意兩側(cè)被裁切區(qū)域不要包含重要內(nèi)容）