iPhone X有一塊大的、高分辨率、圓角的、無邊框的屏幕,為用戶提供了前所未有的沉浸式的、內容豐富的體驗。
屏幕尺寸
iPhone X的豎屏模式,寬度與iPhone6、iPhone7、iPhone8的4.7寸顯示屏寬度相同;iPhone X的高度比4.7寸的屏幕要高出145pt,增加大約20%的垂直顯示空間。
豎屏尺寸:1125px × 2436px (375pt × 812pt @3x)
橫屏尺寸:2436px × 1125px (812pt × 375pt @3x)
應用程序可以顯示高分辨率的圖像。iPhone X可以顯示高分辨率的@3x圖片。對于其他平面和矢量的圖形,最好提供獨立分辨率的PDF格式的圖片;對于其他柵格化的圖片,需要提供@3x和@2x的圖片。
布局
在為iPhone X做設計時,您必須確保布局覆蓋到整個屏幕,并且不會被設備屏幕上的圓角、傳感器和指示燈所遮蔽。
應用程序中大多數使用標準化的、系統提供的UI元素(如導航欄、表格等)會自動適配iPhone X。背景延伸到顯示器邊緣,并適當的插入UI元素。
對于自適應布局的應用,支持iPhone X的適配應該也比較容易,特別是遵循安全區域和邊距布局指南的自適應布局應用。
在iPhone X上預覽應用程序
可以使用Simulator(Xcode自帶)來預覽應用程序并檢查布局問題。不過,如果是豐富色彩的圖像,最好在實際的iPhone X設備上預覽。
提供全屏體驗
應該確保背景延伸到了顯示器的邊緣,并且是垂直可滾動的布局,如表格和集合,會一直延續到底部。
防止重要的內容被剪切
一般來說,內容應該是居中對稱的,在任何方向看起來都應該很棒,不會被邊角或者設備傳感器或者屏幕訪問指示器遮住。為了獲得最佳的效果,請使用標準的、系統提供界面元素和自動布局來搭建界面。所有的應用都應該遵循UIKit中所定義的安全區域和布局邊距,這些區域可以根據設備和上下文情境進行適當的填充。安全區域還可以防止內容覆蓋住狀態欄、導航欄、工具欄和標簽欄。
注意狀態欄的高度,狀態欄在iPhone X上比其他iPhone要高
如果應用中有內容置于固定位置的狀態欄下方,必須要更新應用,使得內容可以在設備上動態位置顯示。注意,當背景任務(如錄音和定位)處于活動狀態時,iPhone X的狀態欄不會改變高度。
如果應用的狀態欄是隱藏的,請重新考慮在iPhone X上的顯示
iPhone X上的顯示高度比4.7寸的iPhone提供了更多的垂直內容空間,狀態欄不會占據太多有用空間,而且還可以給用戶提供有用的信息。
在重復使用現有圖片時,請注意長寬比差異
iPhone x具有不同于4.7寸iPhone的長寬比,因此,4.7寸iPhone的全屏圖像在iPhone X上顯示時會出現剪裁或letterboxed(橫向有留白)。同樣,iPhone X上的全屏圖像在4.7寸的iPhone上顯示也會被剪裁或pillarboxed(縱向有留白)。請確保重要的視覺內容在兩種尺寸的設備中顯示。
避免將交互控件放在屏幕底部和角落
人們在屏幕底部使用滑動手勢顯示主屏幕和應用程序切換,這些手勢可能會取消之前在此區域中的自定義手勢。屏幕的兩個角落可能是人們難以舒適到達的區域。
對關鍵顯示功能不要掩蓋或者發起特別注意
請勿嘗試用黑色條欄在屏幕頂部和底部隱藏設備的圓角、傳感器、或者底部訪問條。不要使用像括號、邊框、形狀或指引性文字去引導用戶特別注意這些區域。
允許自動隱藏指示燈,以便輕松訪問主屏幕
當啟用自動隱藏指示燈功能時,如果用戶沒有觸碰到屏幕幾秒鐘,指示燈將熄滅。當用戶再次觸摸到屏幕時,指示燈重新出現。這種情況只能用于被動觀看的體驗中,如播放視頻和照片幻燈片。
顏色
iPhone X的顯示器支持P3色彩空間,可以顯示出比sRGB更豐富,更飽和的顏色。
使用廣泛的顏色來增強視覺體驗
使用色域廣的照片和視頻會顯示的更加逼真,使用色域寬的視覺數據和顯示器會給人更加強大的視覺沖擊力。
手勢
iPhone X的顯示屏幕使用屏幕邊緣手勢來訪問主屏幕、應用程序切換、通知中心和控制中心。
避免干擾系統范圍的屏幕邊緣手勢
人們依靠這些手勢在每個應用程序中工作。在極少數的情況下,像游戲這樣的沉浸式的應用程序需要優先于系統操作手勢來自定義屏幕邊緣手勢,第一次滑動調用特定于應用的手勢,第二次滑動則會調用系統手勢。這種行為(成為邊緣保護)應該謹慎實施,因為會使用戶難以進行系統級的操作。