如何適配iPhone X？來(lái)看QQ 音樂(lè)這個(gè)實(shí)戰(zhàn)案例總結(jié)
- 來(lái)源：
- Hipop Dueng
- 時(shí)間：
- 2017-11-22 18:32:18
- 閱讀：
- 4015
QQ 音樂(lè)團(tuán)隊(duì)設(shè)計(jì)師們做了一些研究工作，從方案對(duì)比選型到確定適配方案，都是希望能讓產(chǎn)品更好地適配 iPhone X。
本文將與大家詳細(xì)分享從了解 iPhone X、到適配方案研究、最后方案實(shí)施的點(diǎn)點(diǎn)滴滴。
QQ音樂(lè)界面
關(guān)于 iPhone X 的信息
工欲善其事必先利其器——《論語(yǔ) · 衛(wèi)靈公》
在著手構(gòu)思任何解決方案之前，我們都需要先仔細(xì)了解事物的本質(zhì)。例如 iPhone X 在外形上做了哪些改變、交互手勢(shì)有哪些不同、它的屏幕多大、分辨率又是多少呢等等。
1. 屏幕尺寸、分辨率
追求全面屏的 iPhone X 此次啟用 5.8 英寸的超視網(wǎng)膜高清顯示屏，458ppi 的屏幕像素密度。
豎屏?xí)r像素分辨率達(dá)到了 1125px × 2436px（375pt × 812pt @3x），可以發(fā)現(xiàn) iPhone X 的寬度與原來(lái)的 iPhone 7 等 4.7 英寸屏的寬度是一致的，而高度卻大了 145pt，長(zhǎng)寬比也由原來(lái)常見(jiàn)的 16 : 9 變成了 13 : 6。
2. 頂部傳感器
追求屏幕最大化的過(guò)程中，由于現(xiàn)階段工藝的問(wèn)題，Apple 采用了一個(gè)高度 30pt 的黑色帶圓角條來(lái)放置揚(yáng)聲器、前置攝像頭及各種傳感器等，江湖人稱 「劉海兒」，這也意味著原頁(yè)面此處的內(nèi)容有可能會(huì)被遮擋導(dǎo)致顯示欠佳，進(jìn)而影響用戶體驗(yàn)，所以此處也是我們適配過(guò)程中的一個(gè)關(guān)注點(diǎn)。
同時(shí)，iPhone X 在不同狀態(tài)下，頂部的 Status bar 也將是呈現(xiàn)不同的信息內(nèi)容：
- 鎖屏狀態(tài)：左側(cè)為運(yùn)營(yíng)商名稱，右側(cè)為信號(hào)格、電量。
- 解鎖狀態(tài)：左側(cè)變?yōu)闀r(shí)間信息，右側(cè)同為信號(hào)格、電量。
App 管理（長(zhǎng)按桌面 App Icon，App 處于抖動(dòng)狀態(tài)）：只有右側(cè)顯示 「完成」 按鈕，用于退出 App 管理。
3. 虛擬 home 鍵
iPhone X 取消了以往的實(shí)體圓形 home 鍵，取而代之的是在屏幕底部一條 134pt × 5pt 的虛擬指示條。
原來(lái)實(shí)體 Home 鍵的單擊返回桌面、雙擊喚起多任務(wù)處理、長(zhǎng)按啟動(dòng) Siri 等等基礎(chǔ)功能操作，也幻化成了不同的手勢(shì)操作或新技術(shù)替代，具體交互手勢(shì)將在下節(jié)詳述。而為了增強(qiáng)手勢(shì)的操作感，整個(gè)虛擬 Home 鍵也占據(jù)了一個(gè)高度 34pt 的保留區(qū)域。
而在非特定條件下，這個(gè)虛擬指示條無(wú)論在橫、豎屏中都將是強(qiáng)制性設(shè)計(jì)元素出現(xiàn)在屏幕底部上，意味著這設(shè)計(jì)中必須考慮好周圍元素與它的兼容，因此，這又是我們適配過(guò)程中的另一個(gè)關(guān)注點(diǎn)。只有在需要獲得沉浸式體驗(yàn)（如播放視頻、查看圖片）時(shí)，才會(huì)建議開(kāi)發(fā)者可以虛擬指示條 「自動(dòng)隱藏」功能。
關(guān)于虛擬指示條的樣式，很遺憾，只有 Light / Dark 兩種模式。既無(wú)法滿足少女心中的蜜粉指示條，也無(wú)法滿足兒童眼中的七彩指示條，只能是黑色或白色來(lái)盡可能地與周圍元素區(qū)分開(kāi)來(lái)。
4. 交互手勢(shì)
由于取消了實(shí)體 Home 鍵，iPhone X 的基礎(chǔ)操作也相應(yīng)做了些改變，比如：
- 返回桌面：從底部向上輕掃一下，即可返回桌面。
- 多任務(wù)處理：從底部向上輕掃，滑至中部停頓一下，可顯示所有打開(kāi)的 app。
- 顯示控制中心：從屏幕頂部右側(cè)向下輕掃，可打開(kāi)控制中心 siri：按住側(cè)邊按鈕，就能向 Siri 提問(wèn)。
- Apple Pay：連按兩下側(cè)邊按鈕，即可使用 Apple Pay 安全地支付。
值得一提的是，虛擬指示條及其手勢(shì)的介入，需要我們?cè)谠O(shè)計(jì)階段涉及到屏幕底部上下滑動(dòng)的交互要更謹(jǐn)慎的思考測(cè)試，避免誤操作。
5. 安全區(qū)域
安全區(qū)域，一個(gè)熟悉又陌生的詞語(yǔ)。
熟悉是因?yàn)樵谄矫嬖O(shè)計(jì)中，由于印刷裁切過(guò)程中的誤差，設(shè)計(jì)師需要給設(shè)計(jì)稿預(yù)留出「出血」 位置，確保設(shè)計(jì)內(nèi)容在安全區(qū)域中；陌生又是因?yàn)樵诨ヂ?lián)網(wǎng)設(shè)計(jì)中已極少被提及。
這次，由于 iPhone X 的設(shè)計(jì)理念與工藝問(wèn)題，Apple 也引入了「安全區(qū)域」 這個(gè)概念。
根據(jù)上述頂部傳感器、虛擬 home 鍵的不同要求，Apple 提供了橫、豎屏狀態(tài)下的安全區(qū)域視覺(jué)規(guī)范。
豎屏：豎屏?xí)r候，除去屏幕最頂部往下 44pt，底部往上 34pt 后，中間部分視為安全區(qū)域。
橫屏：而橫屏?xí)r候則相對(duì)復(fù)雜一些，因?yàn)樘摂M指示條通常情況下都是出現(xiàn)在屏幕底部，所以不僅屏幕左右會(huì)留出 44pt 的空白位置，屏幕底部也會(huì)留出 21pt 的位置。
至于為什么沒(méi)有 “劉海兒” 一側(cè)也會(huì)留出空白位置，則是 Apple 認(rèn)為，“劉海兒”出現(xiàn)于左側(cè)或右側(cè)并不確定，讓安全區(qū)域中的內(nèi)容居中顯示，可以避免屏幕旋轉(zhuǎn)所造成的 UI 元素位置變化。
適配方案的預(yù)研、對(duì)比、選擇
在了解 iPhone X 的基本情況后，我們可以大致掌握它所需要適配的點(diǎn)，在于安全區(qū)域布局、全屏圖縮放裁切以及邊界交互手勢(shì)，那又將有哪些方案可以做好這些適配呢？
1. 安全區(qū)域布局
方案一：
針對(duì) iPhone X 新的安全區(qū)域，特別像具備通頂效果的頁(yè)面可能面臨到的內(nèi)容被遮擋，我們可能會(huì)首先就想到一個(gè)解決方案——通過(guò)添加一個(gè)適配條，把頁(yè)面內(nèi)容挪一個(gè)位置，甚至我們可以把適配條定義為我們的產(chǎn)品品牌色，這樣似乎也會(huì)滿足用戶的心理訴求。
但如果仔細(xì)一想，這種簡(jiǎn)單粗暴的方法并不符合 Apple 想要傳達(dá)的全面屏設(shè)計(jì)理念，官方也提出了不推薦了以這樣的方式來(lái)實(shí)現(xiàn)適配。不然，真添加了黑色一個(gè)適配條，誰(shuí)能發(fā)現(xiàn)你用的是 iPhone X 呢？
方案二：
因?yàn)?iPhone X 的安全區(qū)域，頁(yè)面內(nèi)容會(huì)被限制在安全區(qū)域內(nèi)，橫屏情況下更為明顯，在安全區(qū)域外都是白色。
Apple 也意識(shí)到了這種尷尬的顯示方式，所以引入了一個(gè) meta 標(biāo)簽的 viewpoint 擴(kuò)展屬性——viewpoint-fit，在 iOS 11 中 viewpoint-fit 也官方添加到 CSS Round Display 規(guī)范中了。
通過(guò) viewport-fit 可以設(shè)置可視視窗的大小，它有三個(gè)屬性值：
- Auto：默認(rèn)值。這個(gè)值不影響初始布局視窗，整個(gè) Web 頁(yè)面是可視的。
- Contain：最初的布局視窗和視覺(jué)布局視窗被設(shè)置為最大的矩形。
- Cover：初始布局視窗和視覺(jué)布局視窗被設(shè)置為設(shè)備物理屏幕的限定矩形。
所以我們可以通過(guò) viewpoint-fit=cover 來(lái)解決問(wèn)題，使頁(yè)面內(nèi)容跳出安全區(qū)域的框框。
跳出了安全區(qū)域的框框之后，第二步當(dāng)然需要設(shè)置動(dòng)態(tài)的邊距來(lái)避開(kāi)屏幕圓角、頂部傳感器以及虛擬指示條，IOS11 提供了一個(gè)新的 css 變量——constant(safe-area-inset-※)。
constant(safe-area-inset-*) 提供了四個(gè)方向的值：
- 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() 這個(gè)變量已經(jīng)開(kāi)始著手標(biāo)準(zhǔn)化，目前也可以被用在 margin、padding、top、bottom、left、right 等 css 屬性中，同時(shí)在不支持的環(huán)境中將不會(huì)生效。而且，同樣在 iOS 11 中，iPhone X 機(jī)型以下得到的值均為 0，iPhone X 得到其對(duì)應(yīng)的設(shè)置量，明年推出 iPhone X Plus 的時(shí)候同樣也能得到與之對(duì)應(yīng)的設(shè)置量，這也順應(yīng)了未來(lái)機(jī)型尺寸層出不窮的趨勢(shì)。
2. 全屏圖適配
對(duì)于全屏圖，我們會(huì)有很多場(chǎng)景會(huì)用到，比如閃屏、整屏輪播 H5 等。而在不同尺寸比例的手機(jī)屏幕上顯示，全屏圖被裁切是不可避免，對(duì)它的適配，我們的目標(biāo)是保證圖片主體內(nèi)容的完整顯示、圖片信息的有效傳達(dá)。
所以，也有了兩種適配方式：基于寬度適配，或基于高度適配。
3. 邊界手勢(shì)操作
正如上述提及的屏幕圓角、頂部傳感器以及虛擬指示條影響，Apple 建議避免將交互元素放在屏幕底部或者角落。因?yàn)?iPhone X 自身固有的手勢(shì)會(huì)讓系統(tǒng)自動(dòng)屏蔽你在這個(gè)區(qū)域設(shè)置的手勢(shì)，同時(shí)屏幕角落區(qū)域很難觸控。
如安全區(qū)中所講的一樣，為了更好地進(jìn)行適配和良好的布局，官方推薦所有核心內(nèi)容和操作需要內(nèi)嵌在安全區(qū)內(nèi)，從而避免與狀態(tài)欄、導(dǎo)航欄、工具欄及標(biāo)簽欄重合。
QQ 音樂(lè)經(jīng)典場(chǎng)景的如何適配
而 QQ 音樂(lè)移動(dòng)終端內(nèi)的適配主要分為了不通頂 。 有 playbar、不通頂 · 無(wú) playbar、通頂 · 有 playbar、通頂 · 無(wú) playbar 四種場(chǎng)景。
以下是 QQ 音樂(lè)移動(dòng)終端中一些經(jīng)典場(chǎng)景對(duì)于此次 iPhone X 的適配歷程，整個(gè)適配解決方案都是基于上述所提到的方案二——viewport-fit=cover 與 constant()。
1. 頂部通欄
為了給用戶有更好的沉浸式體驗(yàn)，QQ 音樂(lè)移動(dòng)終端內(nèi)有不少頁(yè)面具有通頂效果。
可以看到普通 iPhone 有 128px 的工具欄區(qū)域，而 iPhone X 有 176px 的工具欄區(qū)域，以及 Android 有 136px 的工具欄區(qū)域。 我們會(huì)建議設(shè)計(jì)師在設(shè)計(jì)通頂效果頁(yè)面時(shí)，頂部最少預(yù)留 136px 的純色或者無(wú)主要內(nèi)容區(qū)域。
根據(jù)應(yīng)用場(chǎng)景的不同，QQ 音樂(lè)移動(dòng)終端的 web 通頂效果也分為了兩種：
- 第一種：頂部有通欄圖片或者深色背景，頁(yè)面下拉后標(biāo)題欄區(qū)域顯示黑色遮罩，標(biāo)題攔標(biāo)題動(dòng)畫(huà)效果可自定義。
- 第二種：有整頁(yè)的圖片背景或者是深顏色背景，標(biāo)題以下區(qū)域內(nèi)容做局部滾動(dòng)，標(biāo)題攔標(biāo)題動(dòng)畫(huà)效果可自定義。
除了在 meta 標(biāo)簽加上 viewport-fit=cover 之外，通過(guò)在 body 這個(gè) dom 上加上樣式名 page_downright，利用命名空間表明這是一個(gè)通頂效果頁(yè)面，然后利用 constant(safe-area-inset-※) 來(lái)設(shè)置安全區(qū)域的距離。因?yàn)樵?iOS 11 都能支持這個(gè)變量，目前在非 iPhone X 的其他 iOS 11 機(jī)型上取到的值為 0，為了解決這個(gè)問(wèn)題，用到了 css 原有的計(jì)算函數(shù) calc()。
2. 底部虛擬指示條
長(zhǎng)頁(yè)面底部
Apple 的設(shè)計(jì)規(guī)范中提到，如果頁(yè)面為一個(gè)長(zhǎng)內(nèi)容可滾動(dòng)的頁(yè)面，那么我們可以放心地把頁(yè)面內(nèi)容鋪開(kāi)整個(gè)屏幕。會(huì)發(fā)現(xiàn)頁(yè)面內(nèi)容可能會(huì)跟虛擬指示條重疊在一起，但沒(méi)關(guān)系，Apple 自身的頁(yè)面也是如此，只需在頁(yè)面就底部留好安全的空白設(shè)置就可以了。
吸底 bar
有吸底 bar 的頁(yè)面，如底部的下載導(dǎo)流 bar、個(gè)人資產(chǎn)展示 bar，可以參考 iPhone X 自身的帶有底部導(dǎo)航欄的 App 效果，發(fā)現(xiàn)吸底 bar 實(shí)際一樣是始終懸浮固定在屏幕底部，同時(shí)為虛擬指示條按設(shè)計(jì)規(guī)范留足了空間。
3. 音樂(lè)雜志
音樂(lè)雜志是近期 QQ 音樂(lè)移動(dòng)終端新推出的主推音樂(lè)資訊內(nèi)容的板塊，由 cp 設(shè)計(jì)提供 ui 元素來(lái)層疊組合成音樂(lè)雜志封面。
適配思路主要以平鋪背景，調(diào)整縮放邏輯，貼近安全比例來(lái)達(dá)到 iPhone X 的完美顯示。
4. 全屏運(yùn)營(yíng)類
全屏運(yùn)營(yíng)類的設(shè)計(jì)主要是避免主題素材上邊緣切邊，通過(guò)基于高度進(jìn)行適配，視覺(jué)稿輸出背景寬度 860px，但主體內(nèi)容安全區(qū)域限定在 750px 以內(nèi)。
5. 橫屏直播
對(duì)于橫屏直播，主要問(wèn)題點(diǎn)出現(xiàn)在直播信息、操作按鈕位置不當(dāng)、被遮擋。所以優(yōu)化思路是將預(yù)覽圖平鋪，視頻拉伸至全屏，同時(shí)確保左右兩邊及下方的主體內(nèi)容在安全區(qū)域以內(nèi)。
6. 百變播放器
通過(guò)尋找不同年代的音樂(lè)播放形式，精選出大家印象深刻的黑膠、收音機(jī)、錄音機(jī)、磁帶等物品進(jìn)行視覺(jué)再設(shè)計(jì)。將這些物品的核心元素進(jìn)行提煉，結(jié)合當(dāng)下的設(shè)計(jì)風(fēng)格，以突出每個(gè)物品的特點(diǎn)為目的，設(shè)計(jì)出既有情懷又符合現(xiàn)代人審美的百變播放器。
之前的實(shí)現(xiàn)方式是，按照 iPhone 6 的設(shè)計(jì)稿，對(duì)百變播放器的 UI 元素進(jìn)行分類分層處理，通過(guò)按照坐標(biāo)系定位逐個(gè)添加組件。
但在 iPhone X 下顯示時(shí)發(fā)現(xiàn)了幾個(gè)問(wèn)題：
- 背景圖尺寸不適配。
- 部分元素組件錯(cuò)位。
- 部分元素組件拉伸偏大。
- 安全區(qū)域被入侵。
通過(guò)對(duì)幾個(gè)預(yù)想方案進(jìn)行對(duì)比、權(quán)衡利弊之后，最終選擇了 「定高」 這個(gè)解決方案。經(jīng)測(cè)試，它解決了大部分百變播放器的適配問(wèn)題，僅有類似變形金鋼、小黃人等個(gè)別背景復(fù)雜的存在變形錯(cuò)誤問(wèn)題需要再進(jìn)行小優(yōu)化調(diào)整。
資料參考：
