?今天周六，你是否加班了呢？恩，先祝各位有夢想的設(shè)計小伙伴們周末快樂，明天睡一整天.....飯么，在床上吃唄（哈哈~）

今天，我們要討論的話題是“如何適配iPhone X”？

iPhone X的出現(xiàn)，對于設(shè)計師來說，又增加了適配的工作量，因?yàn)閕Phone X的齊劉海，實(shí)在是.....bulabula，你懂得......那么怎樣適配iPhone X?今天要跟伙伴們分享的是來自QQ音樂團(tuán)隊設(shè)計師們關(guān)于這方面的研究工作，從方案對比選型到確定適配方案，最后的實(shí)施等等，希望作為設(shè)計師的你可以更好的理解和應(yīng)用解決相關(guān)問題。

△ QQ音樂界面

一、了解iPhone X

工欲善其事必先利其器——《論語 · 衛(wèi)靈公》

在著手構(gòu)思任何解決方案之前，我們都需要先仔細(xì)了解事物的本質(zhì)。例如 iPhone X在外型上的變化，屏幕尺寸和分辨率是多少，交互手勢有哪些不同，跟之前版本的異同等等，只有分析了解了，才可以更好的解決問題。

1. ?屏幕尺寸、分辨率

追求全面屏的 iPhone X 此次啟用 5.8 英寸的超視網(wǎng)膜高清顯示屏，458ppi 的屏幕像素密度。

豎屏?xí)r像素分辨率達(dá)到了 1125px × 2436px（375pt × 812pt @3x），可以發(fā)現(xiàn) iPhone X 的寬度與原來的 iPhone 7 等 4.7 英寸屏的寬度是一致的，而高度卻大了 145pt，長寬比也由原來常見的 16 : 9 變成了 13 : 6。

2. 頂部傳感器

追求屏幕最大化的過程中，由于現(xiàn)階段工藝的問題，Apple 采用了一個高度 30pt 的黑色帶圓角條來放置揚(yáng)聲器、前置攝像頭及各種傳感器等，江湖人稱 「劉海兒」，這也意味著原頁面此處的內(nèi)容有可能會被遮擋導(dǎo)致顯示欠佳，進(jìn)而影響用戶體驗(yàn)，所以此處也是我們適配過程中的一個關(guān)注點(diǎn)。

同時，iPhone X 在不同狀態(tài)下，頂部的 Status bar 也將是呈現(xiàn)不同的信息內(nèi)容：

鎖屏狀態(tài)：左側(cè)為運(yùn)營商名稱，右側(cè)為信號格、電量。

解鎖狀態(tài)：左側(cè)變?yōu)闀r間信息，右側(cè)同為信號格、電量。

App 管理（長按桌面 App Icon，App 處于抖動狀態(tài)）：只有右側(cè)顯示 「完成」 按鈕，用于退出 App 管理。

3. 虛擬 home 鍵

iPhone X 取消了以往的實(shí)體圓形 home 鍵，取而代之的是在屏幕底部一條 134pt × 5pt 的虛擬指示條。

原來實(shí)體 Home 鍵的單擊返回桌面、雙擊喚起多任務(wù)處理、長按啟動 Siri 等等基礎(chǔ)功能操作，也幻化成了不同的手勢操作或新技術(shù)替代，具體交互手勢將在下節(jié)詳述。而為了增強(qiáng)手勢的操作感，整個虛擬 Home 鍵也占據(jù)了一個高度 34pt 的保留區(qū)域。

而在非特定條件下，這個虛擬指示條無論在橫、豎屏中都將是強(qiáng)制性設(shè)計元素出現(xiàn)在屏幕底部上，意味著這設(shè)計中必須考慮好周圍元素與它的兼容，因此，這又是我們適配過程中的另一個關(guān)注點(diǎn)。只有在需要獲得沉浸式體驗(yàn)（如播放視頻、查看圖片）時，才會建議開發(fā)者可以虛擬指示條 「自動隱藏」功能。

關(guān)于虛擬指示條的樣式，很遺憾，只有 Light / Dark 兩種模式。既無法滿足少女心中的蜜粉指示條，也無法滿足兒童眼中的七彩指示條，只能是黑色或白色來盡可能地與周圍元素區(qū)分開來。

