iPhone X 蘋果官方人機交互指南 手動翻譯

蘋果的發佈會在昨晚舉行，新的iPhoneX具體的分辨率、適配風格大家可能有一些疑惑，下面是摘自蘋果人機交互指引頁面對iPhoneX的介紹，大家可以先了解一下

iPhone X概覽

iPhone X擁有一塊超視網膜、5.8英寸，1125 × 2436分辨率的圓角全面屏，可以爲用戶呈現前所未有的視覺體驗

屏幕尺寸 Screen Size

在豎屏模式下，iPhone X的屏幕寬度比例實際上與4.7寸的iPhone 6、7和8相對應，均可以用375個像素來表示寬度比例(iPhone X的屏幕寬度實際分辨率爲375px x 3 = 1125px)。然而iPhone X的屏幕高度比4.7寸的iPhone 6等設備的屏幕高度多了145個像素，所以iPhone X相比4.7寸的iPhone 6等設備，可以多顯示20%的額外內容

橫屏尺寸Portrait dimensions 豎屏尺寸Landscape dimensions
1125px × 2436px (375pt × 812pt @3x) 2436px × 1125px (812pt × 375pt @3x)
爲了能夠讓應用圖片在iPhone X上的顯示清晰，最好使用@3x的切圖(和5.5寸的Plus機型相同)，對於文字和其他矢量圖形，可以提供與分辨率無關的PDF格式，對於其他切圖，儘管iPhone X和Plus機型都可以調用@2x的切圖，然而@3x的切圖會達到最好的顯示效果，其他可以參閱圖像大小和分辨率和自定義圖標。

佈局 Layout

在設計iPhone X的應用佈局時，你必須確保佈局元素填滿屏幕，並且不會被屏幕的圓角，頂部劉海或下方主屏幕按鈕所遮蔽。

大多數使用系統提供的UI元素（如UINavigationBar，UItableView和UICollectionView）的應用程序會在iPhone X上自適應。 系統控件(如UINavigationBar和UITabBar)會自動延伸到屏幕的邊緣，並且UITableView、UICollectionView等元素會繼續填充到屏幕區域上。

對於自動佈局的應用，適配到iPhone X上也是比較簡單的，特別是你的應用使用了Auto Layout。

在iPhone X上預覽你的應用 你可以用Xcode自帶的模擬器程序來檢查應用在iPhone X上的適配問題。 但是另外一些功能，比如廣色域圖像的現實問題，最好在實際設備上預覽。——這是由於新的iPhone X支持的色域可能比開發者當前使用的電腦屏幕的色域更高，從而導致一些顏色在模擬器上顯示可能達不到真機的顯示效果。

留意新的iPhone X的全面屏 確保背景視圖要完整的填充在整個屏幕上，並且額外增加的底部控件高度(UITabBar等)不會影響到UITableView、UICollectionView正常滾動到最底部。

在安全區內繪製控件 通常來說，UI內容應該是居中對稱進行佈局的，這樣不會被邊角或頂部劉海，或底部的系統按鈕所遮蓋。 爲獲得最佳效果，請使用標準的系統提供的界面元素和Auto Layout構建您的界面。 所有應用程序都應遵循UIKit定義的安全區域(Safe are)和佈局邊距(Margin)，這些區域可以根據屏幕寬高和上下文佈局進行適當的填充。 在安全區域內還可以防止UI內容覆蓋UIStatusBar，UINavigationBar，UIToorBar和UITabBar。

留意狀態欄的高度 iPhone X的狀態欄比之前所有的iPhone都要高，如果你的應用程序以前設置的是某個UI控件在狀態欄之下，而把這個UI控件的Y值設置爲20的時候，你就必須更新你的應用裏的UI控件的狀態了，要使其變成根據用戶使用的設備來修改UI內容的Y值(iPhone X的狀態欄高度爲44，其他iPhone的狀態欄高度都是20)。

