「譯」??蘋果官方 iPhone X 人機界面指南

了解如何為新推出的全屏幕超視網膜顯示屏優化你的應用和遊戲。

??閱讀信息：

• 閱讀時間：約8分鐘
• 流量預估：4.9MB
• 資源下載：Apple UI Design Resources
• 相關視頻：Designing for iPhone X | Building Apps for iPhone X

iPhone X 採用了一塊大尺寸，高解析度，圓潤，邊到邊的顯示屏，提供了前所未有的豐富內容和沉浸式體驗。

??屏幕尺寸

縱向上，iPhone X 的顯示屏寬度與 iPhone 6，7，8的4.7「顯示屏一致。但 iPhone X 的顯示屏比4.7」顯示屏高145 pt，導致垂直方向多出來大約20%的區域可以顯示更多的內容。

為你應用里的所有視覺元素提供高清的素材。iPhone X 搭配一塊比例因子為@3x 的高清顯示屏。對於文字和其他矢量圖形，最好提供可以無視解析度的 PDF 文件。對點陣圖，你可以提供@3x 和@2x 兩種比例因子的素材。更多請參閱 Image Size and Resolution 和 Custom Icons。

布局

在為 iPhone X 設計時，你必須確保布局填滿屏幕，並且不會被設備的圓角，上端的感測器或用於訪問主屏幕的指示條遮擋。

大多使用標準的，系統提供的如導航欄，表格和集合等 UI 元素的應用會自動適應新屏幕。背景會延伸到顯示屏邊緣，而 UI 元件也會被適當地布置。

對於自定義布局的應用，支持 iPhone X 也不難，尤其是當你的應用使用了自動布局並遵守了安全區和邊距布局規範。

在 iPhone X 上預覽你的應用。你可以使用 Xcode 附帶的模擬器來預覽應用，檢查遮擋或其他布局問題。但是像高色域圖像顯示效果之類問題，最好在真機上預覽。

提供全屏的體驗。確保背景延伸到顯示屏的邊界，並且如表格和集合等垂直可滾動的 UI 元素，確保它們一直延展到底部。

插入必要內容以防遮擋。一般來說，內容應該居中對稱，這樣它在任何方向看起來都很贊，不會被四角，感測器或訪問主屏幕的指示條遮擋。為獲得最佳效果，搭建界面時請使用標準的系統提供的 UI 元素和自動布局。所有應用都應遵循 UIKit 中定義的安全區和邊距布局規範，這個規定保障了基於設備和內容的穩妥的擺放。安全區同時預防了內容和狀態欄，導航欄，工具欄，標籤欄的重疊問題。

留心狀態欄的高度。狀態欄在 iPhone X 上比在其他 iPhone 上更高。如果你的應用採用了一個固定高度的狀態欄並將內容擺放其下，則必須更新為根據用戶的設備來動態定位內容。請注意，當如錄音和定位等後台任務處於激活狀態時，iPhone X 上的狀態欄不會改變高度。

如果你的應用隱藏狀態欄，請重新考慮 iPhone X 上的情況。iPhone X 上的顯示屏比高度為4.7「的 iPhone 提供了更多的垂直空間，狀態欄佔據了你應用可能沒有完全利用的一塊屏幕區域。狀態欄顯示了對人們有用的信息，它只應該在能帶來更多價值的情況下被隱藏。

在復用現有視覺元素時，留心比例差異。iPhone X 具有不同於4.7「 iPhone 的長寬比，因此4.7」 iPhone 上的全屏圖像在 iPhone X 上顯示時會被裁剪或等比縮放以適應屏幕。同樣，iPhone X 上的全屏圖像在在4.7「 iPhone 上顯示時也會被裁剪或等比縮放以適應屏幕。請確保重要的視覺內容在兩種屏幕尺寸上都能很好展示。

避免將互動式控制項擺放在屏幕的底部和角落。用戶在顯示屏底部使用滑動手勢來訪問主屏幕和多任務切換，這些手勢可能會干擾你在此區域中的自定義手勢。屏幕上方的兩個角落太遠了，並不是用戶的操作舒適區。

不要在關鍵顯示區域搞花樣。請勿嘗試通過在屏幕頂部和底部放置黑色色塊來隱藏設備的圓角，感測器或主屏指示條。不要使用像括弧，邊框，形狀或指示文字等視覺裝飾在這些區域吸引用戶注意力。

謹慎允許自動隱藏主屏指示條。當啟用自動隱藏時，如果用戶幾秒沒有觸摸屏幕，指示條將消失。當用戶再次觸摸屏幕時重新出現。這種行為應該只被用於例如播放視頻或幻燈片的觀看場景。

更多請參閱 Adaptivity and Layout。

顏色

iPhone X 的顯示屏支持 P3 色彩空間，擁有比 sRGB 更豐富，更飽和的顏色。

使用更豐富的顏色來增強視覺體驗。採用高色域的照片和視頻會更加栩栩如生，使用高色域的信息樣式和狀態指示會更有效果。更多請參閱 Color。

手勢

iPhone X 的顯示屏使用屏幕邊緣手勢來訪問主屏幕，多任務處理，通知中心和控制中心。

避免和系統級的屏幕邊緣手勢衝突。人們會在每個應用里使用這些屏幕邊緣手勢。在少數情況下，像遊戲這樣的沉浸式應用可能需要自定義優先於系統手勢的屏幕邊緣手勢 - 滑動一次會調用應用的自定義手勢，第二次則會調用系統手勢。 這種方式（稱為邊緣保護）應謹慎使用，因為它使得用戶難以訪問系統級的操作。更多請參閱 Gestures。

??其他注意事項

準確引用身份驗證方式。iPhone X 採用 Face ID 進行身份驗證。 如果你的應用集成 Apple Pay 或其他系統身份驗證功能，請勿在 iPhone X 上引用Touch ID。同樣，請確保你的應用程序在支持 Touch ID 的設備上沒有引用 Face ID。 更多請參閱 Authentication。

不要重複提供系統已有的鍵盤功能。在 iPhone X 上即使自定義鍵盤，Emoji，Globe 和 Dictation 按鈕也常置於鍵盤的下方。你的應用無法影響這些按鈕，因此請避免在自定義鍵盤中重複布置這些按鈕，以至給用戶帶來困擾。更多請參閱 Custom Keyboards。

??文章總結：

看直播看到三點，夢裡都是齊劉海。看來這次能拯救設計師的只有鋼鐵俠和天貓了。

??擴展閱讀：

• Sketch 插件：CRAFT | Sketch Material | WeSketch
• Sketch 教程：Library | 換色文字 symbol | Symbol 嵌套 | 字體樣式庫
• Graffle 教程：繪製流程圖 | 搭建文檔
• 文章翻譯：Swarm 改版 | Do & Don』t | YouTube 換 logo | 「Uber 商務」改版

??素材分享：

由於 iPhone X 剛發布，網上免費的資源並不多，筆者找到一個 iPhone X mockup，設計師們騷起來吧。

??感謝閱讀：

我是 Teambition 的交互設計師徐小馬（微信：heiheilaugh），歡迎交流。