4. 交互手勢

由于取消了實(shí)體 Home 鍵，iPhone X 的基礎(chǔ)操作也相應(yīng)做了些改變，比如：

返回桌面：從底部向上輕掃一下，即可返回桌面。

多任務(wù)處理：從底部向上輕掃，滑至中部停頓一下，可顯示所有打開的 app。

顯示控制中心：從屏幕頂部右側(cè)向下輕掃，可打開控制中心 siri：按住側(cè)邊按鈕，就能向 Siri 提問。

Apple Pay：連按兩下側(cè)邊按鈕，即可使用 Apple Pay 安全地支付。

值得一提的是，虛擬指示條及其手勢的介入，需要我們在設(shè)計階段涉及到屏幕底部上下滑動的交互要更謹(jǐn)慎的思考測試，避免誤操作。

5. 安全區(qū)域

安全區(qū)域，一個熟悉又陌生的詞語。

熟悉是因?yàn)樵谄矫嬖O(shè)計中，由于印刷裁切過程中的誤差，設(shè)計師需要給設(shè)計稿預(yù)留出「出血」 位置，確保設(shè)計內(nèi)容在安全區(qū)域中；陌生又是因?yàn)樵诨ヂ?lián)網(wǎng)設(shè)計中已極少被提及。

這次，由于 iPhone X 的設(shè)計理念與工藝問題，Apple 也引入了「安全區(qū)域」 這個概念。

根據(jù)上述頂部傳感器、虛擬 home 鍵的不同要求，Apple 提供了橫、豎屏狀態(tài)下的安全區(qū)域視覺規(guī)范。

豎屏：豎屏?xí)r候，除去屏幕最頂部往下 44pt，底部往上 34pt 后，中間部分視為安全區(qū)域。

橫屏：而橫屏?xí)r候則相對復(fù)雜一些，因?yàn)樘摂M指示條通常情況下都是出現(xiàn)在屏幕底部，所以不僅屏幕左右會留出 44pt 的空白位置，屏幕底部也會留出 21pt 的位置。

至于為什么沒有 “劉海兒” 一側(cè)也會留出空白位置，則是 Apple 認(rèn)為，“劉海兒”出現(xiàn)于左側(cè)或右側(cè)并不確定，讓安全區(qū)域中的內(nèi)容居中顯示，可以避免屏幕旋轉(zhuǎn)所造成的 UI 元素位置變化。

二、適配方案的預(yù)研、對比、選擇

在了解 iPhone X 的基本情況后，我們可以大致掌握它所需要適配的點(diǎn)，在于安全區(qū)域布局、全屏圖縮放裁切以及邊界交互手勢，那又將有哪些方案可以做好這些適配呢？

1. 安全區(qū)域布局

方案一：

針對 iPhone X 新的安全區(qū)域，特別像具備通頂效果的頁面可能面臨到的內(nèi)容被遮擋，我們可能會首先就想到一個解決方案——通過添加一個適配條，把頁面內(nèi)容挪一個位置，甚至我們可以把適配條定義為我們的產(chǎn)品品牌色，這樣似乎也會滿足用戶的心理訴求。

但如果仔細(xì)一想，這種簡單粗暴的方法并不符合 Apple 想要傳達(dá)的全面屏設(shè)計理念，官方也提出了不推薦了以這樣的方式來實(shí)現(xiàn)適配。不然，真添加了黑色一個適配條，誰能發(fā)現(xiàn)你用的是 iPhone X 呢？

方案二：

因?yàn)?iPhone X 的安全區(qū)域，頁面內(nèi)容會被限制在安全區(qū)域內(nèi)，橫屏情況下更為明顯，在安全區(qū)域外都是白色。

Apple 也意識到了這種尷尬的顯示方式，所以引入了一個 meta 標(biāo)簽的 viewpoint 擴(kuò)展屬性——viewpoint-fit，在 iOS 11 中 viewpoint-fit 也官方添加到 CSS Round Display 規(guī)范中了。

通過 viewport-fit 可以設(shè)置可視視窗的大小，它有三個屬性值：

Auto：默認(rèn)值。這個值不影響初始布局視窗，整個 Web 頁面是可視的。

Contain：最初的布局視窗和視覺布局視窗被設(shè)置為最大的矩形。

