?今天周六麸恍，你是否加班了呢灵巧？恩，先祝各位有夢想的設(shè)計小伙伴們周末快樂抹沪，明天睡一整天.....飯么孩等，在床上吃唄（哈哈~）
今天，我們要討論的話題是“如何適配iPhone X”采够？
iPhone X的出現(xiàn)肄方，對于設(shè)計師來說，又增加了適配的工作量蹬癌，因為iPhone X的齊劉海权她，實在是.....bulabula，你懂得......那么怎樣適配iPhone X?今天要跟伙伴們分享的是來自QQ音樂團(tuán)隊設(shè)計師們關(guān)于這方面的研究工作逝薪，從方案對比選型到確定適配方案隅要，最后的實施等等，希望作為設(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 的黑色帶圓角條來放置揚聲器鸽心、前置攝像頭及各種傳感器等滚局，江湖人稱 「劉海兒」居暖，這也意味著原頁面此處的內(nèi)容有可能會被遮擋導(dǎo)致顯示欠佳顽频，進(jìn)而影響用戶體驗，所以此處也是我們適配過程中的一個關(guān)注點太闺。
同時糯景，iPhone X 在不同狀態(tài)下，頂部的 Status bar 也將是呈現(xiàn)不同的信息內(nèi)容：
鎖屏狀態(tài)：左側(cè)為運營商名稱省骂，右側(cè)為信號格蟀淮、電量。
解鎖狀態(tài)：左側(cè)變?yōu)闀r間信息钞澳，右側(cè)同為信號格怠惶、電量。
App 管理（長按桌面 App Icon轧粟，App 處于抖動狀態(tài)）：只有右側(cè)顯示 「完成」 按鈕策治，用于退出 App 管理。
3. 虛擬 home 鍵
iPhone X 取消了以往的實體圓形 home 鍵兰吟，取而代之的是在屏幕底部一條 134pt × 5pt 的虛擬指示條通惫。
原來實體 Home 鍵的單擊返回桌面、雙擊喚起多任務(wù)處理混蔼、長按啟動 Siri 等等基礎(chǔ)功能操作履腋，也幻化成了不同的手勢操作或新技術(shù)替代，具體交互手勢將在下節(jié)詳述。而為了增強(qiáng)手勢的操作感遵湖，整個虛擬 Home 鍵也占據(jù)了一個高度 34pt 的保留區(qū)域悔政。
而在非特定條件下，這個虛擬指示條無論在橫奄侠、豎屏中都將是強(qiáng)制性設(shè)計元素出現(xiàn)在屏幕底部上卓箫，意味著這設(shè)計中必須考慮好周圍元素與它的兼容，因此垄潮，這又是我們適配過程中的另一個關(guān)注點烹卒。只有在需要獲得沉浸式體驗（如播放視頻、查看圖片）時弯洗，才會建議開發(fā)者可以虛擬指示條 「自動隱藏」功能旅急。
關(guān)于虛擬指示條的樣式，很遺憾牡整，只有 Light / Dark 兩種模式藐吮。既無法滿足少女心中的蜜粉指示條，也無法滿足兒童眼中的七彩指示條逃贝，只能是黑色或白色來盡可能地與周圍元素區(qū)分開來谣辞。
4. 交互手勢
由于取消了實體 Home 鍵，iPhone X 的基礎(chǔ)操作也相應(yīng)做了些改變沐扳，比如：
返回桌面：從底部向上輕掃一下泥从，即可返回桌面。
多任務(wù)處理：從底部向上輕掃沪摄，滑至中部停頓一下躯嫉，可顯示所有打開的 app。
顯示控制中心：從屏幕頂部右側(cè)向下輕掃杨拐，可打開控制中心 siri：按住側(cè)邊按鈕祈餐，就能向 Siri 提問。
Apple Pay：連按兩下側(cè)邊按鈕哄陶，即可使用 Apple Pay 安全地支付帆阳。
值得一提的是，虛擬指示條及其手勢的介入屋吨，需要我們在設(shè)計階段涉及到屏幕底部上下滑動的交互要更謹(jǐn)慎的思考測試蜒谤，避免誤操作。
5. 安全區(qū)域
安全區(qū)域离赫，一個熟悉又陌生的詞語芭逝。
熟悉是因為在平面設(shè)計中，由于印刷裁切過程中的誤差渊胸，設(shè)計師需要給設(shè)計稿預(yù)留出「出血」 位置旬盯，確保設(shè)計內(nèi)容在安全區(qū)域中；陌生又是因為在互聯(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ù)雜一些，因為虛擬指示條通常情況下都是出現(xiàn)在屏幕底部猛遍，所以不僅屏幕左右會留出 44pt 的空白位置馋记，屏幕底部也會留出 21pt 的位置。
至于為什么沒有 “劉海兒” 一側(cè)也會留出空白位置懊烤，則是 Apple 認(rèn)為梯醒，“劉海兒”出現(xiàn)于左側(cè)或右側(cè)并不確定，讓安全區(qū)域中的內(nèi)容居中顯示腌紧，可以避免屏幕旋轉(zhuǎn)所造成的 UI 元素位置變化茸习。
二、適配方案的預(yù)研寄啼、對比逮光、選擇
在了解 iPhone X 的基本情況后代箭，我們可以大致掌握它所需要適配的點墩划，在于安全區(qū)域布局、全屏圖縮放裁切以及邊界交互手勢嗡综，那又將有哪些方案可以做好這些適配呢乙帮？
1. 安全區(qū)域布局
方案一：
針對 iPhone X 新的安全區(qū)域，特別像具備通頂效果的頁面可能面臨到的內(nèi)容被遮擋极景，我們可能會首先就想到一個解決方案——通過添加一個適配條察净，把頁面內(nèi)容挪一個位置，甚至我們可以把適配條定義為我們的產(chǎn)品品牌色盼樟，這樣似乎也會滿足用戶的心理訴求氢卡。
但如果仔細(xì)一想，這種簡單粗暴的方法并不符合 Apple 想要傳達(dá)的全面屏設(shè)計理念晨缴，官方也提出了不推薦了以這樣的方式來實現(xiàn)適配译秦。不然，真添加了黑色一個適配條，誰能發(fā)現(xiàn)你用的是 iPhone X 呢筑悴？
方案二：
因為 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 建議避免將交互元素放在屏幕底部或者角落蹦魔。因為 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. 頂部通欄
為了給用戶有更好的沉浸式體驗慨仿，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ū)域的距離。因為在 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è)計規(guī)范留足了空間吼和。
3. 音樂雜志
音樂雜志是近期 QQ 音樂移動終端新推出的主推音樂資訊內(nèi)容的板塊，由 cp 設(shè)計提供 ui 元素來層疊組合成音樂雜志封面骑素。
適配思路主要以平鋪背景炫乓，調(diào)整縮放邏輯，貼近安全比例來達(dá)到 iPhone X 的完美顯示献丑。
4. 全屏運營類
全屏運營類的設(shè)計主要是避免主題素材上邊緣切邊末捣，通過基于高度進(jìn)行適配，視覺稿輸出背景寬度 860px创橄，但主體內(nèi)容安全區(qū)域限定在 750px 以內(nèi)箩做。
5. 橫屏直播
對于橫屏直播，主要問題點出現(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)格，以突出每個物品的特點為目的观谦，設(shè)計出既有情懷又符合現(xiàn)代人審美的百變播放器拉盾。
之前的實現(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）
愿所有的夢想都指日可待！
