QQ 音樂團隊設計師們做了一些研究工作，從方案對比選型到確定適配方案，都是希望能讓產品更好地適配 iPhone X。本文將與大家詳細分享從了解 iPhone X、到適配方案研究、最后方案實施的點點滴滴。enjoy~

關于 iPhone X 的信息

工欲善其事必先利其器——《論語 · 衛靈公》

在著手構思任何解決方案之前，我們都需要先仔細了解事物的本質。例如 iPhone X 在外形上做了哪些改變、交互手勢有哪些不同、它的屏幕多大、分辨率又是多少呢等等。

1. ?屏幕尺寸、分辨率

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

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

2. 頂部傳感器

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

同時，iPhone X 在不同狀態下，頂部的 Status bar 也將是呈現不同的信息內容：

• 鎖屏狀態：左側為運營商名稱，右側為信號格、電量。
• 解鎖狀態：左側變為時間信息，右側同為信號格、電量。

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

3. 虛擬 home 鍵

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

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

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

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

4. 交互手勢

由于取消了實體 Home 鍵，iPhone X 的基礎操作也相應做了些改變，比如：

• 返回桌面：從底部向上輕掃一下，即可返回桌面。
• 多任務處理：從底部向上輕掃，滑至中部停頓一下，可顯示所有打開的 app。
• 顯示控制中心：從屏幕頂部右側向下輕掃，可打開控制中心 siri：按住側邊按鈕，就能向 Siri 提問。
• Apple Pay：連按兩下側邊按鈕，即可使用 Apple Pay 安全地支付。

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

5. 安全區域

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

熟悉是因為在平面設計中，由于印刷裁切過程中的誤差，設計師需要給設計稿預留出「出血」 位置，確保設計內容在安全區域中；陌生又是因為在互聯網設計中已極少被提及。

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

根據上述頂部傳感器、虛擬 home 鍵的不同要求，Apple 提供了橫、豎屏狀態下的安全區域視覺規范。

• 豎屏：豎屏時候，除去屏幕最頂部往下 44pt，底部往上 34pt 后，中間部分視為安全區域。
• 橫屏：而橫屏時候則相對復雜一些，因為虛擬指示條通常情況下都是出現在屏幕底部，所以不僅屏幕左右會留出 44pt 的空白位置，屏幕底部也會留出 21pt 的位置。

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

適配方案的預研、對比、選擇

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

1. 安全區域布局

方案一：

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

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

方案二：

因為 iPhone X 的安全區域，頁面內容會被限制在安全區域內，橫屏情況下更為明顯，在安全區域外都是白色。

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

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

• Auto：默認值。這個值不影響初始布局視窗，整個 Web 頁面是可視的。
• Contain：最初的布局視窗和視覺布局視窗被設置為最大的矩形。
• Cover：初始布局視窗和視覺布局視窗被設置為設備物理屏幕的限定矩形。

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

<meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover”>

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

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

• constant(safe-area-inset-top)：在 Viewport 頂部的安全區域內設置量。
• constant(safe-area-inset-bottom)：在 Viewport 底部的安全區域內設置量。
• constant(safe-area-inset-left)：在 Viewport 左邊的安全區域內設置量。
• constant(safe-area-inset-right)：在 Viewport 右邊的安全區域內設置量。

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

2. 全屏圖適配

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

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

3. 邊界手勢操作

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

如安全區中所講的一樣，為了更好地進行適配和良好的布局，官方推薦所有核心內容和操作需要內嵌在安全區內，從而避免與狀態欄、導航欄、工具欄及標簽欄重合。

QQ 音樂經典場景的如何適配

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

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

1. 頂部通欄

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

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

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

• 第一種：頂部有通欄圖片或者深色背景，頁面下拉后標題欄區域顯示黑色遮罩，標題攔標題動畫效果可自定義。
• 第二種：有整頁的圖片背景或者是深顏色背景，標題以下區域內容做局部滾動，標題攔標題動畫效果可自定義。

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

2. 底部虛擬指示條

（1）長頁面底部

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

（2）吸底 bar

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

3. 音樂雜志

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

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

4. 全屏運營類

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

5. 橫屏直播

對于橫屏直播，主要問題點出現在直播信息、操作按鈕位置不當、被遮擋。所以優化思路是將預覽圖平鋪，視頻拉伸至全屏，同時確保左右兩邊及下方的主體內容在安全區域以內。

6. 百變播放器

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

之前的實現方式是，按照 iPhone 6 的設計稿，對百變播放器的 UI 元素進行分類分層處理，通過按照坐標系定位逐個添加組件。

但在 iPhone X 下顯示時發現了幾個問題：

• 背景圖尺寸不適配。
• 部分元素組件錯位。
• 部分元素組件拉伸偏大。
• 安全區域被入侵。

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

資料參考：

drafts.csswg

Github.com

developer.Apple

來源：@QQ音樂，騰訊QQ音樂設計團隊