原文鏈接：https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
譯者：阿嗚GXR
iPhone X的超大尺寸拙绊、高分辨率以及它的全面屏給我們帶來了以前從未有過的沉浸式體驗和豐富的內(nèi)容展現(xiàn)唯欣。
屏幕尺寸
iPhoneX豎屏?xí)r的屏幕寬度與iPhone6提佣、iPhone7和iPhone8的4.7英寸屏幕是一樣的。iPhone X的屏幕比4.7英寸屏幕高出145pt圆存，所以內(nèi)容區(qū)域的垂直空間增加了20%仪糖。
在你的app中需要提供高分辨率的圖片找前。
iPhone X的高分辨率屏幕需要使用@3x的縮放比例栏妖。對于符號以及其它扁平的、矢量的設(shè)計辜窑，最好提供具有獨立分辨率的PDFs钩述。對于柵格化設(shè)計，需要同時提供@3x和@2x版本的設(shè)計稿穆碎。點擊圖片尺寸及分辨率和自定義圖標的查看更多相關(guān)內(nèi)容牙勘。
布局
在為iPhone X進行設(shè)計時，你需要確保布局充滿整個屏幕所禀，但是不要被設(shè)備的圓角方面、傳感器以及進入主屏幕的指示器(下文中簡稱指示器)遮擋放钦。
很多app使用標準的、系統(tǒng)提供的UI元素葡幸，例如導(dǎo)航欄最筒、表單和圖集贺氓，它們可以自適應(yīng)設(shè)備的新形式蔚叨。背景素材延伸到了顯示屏的邊緣，UI元素也要在合適的地方放置辙培。
對于一些自定義布局的app蔑水，尤其是用了自動布局并且遵守安全區(qū)域以及頁邊距布局規(guī)范的，支持iPhone X就會比較容易扬蕊。
在iPhone X上預(yù)覽你的app搀别。
你可以在模擬器(包括Xcode)上預(yù)覽你的app，檢查是否有被剪切的地方和一些其它的布局問題尾抑。但有一些特性歇父，例如廣色域圖像最好在實際的設(shè)備上預(yù)覽。
提供全面屏體驗再愈。
確保背景延伸到顯示屏的邊緣榜苫，例如表單和圖集在垂直布局上也要一直延伸到底部。
放置基本內(nèi)容防止被剪切翎冲。
一般來說垂睬，內(nèi)容應(yīng)該居中并且對稱的放置，這樣在任何方向看起來都不會有問題抗悍，而且不會被邊角或者設(shè)備的傳感器所剪切掉驹饺，也不會遮蓋到指示器。為了比較好的效果缴渊，可以使用標準的赏壹、系統(tǒng)提供的界面元素和自動布局來構(gòu)建你的界面。所有app都應(yīng)該遵循UIKit定義的安全區(qū)域和頁邊距布局規(guī)范衔沼，確保在設(shè)備和背景中放置合適的內(nèi)容卡儒。安全區(qū)域可以防止內(nèi)容從狀態(tài)欄、導(dǎo)航欄俐巴、工具欄和標簽欄中露出來骨望。
注意狀態(tài)欄的高度。
iPhone X的狀態(tài)欄比其它iPhone要高欣舵。如果你的app采用了固定的狀態(tài)欄高度擎鸠，你必須為了更好的定位狀態(tài)欄下方的內(nèi)容位置而更新你的app。最好根據(jù)用戶的設(shè)備動態(tài)定位內(nèi)容位置缘圈。要注意的是劣光，當后臺任務(wù)正在運行時（例如錄音和位置追蹤）iPhone X的狀態(tài)欄高度是不會改變的袜蚕。
如果你的app目前是隱藏狀態(tài)欄的，在iPhone X上需要再考慮一下這個決定绢涡。
iPhone X的顯示屏比其它iPhone高牲剃，為內(nèi)容提供了更多的垂直空間，但你的app可能無法充分利用狀態(tài)欄所占的屏幕空間雄可。狀態(tài)欄也可以展示一些對用戶有用的信息凿傅。除非隱藏狀態(tài)欄可以帶來附加值，否則盡量不要隱藏数苫。
復(fù)用現(xiàn)有的設(shè)計稿時要注意屏幕寬高比的不同聪舒。
相對于4.7英寸的iPhone而言iPhone X具有不同的屏幕寬高比。因此虐急，4.7英寸iPhone上的全屏設(shè)計稿在iPhone X上展現(xiàn)時會出現(xiàn)被剪切或按寬度適配的情況箱残。同樣的，iPhone X上的全屏設(shè)計稿在4.7英寸iPhone上顯示時也會被剪切或出現(xiàn)左右黑邊止吁。要確保重要的內(nèi)容在不同設(shè)備上顯示相同的尺寸被辑。
避免將交互控件放在非常底部或角落里。
用戶在顯示屏底部邊緣使用滑動手勢進入主屏幕或切換應(yīng)用敬惦。這些手勢可能會替代此區(qū)域內(nèi)的自定義手勢盼理。因此用戶很難與那些放在屏幕角落的功能進行交互。
對于重要的顯示特性仁热，不要隱藏也不要通過過度的設(shè)計來引起特別注意榜揖。
不要試圖在屏幕頂部或底部放置黑色的條欄來隱藏設(shè)備的圓角、傳感器或指示器抗蠢。不要在這些區(qū)域使用視覺的裝飾举哟，例如括號、斜面迅矛、圖形或引導(dǎo)文字來引起特別注意妨猩。
可以謹慎的使用自動隱藏指示器的功能。
當用戶幾秒鐘沒有觸摸屏幕時秽褒，指示器自動漸隱壶硅，當用戶又觸摸屏幕時，指示器再一次出現(xiàn)销斟。這種體驗只能被應(yīng)用于像播放視頻或幻燈片這種被動觀看的體驗中庐椒。
點擊自適應(yīng)和布局查看更多相關(guān)內(nèi)容
顏色
iPhone X的顯示屏支持顯示P3色彩空間，可以比sRGB產(chǎn)生更豐富蚂踊、更飽和的顏色约谈。
使用廣域色彩來提高視覺體驗。照片和視頻使用廣域色彩將會更加栩栩如生，可視數(shù)據(jù)和狀態(tài)指示器則會呈現(xiàn)出更好的效果棱诱。點擊這里查看顏色管理的相關(guān)內(nèi)容泼橘。
手勢
iPhone X的顯示屏使用從屏幕邊緣進行交互的手勢來進入主屏幕、切換app迈勋、通知中心或控制中心炬灭。
避免與系統(tǒng)中的屏幕邊緣手勢沖突。
用戶在每一個app中都使用這些手勢靡菇。只有在少數(shù)的案例中重归，例如沉浸式的游戲app需要自定義屏幕邊緣手勢，在滑動時調(diào)用app的手勢會優(yōu)先于調(diào)用系統(tǒng)的手勢镰官。這種操作要謹慎使用提前，因為這會妨礙用戶進入系統(tǒng)級的操作吗货。點擊手勢查看更多相關(guān)內(nèi)容泳唠。
額外的設(shè)計考慮
正確的參考認證方法。
iPhone X支持Face ID來進行認證宙搬。如果你的app整合了Apple Pay或其他系統(tǒng)認證功能笨腥，不要在iPhone X上參考Touch ID來設(shè)計。同樣的勇垛，也要確保不要在支持Touch ID的設(shè)備上參考Face ID的設(shè)計規(guī)范脖母。點擊認證查看更多相關(guān)內(nèi)容。
不要重復(fù)提供系統(tǒng)鍵盤的功能闲孤。
在iPhone X上谆级，Emoji按鈕、鍵盤切換按鈕和聽寫按鈕會在鍵盤下方自動顯示讼积，即使是使用自定義的鍵盤也是如此肥照。你的應(yīng)用不能影響這些按鈕，所以不要讓這些按鈕重復(fù)地出現(xiàn)在你自定義的鍵盤中勤众，這會給用戶造成困擾舆绎。在自定義鍵盤中查看更多相關(guān)內(nèi)容。
資源
下載iPhone X的UI設(shè)計模板们颜，Photoshop和Sketch文件點擊資源下載吕朵。
