本文譯自Apple官方發布的人機交互指南，希望能夠對你有所幫助。

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

屏幕大小

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

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

布局

當你設計iPhone X的app時，請確保內容填滿整個屏幕，同時，還要保證設備的圓角、傳感器外殼、以及其它屏幕上的指示燈不會遮擋內容。

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

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

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

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

插入額外的內容以避免內容被裁剪。一般來說，內容是居中對稱的，這樣會使得不管從哪個角度看，都不會覺得奇怪；而且還能保證內容不會因為屏幕的圓角設計而裁剪、內容不會被屏幕上的傳感器外殼和指示燈等遮擋。為了獲得最好的布局效果，請使用系統提供的標準的界面元素和自適應布局方式去構建你的app界面。所有的app都應該遵守UIkit里定義的安全區域和布局邊界，這樣能保證設備和文字之間的合理填充效果。安全區還能保證內容不會被狀態欄、導航欄、工具欄和標簽欄遮擋。

注意狀態欄的高度。iPhone X上的狀態欄比其它iPhone上的狀態欄高一點。如果你的app認為狀態欄的高度是固定的，從而把內容放在了狀態欄的下方，那你必須要根據用戶的設備調整app的內容的位置為自適應。而且要注意當后臺有錄音和位置跟蹤的任務正在進行時，iPhone X上的狀態欄的高度也是不變的。

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

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

不要將交互控件放在屏幕的最底部或角落里。人們處于屏幕底部時會使用滑動手勢以訪問主屏幕和其它app，這些手勢在這些區域不能實現交互效果。同時，屏幕偏遠角落的區域用戶很難輕松觸及。

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

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

顏色

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

使用更多的顏色以增強視覺體驗。使用更多的顏色（wide color）會讓照片和視頻看起來更加逼真，也會讓視覺數據和狀態指示器更形象。

手勢

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

不要影響系統層的屏幕邊緣手勢。人們在每個app上都會使用這些手勢。在極少數情況下，像游戲類的沉浸式app才需要自定義高于系統級的屏幕邊緣手勢，比如第一次滑動會喚起app特定的手勢，第二次滑動才會喚起系統級的手勢。這種行為（被稱為邊緣保護）應該謹慎使用，因為它會導致用戶難以訪問系統級的操作。

其他的設計注意事項

設備認證方式準確。iPhone X支持Face ID認證。如果你的app集成了Apple Pay 或其他系統認證功能，請不要在iPhone X上飲用Touch ID。同樣，app也不要在支持Touch ID的設備上使用Face ID。

不要復制系統提供的鍵盤功能。在iPhone X上，Emoji / Globe按鈕和Dictation按鈕會自動出現在鍵盤下方，即使使用的是自定義鍵盤。你的app不應影響這些按鈕，因此避免在鍵盤中

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

資源

點這里下載iPhone X的UI設計模版，支持Photoshop和Sketch。

本文譯自Apple官方發布的人機交互指南 Human Interface Guidelines（HIG），旨在幫助交互設計師和應用開發者了解iOS應用設計規范。

— end —

相關閱讀

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

譯者：Q_misky

本文由 @Q_misky 翻譯發布于人人都是產品經理。未經許可，禁止轉載。

題圖由作者提供