蘋果官方 iPhone X 人機界面指南

了解如何為新推出的全屏幕超視網膜顯示屏優化你的應用和遊戲。

閱讀信息：

閱讀時間：約8分鐘

流量預估：4.9MB

設計資源：https://developer.apple.com/design/resources/

iPhone X 採用了一塊大尺寸，高解析度，圓潤，邊到邊的顯示屏，提供了前所未有的豐富內容和沉浸式體驗。

屏幕尺寸

縱向上，iPhone X 的顯示屏寬度與 iPhone 6，7，8的4.7「顯示屏一致。但 iPhone X 的顯示屏比4.7」顯示屏高145 pt，導致垂直方向多出來大約20%的區域可以顯示更多的內容。

為你應用里的所有視覺元素提供高清的素材。iPhone X 搭配一塊比例因子為@3x 的高清顯示屏。對於文字和其他矢量圖形，最好提供可以無視解析度的 PDF 文件。對點陣圖，你可以提供@3x 和@2x 兩種比例因子的素材。

布局

在為 iPhone X 設計時，你必須確保布局填滿屏幕，並且不會被設備的圓角，上端的感測器或用於訪問主屏幕的指示條遮擋。

大多使用標準的，系統提供的如導航欄，表格和集合等 UI 元素的應用會自動適應新屏幕。背景會延伸到顯示屏邊緣，而 UI 元件也會被適當地布置。

對於自定義布局的應用，支持 iPhone X 也不難，尤其是當你的應用使用了自動布局並遵守了安全區和邊距布局規範。

在 iPhone X 上預覽你的應用。你可以使用 Xcode 附帶的模擬器來預覽應用，檢查遮擋或其他布局問題。但是像高色域圖像顯示效果之類問題，最好在真機上預覽。

提供全屏的體驗。確保背景延伸到顯示屏的邊界，並且如表格和集合等垂直可滾動的 UI 元素，確保它們一直延展到底部。

插入必要內容以防遮擋。一般來說，內容應該居中對稱，這樣它在任何方向看起來都很贊，不會被四角，感測器或訪問主屏幕的指示條遮擋。為獲得最佳效果，搭建界面時請使用標準的系統提供的 UI 元素和自動布局。所有應用都應遵循 UIKit 中定義的安全區和邊距布局規範，這個規定保障了基於設備和內容的穩妥的擺放。安全區同時預防了內容和狀態欄，導航欄，工具欄，標籤欄的重疊問題。

留心狀態欄的高度。狀態欄在 iPhone X 上比在其他 iPhone 上更高。如果你的應用採用了一個固定高度的狀態欄並將內容擺放其下，則必須更新為根據用戶的設備來動態定位內容。請注意，當如錄音和定位等後台任務處於激活狀態時，iPhone X 上的狀態欄不會改變高度。

如果你的應用隱藏狀態欄，請重新考慮 iPhone X 上的情況。iPhone X 上的顯示屏比高度為4.7「的 iPhone 提供了更多的垂直空間，狀態欄佔據了你應用可能沒有完全利用的一塊屏幕區域。狀態欄顯示了對人們有用的信息，它只應該在能帶來更多價值的情況下被隱藏。

在復用現有視覺元素時，留心比例差異。iPhone X 具有不同於4.7「 iPhone 的長寬比，因此4.7」 iPhone 上的全屏圖像在 iPhone X 上顯示時會被裁剪或等比縮放以適應屏幕。同樣，iPhone X 上的全屏圖像在在4.7「 iPhone 上顯示時也會被裁剪或等比縮放以適應屏幕。請確保重要的視覺內容在兩種屏幕尺寸上都能很好展示。

避免將互動式控制項擺放在屏幕的底部和角落。用戶在顯示屏底部使用滑動手勢來訪問主屏幕和多任務切換，這些手勢可能會干擾你在此區域中的自定義手勢。屏幕上方的兩個角落太遠了，並不是用戶的操作舒適區。

不要在關鍵顯示區域搞花樣。請勿嘗試通過在屏幕頂部和底部放置黑色色塊來隱藏設備的圓角，感測器或主屏指示條。不要使用像括弧，邊框，形狀或指示文字等視覺裝飾在這些區域吸引用戶注意力。

謹慎允許自動隱藏主屏指示條。當啟用自動隱藏時，如果用戶幾秒沒有觸摸屏幕，指示條將消失。當用戶再次觸摸屏幕時重新出現。這種行為應該只被用於例如播放視頻或幻燈片的觀看場景。

顏色

iPhone X 的顯示屏支持 P3 色彩空間，擁有比 sRGB 更豐富，更飽和的顏色。

使用更豐富的顏色來增強視覺體驗。採用高色域的照片和視頻會更加栩栩如生，使用高色域的信息樣式和狀態指示會更有效果。

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