以下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。



iPhone X（也讀作：iPhone 10）正式釋出了，並定於11月3日開賣。它內建震撼的超級Retina螢幕，其解析度為1125×2436畫素。 在其螢幕頂部還有一個切口（俗稱“劉海”），你可以透過它來體驗未來感十足的臉部解鎖功能。

這款美麗的機器將給設計師帶來一些新的挑戰，也將帶來一些新的機會。在豎屏模式下，裝置的寬度與 iPhone 6、7 和 8 相同，但比它們的螢幕足足高了145pt，這樣就增加了20％的垂直顯示空間。

當在一倍的倍率下設計時，你需要建立一個 375×812px的畫板。由於新Retina 螢幕的緣故，你不必像iphone8一樣輸出@2x的圖片，它需要的切圖資源是 @3x 的，如同之前的 iPhone 6、7、8 plus 一樣。



看那條白色的線，它就是新的home鍵

如果你目前的應用程式是用iOS原生元件（導航欄、表格、集合檢視和標籤欄），那麼你的應用程式將會適應這款新的iPhone。它們將在新的iPhone自動佈局和定位。



左邊是 iPhone 8 的 UI 佈局，右邊是 UI 元件適應到 iPhone X 上的效果

如果你使用自定義佈局，你的應用程式可能需要更新以適應新的屏幕布局。如果你使用自動佈局，那就容易多了。

讓我們再進一步

首先，“擁抱這款酷炫的全屏機吧！”

確保你建立了全屏體驗。讓滾動檢視滾動到螢幕最底部甚至超出顯示器彎曲底部的邊緣。蘋果還要求你在設計時避開頂部切口和底部圓角，所以不要放置黑色的狀態列，這樣會讓它看起來像是教科書式的iPhone8。

居中嵌入重要資訊。確保重要內容在中心對齊，並使用對稱的佈局, 這樣你的UI介面就不會被裝置的感測器（切口）或圓角所截斷。如果你是用自動佈局，你的內容將自動適配到安全區域，所以你的設計不會被遮擋在感測器（切口）或者Home鍵之後。



新的狀態列。由於顯示器頂部的感測器（切口），新的狀態列被分成兩部分。如果你的UI 在這個空間做了一些設計（以前的 20pt 高，現在是 44pt），你需要對UI介面做些改變確保它可以在高度上動態改變，因為在iPhoneX上狀態列加高了。最重要的是, 如果使用者撥打電話或使用導航程式時，這個高度不會改變, 這一點在其他的iphone 上也是一樣。



分成兩部分並且增高了的狀態列

顯示新的狀態列。如果你目前在設計中隱藏了狀態列，蘋果會要求你重新考慮這個決定。由於螢幕較高，你有更多的空間顯示你的內容，充分利用狀態列。使用者可以在那裡（狀態列）找到有用的資訊，大部分時間這個位置都不會被其他UI元素佔用。

全屏影象。如果你目前在設計中使用了全屏影象, 你需要在新的 iPhone上更新。圖片可能被裁切, 視覺的重要部分也可能被隱藏。



不要在螢幕底部放置互動控制元件。Home鍵周圍的間距僅僅是為手勢觸碰建立的，向上滑動回到主螢幕。將按鈕放在Home鍵或視屏底部圓角附近，都不是好選擇。使用者很可能意外的觸碰到Home鍵，很難進入想去的使用者介面。你仍然可以使用標籤欄和功能欄，但請記住，它們的操作應不干擾Home鍵。



不要隱藏Home鍵。當用戶幾秒鐘不觸碰螢幕時，IOS可以在你的應用程式中將Home鍵自動隱藏。當用戶再次觸控式螢幕幕時, 它將重新出現, 這主要應用於如觀看影片或照片這種身臨其境的場景。Home鍵還會根據應用程式的背景自動更改顏色。



色彩更豐富。新的超級Retina顯示屏，可以顯示更多的顏色，P3色彩模式代替了sRGB。這意味著它會顯示更豐富和更飽和的顏色。特別是影片和照片，看起來會更棒。

向上滑動，注意手勢。由於取消了物理Home鍵，你透過手勢與你的iPhone互動（比以往任何時候都更頻繁）。當你向上滑動時，你就可以回到主屏或者去到多工檢視。當你在 Home鍵上向左和向右滑動時, 你可以在開啟的多工程式之間切換。透過從螢幕頂部向下滑動, 你可以轉到推送通知或控制中心。在遊戲中更是如此，你可以使用可能會覆蓋IOS原生手勢的自定義手勢。你可以透過實施“邊界保護”來實現自定義手勢，但請謹慎使用，因為這將使使用者更難使用系統功能。

刷臉功能。以前的iPhone有一個很好的功能Touch ID，它允許使用者透過使用指紋來解鎖他們的裝置或執行密碼鎖定的操作。Touch ID 感測器被隱藏在 Home 鍵內部，由於iPhone X 的 Home 鍵已經取消了，所以蘋果用更先進和安全的方式來解鎖你的裝置——Face ID（刷臉），它使用非常高深的演算法來檢測你的臉部並解鎖你的裝置。進入人臉識別模式，它使用了一些非常棒的演算法來檢測你的面部並解鎖你的裝置。這個會出現在一些新的APP介面中，請確保你的iPhoneX使用者可以使用它，同時確保不要在登入或選單中引用Touch ID，將其替換為Face ID。



更大的導航欄。iOS 11 原生導航欄的設計得到了更新, 它們現在更高了。這款設計在iPhone X上將會非常出色，並將與新的狀態列完美結合。所以考慮在你的設計中使用它。在滾動時，會有一些不錯的原生動畫效果呈現。



• iPhone X的螢幕高出了145pt，所以設計為375×812pt而不是375x667pt；

• iPhone X 使用 @ 3x 圖片的切圖資源；

• 建立全屏體驗, 不要隱藏裝置的獨有功能；

• 將重要內容放置在螢幕中心區域, 以確保它始終可見且不被裝置的感測器或圓角所遮擋；

• 分成兩部分的新狀態列，以前高22pt，現在高44pt；

• 全屏圖片應該更新,，以保證其完全顯示；

• 除非非常必要，否則不要隱藏Home鍵；

• 更豐富和更飽和的P3顏色配置；

• 注意在 Home鍵和狀態列附近的自定義手勢，不要混淆原生手勢；

• Face ID替換Touch ID，更新你的UI，並將替換原本使用Touch ID的頁面；

• 較大的導航欄將在這塊更高的顯示屏上得到更好的視覺和動畫效果；