iphoneX設計

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

 

iPhone X（也讀做：iPhone 10）正式發佈了，並定於11月3日開賣。它內置震撼的超級Retina屏幕，其分辨率爲1125×2436像素。 在其屏幕頂部還有一個切口（俗稱「劉海」），你能夠經過它來體驗將來感十足的臉部解鎖功能。

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

當在一倍的倍率下設計時，你須要建立一個 375×812px的畫板。因爲新Retina 屏幕的緣故，你沒必要像iphone8同樣輸出@2x的圖片，它須要的切圖資源是 @3x 的，如同以前的 iPhone 六、七、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

原文地址：https://blog.prototypr.io/designing-for-the-iphone-x-4239d5ac736

Mockplus作原型，更快更簡單，如今下載Mockplus，免費體驗暢快的原型設計之旅。