iPhone X有一塊大的、高分辨率、圓角的、無邊框的屏幕，為用戶提供了前所未有的沉浸式的、內(nèi)容豐富的體驗(yàn)。
屏幕尺寸
iPhone X的豎屏模式，寬度與iPhone6、iPhone7、iPhone8的4.7寸顯示屏寬度相同；iPhone X的高度比4.7寸的屏幕要高出145pt，增加大約20%的垂直顯示空間。
豎屏尺寸：1125px × 2436px (375pt × 812pt @3x)
橫屏尺寸：2436px × 1125px (812pt × 375pt @3x)
應(yīng)用程序可以顯示高分辨率的圖像。iPhone X可以顯示高分辨率的@3x圖片。對于其他平面和矢量的圖形，最好提供獨(dú)立分辨率的PDF格式的圖片；對于其他柵格化的圖片，需要提供@3x和@2x的圖片。
布局
在為iPhone X做設(shè)計時，您必須確保布局覆蓋到整個屏幕，并且不會被設(shè)備屏幕上的圓角、傳感器和指示燈所遮蔽。
應(yīng)用程序中大多數(shù)使用標(biāo)準(zhǔn)化的、系統(tǒng)提供的UI元素（如導(dǎo)航欄、表格等）會自動適配iPhone X。背景延伸到顯示器邊緣，并適當(dāng)?shù)牟迦險I元素。
對于自適應(yīng)布局的應(yīng)用，支持iPhone X的適配應(yīng)該也比較容易，特別是遵循安全區(qū)域和邊距布局指南的自適應(yīng)布局應(yīng)用。
在iPhone X上預(yù)覽應(yīng)用程序
可以使用Simulator（Xcode自帶）來預(yù)覽應(yīng)用程序并檢查布局問題。不過，如果是豐富色彩的圖像，最好在實(shí)際的iPhone X設(shè)備上預(yù)覽。
提供全屏體驗(yàn)
應(yīng)該確保背景延伸到了顯示器的邊緣，并且是垂直可滾動的布局，如表格和集合，會一直延續(xù)到底部。
防止重要的內(nèi)容被剪切
一般來說，內(nèi)容應(yīng)該是居中對稱的，在任何方向看起來都應(yīng)該很棒，不會被邊角或者設(shè)備傳感器或者屏幕訪問指示器遮住。為了獲得最佳的效果，請使用標(biāo)準(zhǔn)的、系統(tǒng)提供界面元素和自動布局來搭建界面。所有的應(yīng)用都應(yīng)該遵循UIKit中所定義的安全區(qū)域和布局邊距，這些區(qū)域可以根據(jù)設(shè)備和上下文情境進(jìn)行適當(dāng)?shù)奶畛洹０踩珔^(qū)域還可以防止內(nèi)容覆蓋住狀態(tài)欄、導(dǎo)航欄、工具欄和標(biāo)簽欄。
注意狀態(tài)欄的高度，狀態(tài)欄在iPhone X上比其他iPhone要高
如果應(yīng)用中有內(nèi)容置于固定位置的狀態(tài)欄下方，必須要更新應(yīng)用，使得內(nèi)容可以在設(shè)備上動態(tài)位置顯示。注意，當(dāng)背景任務(wù)（如錄音和定位）處于活動狀態(tài)時，iPhone X的狀態(tài)欄不會改變高度。
如果應(yīng)用的狀態(tài)欄是隱藏的，請重新考慮在iPhone X上的顯示
iPhone X上的顯示高度比4.7寸的iPhone提供了更多的垂直內(nèi)容空間，狀態(tài)欄不會占據(jù)太多有用空間，而且還可以給用戶提供有用的信息。
在重復(fù)使用現(xiàn)有圖片時，請注意長寬比差異
iPhone
x具有不同于4.7寸iPhone的長寬比，因此，4.7寸iPhone的全屏圖像在iPhone
X上顯示時會出現(xiàn)剪裁或letterboxed（橫向有留白）。同樣，iPhone
X上的全屏圖像在4.7寸的iPhone上顯示也會被剪裁或pillarboxed（縱向有留白）。請確保重要的視覺內(nèi)容在兩種尺寸的設(shè)備中顯示。
避免將交互控件放在屏幕底部和角落
人們在屏幕底部使用滑動手勢顯示主屏幕和應(yīng)用程序切換，這些手勢可能會取消之前在此區(qū)域中的自定義手勢。屏幕的兩個角落可能是人們難以舒適到達(dá)的區(qū)域。
對關(guān)鍵顯示功能不要掩蓋或者發(fā)起特別注意
請勿嘗試用黑色條欄在屏幕頂部和底部隱藏設(shè)備的圓角、傳感器、或者底部訪問條。不要使用像括號、邊框、形狀或指引性文字去引導(dǎo)用戶特別注意這些區(qū)域。
允許自動隱藏指示燈，以便輕松訪問主屏幕
當(dāng)啟用自動隱藏指示燈功能時，如果用戶沒有觸碰到屏幕幾秒鐘，指示燈將熄滅。當(dāng)用戶再次觸摸到屏幕時，指示燈重新出現(xiàn)。這種情況只能用于被動觀看的體驗(yàn)中，如播放視頻和照片幻燈片。
顏色
iPhone X的顯示器支持P3色彩空間，可以顯示出比sRGB更豐富，更飽和的顏色。
使用廣泛的顏色來增強(qiáng)視覺體驗(yàn)
使用色域廣的照片和視頻會顯示的更加逼真，使用色域?qū)挼囊曈X數(shù)據(jù)和顯示器會給人更加強(qiáng)大的視覺沖擊力。
手勢
iPhone X的顯示屏幕使用屏幕邊緣手勢來訪問主屏幕、應(yīng)用程序切換、通知中心和控制中心。
避免干擾系統(tǒng)范圍的屏幕邊緣手勢
人們依靠這些手勢在每個應(yīng)用程序中工作。在極少數(shù)的情況下，像游戲這樣的沉浸式的應(yīng)用程序需要優(yōu)先于系統(tǒng)操作手勢來自定義屏幕邊緣手勢，第一次滑動調(diào)用特定于應(yīng)用的手勢，第二次滑動則會調(diào)用系統(tǒng)手勢。這種行為（成為邊緣保護(hù)）應(yīng)該謹(jǐn)慎實(shí)施，因?yàn)闀褂脩綦y以進(jìn)行系統(tǒng)級的操作。
附加設(shè)計注意事項(xiàng)
準(zhǔn)確參考認(rèn)證方法：iPhone X支持Face ID進(jìn)行身份驗(yàn)證。如果應(yīng)用程序與Apple Pay或其他系統(tǒng)身份認(rèn)證功能集成，請勿在iPhone X上引用Touch ID。同樣，請確保應(yīng)用程序在支持Touch ID的設(shè)備上沒有引用Face ID。
不要重復(fù)提供系統(tǒng)的鍵盤功能：在iPhoneX上，即使使用自定義鍵盤。Emoji／Globe按鈕和聽寫按鈕也自動在鍵盤下方顯示。應(yīng)用程序不能影響這些按鈕，避免在鍵盤中重復(fù)出現(xiàn)這些按鈕造成混亂。
「新鮮出爐！iOS 11 有哪些值得關(guān)注的亮點(diǎn)？」
IOS 11，有哪些值得關(guān)注的UI 設(shè)計細(xì)節(jié)？
花了五個小時！完成新版APP STORE的交互探索
3個設(shè)計方向總結(jié)！IOS 11的設(shè)計理念
轉(zhuǎn)載自：科技大爆炸boom
