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

果粉們翹首以待的iPhone X終於開始預售了！同樣滿懷期待的還有設計師和開發人員，他們將在iPhone X上看到他們的App了。蘋果官方表示：iPhone X是智能手機的未來，而這個未來的風向標可能將會給UI設計師和開發人員帶來一些小麻煩。

作為一名UI設計師，我總結了一些在設計iPhone X App時有效的技巧供大家參考：

1. 使用正確的iPhone X畫板尺寸

與之前的iPhone不同，iPhone X屏幕比前一代高145點（約為前一代的20％），並有圓角。如下圖所示：

2．避免在屏幕底部設置手勢交互

由於Home鍵現在已經被放置在底部的細條交互式控件所取代，除非非常必要，否則不要輕易設置手勢交互，它可能會遮擋住Home提示條。 建議您可以考慮其他滑動手勢和任何能與缺口適配的界面。

3. 顯示完美的狀態欄

與上一代iPhone相比iPhone X狀態欄的垂直高度增加了一倍，從22pt增加到44pt。因此，您最好將背景擴展到顯示屏的邊緣(包括狀態欄)，以及垂直可滾動的區域。建議將導航欄的顏色延伸到狀態欄的背景，否則看起來會很奇怪，並且App在試圖將它與傳感器外殼進行手動混合時可能會遇到一些奇怪的情況。

用戶界面的“全屏”體驗是非常重要的，讓用戶不再受屏幕邊緣的幹擾。以下是蘋果為設計師定義安全區域的方式。（如下圖示）

如果您的App應用平臺標準組件和自動布局，您的用戶界面也應適當地縮放以適應iPhone X屏幕。

PS:只能隱藏狀態欄以換取附加值。

4. 提供全屏體驗

與大多數寬高比不匹配一樣，適用於舊款iPhone屏幕的設計要麽被裁剪，要麽被添加白邊。

在iPhone X的內容被顯示在一個小於4.5英寸設備上的情況下，該設計甚至可以把多余的屏幕留白（圖中兩邊垂直的白邊）收起來。為了交付這樣的好圖像，為不同的長寬比創建獨立的屏幕適配也是值得的。

5. 參考正確的解鎖方法

關於解鎖，iPhone X並沒有一如既往地采用Touch ID，而是使用Face ID； 通過投射和分析超過3萬多個不可見的點，從而創建一張精確的面部深度圖。如果您的設計涉及了像Apple Pay或其他系統的解鎖功能，那麽一定要參考Face ID，而不是傳統的Touch ID。

6. 使用正確的分辨率導出正確的顏色

iPhone X具有很高的分辨率，因為相較以往幾代，它具有更長的新屏幕。它的新超級視網膜顯示屏具有2346 x 1125分辨率和458 PPI的像素密度。如此高的像素密度意味著切圖將需要以@3x而不是@ 2x的資源輸出。

最好使用Display P3 顏色空間（而不是sRGB）為iPhone X創建UI界面。 這種顏色意味著更豐富，更飽和的界面可以在Display P3顏色配置文件中以16位/通道PNG導出，最好通過Photoshop而不是Sketch實現。

蘋果提供這些資源嗎？

好消息是，是的，蘋果在Apple Design Resources和Apple UI指南中提供了這些資源。

原文作者：Stefano Malachi

地址：https://medium.muz.li/ui-design-tips-for-iphone-x-2652b2b248ce

學習工具，但不受限於某種工具。Mockplus做原型，更快更簡單，現在下載Mockplus，免費體驗暢快的原型設計之旅。

iPhone X的UI設計技巧