Cover：初始布局視窗和視覺布局視窗被設(shè)置為設(shè)備物理屏幕的限定矩形。

所以我們可以通過 viewpoint-fit=cover 來解決問題，使頁面內(nèi)容跳出安全區(qū)域的框框。

跳出了安全區(qū)域的框框之后，第二步當(dāng)然需要設(shè)置動態(tài)的邊距來避開屏幕圓角、頂部傳感器以及虛擬指示條，IOS11 提供了一個新的 css 變量——constant(safe-area-inset-※)。

constant(safe-area-inset-*) 提供了四個方向的值：

constant(safe-area-inset-top)：在 Viewport 頂部的安全區(qū)域內(nèi)設(shè)置量。

constant(safe-area-inset-bottom)：在 Viewport 底部的安全區(qū)域內(nèi)設(shè)置量。

constant(safe-area-inset-left)：在 Viewport 左邊的安全區(qū)域內(nèi)設(shè)置量。

constant(safe-area-inset-right)：在 Viewport 右邊的安全區(qū)域內(nèi)設(shè)置量。

值得一提的是，constant() 這個變量已經(jīng)開始著手標(biāo)準(zhǔn)化，目前也可以被用在 margin、padding、top、bottom、left、right 等 css 屬性中，同時在不支持的環(huán)境中將不會生效。而且，同樣在 iOS 11 中，iPhone X 機(jī)型以下得到的值均為 0，iPhone X 得到其對應(yīng)的設(shè)置量，明年推出 iPhone X Plus 的時候同樣也能得到與之對應(yīng)的設(shè)置量，這也順應(yīng)了未來機(jī)型尺寸層出不窮的趨勢。

2. 全屏圖適配

對于全屏圖，我們會有很多場景會用到，比如閃屏、整屏輪播 H5 等。而在不同尺寸比例的手機(jī)屏幕上顯示，全屏圖被裁切是不可避免，對它的適配，我們的目標(biāo)是保證圖片主體內(nèi)容的完整顯示、圖片信息的有效傳達(dá)。

所以，也有了兩種適配方式：基于寬度適配，或基于高度適配。

3. 邊界手勢操作

正如上述提及的屏幕圓角、頂部傳感器以及虛擬指示條影響，Apple 建議避免將交互元素放在屏幕底部或者角落。因?yàn)?iPhone X 自身固有的手勢會讓系統(tǒng)自動屏蔽你在這個區(qū)域設(shè)置的手勢，同時屏幕角落區(qū)域很難觸控。

如安全區(qū)中所講的一樣，為了更好地進(jìn)行適配和良好的布局，官方推薦所有核心內(nèi)容和操作需要內(nèi)嵌在安全區(qū)內(nèi)，從而避免與狀態(tài)欄、導(dǎo)航欄、工具欄及標(biāo)簽欄重合。

三、QQ音樂經(jīng)典場景的如何適配

而 QQ 音樂移動終端內(nèi)的適配主要分為了不通頂 。 有 playbar、不通頂 · 無 playbar、通頂 · 有 playbar、通頂 · 無 playbar 四種場景。

以下是 QQ 音樂移動終端中一些經(jīng)典場景對于此次 iPhone X 的適配歷程，整個適配解決方案都是基于上述所提到的方案二——viewport-fit=cover 與 constant()。

1. 頂部通欄

為了給用戶有更好的沉浸式體驗(yàn)，QQ 音樂移動終端內(nèi)有不少頁面具有通頂效果。

可以看到普通 iPhone 有 128px 的工具欄區(qū)域，而 iPhone X 有 176px 的工具欄區(qū)域，以及 Android 有 136px 的工具欄區(qū)域。 我們會建議設(shè)計師在設(shè)計通頂效果頁面時，頂部最少預(yù)留 136px 的純色或者無主要內(nèi)容區(qū)域。

根據(jù)應(yīng)用場景的不同，QQ 音樂移動終端的 web 通頂效果也分為了兩種：

第一種：頂部有通欄圖片或者深色背景，頁面下拉后標(biāo)題欄區(qū)域顯示黑色遮罩，標(biāo)題攔標(biāo)題動畫效果可自定義。

