想為 iPhone X 做交互設計？你需要讀這篇文章

關鍵時刻，第一時間送達！

作者丨NIELS

譯者丨陳冬

【編者按】儘管 iPhone X 採用的全面屏設計方案已經是當下技術的最優解，但其「劉海」卻依然引起了眾多吐槽，在無法達到真正全面屏之下，為何蘋果會選擇使用非主流的「劉海」設計，而不是主流的「窄額頭」？這是一個仍然在討論的問題。對於眾多的 iOS 工程師及設計師而言，為 iPhone X 進行屏幕適配以及交互設計才是重中之重。對此，本文作者 —— Pocket 交互設計師 NIELS 為我們分享了他的經驗。

iPhone X（稱之為 iPhone 10）已經正式發布，並將於 11 月 3 日開始發售。它擁有一個解析度為 1125×2436 像素的超級視網膜全面屏。且在屏幕頂部有一個切口，在這裡你可以發現一些與人臉解鎖相關的功能。

為這款優雅的手機做設計會給我們帶來一些挑戰，同時也會有一些設計方面的機會。比如在豎屏模式下，iPhone X 設備的寬度和 iPhone 6、7 以及 8 相同均為 375pt，高度上增加了 145pt，於是垂直空間上就增加了 20%。當你在設計@1x 設計稿時，你需要一個 375×812px 的畫板。由於新的 Retina 顯示屏，你需要用 iPhone 7-8 Plus 上的@3x 圖，而不是 iPhone 8 的@2x 圖。

在 iPhone X 的設計中，你必須確保沒有因為設備獨特的特徵（如圓角邊，頂部的切口和 Home 指示器）而遮擋住你的 UI。 順便說一句，Home 指示器現在是屏幕底部的一條小線，它取代了實體的 Home 按鈕。你可以從任意一個 App 底部向上滑回到主屏幕或多任務處理界面。

如果你現在的 App 都是使用 iOS 原生控制項，那麼你的 App 已經自動適應 iPhone X 了，包括導航條、表格視圖、集合視圖以及底部標籤欄。這些控制項將被自動地插入和定位。

對於使用自定義布局的 App，可能需要一些更新來適配新屏幕的布局。 但是對於使用 Auto Layout 的應用來說，那可能非常容易。

1

iPhone X，我們需要做出改變的 12 個地方

首先，擁抱 iPhone X 的設計。Apple 的設計師並沒有讓你為這台昂貴的 iPhone 令人驚艷的新特性在適配上花費太多的功夫。

確保提供全屏體驗。讓滾動視圖布局的底部滾動到屏幕的最底部，甚至要超過顯示器彎曲的底部邊界。同時 Apple 還友好地提示不要隱藏頂部的切口和底部彎曲的邊緣，否則 iPhone X 就會看起來像一款常規的 iPhone 8。

重要信息中心化。確保你的重要界面信息處於屏幕的中心位置，適當的時候使用一些必要的插入以便你的 UI 界面不會被設備的感測器和邊角所剪裁。如果使用 Auto Layout，那麼你的界面內容將被放置在一個安全區域內，這樣你的設計便不會被邊角，感測器或者 Home 指示器所遮擋。

新的狀態欄。由於屏幕頂部的感測器，新的狀態欄被分為兩部分。如果你的 UI 在這塊區域中有特別的設計（以前是 20pt 高，現在 44pt 高），那麼你可能需要更新一下設計，因為 iPhone X 上這塊空間的高度比以前更高了。確保頂部狀態欄區域的設計高度可變。而當用戶在打電話或者在使用導航 App 時，和其他 iPhone 一樣，頂部的狀態欄高度就不會變。

顯示新的狀態欄。如果在你的設計中當前的狀態欄是隱藏的，Apple 則要求你重新考慮此設計。因為屏幕比以前更高了，你有更多的空間來展示內容，這樣便不需要隱藏狀態欄。用戶可以在那裡找到有用的信息，並且這部分空間在大部分時候也不會被其他 UI 元素所佔用。

全屏圖。如果在設計中你使用了全屏的圖片，你將需要更新一下。 因為它們可能會被剪裁併且部分重要的視覺元素也可能被隱藏。

不要在屏幕底部放置互動式控制項。Home 指示器周邊的控制項是單純為了向上滑動回到首頁的手勢而設計的。在指示器周邊或者顯示器底部圓角邊附近放置按鈕可能不是很好。用戶可能不小心使用了 Home 手勢，這時你的按鈕便不可使用了。然而，你仍然可以使用標籤欄和功能欄，但是它們不能和 Home 指示器相互衝突。

