就在今天凌晨，蘋果發(fā)布了帶劉海的 iPhone X，這個屏幕需要 iOS 開發(fā)者做新的適配，會后蘋果發(fā)布了 iPhone X 的適配指南，我們將它翻譯出來供大家參考。

iPhone X

iPhone X 擁有一個寬大的、高分辨率、圓角的、擴(kuò)展到邊緣的屏幕，提供了以前從未有過的沉浸式、內(nèi)容豐富的體驗(yàn)。

屏幕尺寸

在縱向方向上，iPhone X 顯示屏的寬度與 iPhone6，iPhone 7 和 iPhone8 的 4.7 英寸的顯示屏寬度相同。然而，iPhone X 上的屏幕比 4.7 英寸顯示屏高 145pt，導(dǎo)致多出了大約 20％的垂直高度。

• 豎屏尺寸：1125px × 2436px(375pt × 812pt @3x)
• 橫屏尺寸：2436px × 1125px(812pt × 375pt @3x)

為您的應(yīng)用程序中的所有圖稿提供高分辨率圖像。iPhone X 具有比例因子為 @3x 的高分辨率。對于字形和其他平面的矢量圖形，最好提供與分辨率無關(guān)的 PDF 格式。對于光柵化圖稿，您可以提供 @3x 和 @2x 版本的作品。請參閱 圖像大小和分辨率 和 自定義圖標(biāo)。

布局

在 iPhone X 中設(shè)計時，您必須確保布局填滿屏幕，并且不會被設(shè)備的圓角、傳感器外殼或用于訪問主屏幕的指示燈遮蔽。

大多數(shù)使用標(biāo)準(zhǔn)系統(tǒng)提供的 UI 元素（如導(dǎo)航欄、表格和集合）的應(yīng)用程序會自動適應(yīng)設(shè)備的新外形。背景材料延伸到屏幕的邊緣，并且 UI 元件被適當(dāng)?shù)夭迦牒投ㄎ弧?/p>

對于具有自定義布局的應(yīng)用程序，支持 iPhone X 也應(yīng)該比較容易，特別是如果您的應(yīng)用程序使用 Auto Layout 并遵守安全區(qū)域和邊距布局指南。

在 iPhone X 上預(yù)覽您的應(yīng)用程序。您可以使用 Simulator（附帶 Xcode）來預(yù)覽應(yīng)用程序，并檢查剪輯和其他布局問題。如寬彩色圖像這樣的屬性，最好在設(shè)備上預(yù)覽。

提供全屏體驗(yàn)。確保背景延伸到屏幕的邊緣，并且垂直可滾動的布局（如表格和集合）一直延續(xù)到底部。

插入必要內(nèi)容以防止裁剪。一般來說，內(nèi)容應(yīng)該是居中對稱的，所以它在任何方向看起來都很棒，不會被角落或設(shè)備的傳感器外殼裁剪，或被訪問主屏幕的指示器遮擋。 為獲得最佳效果，請使用標(biāo)準(zhǔn)的系統(tǒng)提供的界面元素和 Auto Layout 構(gòu)建您的界面。所有應(yīng)用程序都應(yīng)遵循 UIKit 定義的安全區(qū)域和布局邊距，這些區(qū)域可以根據(jù)設(shè)備和上下文進(jìn)行適當(dāng)?shù)奶畛?。安全區(qū)域還可以防止內(nèi)容覆蓋狀態(tài)欄、導(dǎo)航欄、工具欄和標(biāo)簽欄。

注意狀態(tài)欄的高度。狀態(tài)欄在 iPhone X 上比在其他 iPhone 上更高。如果您的應(yīng)用程序的固定狀態(tài)欄高度在狀態(tài)欄的下方，則您必須更新您的應(yīng)用程序，才能根據(jù)用戶的設(shè)備動態(tài)定位內(nèi)容。請注意，當(dāng)背景任務(wù)（如錄音和位置跟蹤）處于活動狀態(tài)時，iPhoneX 上的狀態(tài)欄不會改變高度。

如果您的應(yīng)用程序目前隱藏狀態(tài)欄，請重新考慮 iPhone X 上的決定。iPhone 上的顯示高度為 4.7 英寸，iPhone 的顯示屏提供了更多的垂直空間內(nèi)容，狀態(tài)欄占據(jù)了您應(yīng)用程序本可能贏得的屏幕區(qū)域，狀態(tài)欄還顯示了人們發(fā)現(xiàn)的有用的信息，只有在交換附加值時候才能被隱藏。