第二種：有整頁的圖片背景或者是深顏色背景，標(biāo)題以下區(qū)域內(nèi)容做局部滾動，標(biāo)題攔標(biāo)題動畫效果可自定義。

除了在 meta 標(biāo)簽加上 viewport-fit=cover 之外，通過在 body 這個 dom 上加上樣式名 page_downright，利用命名空間表明這是一個通頂效果頁面，然后利用 constant(safe-area-inset-※) 來設(shè)置安全區(qū)域的距離。因?yàn)樵?iOS 11 都能支持這個變量，目前在非 iPhone X 的其他 iOS 11 機(jī)型上取到的值為 0，為了解決這個問題，用到了 css 原有的計算函數(shù) calc()。

2. 底部虛擬指示條

長頁面底部

Apple 的設(shè)計規(guī)范中提到，如果頁面為一個長內(nèi)容可滾動的頁面，那么我們可以放心地把頁面內(nèi)容鋪開整個屏幕。會發(fā)現(xiàn)頁面內(nèi)容可能會跟虛擬指示條重疊在一起，但沒關(guān)系，Apple 自身的頁面也是如此，只需在頁面就底部留好安全的空白設(shè)置就可以了。

吸底 bar

有吸底 bar 的頁面，如底部的下載導(dǎo)流 bar、個人資產(chǎn)展示 bar，可以參考 iPhone X 自身的帶有底部導(dǎo)航欄的 App 效果，發(fā)現(xiàn)吸底 bar 實(shí)際一樣是始終懸浮固定在屏幕底部，同時為虛擬指示條按設(shè)計規(guī)范留足了空間。

3. 音樂雜志

音樂雜志是近期 QQ 音樂移動終端新推出的主推音樂資訊內(nèi)容的板塊，由 cp 設(shè)計提供 ui 元素來層疊組合成音樂雜志封面。

適配思路主要以平鋪背景，調(diào)整縮放邏輯，貼近安全比例來達(dá)到 iPhone X 的完美顯示。

4. 全屏運(yùn)營類

全屏運(yùn)營類的設(shè)計主要是避免主題素材上邊緣切邊，通過基于高度進(jìn)行適配，視覺稿輸出背景寬度 860px，但主體內(nèi)容安全區(qū)域限定在 750px 以內(nèi)。

5. 橫屏直播

對于橫屏直播，主要問題點(diǎn)出現(xiàn)在直播信息、操作按鈕位置不當(dāng)、被遮擋。所以優(yōu)化思路是將預(yù)覽圖平鋪，視頻拉伸至全屏，同時確保左右兩邊及下方的主體內(nèi)容在安全區(qū)域以內(nèi)。

6. 百變播放器

通過尋找不同年代的音樂播放形式，精選出大家印象深刻的黑膠、收音機(jī)、錄音機(jī)、磁帶等物品進(jìn)行視覺再設(shè)計。將這些物品的核心元素進(jìn)行提煉，結(jié)合當(dāng)下的設(shè)計風(fēng)格，以突出每個物品的特點(diǎn)為目的，設(shè)計出既有情懷又符合現(xiàn)代人審美的百變播放器。

之前的實(shí)現(xiàn)方式是，按照 iPhone 6 的設(shè)計稿，對百變播放器的 UI 元素進(jìn)行分類分層處理，通過按照坐標(biāo)系定位逐個添加組件。

但在 iPhone X 下顯示時發(fā)現(xiàn)了幾個問題：

背景圖尺寸不適配。

部分元素組件錯位。

部分元素組件拉伸偏大。

安全區(qū)域被入侵。

通過對幾個預(yù)想方案進(jìn)行對比、權(quán)衡利弊之后，最終選擇了 「定高」 這個解決方案。經(jīng)測試，它解決了大部分百變播放器的適配問題，僅有類似變形金鋼、小黃人等個別背景復(fù)雜的存在變形錯誤問題需要再進(jìn)行小優(yōu)化調(diào)整。

本期話題內(nèi)容來自QQ音樂設(shè)計團(tuán)隊，感謝他們的努力和付出，希望可以幫助你解決一些關(guān)于iPhone X的適配問題。周末快樂~

我們還有個夢想小江湖

ZF16夢想季（ZF16dream）

我們有個設(shè)計小江湖

寫給設(shè)計（ruodesign）

愿所有的夢想都指日可待！