新款的iphone明天就要發(fā)布了，我們來回顧一下iPhone X的人機(jī)界面設(shè)計(jì)規(guī)范。iPhone X的超大尺寸、高分辨率以及它的全面屏給我們帶來了以前從未有過的沉浸式體驗(yàn)和豐富的內(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è)計(jì)，最好提供具有獨(dú)立分辨率的PDFs。對于柵格化設(shè)計(jì)，需要同時(shí)提供@3x和@2x版本的設(shè)計(jì)稿。點(diǎn)擊圖片尺寸及分辨率和自定義圖標(biāo)的查看更多相關(guān)內(nèi)容。

布局

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

很多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í)際的設(shè)備上預(yù)覽。

提供全面屏體驗(yàn)。確保背景延伸到顯示屏的邊緣，例如表單和圖集在垂直布局上也要一直延伸到底部。

放置基本內(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ù)正在運(yùn)行時(shí)（例如錄音和位置追蹤）iPhone X的狀態(tài)欄高度是不會改變的。

如果你的app目前是隱藏狀態(tài)欄的，在iPhone X上需要再考慮一下這個(gè)決定。iPhone X的顯示屏比其它iPhone高，為內(nèi)容提供了更多的垂直空間，但你的app可能無法充分利用狀態(tài)欄所占的屏幕空間。狀態(tài)欄也可以展示一些對用戶有用的信息。除非隱藏狀態(tài)欄可以帶來附加值，否則盡量不要隱藏。

復(fù)用現(xiàn)有的設(shè)計(jì)稿時(shí)要注意屏幕寬高比的不同。相對于4.7英寸的iPhone而言iPhone X具有不同的屏幕寬高比。因此，4.7英寸iPhone上的全屏設(shè)計(jì)稿在iPhone X上展現(xiàn)時(shí)會出現(xiàn)被剪切或按寬度適配的情況。同樣的，iPhone X上的全屏設(shè)計(jì)稿在4.7英寸iPhone上顯示時(shí)也會被剪切或出現(xiàn)左右黑邊。要確保重要的內(nèi)容在不同設(shè)備上顯示相同的尺寸。

避免將交互控件放在非常底部或角落里。用戶在顯示屏底部邊緣使用滑動手勢進(jìn)入主屏幕或切換應(yīng)用。這些手勢可能會替代此區(qū)域內(nèi)的自定義手勢。因此用戶很難與那些放在屏幕角落的功能進(jìn)行交互。

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

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

可以謹(jǐn)慎的使用自動隱藏指示器的功能。當(dāng)用戶幾秒鐘沒有觸摸屏幕時(shí)，指示器自動漸隱，當(dāng)用戶又觸摸屏幕時(shí)，指示器再一次出現(xiàn)。這種體驗(yàn)只能被應(yīng)用于像播放視頻或幻燈片這種被動觀看的體驗(yàn)中。

點(diǎn)擊自適應(yīng)和布局查看更多相關(guān)內(nèi)容。

顏色

iPhone X的顯示屏支持顯示P3色彩空間，可以比sRGB產(chǎn)生更豐富、更飽和的顏色。

使用廣域色彩來提高視覺體驗(yàn)。照片和視頻使用廣域色彩將會更加栩栩如生，可視數(shù)據(jù)和狀態(tài)指示器則會呈現(xiàn)出更好的效果。點(diǎn)擊這里查看顏色管理的相關(guān)內(nèi)容。

視頻

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

手勢

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

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

其它設(shè)計(jì)考慮

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