iPhone X 的「劉海」讓人崩潰，應用 UI 需要大量適配

每年的新 iPhone 發布之後總會引起一波吐槽，今年當然也不例外。

剛剛發布的 iPhone X 引起吐槽最多的無疑就是額頭上的「劉海」設計，儘管這塊布滿了黑科技感測器的區域有其存在的理由，但還是影響了整機的美感。

更重要的是，對於用戶體驗而言，這樣的設計也將影響許多原來的應用 UI 界面元素。

在 iPhone X 發布之後，蘋果更新了「人機交互界面設計準則」，蘋果特別指出，應用開發者不應該嘗試隱藏設備顯示的圓角邊沿部分以及感測器的遮蔽區域。

也不允許在頂部或底部設置黑色欄嘗試隱去這部分，也不要用括弧，邊框，形狀或指示文本等視覺元素特別突出該區域。

也就是說，像下圖左側的嘗試用黑欄讓劉海區域融為一體，或者用黑欄突出底部的觸控條，都是蘋果認為錯誤的 UI 設計方案。

蘋果表示，正確的 UI 設計是會自動適應 iPhone X 的全新顯示區域，背景元素將自動延展覆蓋這些區域。

為了確保一些可操作交互元素和重要視覺元素不被 iPhone X 的圓角區域覆蓋，原則上這些操控元素都應該置於下圖的「安全區域」內。

App Store 審核應用時會評估這一準則是否得到應用，蘋果特別提到，不要將任何互動操控按鈕放置在全面屏的最下方，這將影響用戶喚出觸控條。

蘋果官網提供了許多 UI 設計實例，演示了正確的交互原則下應用在 iPhone X 下的視覺外觀。

從蘋果的演示來看，iPhone X 的應用界面上部和下部需要和應用背景統一，並且要在底部預留出觸控條的操作空間。

開發商通過新 Xcode 的模擬器演示了 iOS 11 在 iPhone X 下的橫屏截圖。

在瀏覽網頁時左右異形顯示區域會空出一部分，這部分顏色將和網頁的默認背景色統一。

全屏放大圖片和玩全屏遊戲時，全面屏將自動延展拉伸以覆蓋這些區域。

不幸的是，在視頻播放時，默認狀態下蘋果會設置視頻留出兩側黑邊，以完整收看視頻，但用戶也可以雙擊讓它全屏，視頻會延展拉伸覆蓋這些區域，而劉海部分自然會影響觀看效果。

看起來，iPhone X 的劉海設計必然會讓一些應用程序顯得水土不服，這就需要開發者進行積極的適配了，否則出現下面這樣的情況一定會讓人崩潰。

GIF/828K

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！