在重復(fù)使用現(xiàn)有圖稿時，請注意長寬比差異。iPhone X 具有不同于 4.7 英寸 iPhone 的長寬比，因此，全屏 4.7 英寸 iPhone 圖形在 iPhone X 上全屏顯示時出現(xiàn)裁剪或 letterboxed。同樣，全屏 iPhone X 圖稿在顯示時被裁剪或被添加黑邊。 全屏顯示在 4.7 英寸 iPhone 上，確保重要的視覺內(nèi)容保持在兩種顯示尺寸上。

避免將交互式控件放置在屏幕最底部和角落里。人們使用顯示屏底部的滑動手勢訪問主屏幕和應(yīng)用程序切換器，這些手勢可能會取消您在此區(qū)域中實(shí)現(xiàn)的自定義手勢。屏幕的兩個角落很難讓人觸及。

不要遮擋或突出顯示關(guān)鍵的顯示特性。請勿嘗試隱藏設(shè)備的圓角、傳感器外殼或通過在屏幕頂部和底部放置黑色條來指示主屏幕的指示器。不要使用像括號、邊框、形狀或教學(xué)文字等視覺裝飾來讓人注意這些區(qū)域。

允許自動隱藏虛擬 Home 鍵，以便輕松訪問主屏幕。當(dāng)啟用自動隱藏時，如果用戶沒有觸摸屏幕幾秒鐘，Home 鍵將自動隱藏。當(dāng)用戶再次觸摸屏幕時，它會重新出現(xiàn)。這種行為應(yīng)該只能用于被動觀看體驗(yàn)，如播放視頻或幻燈片。請參閱 適應(yīng)性和布局。

顏色

iPhone X 上的屏幕支持 P3 色彩空間，可以產(chǎn)生比 sRGB 更豐富，更飽和的顏色。使用多元的顏色來增強(qiáng)視覺體驗(yàn)。 使用寬顏色的照片和視頻更加逼真，使用寬色的視覺數(shù)據(jù)和狀態(tài)指示器更有影響力。 請參閱顏色管理。

手勢

iPhone X 上的顯示屏使用屏幕邊緣手勢來訪問主屏幕、應(yīng)用程序切換器、通知中心和控制中心。避免干擾系統(tǒng)范圍的屏幕邊緣手勢。人們依靠這些手勢在每個應(yīng)用程序中工作。在極少數(shù)情況下，像游戲這樣的沉浸式應(yīng)用程序可能需要自定義的屏幕邊緣手勢，優(yōu)先于系統(tǒng)的手勢 – 第一個滑動會調(diào)用特定于應(yīng)用的手勢，而第二次滑動則會調(diào)用系統(tǒng)手勢。這種行為（稱為邊緣保護(hù)）應(yīng)該謹(jǐn)慎實(shí)施，因?yàn)樗沟糜脩綦y以訪問系統(tǒng)級的操作。 參閱手勢。

附加設(shè)計注意事項(xiàng)

準(zhǔn)確的參考認(rèn)證方法。iPhone X 支持 Face ID 進(jìn)行身份驗(yàn)證。 如果您的應(yīng)用程序與 Apple Pay 或其他系統(tǒng)身份驗(yàn)證功能集成，請勿在 iPhoneX 上引用 Touch ID。同樣，請確保您的應(yīng)用程序在支持 Touch ID 的設(shè)備上未引用 Face ID。 請參閱 驗(yàn)證。

在 iPhone X 上不要重復(fù)系統(tǒng)提供的鍵盤功能。即使用自定義鍵盤，Emoji/Globe 按鈕和 Dictation 按鈕也自動顯示在鍵盤的下方。您的應(yīng)用程序不能影響這些按鈕，因此避免在鍵盤中重復(fù)這些按鈕造成混亂。 請參閱 自定義鍵盤。

資源

在 資源 中下載 Photoshop 和 Sketch 中的 iPhone X UI 設(shè)計模板：

https://developer.apple.com/design/resources/#ios-apps

譯者：覃云

來源：微信公眾號：移動開發(fā)前線（ID：bornmobile）

本文由 @移動開發(fā)前線 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議