iPhone X的UI設計技巧

如下內容由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，免費體驗暢快的原型設計之旅。