閱讀481 返回首頁    go 阿裏雲 go 技術社區[雲棲]

搶不到 iPhone X 不要緊，但這篇如何適配劉海的技術貼你要看看

本文轉載自PingWest品玩（ID：wepingwest）。

今天，iPhone X 開始預售，Apple Store 被大家擠掛了...

有人為了搶到一部象征手速的 iPhone X ，切換了四種語言...

然而有什麼用呢~一不小心有人道出了事實：

搶 iPhone X 難為了用戶，可是 iPhone X 的劉海更是難為了開發者啊！

北京時間 9 月 12 日淩晨，蘋果在喬布斯劇院發布了 iPhone X，主打全麵屏的 iPhone X 取消了 Touch ID，代之以Face ID。

為了實現更為安全的麵部識別，iPhone X 正麵的全麵屏上方有一條劉海，上麵集成了紅外（深度）攝像頭、近距離傳感器、環境光傳感器、左/上揚聲器、麥克風、前置攝像頭和一個名為點狀投射儀 (Dot projector)的元件。

它會投影數千個看不到的點在你臉上，對你的臉繪製一幅三維的深度“臉圖”，然後和係統記錄的臉圖進行比對。

對於開發這來說，這些都不重要！！重要的是：

這個屏幕上的劉海究竟要怎麼適配呀！！！

哦，不過這篇文章並不是為了吐槽這個點的。畢竟再怎麼吐槽， iPhone X 已經在路上了，不管怎樣最終還是要麵對現實。

經過了一段時間的沉澱，全世界的開發者們似乎已經找到了幾種適配 iPhone X 劉海全麵屏的方法。

首先是縱向上的問題：

縱向上主要是頂部的導航欄、狀態欄和底部 TabBar 的問題。

iPhone X 開發尺寸與 iPhone 8 的寬度一致，在垂直方向上多了 145 pt，這就意味著多出 20% 的垂直空間， App 可以展示更多的內容。

但是多出來的145 pt 並不是方方正正的矩形，而是被劉海切割成了異形區域。

於是就有人嚐試，既然蘋果沒有把劉海做齊，那通過軟件把劉海兩側的空白填上不就可以了嘛。

這樣是不是就順眼多了？“Ears”的名稱也很貼切吧。

然而蘋果的“Human Interface Guidelines”明確禁止了這種做法。

蘋果規定：注意內容不要被裁切，建議內容為居中對稱已不被圓角或傳感器等遮擋，也建議使用係統提供的的元素以及自動布局來構建頁麵獲得更好的適配效果。

注意 StatusBar 的高度，iPhone X 的狀態欄高度會更高，如果有開發者對 NavgationBar 的位置是通過固定值進行位置的定位的，建議升級 App。

而且如果 App 是隱藏 StatusBar 的，蘋果建議開發者重新考慮，iPhone X 為用戶在垂直空間上提供了更多展示空間，且狀態欄中也包含了用戶需要知道的信息，除非能通過隱藏狀態欄帶給用戶額外的價值，否則蘋果建議將狀態欄還給用戶。

蘋果給出了 iPhone X 設計布局的安全區意見是這樣的：

也就是說，開發者還要保證設計布局能夠填充整個屏幕，而核心內容又不能被設備的大圓角、傳感器(齊劉海)、以及底部的Home Indicator遮擋。

如果沒有適配 iPhone X，就會變成這樣的：

圖片來源：奇點開發者@圖拉鼎（注：新版奇點已適配）

另一款成功適配的 App 效果圖是這樣的：

圖片來源：四葉新媒體聯合創始人微博@Saic

當然，比起縱向的問題，橫向的適配問題更大，槽點也更多。

首先是蘋果 iOS 自帶的 Safari 在橫屏狀態下網頁兩側會填充一定的空白，就變成了這樣的：

與此對應，蘋果給出的橫屏狀態下的安全區域是這樣的：

好吧，既然要加載空白區域，那滾動的時候滾動條該怎麼“優雅”的穿過劉海？

蘋果的 Safari 滾動條在橫屏狀態下穿過劉海的時候變成貪吃蛇了？

還有這樣的：

當然，這些都是蘋果不允許的。

還有開發者把功能鍵的彈出放在了劉海那一側，由於也是黑色的背景，看起來更有一體感了：

圖片來源Twitter: 0therPlanet

而橫屏打遊戲的時候，操作界麵被劉海遮擋。所以操作功能鍵需要放在蘋果建議的安全區域，其他的背景圖用來填充空白。

也就是說，按照蘋果的開發指南，無論橫屏還是豎屏，要適配 iPhone X 這樣有劉海的屏幕，除了審美需（被）要（迫）提（適）高（應），App 重要的功能鍵、TabBar 等需要放在蘋果建議的安全區域內，其他的地方用 App 背景頁或者狀態欄填充。

而如果想把男女朋友的照片設為鎖屏壁紙的話，需要找一張人物稍微“居中”或者“居下”的照片（拍照的時候人物主體在畫麵下方），否則就會變成了這樣：

還有一些需要我們的審美去適應（無解）的情況，尤其是全屏模式下瀏覽照片、看視頻以及 Safari 閱讀模式。

比如這樣的：

圖片來源：微博@Jonny

iPhone X 劉海裏的 Face ID 雖然很強大，但是這樣的異形屏真是難為開發者和用戶了。

哦，對了關於開頭那個王者榮耀的吐槽，中關村在線的評測已經給出了答案。騰訊官方的適配方法是這樣的：

-end-

內容已獲獨家授權，如需轉載請聯係PingWest品玩（ID：wepingwest）。

最後更新：2017-10-27 20:48:23

  上一篇：go 敲門不派糖，iPhone7就在這裏你來贏！
  下一篇：go iPhone X單手gif圖！多任務操作切換：炫酷！