新款的iphone明天就要發(fā)布了，我們來回顧一下iPhone X的人機界面設(shè)計規(guī)范。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è)計稿。點擊圖片尺寸及分辨率和自定義圖標(biāo)的查看更多相關(guān)內(nèi)容。

布局

在為iPhone X進行設(shè)計時，你需要確保布局充滿整個屏幕，但是不要被設(shè)備的圓角、傳感器以及進入主屏幕的指示器(下文中簡稱指示器)遮擋。

很多app使用標(biāo)準(zhǔn)的、系統(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è)備的傳感器所剪切掉，也不會遮蓋到指示器。為了比較好的效果，可以使用標(biāo)準(zhǔn)的、系統(tǒng)提供的界面元素和自動布局來構(gòu)建你的界面。所有app都應(yīng)該遵循UIKit定義的安全區(qū)域和頁邊距布局規(guī)范，確保在設(shè)備和背景中放置合適的內(nèi)容。安全區(qū)域可以防止內(nèi)容從狀態(tài)欄、導(dǎo)航欄、工具欄和標(biāo)簽欄中露出來。

注意狀態(tài)欄的高度。iPhone X的狀態(tài)欄比其它iPhone要高。如果你的app采用了固定的狀態(tài)欄高度，你必須為了更好的定位狀態(tài)欄下方的內(nèi)容位置而更新你的app。最好根據(jù)用戶的設(shè)備動態(tài)定位內(nèi)容位置。要注意的是，當(dāng)后臺任務(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)的自定義手勢。因此用戶很難與那些放在屏幕角落的功能進行交互。

插入全寬按鈕。延伸到屏幕邊緣的按鈕可能看起來不像按鈕。尊重全寬按鈕兩側(cè)的標(biāo)準(zhǔn)UIKit邊距。當(dāng)屏幕底部出現(xiàn)圓角并與安全區(qū)域的底部對齊時，屏幕底部出現(xiàn)的全寬按鈕效果最佳 - 這也確保它不會與Home指示燈沖突。

對于重要的顯示特性，不要隱藏也不要通過過度的設(shè)計來引起特別注意。不要試圖在屏幕頂部或底部放置黑色的條欄來隱藏設(shè)備的圓角、傳感器或指示器。不要在這些區(qū)域使用視覺的裝飾，例如括號、斜面、圖形或引導(dǎo)文字來引起特別注意。

可以謹(jǐn)慎的使用自動隱藏指示器的功能。當(dāng)用戶幾秒鐘沒有觸摸屏幕時，指示器自動漸隱，當(dāng)用戶又觸摸屏幕時，指示器再一次出現(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)容。

視頻

系統(tǒng)提供的視頻播放器提供兩種查看模式：全屏（縱橫填充）和適合屏幕（縱橫比）。默認(rèn)情況下，系統(tǒng)根據(jù)視頻的寬高比選擇查看模式，用戶可以在播放期間切換模式。

手勢

iPhone X的顯示屏使用從屏幕邊緣進行交互的手勢來進入主屏幕、切換app、通知中心或控制中心。

避免與系統(tǒng)中的屏幕邊緣手勢沖突。用戶在每一個app中都使用這些手勢。只有在少數(shù)的案例中，例如沉浸式的游戲app需要自定義屏幕邊緣手勢，在滑動時調(diào)用app的手勢會優(yōu)先于調(diào)用系統(tǒng)的手勢。這種操作要謹(jǐn)慎使用，因為這會妨礙用戶進入系統(tǒng)級的操作。點擊手勢查看更多相關(guān)內(nèi)容。

其它設(shè)計考慮

正確的參考認(rèn)證方法。iPhone X支持Face ID來進行認(rèn)證。如果你的app整合了Apple Pay或其他系統(tǒng)認(rèn)證功能，不要在iPhone X上參考Touch ID來設(shè)計。同樣的，也要確保不要在支持Touch ID的設(shè)備上參考Face ID的設(shè)計規(guī)范。點擊認(rèn)證查看更多相關(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文件點擊資源下載。