本文譯自Apple官方發(fā)布的人機(jī)交互指南，希望能夠?qū)δ阌兴鶐椭?/p>

iPhone X屏幕更大、分辨率更高、圓角以及屏幕邊緣可顯示的特性給我們帶來一種從未有過的沉浸式、內(nèi)容豐富化的體驗(yàn)。

屏幕大小

在垂直尺寸上，iPhone X屏幕的寬度和 iPhone 6、 iPhone 7、 iPhone 8一樣都是4.7吋。不同的是，iPhone X的高度比4.7吋的屏幕要高出145pt，這就給垂直方向上的內(nèi)容顯示多出大概20%的空間。

iPhone X支持高分辨率的app圖稿。iPhone X具有比例因子為@3x的高分辨率屏幕。對(duì)于字體和其他扁平風(fēng)格的矢量圖來說，最好提供高分辨率PDF格式的圖稿。對(duì)于光柵化圖稿，最好同時(shí)提供@3x和@2x版本的圖稿。具體可查看“大小、分辨率”和“自定義圖標(biāo)”章節(jié)。

布局

當(dāng)你設(shè)計(jì)iPhone X的app時(shí)，請(qǐng)確保內(nèi)容填滿整個(gè)屏幕，同時(shí)，還要保證設(shè)備的圓角、傳感器外殼、以及其它屏幕上的指示燈不會(huì)遮擋內(nèi)容。

如果app采用的是系統(tǒng)自帶的UI元素（比如導(dǎo)航欄、表格和集合等），這些元素會(huì)自動(dòng)適應(yīng)系統(tǒng)的新外形。擴(kuò)展到屏幕邊緣的背景素材和UI元素會(huì)自動(dòng)放置在正確的位置上。如下圖所示。

如果app使用的是自定義布局，那么兼容iPhone X也相對(duì)比較容易，尤其是對(duì)那么使用自定義布局且遵守安全區(qū)域和邊緣布局指南的app來說，就更容易了。

在iPhone X上預(yù)覽您的app。您可以使用Simulator（Xcode附帶的軟件）模擬app在iPhone X上的情形，并檢查尺寸以及其它的布局問題。一些功能，比如寬彩色圖像，最好在實(shí)際設(shè)備上預(yù)覽一下，以保證沒有問題。

提供全屏體驗(yàn)。確保背景是在屏幕的外邊、確保垂直滾動(dòng)的布局（比如表格和集合）依然可以滑動(dòng)到屏幕底部。

插入額外的內(nèi)容以避免內(nèi)容被裁剪。一般來說，內(nèi)容是居中對(duì)稱的，這樣會(huì)使得不管從哪個(gè)角度看，都不會(huì)覺得奇怪；而且還能保證內(nèi)容不會(huì)因?yàn)槠聊坏膱A角設(shè)計(jì)而裁剪、內(nèi)容不會(huì)被屏幕上的傳感器外殼和指示燈等遮擋。為了獲得最好的布局效果，請(qǐng)使用系統(tǒng)提供的標(biāo)準(zhǔn)的界面元素和自適應(yīng)布局方式去構(gòu)建你的app界面。所有的app都應(yīng)該遵守UIkit里定義的安全區(qū)域和布局邊界，這樣能保證設(shè)備和文字之間的合理填充效果。安全區(qū)還能保證內(nèi)容不會(huì)被狀態(tài)欄、導(dǎo)航欄、工具欄和標(biāo)簽欄遮擋。

注意狀態(tài)欄的高度。iPhone X上的狀態(tài)欄比其它iPhone上的狀態(tài)欄高一點(diǎn)。如果你的app認(rèn)為狀態(tài)欄的高度是固定的，從而把內(nèi)容放在了狀態(tài)欄的下方，那你必須要根據(jù)用戶的設(shè)備調(diào)整app的內(nèi)容的位置為自適應(yīng)。而且要注意當(dāng)后臺(tái)有錄音和位置跟蹤的任務(wù)正在進(jìn)行時(shí)，iPhone X上的狀態(tài)欄的高度也是不變的。

如果你的app隱藏了狀態(tài)欄，現(xiàn)在你需要重新考慮一下方案了。相對(duì)于4.7吋的iPhone，iPhone X的屏幕為內(nèi)容提供了更多的垂直空間，而且iPhone X占用的屏幕的區(qū)域，你的app可能無法充分使用。狀態(tài)欄也能讓用戶找到有用的信息。狀態(tài)欄只能在換取附加值時(shí)隱藏。

