iPhone X額頭上的「劉海」將怎麼影響UI設計

具有下一代旗艦意義的蘋果iPhone X正式發布，這款新機蘋果摒棄了home鍵，採用全面屏設計，顯示屏採用新的工藝和技術，精準貼合機身的曲線，一直延伸至優雅圓潤的邊角。引起吐槽最多的無疑是iPhone X額頭上的「劉海」，儘管這塊布滿了黑科技感測器的區域肯定有存在的理由，比如Face ID等，但是其將影響許多原來的UI界面元素，短期內用戶難免不接受改變。

在iPhoneX發布后蘋果更新了「人機交互界面設計準則」，特別指出應用開發者不應該嘗試「隱藏設備顯示的圓角邊沿部分、感測器遮蔽區域，」也不許在頂部或底部設置黑色欄嘗試隱去這部分。也不要用括弧，邊框，形狀或指示文本等視覺元素特別突出該區域。

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

蘋果稱大部分應用標準的系統UI元素的應用都會自動適應iPhone X的全新顯示區域，背景元素將自動延展覆蓋這些區域。

為了確保一些可操作交互元素和重要視覺元素不被iPhone X的圓角區域覆蓋，原則上這些操控元素都應該置於下圖的「安全區域」內，App Store審核應用時會評估這一準則是否得到應用。蘋果特別踢到了不要將任何互動操控制項放置在全面屏的最下方，這將影響HOME喚出滑條。

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

當然。這些宣傳實例缺少了橫屏狀態下的UI外觀演示，不少開發商通過新Xcode的模擬器演示了iOS 11在iPhone X下的橫屏截圖。在瀏覽網頁時左右異形顯示區域會空出一部分，這部分顏色將取到網頁的默認背景色。

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

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