如何評價iPhoneX？

以下內容由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鍵）而被遮擋住。順便說一句，Home 鍵化為了屏幕底部的小橫線，它取代了物理 Home 鍵按鈕。你可以從任何應用程序向上滑動回到主屏幕或做多任務處理。

?

看那條白色的線，它就是新的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。

?

自定義鍵盤。當你在設計自定義鍵盤時, 不應該在鍵盤上添加表情或聽寫按鈕。因為它會自動添加到鍵盤下方的 Home鍵區域。

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

?

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

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

? 創建全屏體驗, 不要隱藏設備的獨有功能；

? 將重要內容放置在屏幕中心區域, 以確保它始終可見且不被設備的傳感器或圓角所遮擋；

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

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

? 不要在屏幕底部或靠近Home鍵的地方添加按鈕；

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

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

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

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

? 自定義鍵盤不需要添加表情和聽寫按鈕；

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

原文作者：NIELS