另外還有一點要注意：當錄音和地理位置追蹤這樣的應用在後臺執行時，iPhone X上的狀態欄不會因此下移，而其他iPhone是會將整體頁面下移的。
如果你的應用當前是隱藏狀態欄的話，那麼要重新考慮在iPhone X上的效果. iPhone X儘管相對於4.7寸的iPhone提供了更多的頂部狀態欄控件，然而由於頂部傳感器的存在，使得頂部的狀態欄區域並不能完整的顯示出你所需要的內容，而且狀態欄顯示了很多重要的信息，所以仔細考慮是否非常需要這部分空間，再考慮隱藏狀態欄。

在複用原有比例的圖片時，注意長寬比差異 iPhone X相比4.7英寸的iPhone有不同的長寬比，結果是，4.7寸上顯示完整的圖片在iPhone X上顯示時會出現被裁剪，或上下邊框顯示的效果(比較類似於iPhone 4S的圖片於iPhone 5上)，同樣的，在iPhone X上顯示完整的圖片同樣會被裁剪或出現左右邊框顯示的效果(iPhone 5上的圖片於iPhone 4S上)。所以確保重要的圖片不要顯示在可能會被裁剪的地方。

避免將按鈕等交互式控件放置在最底部或屏幕角落 大家會使用屏幕底部的滑動手勢訪問主屏幕和應用切換，而開發者在底部放置的按鈕等控件很可能會被底部滑動手勢所覆蓋；而屏幕角落則是非常難點擊的區域，所以儘量避免在此展示交互式控件。

不要遮蓋或特別注意關鍵顯示功能。 請勿使用黑條遮蓋的方式來隱藏或遮蓋屏幕邊框的圓角或底部的系統功能按鈕，也不要用括號，邊框，形狀或教學文字等特殊字符來引導用戶對這些系統功能區的特別關注。

有限制的允許隱藏回到主頁的虛擬按鍵(虛擬home鍵). 當自動隱藏虛擬Home鍵生效時，虛擬home鍵會在用戶不觸碰屏幕的幾秒後隱藏掉，當用戶觸碰屏幕的時候，虛擬home鍵會顯示出來。這個功能可以讓用戶在瀏覽照片或視頻時不被遮擋視線，但是該功能應該只用於提升用戶的觀看體驗而不應該被主動觸發。

請參閱適應性和佈局。

屏幕色彩 Color

iPhone X上的屏幕支持P3廣色域顯示，可以產生比sRGB色域更豐富，更飽和的顏色。

可以使用P3色域來增強視覺體驗。 使照片和視頻的顯示更加逼真，並使圖表等數據更具有衝擊力。 詳情請參閱顏色管理。

手勢 Gestures

在iPhone X上，可以使用屏幕邊緣手勢來訪問主屏幕，切換應用，訪問通知中心和控制中心。

避免干擾系統範圍的屏幕邊緣手勢。人們依靠這些系統手勢來進行回到主頁等功能。但是在極少數情況下，像遊戲這樣的全屏應用可能需要自定義的屏幕邊緣手勢，這會造成優先於系統的手勢而執行 - 第一個滑動會首先調用開發者在遊戲中設置的操作，而第二次滑動則會調用系統手勢。 這種行爲（稱爲邊緣保護）應該謹慎實施，因爲它使得用戶難以訪問系統操作手勢。 詳情見手勢。
額外的設計注意事項 Additional Design Considerations

區分不同的身份認證方式。 iPhone X支持面部識別(Face ID)用於解鎖手機以及身份驗證，如果你的應用整合了Apple Pay或其他的系統身份驗證功能，請勿在iPhone X上使用Touch ID，同樣的，請確保在其他支持Touch ID的設備上不調用Face ID。詳情見身份認證

不要複用系統提供的鍵盤。 在iPhone X上，即使使用自定義鍵盤，Emoji表情和聽寫功能按鈕也自動顯示在鍵盤的下方。 您的應用程序不能佔據這些按鈕的位置，因此避免在鍵盤中重複這些按鈕，以免造成混亂。 詳情請參閱自定義鍵盤。
資源 Resources

你可以在這裏下載到iPhone X的UI設計模板，Photoshop和Sketch適用，詳情參閱資源。