為iPhone X進(jìn)行UI設(shè)計的時候，和以往截然不同的屏幕和交互方式，會使得UI設(shè)計師面臨一些全新的挑戰(zhàn)。當(dāng)然，全新的設(shè)計，在很多時候還會給設(shè)計師一些新的機遇。

在今天的文章當(dāng)中，我將會分享一些為iPhone X做設(shè)計的技巧和建議，這些建議能夠讓 iPhone X 上的UI設(shè)計更棒。別忘了，接下來的9月將會迎來新的iPhone，設(shè)計師將會和擁有Home 鍵的iPhone 越來越遠(yuǎn)，帶有劉海的全面屏，將是今后設(shè)計師設(shè)計時候的主戰(zhàn)場。 

A、屏幕顯示

iPhone X 擁有一塊超高分辨率、邊角圓潤的 Super Retina 顯示屏，分辨率為 1125x2436px，雖然它為設(shè)計人員留下了更多的顯示空間，并且能夠為用戶提供更加身臨其境的用戶體驗，但是在設(shè)計UI的時候，設(shè)計師依然需要考慮下面的問題： 

1、3x 圖片尺寸

iPhone X 上所采用的圖片是 3x 的比例，當(dāng)你在使用圖片和其他的視覺化素材的時候，請確保包含了2x 和 3x 分辨率的素材。此外，對于高分辨率的字符和平面素材，有矢量的 SVG 素材是***的，這樣就規(guī)避了分辨率上可能出現(xiàn)的問題。

2、新的顯示尺寸意味著更多的空間和內(nèi)容

iPhone X 的屏幕顯示尺寸，寬度為 375pt，高度為 812pt，由于是3x 的顯示，換算為px 為 1125 x 2436 px，在縱向上，iPhone X 的顯示屏的寬度和以往的iPhone 6 、iPhone 7 和 iPhone 8 的4.7 英寸屏幕顯示的寬度是一致的，因此，在橫向上顯示的信息量應(yīng)該和以往其他的機型是沒有差異的。差異主要出現(xiàn)在高度上，812pt 的高度比以往非全面屏要高出 145pt，這使得 iPhone X 多出了差不多 20% 的額外空間。 

3、注意控制背景圖片的高寬比

和以往的 iPhone 的屏幕尺寸比例不同，iPhone X 的的高寬比已經(jīng)不再是 16:9 的比例，而是接近于 19.5:9，在選取背景圖片的素材的時候，要注意不要讓圖片中的視覺主體和關(guān)鍵信息被屏幕切掉了，注意關(guān)鍵信息在這個屏幕比例下能夠得體地顯示(比如不要讓上下有過多的留白)。

4、不要在屏幕邊緣放置控件和元素

伴隨著全面屏的另外一個問題，就是用戶在交互的過程中，會誤觸到屏幕邊緣的元素，如果用戶有帶手機殼的習(xí)慣，元素也可能因為太過于靠近邊緣的保護(hù)殼，而無法被用戶有效、快速地觸發(fā)。總之，盡量讓元素控件出現(xiàn)在屏幕易于交互的主要區(qū)域。 

5、使用安全區(qū)域來顯示內(nèi)容

在安全區(qū)域內(nèi)來構(gòu)建布局，可以確保內(nèi)容的可交互性，也避免了系統(tǒng)組件和UI元素的重疊的狀況。在iPhone 8這樣有Home鍵的手機的界面中，較寬的邊框和Home鍵的存在，讓標(biāo)準(zhǔn)的矩形屏幕整個都是安全的交互區(qū)域。但是iPhone X不一樣，底部有虛擬的Home Bar，頂部屏幕上的“劉海”承載了攝像頭，整體是異型，如果設(shè)計的時候這個區(qū)域和底部放置控件的話，會被蓋住。兩者之間的區(qū)域是安全的。

而內(nèi)容呈現(xiàn)的時候，有兩種情況是例外的，一種是較長的垂直滾動的內(nèi)容，通過滑動瀏覽可以完全展示，另外一種是背景圖片，因為不涉及到交互，因此不會被影響。

6、不要操心原生UI組件

如果你所設(shè)計的APP 全部都是官方設(shè)計素材中的原生UI組件(比如導(dǎo)航欄、表格、標(biāo)簽欄什么的)，那么你不用擔(dān)心它們和你的界面不匹配，它們一定會恰到好處地運用到界面當(dāng)中。

