- 作者 : Nick Babich
為iPhone X進行UI設計的時候，和以往截然不同的屏幕和交互方式，會使得UI設計師面臨一些全新的挑戰。當然，全新的設計，在很多時候還會給設計師一些新的機遇。
在今天的文章當中，我將會分享一些為iPhone X做設計的技巧和建議，這些建議能夠讓 iPhone X 上的UI設計更棒。別忘了，接下來的9月將會迎來新的iPhone，設計師將會和擁有Home 鍵的iPhone 越來越遠，帶有劉海的全面屏，將是今後設計師設計時候的主戰場。
A、屏幕顯示
iPhone X 擁有一塊超高分辨率、邊角圓潤的 Super Retina 顯示屏，分辨率為 1125x2436px，雖然它為設計人員留下了更多的顯示空間，並且能夠為用戶提供更加身臨其境的用戶體驗，但是在設計UI的時候，設計師依然需要考慮下面的問題：
1、3x 圖片尺寸
iPhone X 上所採用的圖片是 3x 的比例，當你在使用圖片和其他的視覺化素材的時候，請確保包含了2x 和 3x 分辨率的素材。此外，對於高分辨率的字符和平面素材，有矢量的 SVG 素材是最好的，這樣就規避了分辨率上可能出現的問題。
2、新的顯示尺寸意味著更多的空間和內容
iPhone X 的屏幕顯示尺寸，寬度為 375pt，高度為 812pt，由於是3x 的顯示，換算為px 為 1125 x 2436 px，在縱向上，iPhone X 的顯示屏的寬度和以往的iPhone 6 、iPhone 7 和 iPhone 8 的4.7 英寸屏幕顯示的寬度是一致的，因此，在橫向上顯示的信息量應該和以往其他的機型是沒有差異的。差異主要出現在高度上，812pt 的高度比以往非全面屏要高出 145pt，這使得 iPhone X 多出了差不多 20% 的額外空間。
3、注意控制背景圖片的高寬比
和以往的 iPhone 的屏幕尺寸比例不同，iPhone X 的的高寬比已經不再是 16:9 的比例，而是接近於 19.5:9，在選取背景圖片的素材的時候，要注意不要讓圖片中的視覺主體和關鍵信息被屏幕切掉了，注意關鍵信息在這個屏幕比例下能夠得體地顯示（比如不要讓上下有過多的留白）。
4、不要在屏幕邊緣放置控件和元素
伴隨著全面屏的另外一個問題，就是用戶在交互的過程中，會誤觸到屏幕邊緣的元素，如果用戶有帶手機殼的習慣，元素也可能因為太過於靠近邊緣的保護殼，而無法被用戶有效、快速地觸發。總之，儘量讓元素控件出現在屏幕易於交互的主要區域。
5、使用安全區域來顯示內容
在安全區域內來構建佈局，可以確保內容的可交互性，也避免了系統組件和UI元素的重疊的狀況。在iPhone 8這樣有Home鍵的手機的界面中，較寬的邊框和Home鍵的存在，讓標準的矩形屏幕整個都是安全的交互區域。但是iPhone X不一樣，底部有虛擬的Home Bar，頂部屏幕上的“劉海”承載了攝像頭，整體是異型，如果設計的時候這個區域和底部放置控件的話，會被蓋住。兩者之間的區域是安全的。
而內容呈現的時候，有兩種情況是例外的，一種是較長的垂直滾動的內容，通過滑動瀏覽可以完全展示，另外一種是背景圖片，因為不涉及到交互，因此不會被影響。
6、不要操心原生UI組件
如果你所設計的APP 全部都是官方設計素材中的原生UI組件（比如導航欄、表格、標籤欄什麼的），那麼你不用擔心它們和你的界面不匹配，它們一定會恰到好處地運用到界面當中。
B、Home Bar 指示器
從 iPhone X 開始，iOS 系統的基礎交互隨著硬件的改變，而發生了巨大的改變，Home 鍵成為了歷史，而交互方式也開始更加依靠手勢交互的驅動。比如之前的單擊Home鍵回到主頁面的交互方式就被手勢操作給替代了，用戶只需要從屏幕底部向上滑動就能回到主頁。
滑動是新的點擊。
雖然觸發的方式主要是屏幕底部邊緣觸發，但是視覺上加上了Home Bar 指示器，會讓人時刻意識到這個交互的存在，而在進行UI和APP設計的時候，需要考慮到這個控件。
7、避免在Home Bar 指示器周圍放置交互元素
之前也提到過類似的問題，避免在指示器周圍放置交互組件，避免出現交互組件和Home Bar 之間的重疊，導致交互上的衝突。即使是靠近，也最好保持適當的距離，避免誤觸。
8、不要過於在意 Home Bar 指示器
Home Bar 是一個使用頻率比較高的常用組件，不要過度裝飾，也不要在設計上過於強調，不要隱藏它，儘量不要讓用戶特別在意它。
9、藉助自動隱藏的功能，創造全屏體驗
在展現視頻或者其他強調視覺性的內容之時，可以藉助自動隱藏Home Bar 指示器的功能，來創造更加沉浸式的體驗。
C、劉海區域
蘋果官方是將屏幕頂部放置攝像頭的位置稱為 Notch Area，不過大家通常會稱之為屏幕“劉海”，這個表述非常形象。有些人認為它很有吸引力，有的則覺得它很難看。但是作為設計師，我們可以合理地藉助這個區域來進行設計。
10 、不要掩蓋劉海區域
有些設計師會力圖藉助設計，讓這個區域看起來沒有那麼顯眼，讓iPhone X 看起來沒有劉海，比如在背景的頂部增加一個條狀的黑色背景，讓頂部一條看起來是全黑的。這種強迫症式的審美並不一定貼合每個人的喜好，儘量避免這種情況，因為另外一方面它會讓你的iPhone X上的體驗像是被降級到 iPhone 8上面，並且和其他的APP 體驗不一致。而你所設計的APP 和遊戲應當完整地填滿整個屏幕。
11、不要隱藏狀態欄
APP 中的狀態欄為用戶提供了許多基礎的信息，這些對於用戶而言是至關重要的。雖然狀態欄和以往版本的iOS系統相比更高了（之前是20pt高，現在是44pt），隱藏了之後確實能夠顯示更多的內容，但是和整個界面的尺寸相比，提升並不明顯。除非是在特定的需求之下（營造非常深入的沉浸式體驗），儘量不要隱藏狀態欄。
One more thing
援引自iFanr 的消息：今年新 iPhone 將不會被命名為“iPhone 9”，而是出現一款名字直接為“iPhone”的產品。
具體來說，新的三款 iPhone 中最大的一款將被命名為 iPhone XS Plus，5.8 英寸的機型就是 iPhone XS，它們都是原版 iPhone X 的 S 系列。而 6.1 英寸的 iPhone 將是一款更便宜的機型，將命名為 iPhone，作為本系列的入門級產品。
每年9月初的發佈會到現在也就30來天，新的iPhone 距離我們已經很近了。以iPhone X 為代表的新iPhone 將會將手勢為主的新交互徹底貫徹下去，開啟下一個交互的時代。這無論是對於設計師還是用戶，都是非常重要的轉變，做好準備吧。
閱讀更多 路漫UED 的文章