永遠不要隱藏 Home 指示器。iOS 中可以在 App 內隱藏 Home 指示器。當用戶手指離開屏幕數秒後，它將自動隱藏。然後當用戶再次碰觸屏幕時，它會重新出現。這個功能應該只被用於沉浸式體驗，比如觀看視頻或瀏覽圖片。Home 指示器會根據 App 的背景自動改變顏色。

更多的顏色。新的超級視網膜顯示屏用 P3 取代 sRGB，可以顯示更多的顏色。這意味著它會顯示更豐富和更飽和的顏色，特別是視頻和照片將從這更加廣泛的顏色中受益。

向上滑動時注意用戶手勢。由於實體 Home 按鈕已經消失了，你現在只能通過手勢和 iPhone 進行交互了。當你手勢向上滑時，可以回到首頁或者多任務管理界面。當從屏幕頂部向下滑時，會出現通知或者控制中心。在遊戲中，你會自定義很多手勢，可能有一些會覆蓋重寫 iOS 原生手勢。你可以通過實現」邊緣保護」來使用自己的手勢。這個特性會優先調用 App 中特定的手勢，之後再調用操作系統的手勢 — 只有一次。由於這個功能會使用戶很難訪問系統特性（被重寫的手勢），你需要謹慎使用。

Face ID。以前的 iPhone 有一個很好用的功能 Touch ID，這允許用戶使用指紋來解鎖設備或者執行一些密碼鎖定操作。這個指紋感測器被隱藏在 Home 按鈕中，但是在 iPhone X 中實體 Home 按鈕已經消失了。Apple 使用一個更加先進和安全的方式來解鎖設備。在輸入 Face ID 時，設備用了非常好的演算法來檢測你的面部並解鎖你的設備。Face ID 在 App 中有一些新的 UI，所以請確保給 iPhone X 的用戶實現這些界面交互。

自定義鍵盤。現在，當你設計一款自定義鍵盤時，不應該在鍵盤中再添加 Emoji 或聽寫按鈕。因為這兩個功能都將被自動添加在鍵盤下方 Home 指示器附近。

更大的導航欄。在 iOS 11 中原生導航條的設計得到了更新，它們現在更高了。 這款設計在較高的 iPhone X 上將會非常出色，並將與新的狀態欄完美結合。在你的設計中，考慮使用它。在界面滑動的時候也會有一些非常好的原生動畫。

2

關於 iPhone X 設計，必須注意的 13 點

iPhone X 的高為 145pt，所以設計尺寸為 375×812pt 而非 375x667pt；

iPhone X 使用@3x 圖片；

創建一個全屏體驗，不要隱藏設備的獨特功能；

UI 的重要內容處於中心位置，以確保它始終可見，並且不會被設備的感測器或邊角遮擋；

一個新的更高的一分為二的狀態欄，以前是高度是 22pt，現在是 44pt；

全屏圖片可能/應該更新以完全顯示；

不要在屏幕底部 Home 指示器附近添加按鈕；

不要隱藏 Home 指示器，除了真的有必要；

由於 P3 色譜，iPhone X 色彩更加豐富和飽和；

注意 Home 指示器和狀態欄附近的自定義手勢，不要混淆用戶預期的原生手勢；

用 Face ID 替換 Touch ID，更新 UI 以及涉及到 Touch ID 的文本；

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

在高顯示屏上更大的導航欄有一個好的外觀和動畫。

或者，你可以觀看一下 Apple 關於「為 iPhone X 設計」（https://developer.apple.com/videos/play/fall2017/801/）的視頻。

3

那麼，如何預覽 App 的 UI？

你可以使用 Xcode 9 的模擬器來預覽你的 App，如果 UI 需要更新，模擬器會立即展示出來告訴你。

4

在哪裡可以找到 iOS 11 和 iPhone X 的資源？

Apple 有很多 Sketch、Photoshop 以及 Adobe XD 的新資源。你可以在這裡找到：Apple Design Resources（https://developer.apple.com/design/resources/）。

注意：大多數的信息都來自於Apple UI Guidelines（https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/）。

原文出自：Design for iPhone X（https://blog.prototypr.io/designing-for-the-iphone-x-4239d5ac736c）

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！