B、Home Bar 指示器

從 iPhone X 開始，iOS 系統(tǒng)的基礎(chǔ)交互隨著硬件的改變，而發(fā)生了巨大的改變，Home 鍵成為了歷史，而交互方式也開始更加依靠手勢交互的驅(qū)動。比如之前的單擊Home鍵回到主頁面的交互方式就被手勢操作給替代了，用戶只需要從屏幕底部向上滑動就能回到主頁。

滑動是新的點擊。

雖然觸發(fā)的方式主要是屏幕底部邊緣觸發(fā)，但是視覺上加上了Home Bar 指示器，會讓人時刻意識到這個交互的存在，而在進(jìn)行UI和APP設(shè)計的時候，需要考慮到這個控件。 

7、避免在Home Bar 指示器周圍放置交互元素

之前也提到過類似的問題，避免在指示器周圍放置交互組件，避免出現(xiàn)交互組件和Home Bar 之間的重疊，導(dǎo)致交互上的沖突。即使是靠近，也***保持適當(dāng)?shù)木嚯x，避免誤觸。

8、不要過于在意 Home Bar 指示器

Home Bar 是一個使用頻率比較高的常用組件，不要過度裝飾，也不要在設(shè)計上過于強調(diào)，不要隱藏它，盡量不要讓用戶特別在意它。 

9、借助自動隱藏的功能，創(chuàng)造全屏體驗

在展現(xiàn)視頻或者其他強調(diào)視覺性的內(nèi)容之時，可以借助自動隱藏Home Bar 指示器的功能，來創(chuàng)造更加沉浸式的體驗。

C、劉海區(qū)域

蘋果官方是將屏幕頂部放置攝像頭的位置稱為 Notch Area，不過大家通常會稱之為屏幕“劉海”，這個表述非常形象。有些人認(rèn)為它很有吸引力，有的則覺得它很難看。但是作為設(shè)計師，我們可以合理地借助這個區(qū)域來進(jìn)行設(shè)計。 

10 、不要掩蓋劉海區(qū)域

有些設(shè)計師會力圖借助設(shè)計，讓這個區(qū)域看起來沒有那么顯眼，讓iPhone X 看起來沒有劉海，比如在背景的頂部增加一個條狀的黑色背景，讓頂部一條看起來是全黑的。這種強迫癥式的審美并不一定貼合每個人的喜好，盡量避免這種情況，因為另外一方面它會讓你的iPhone X上的體驗像是被降級到 iPhone 8上面，并且和其他的APP 體驗不一致。而你所設(shè)計的APP 和游戲應(yīng)當(dāng)完整地填滿整個屏幕。 

11、不要隱藏狀態(tài)欄

APP 中的狀態(tài)欄為用戶提供了許多基礎(chǔ)的信息，這些對于用戶而言是至關(guān)重要的。雖然狀態(tài)欄和以往版本的iOS系統(tǒng)相比更高了(之前是20pt高，現(xiàn)在是44pt)，隱藏了之后確實能夠顯示更多的內(nèi)容，但是和整個界面的尺寸相比，提升并不明顯。除非是在特定的需求之下(營造非常深入的沉浸式體驗)，盡量不要隱藏狀態(tài)欄。

One more thing 

援引自iFanr 的消息：今年新 iPhone 將不會被命名為“iPhone 9”，而是出現(xiàn)一款名字直接為“iPhone”的產(chǎn)品。

具體來說，新的三款 iPhone 中***的一款將被命名為 iPhone XS Plus，5.8 英寸的機型就是 iPhone XS，它們都是原版 iPhone X 的 S 系列。而 6.1 英寸的 iPhone 將是一款更便宜的機型，將命名為 iPhone，作為本系列的入門級產(chǎn)品。

每年9月初的發(fā)布會到現(xiàn)在也就30來天，新的iPhone 距離我們已經(jīng)很近了。以iPhone X 為代表的新iPhone 將會將手勢為主的新交互徹底貫徹下去，開啟下一個交互的時代。這無論是對于設(shè)計師還是用戶，都是非常重要的轉(zhuǎn)變，做好準(zhǔn)備吧。