翻譯自蘋果開發(fā)者指南

iPhone X

iPhone X 擁有高分辨率、圓角、無邊框的大屏幕，它提供了前所未有的體驗，非常逼真，表現(xiàn)力豐富。

屏幕尺寸

在豎屏下，iPhone X 的顯示屏寬度和4.7"的 iPhone 6，iPhone 7，iPhone 8 的顯示屏寬度?相匹配。然而 iPhone X 比4.7"的顯示高出145pt，導(dǎo)致它大致多出20%的垂直空間可以用來展示內(nèi)容。

為你的App中的所有貼圖提供高分辨率圖片。iPhone X 顯示高分辨的@3x貼圖。對于字形和其他平面的矢量圖形，最好提供與分辨率無關(guān)的 PDFs。對于柵格圖，可以提供@2x和@3x版本的圖片。詳情見圖片尺寸和分辨率和自定義圖標(biāo)。

布局

在為 iPhone X 做設(shè)計時，你必須確保布局占滿屏幕，并且不會被設(shè)備圓角、傳感器倉（譯者注：iPhone X 的劉海）或虛擬 Home 所遮擋。

大多數(shù)使用標(biāo)準(zhǔn)系統(tǒng)提供的 UI 元素（例如 navigation bar, table, collection）的 App，會自動適應(yīng)設(shè)備的新外形。背景會延伸到顯示屏的邊緣，并且 UI 元素被適當(dāng)?shù)夭迦牒投ㄎ弧?/p>

4.7" iPhone	iPhone X

對于自定義布局的 App，適配 iPhone X 也比較簡單，尤其是你的 App 使用了 Auto Layout 和它里面的安全區(qū)與邊界布局指南（safe area and margin layout guides）。

在 iPhone X 中預(yù)覽你的 App。你可以使用模擬器（Xcode 附帶）來預(yù)覽你的 App，來檢查裁剪和其他的布局問題。一些功能，比如 wide color imagery，最好使用真機(jī)上預(yù)覽。

提供全屏幕體驗。確保背景延伸到顯示屏的邊界，并且垂直可滾動的布局（比如 table, collection）一直延續(xù)到底部。

插入必要的內(nèi)容以防止被裁剪。一般來說，展示內(nèi)容應(yīng)該是居中對稱的，所以就可以在橫豎屏上看起來都很棒，還不會被角落和劉海剪裁掉，或者被虛擬 Home 遮擋掉。最好的辦法，就是使用系統(tǒng)提供的標(biāo)準(zhǔn) UI 組件和 Auto Layout 來構(gòu)建你的用戶界面。所有 App 都應(yīng)該遵循 UIKit 定義的安全區(qū)和布局邊距，這些區(qū)域可以根據(jù)設(shè)備和上下文進(jìn)行適當(dāng)?shù)奶畛?。安全區(qū)還可以防止內(nèi)容覆蓋 status bar，navigation bar，tool bar 和 tab bar。

注意 status bar 的高度。iPhone X 的 status bar 比其他 iPhone 要高。如果你的 App 假定了一個固定的狀態(tài)欄高度，用于將內(nèi)容定位在狀態(tài)欄的下方，那你就必須更新你的 App，來基于用戶的設(shè)備來動態(tài)定位內(nèi)容。需要注意的是：當(dāng)后臺任務(wù)（例如錄音和定位）活動時，iPhone X 不會改變狀態(tài)欄的高度。

如果你的 App 當(dāng)前隱藏了狀態(tài)欄，那么對于 iPhone X 就需要重新考慮這個問題。iPhone X 的顯示比 4.7" iPhone 提供了更多的垂直空間，而且狀態(tài)欄占據(jù)的空間可能是你的 App 不會利用的。狀態(tài)欄顯示的信息也是對用戶有用的。它只應(yīng)該為額外的價值而隱藏起來。

4.7" 全屏圖片	iPhone X 上被剪裁	iPhone X 加框展示
iPhone X 全屏圖片	4.7" 設(shè)備上被裁剪	4.7" 設(shè)備上加框展示

使用已有圖片時，需要注意長寬比例的差異。iPhone X 與 4.7" iPhone 擁有不同的長寬比。因此，4.7" iPhone 的全屏圖片顯示在 iPhone X 上會被裁減或者加框。同樣的，iPhone X 的全屏圖片顯示在 4.7" iPhone 上也會被裁減或者加框。需要確保重要的內(nèi)容在不同的顯示屏尺寸上都可以被展示出來。

避免在屏幕的底部和角落里放置交互控件。用戶使用底邊滑動手勢來訪問主屏和切換 App，這些手勢可能會取消掉這些區(qū)域中你自己實現(xiàn)的手勢交互。用戶要接觸到屏幕的遠(yuǎn)角并不容易，也不舒服。

不要遮罩或者強(qiáng)調(diào)關(guān)鍵的顯示功能。不要企圖通過在頂部和底部放置黑條來隱藏掉設(shè)備圓角、傳感器倉，或者虛擬 Home。不要使用像括號、邊框、形狀或引導(dǎo)文案這樣的視覺裝飾來強(qiáng)調(diào)這些區(qū)域。

謹(jǐn)慎啟用自動隱藏虛擬 Home。當(dāng)自動隱藏生效時，如果用戶幾秒沒有觸碰屏幕，虛擬 Home 就會淡出。當(dāng)用戶觸摸屏幕時它又會出現(xiàn)。只有當(dāng)用戶在觀看的時候，比如播放視頻或照片幻燈，才啟用這個功能。

詳見自適應(yīng)和布局。

顏色

iPhone X 可以支持 P3 色彩空間，比 sRGB 更豐富更飽和。

手勢

iPhone X 上的顯示屏使用屏幕邊緣手勢來訪問主屏幕、切換 App、通知中心和控制中心。

避免和系統(tǒng)的屏幕邊緣手勢相互干擾。在所有 App 中，用戶都要用到這些手勢。只有在極少數(shù)情況下，例如像游戲這樣的沉浸式 App 可能需要自定義的屏幕邊緣手勢，優(yōu)先于系統(tǒng)手勢，第一次滑動會調(diào)用特定 App 的手勢，第二次滑動則會調(diào)用系統(tǒng)手勢。使用這種行為（稱之為邊緣保護(hù)）的時候應(yīng)該謹(jǐn)慎，因為它使得用戶難以訪問系統(tǒng)級操作。詳見手勢。

設(shè)計的附加注意事項

使用正確的認(rèn)證方式。iPhone X 支持 Face ID 認(rèn)證。如果你的 App 集成了 Apple Pay 或其他系統(tǒng)身份驗證功能，請勿在 iPhone X 上使用 Touch ID。同樣的，也要確保你的 App 在支持 Touch ID 的設(shè)備上不要使用 Face ID。

不要重復(fù)定義系統(tǒng)提供的鍵盤功能。在 iPhone X 上，即使使用自定義鍵盤，Emoji / Globe 按鈕和 Dictation 按鈕也自動顯示在鍵盤的下方。你的 App 不能影響這些按鈕，所以避免在鍵盤中重復(fù)這些按鈕造成混亂。

資源

從資源下載 Photoshop 和 Sketch 的 iPhone X 設(shè)計模板。