在使用現(xiàn)有的圖片時(shí)，注意屏幕長(zhǎng)寬比的差別。如上圖所示。iPhone X和4.7吋的iPhone的屏幕長(zhǎng)寬比不一樣，在4.7吋iPhone上全屏顯示的圖片在iPhone X全屏顯示時(shí)上會(huì)出現(xiàn)裁剪或信箱式（letterboxed）的顯示方式。同樣，在iPhone X全屏顯示的圖片在4.7吋iPhone上顯示時(shí)，也會(huì)出現(xiàn)裁剪或信箱式（pillarboxed）的顯示方式。確保重要的內(nèi)容在兩個(gè)不同屏幕尺寸上顯示時(shí)不會(huì)丟失。

不要將交互控件放在屏幕的最底部或角落里。人們處于屏幕底部時(shí)會(huì)使用滑動(dòng)手勢(shì)以訪問主屏幕和其它app，這些手勢(shì)在這些區(qū)域不能實(shí)現(xiàn)交互效果。同時(shí)，屏幕偏遠(yuǎn)角落的區(qū)域用戶很難輕松觸及。

不要掩蓋或特別關(guān)注屏幕的關(guān)鍵顯示功能。不要通過在屏幕的頂部和底部放置黑色條紋的方法來隱藏設(shè)備的圓角、傳感器外殼、或主屏幕上的指示器。不要使用像括號(hào)、邊框、形狀或指示性文字等視覺裝飾，不要特別關(guān)注這些區(qū)域。

允許自動(dòng)隱藏指示燈，以輕松訪問主屏幕。當(dāng)打開自動(dòng)隱藏指示燈時(shí)，如果用戶在幾秒鐘之內(nèi)沒有觸摸屏幕，指示燈會(huì)隱藏。如果用戶再次觸摸屏幕，指示燈會(huì)在此亮起。這種行為只有在播放視頻或查看照片幻燈片等被動(dòng)觀看體驗(yàn)時(shí)才有效。

顏色

iPhone X上的顯示器支持P3色彩空間，這種色彩可以產(chǎn)生比sRGB更飽和的顏色。

使用更多的顏色以增強(qiáng)視覺體驗(yàn)。使用更多的顏色（wide color）會(huì)讓照片和視頻看起來更加逼真，也會(huì)讓視覺數(shù)據(jù)和狀態(tài)指示器更形象。

手勢(shì)

iPhone X屏幕使用屏幕邊緣手勢(shì)來訪問主屏幕，應(yīng)用程序切換器，通知中心和控制中心。

不要影響系統(tǒng)層的屏幕邊緣手勢(shì)。人們?cè)诿總€(gè)app上都會(huì)使用這些手勢(shì)。在極少數(shù)情況下，像游戲類的沉浸式app才需要自定義高于系統(tǒng)級(jí)的屏幕邊緣手勢(shì)，比如第一次滑動(dòng)會(huì)喚起app特定的手勢(shì)，第二次滑動(dòng)才會(huì)喚起系統(tǒng)級(jí)的手勢(shì)。這種行為（被稱為邊緣保護(hù)）應(yīng)該謹(jǐn)慎使用，因?yàn)樗鼤?huì)導(dǎo)致用戶難以訪問系統(tǒng)級(jí)的操作。

其他的設(shè)計(jì)注意事項(xiàng)

設(shè)備認(rèn)證方式準(zhǔn)確。iPhone X支持Face ID認(rèn)證。如果你的app集成了Apple Pay 或其他系統(tǒng)認(rèn)證功能，請(qǐng)不要在iPhone X上飲用Touch ID。同樣，app也不要在支持Touch ID的設(shè)備上使用Face ID。

不要復(fù)制系統(tǒng)提供的鍵盤功能。在iPhone X上，Emoji / Globe按鈕和Dictation按鈕會(huì)自動(dòng)出現(xiàn)在鍵盤下方，即使使用的是自定義鍵盤。你的app不應(yīng)影響這些按鈕，因此避免在鍵盤中

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

資源

點(diǎn)這里下載iPhone X的UI設(shè)計(jì)模版，支持Photoshop和Sketch。

本文譯自Apple官方發(fā)布的人機(jī)交互指南 Human Interface Guidelines（HIG），旨在幫助交互設(shè)計(jì)師和應(yīng)用開發(fā)者了解iOS應(yīng)用設(shè)計(jì)規(guī)范。

— end —

相關(guān)閱讀

iOS 11人機(jī)交互指南概覽：主題（Themes）

譯者：Q_misky

本文由 @Q_misky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖由作者提供